/**
 * dots.css — Indicateur d'écran (pagination dots)
 *
 * Présent sur S1, S3, S4 — absent sur les formulaires (S2, s1-form).
 * Dot actif : pilule allongée (couleur accent).
 * Dots inactifs : cercles discrets.
 * Position : fixée en bas de l'écran, centrée, au-dessus de la safe area.
 */

.screen-dots {
    position: fixed;
    bottom: calc(14px + env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 100px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

/* Dot de base */
.sd-dot {
  height: 20px;
  border-radius: 4px;
  background: var(--c-green-2);
  opacity: 0.3;
  width: 6px;
  transition: width 0.28s cubic-bezier(.4,0,.2,1), background 0.28s ease, opacity 0.28s ease;
}

/* Dot actif : pilule allongée, couleur accent, pleine opacité */
.sd-dot--active {
  width: 20px;
  background: var(--c-green-2);
  opacity: 1;
}