/* =============================================================================
   ROLOX MOTORSPORT - Mode Auto (v0.9, fix plein-ecran v0.13)
   Ecran plein-ecran : 1 exo a la fois, validation serie par serie
   ============================================================================= */

.auto-screen {
  /* v0.13.1 : on force le viewport visible iOS Safari.
     - dvh = dynamic viewport (s'adapte aux barres Safari qui apparaissent/disparaissent)
     - vh = fallback pour les vieux navigateurs
     v0.14.1 : on s'appuie sur safe-area-inset-bottom + 28px d'air pour que
     les boutons restent au-dessus du home indicator iPhone et de la barre
     d'actions Safari. */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, #fff 0%, #fff5f0 100%);
  z-index: 2000;
  display: none;
  flex-direction: column;
  padding:
    calc(12px + env(safe-area-inset-top))
    16px
    calc(28px + env(safe-area-inset-bottom))
    16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Pour que le contenu soit bien centre verticalement quand court */
  box-sizing: border-box;
}
.auto-screen.show { display: flex; }

/* v0.13.1 : sur ecran large, on centre le contenu et on plafonne la largeur
   pour ne pas que les boutons et la carte s'etalent sur toute la page.
   On applique aux enfants directs car il n'y a pas de wrapper interne. */
.auto-screen > * {
  width: 100%;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  flex-shrink: 0;
}

/* v0.21 FIX : le bouton bascule Manuel/Auto est en position:fixed (top/right).
   La regle generique ".auto-screen > *" ci-dessus lui collait width:100% +
   max-width:520px + marges auto, ce qui l'etirait sur toute la largeur et le
   decalait sous le titre (bouton "deforme" et mal place en mode auto).
   On lui rend une taille auto et on supprime les marges parasites. */
.auto-screen > .mode-switch--fixed {
  width: auto;
  max-width: none;
  margin: 0;
}

/* v0.13.1 : quand le mode auto est ouvert, on bloque le scroll du body
   ET on masque TOUS les elements en dessous pour eviter qu'ils
   transparaissent. La nav s'appelle .nav (pas .bottom-nav), c'etait le bug
   reporte par l'utilisateur sur la capture v0.13. */
body.auto-mode-open {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
}
body.auto-mode-open .main,
body.auto-mode-open .screen {
  visibility: hidden !important;
}
/* v0.18 : on GARDE la barre d'onglets visible et cliquable en mode auto,
   au-dessus de l'auto-screen, pour pouvoir naviguer entre les onglets. */
body.auto-mode-open .nav,
body.auto-mode-open .bottom-nav {
  visibility: visible !important;
  z-index: 2100;
}
/* On laisse evidemment l'auto-screen visible */
body.auto-mode-open .auto-screen {
  visibility: visible !important;
}

/* --- Header --- */
.auto-screen__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  /* v0.18.1 : reserve l'espace du bouton bascule fixe en haut a droite */
  padding-right: 96px;
}
.auto-screen__back,
.auto-screen__skip-exo {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eee;
  color: #555;
  display: grid; place-items: center;
  cursor: pointer; font-size: 16px;
  transition: all .15s ease;
  flex-shrink: 0;
}
.auto-screen__back:hover,
.auto-screen__skip-exo:hover {
  background: #ff5722; color: #fff; border-color: transparent;
}
.auto-screen__title-wrap { flex: 1; text-align: center; min-width: 0; }
.auto-screen__title {
  font-weight: 800; font-size: 18px; color: #222;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.auto-screen__sub {
  font-size: 12px; color: #888; margin-top: 2px;
  text-transform: uppercase; letter-spacing: .5px;
}

/* --- Barre de progression --- */
.auto-screen__progress-bar {
  height: 4px; background: #eee; border-radius: 999px;
  overflow: hidden; margin-bottom: 24px;
}
.auto-screen__progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff5722, #ffb800);
  transition: width .3s ease;
}

/* --- Body : carte centrale --- */
.auto-screen__body {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 16px 0;
}
.auto-card {
  width: 100%; max-width: 480px;
  background: #fff;
  border-radius: 24px;
  padding: 32px 24px;
  box-shadow: 0 8px 32px rgba(255, 87, 34, 0.12);
  text-align: center;
}
/* v0.16 : image de l'exercice (remplace l'icone quand un fichier existe
   dans /img/exercises/<slug>.jpg - cf. UI_AUTO._renderExoImage) */
.auto-card__img {
  width: 160px;
  height: 120px;
  object-fit: cover;
  border-radius: 18px;
  margin: 0 auto 20px;
  display: block;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  background: #fff;
}

.auto-card__icon {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff5722, #e63946);
  display: grid; place-items: center;
  color: #fff; font-size: 28px;
  box-shadow: 0 8px 20px rgba(255, 87, 34, 0.3);
}
.auto-card__exo-name {
  margin: 0 0 6px;
  font-size: 24px; font-weight: 800; color: #222;
  line-height: 1.2;
}
.auto-card__muscles {
  font-size: 13px; color: #888;
  text-transform: uppercase; letter-spacing: .5px;
  margin-bottom: 24px;
}
.auto-card__set-counter {
  font-size: 13px; font-weight: 700;
  color: #ff5722;
  text-transform: uppercase; letter-spacing: 1px;
}

/* v0.25 (F2) : rangee "− Série n/N +" pour rendre le nombre de series
   modifiable directement depuis le mode auto. */
.auto-card__set-counter-row {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}
.auto-card__set-counter-row .auto-card__set-counter { margin-bottom: 0; }

/* v0.25 (F2) : boutons +/- tactiles (cibles >= 40px) autour des inputs.
   v0.26 (FIX) : `min-width: 0` obligatoire. Sans lui, l'<input type=number>
   impose sa taille minimale intrinseque (~20 caracteres) comme plancher de
   flex-shrink : le stepper ne peut pas retrecir, deborde de .auto-target, et
   la valeur sort de la carte (nombre de reps invisible). */
.auto-target__stepper {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.auto-step-btn {
  flex: 0 0 auto;
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1.5px solid #ffd6c4;
  background: #fff;
  color: #ff5722;
  font-size: 22px; font-weight: 800; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .12s ease, transform .05s ease;
  -webkit-user-select: none; user-select: none;
}
.auto-step-btn:hover  { background: #fff0e9; }
.auto-step-btn:active { transform: scale(0.94); }
.auto-step-btn--set {
  width: 40px; height: 40px;
  border-radius: 50%;
}

/* --- Cible reps × poids ---
   v0.26 (FIX) : les deux cartes partagent maintenant la largeur disponible a
   parts egales (`flex: 1 1 0`) et peuvent retrecir (`min-width: 0`). Avant,
   `min-width: 110px` + un input non-retrecissable rendaient la rangee plus
   large que .auto-card sur les ecrans etroits : le contenu debordait et la
   valeur (reps, ou poids selon la largeur du telephone) devenait invisible. */
.auto-card__target {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  width: 100%;
  min-width: 0;
}
.auto-target {
  display: flex; flex-direction: column;
  align-items: center;
  background: #fff5f0;
  border: 2px solid transparent;
  border-radius: 16px;
  padding: 14px 12px;
  transition: border-color .15s ease;
  flex: 1 1 0;
  min-width: 0;
  max-width: 210px;
}
.auto-target:focus-within { border-color: #ff5722; background: #fff; }
.auto-target__label {
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px;
  color: #888;
  margin-bottom: 4px;
  white-space: nowrap;
}
.auto-target__value {
  /* flex-item retrecissable : c'est ce qui garantit que le nombre reste
     DANS la carte, sur tous les telephones. */
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  border: none; outline: none;
  background: transparent;
  font-size: clamp(22px, 6.5vw, 32px);
  font-weight: 800;
  color: #222;
  font-family: inherit;
  padding: 0;
  /* hide arrows */
  -moz-appearance: textfield;
}
.auto-target__value::-webkit-outer-spin-button,
.auto-target__value::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.auto-target__sep {
  flex: 0 0 auto;
  font-size: 28px; font-weight: 800;
  color: #ccc;
  padding-bottom: 12px;
}

/* Telephones etroits (iPhone SE, Android compacts) : on reduit les cibles
   tactiles a 36px plutot que de laisser le contenu deborder. */
@media (max-width: 400px) {
  .auto-card { padding: 28px 16px; }
  .auto-card__target { gap: 6px; }
  .auto-target { padding: 12px 8px; }
  .auto-step-btn { width: 36px; height: 36px; font-size: 20px; }
  .auto-target__stepper { gap: 4px; }
  .auto-card__set-counter-row { gap: 8px; }
}

/* --- Ressenti optionnel --- */
.auto-card__feel {
  margin-top: 4px;
}
.auto-feel-toggle {
  background: none; border: 1px dashed #ddd;
  color: #888;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  transition: all .15s ease;
}
.auto-feel-toggle:hover { border-color: #ff5722; color: #ff5722; }
.auto-feel-toggle.active {
  border-style: solid;
  border-color: #ff5722;
  background: #fff5f0;
  color: #ff5722;
}
.auto-feel-row {
  display: flex; justify-content: center; gap: 8px;
  margin-top: 12px;
}
.feel-emoji {
  width: 48px; height: 48px;
  border-radius: 12px;
  background: #f5f5f5;
  border: 2px solid transparent;
  font-size: 24px;
  cursor: pointer;
  transition: all .12s ease;
  display: grid; place-items: center;
}
.feel-emoji:hover {
  transform: scale(1.1);
  background: #fff5f0;
}
.feel-emoji--active {
  border-color: #ff5722;
  background: #fff5f0;
  transform: scale(1.1);
}

/* --- Actions principales --- */
.auto-screen__actions {
  display: flex; gap: 12px;
  padding-top: 16px;
}
.auto-action {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px;
  border-radius: 18px;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
  color: #fff;
}
.auto-action:active { transform: scale(0.97); }
.auto-action i { font-size: 28px; }
.auto-action span { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.auto-action--fail {
  background: linear-gradient(135deg, #6b7280, #4b5563);
  box-shadow: 0 4px 14px rgba(75, 85, 99, .35);
}
.auto-action--fail:hover {
  box-shadow: 0 6px 18px rgba(75, 85, 99, .45);
}
.auto-action--ok {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  box-shadow: 0 4px 14px rgba(46, 204, 113, .4);
}
.auto-action--ok:hover {
  box-shadow: 0 6px 18px rgba(46, 204, 113, .55);
}

/* --- v0.18 : panneau de fin d'exo (note optionnelle + suivant) --- */
.auto-screen__done {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 16px;
  margin-top: auto;
  flex-shrink: 0;
}
.auto-done-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px;
  border-radius: 16px;
  border: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.auto-done-btn:active { transform: scale(0.98); }
.auto-done-btn--note {
  background: #fff;
  color: #ff5722;
  border: 1.5px solid #ffd9c7;
}
.auto-done-btn--note:hover { background: #fff5f0; }
.auto-done-btn--addexo {
  background: #fff;
  color: #ff5722;
  border: 1.5px dashed #ffb38f;
}
.auto-done-btn--addexo:hover { background: #fff5f0; }
.auto-done-btn--next {
  background: linear-gradient(135deg, #ff7a3c, #ff5722);
  color: #fff;
  box-shadow: 0 4px 14px rgba(255, 87, 34, .4);
}
.auto-done-btn--next:hover { box-shadow: 0 6px 18px rgba(255, 87, 34, .55); }

/* --- v0.24 : actions de fin d'exo alignees sur les boutons ✗/✓ ---
   Les deux boutons principaux ("Ajouter un exercice" + "Suivant/Terminer")
   reprennent EXACTEMENT la forme (.auto-action : colonne, grosse icone,
   meme padding/rayon) et l'emplacement (rangee 2 colonnes, gauche/droite)
   des boutons "Non validé" / "Validé". */
.auto-done__actions {
  display: flex;
  gap: 12px;
}
/* Gauche = place du "Non validé" : variante secondaire (contour). */
.auto-action--addexo {
  background: #fff;
  color: #ff5722;
  border: 1.5px dashed #ffb38f;
  box-shadow: 0 4px 14px rgba(255, 87, 34, .12);
}
.auto-action--addexo:hover { background: #fff5f0; }
/* Droite = place du "Validé" : variante primaire (plein orange). */
.auto-action--next {
  background: linear-gradient(135deg, #ff7a3c, #ff5722);
  box-shadow: 0 4px 14px rgba(255, 87, 34, .4);
}
.auto-action--next:hover { box-shadow: 0 6px 18px rgba(255, 87, 34, .55); }

/* --- Timer repos --- */
/* v0.27 FIX : la barre de repos etait le dernier enfant d'une colonne
   scrollable (.auto-screen). Des que le contenu depassait la hauteur de
   l'ecran - ce qui est le cas sur la plupart des telephones - elle partait
   sous le pli et l'utilisateur ne voyait plus son chrono.
   Elle est desormais ancree en bas du viewport, au-dessus de la nav, donc
   visible quelle que soit la taille de l'ecran et sans avoir a scroller. */
.auto-screen__rest {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-height-mobile, 64px) + env(safe-area-inset-bottom) + 10px);
  z-index: 2200;
  width: calc(100% - 32px);
  max-width: 520px;
  box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 12px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eee;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
}
/* La regle generique ".auto-screen > *" (width:100% + marges auto) casserait
   le centrage par transform : on la neutralise pour cet element. */
.auto-screen > .auto-screen__rest { margin-left: 0; margin-right: 0; }

/* Quand le repos tourne, on reserve la place en bas du contenu scrollable
   pour que la barre ne recouvre jamais les boutons Valide / Non valide. */
body.auto-rest-on .auto-screen {
  padding-bottom: calc(96px + var(--nav-height-mobile, 64px) + env(safe-area-inset-bottom));
}

/* v0.27 : bouton "Annuler la seance" (en-tete auto). */
.auto-screen__cancel {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border: none; border-radius: 12px;
  background: #fff;
  color: #b0b0b8;
  font-size: 17px;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transition: background .15s ease, color .15s ease;
}
.auto-screen__cancel:hover { background: #fdecee; color: #e63946; }

/* v0.27 : retirer l'exercice courant de la seance (different de "passer"). */
.auto-card__remove {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 auto 14px;
  padding: 5px 12px;
  border: none; border-radius: 999px;
  background: transparent;
  color: #c2c2ca;
  font-family: inherit;
  font-size: 12px; font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.auto-card__remove:hover { background: #fdecee; color: #e63946; }
.auto-screen__rest i { color: #ff5722; }
.auto-screen__rest span { font-weight: 800; color: #222; font-size: 15px; min-width: 40px; }
.auto-screen__rest button {
  background: #fff5f0; color: #ff5722;
  border: none; border-radius: 8px;
  padding: 6px 12px; font-weight: 600; font-size: 12px;
  cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 4px;
}
.auto-screen__rest button:hover { background: #ff5722; color: #fff; }

/* --- Responsive : sur PC l'app a une sidebar gauche, le mode auto la masque --- */
@media (min-width: 900px) {
  .auto-screen { left: 0; right: 0; }
}

/* =============================================================================
   v0.14 FIXES - Bugs reportes (z-index modales, fond opaque, layout boutons)
   ============================================================================= */

/* Les modales (.modal) ont z-index: 1500, .auto-screen est a 2000 :
   sans ce override, autoNoteModal et autoFailModal s'ouvraient DERRIERE
   l'ecran auto, l'utilisateur ne voyait rien et croyait que les boutons
   "Valide" / "Non valide" etaient bloques. */
#autoNoteModal,
#autoFailModal,
#catalogPickerModal {
  z-index: 2500;
}

/* Fond opaque sur le body en mode auto : evite que le contenu de la page
   transparaisse dans la zone "delta" entre 100dvh et la taille totale
   du viewport quand Safari joue avec ses barres URL/actions. */
body.auto-mode-open {
  background: #fff5f0 !important;
}
.auto-screen {
  background-color: #fff5f0; /* opaque en plus du degrade */
}

/* Boutons d'action en bas du flex column : margin-top: auto les pousse
   en bas, flex-shrink: 0 garantit qu'ils ne se font jamais ecraser.
   Le padding-bottom de .auto-screen (defini en haut du fichier avec
   safe-area + 28px) donne l'air necessaire au-dessus du home indicator
   iPhone et de la barre d'actions Safari. */
.auto-screen__actions {
  margin-top: auto;
  flex-shrink: 0;
}

/* =============================================================================
   v0.18 - Mode auto cohabite avec la barre d'onglets (navigation possible)
   ============================================================================= */
/* Laisse la place a la tab bar mobile sous le contenu de l'auto-screen */
.auto-screen {
  padding-bottom: calc(var(--nav-height-mobile) + 28px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) {
  /* Sur PC, la sidebar gauche reste visible : on decale l'auto-screen a droite. */
  body.auto-mode-open .auto-screen { left: var(--nav-width-desktop); }
}

/* =============================================================================
   v0.27 - Etat "seance vide" du mode auto (Séance personnalisée)
   ============================================================================= */
.auto-card--empty .auto-card__icon {
  background: #fff5f0;
  color: #ff5722;
}
.auto-card__empty-add {
  display: flex;
  width: 100%;
  margin-top: 4px;
}

/* =============================================================================
   v0.28 - MODE AUTO : lisible a un metre, avec les mains moites
   -----------------------------------------------------------------------------
   C'est l'ecran qu'on regarde entre deux series, pas un ecran de consultation.
   On maximise donc la taille des chiffres et le contraste, et on efface tout
   le reste (labels, contours) pour ne laisser que l'information utile.
   ============================================================================= */
.auto-card {
  border-radius: var(--radius-xl, 28px);
  box-shadow: 0 10px 40px rgba(255, 87, 34, .10);
}
.auto-card__exo-name {
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #16161c;
}
.auto-card__muscles {
  font-size: 11px;
  letter-spacing: .08em;
  color: #9a9aa4;
}
/* Le chiffre est l'element principal de l'ecran : il prend la place. */
.auto-target__value {
  font-size: clamp(30px, 11vw, 46px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #16161c;
}
.auto-target { background: #fdf6f3; }
.auto-target:focus-within { background: #fff; border-color: #ff5722; }
.auto-target__label {
  font-size: 10px;
  letter-spacing: .1em;
  color: #a8a8b0;
}
.auto-card__set-counter {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ff5722;
}
/* Boutons Validé / Non validé : cibles franches, contraste maximal. */
.auto-action { border-radius: 18px; font-size: 16px; font-weight: 800; }
.auto-screen__rest span { font-size: 18px; font-variant-numeric: tabular-nums; }

/* v0.31 : bouton "i" (courbe de progression) sur la carte du mode auto. */
.auto-card__info {
  position: absolute;
  top: 14px; right: 14px;
  width: 30px; height: 30px;
  border: none; border-radius: 999px;
  background: #fff5f0;
  color: #ff5722;
  font-size: 13px;
  display: grid; place-items: center;
  cursor: pointer;
}
.auto-card { position: relative; }
#progressModal { z-index: 2600; }

/* =============================================================================
   v0.36 - CORRECTIF DÉFINITIF DE L'AFFICHAGE REPS / POIDS
   -----------------------------------------------------------------------------
   Pourquoi ça marchait sur un téléphone et pas sur l'autre :

   La taille du chiffre était `clamp(30px, 11vw, 46px)` — donc pilotée par la
   largeur de l'ÉCRAN. Or la place réellement disponible pour ce chiffre dépend
   de la largeur de la CARTE, qui est plafonnée à 480px. Passé ce seuil, l'écran
   s'agrandit, la police aussi, mais la case ne bouge plus. Un iPhone 14 Pro Max
   avait donc une police plus grosse qu'un 14 Pro pour une case identique : d'où
   un modèle coupé et l'autre non, et l'impression d'un bug aléatoire.

   Deux corrections :
   1. GRILLE au lieu de flex. `minmax(0, 1fr)` sur la colonne centrale donne une
      largeur déterministe, là où un <input> en flex négocie sa taille selon des
      règles que les moteurs n'appliquent pas tous pareil.
   2. La police suit désormais le CONTENEUR (unités `cqw`), plus le viewport.
      `41cqw - 36px` correspond à la place restante une fois les deux boutons et
      les marges déduits, dimensionnée pour le pire cas RÉEL : 4 caractères,
      comme un poids à la virgule (« 92.5 »). La formule tient donc sur
      n'importe quelle largeur, et pas seulement pour 2 ou 3 chiffres.
      Une valeur fixe est déclarée juste avant, comme repli pour les moteurs
      sans container queries (iOS < 16).
   ============================================================================= */
.auto-target {
  container-type: inline-size;
  padding: 12px 6px;
  max-width: 220px;
}
.auto-target__stepper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px;
  width: 100%;
}
.auto-step-btn {
  width: 34px;
  height: 34px;
  font-size: 19px;
}
.auto-target__value {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 0;
  text-align: center;
  font-size: 26px;                              /* repli sans container queries */
  font-size: clamp(20px, calc(41cqw - 36px), 40px);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;           /* chiffres de largeur égale */
}
@media (max-width: 400px) {
  .auto-step-btn { width: 30px; height: 30px; font-size: 17px; }
  .auto-target { padding: 10px 4px; }
}