/* ================================================================
   AIDE PAGE — Phone mock animated visuals
   Chargé uniquement depuis aide.html
   Utilise les variables CSS de system.css / app.css
================================================================ */

/* ── Figure — centre le phone mock, occupe tout l'espace ── */
.help-page .help-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* ── Phone shell ─────────────────────────────────────────── */
.help-page .phone-mock {
  width: min(280px, 100%);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

.help-page .phone-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.05em;
}

.help-page .phone-screen {
  position: relative;
  overflow: hidden;
  height: 360px;
  background: var(--bg);
}

@media (min-width: 640px) {
  .help-page .phone-screen {
    height: 420px;
  }
}

/* ── Briques partagées pm-* ──────────────────────────────── */
.help-page .pm-topbar {
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
}

.help-page .pm-form {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-page .pm-field {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}

.help-page .pm-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-bottom: 3px;
}

.help-page .pm-value {
  font-size: 12px;
  color: var(--text);
  min-height: 15px;
  opacity: 0;
  transform: translateY(3px);
}

.help-page .pm-btn {
  margin-top: 4px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-3);
  text-align: center;
}

.help-page .pm-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

.help-page .pm-badge--depart {
  background: color-mix(in oklch, var(--accent) 20%, transparent);
  color: var(--accent);
}

.help-page .pm-badge--retour {
  background: color-mix(in oklch, var(--accent-2) 20%, transparent);
  color: var(--accent-2);
}

/* ────────────────────────────────────────────────────────── */
/* VISUAL 1 : Overview — nav items s'illuminent en séquence   */
/* ────────────────────────────────────────────────────────── */

.phone-screen--overview {
  padding: 8px 0;
}

.help-page .pm-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  font-size: 12px;
  color: var(--text-2);
  margin: 0 6px;
  border-radius: 6px;
}

.help-page .pm-nav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line);
  flex-shrink: 0;
}

@keyframes pm-nav-flash {
  0%, 10%, 100% {
    background: transparent;
    color: var(--text-2);
  }
  2%, 8% {
    background: color-mix(in oklch, var(--accent) 18%, transparent);
    color: var(--accent);
  }
}

@keyframes pm-nav-dot-flash {
  0%, 10%, 100% { background: var(--line); }
  2%, 8% { background: var(--accent); }
}

/* 5 items × durée 7s, chaque item se décale de 1.4s */
.phone-screen--overview .pm-nav-item--1 { animation: pm-nav-flash 7s 0s infinite; }
.phone-screen--overview .pm-nav-item--2 { animation: pm-nav-flash 7s 1.4s infinite; }
.phone-screen--overview .pm-nav-item--3 { animation: pm-nav-flash 7s 2.8s infinite; }
.phone-screen--overview .pm-nav-item--4 { animation: pm-nav-flash 7s 4.2s infinite; }
.phone-screen--overview .pm-nav-item--5 { animation: pm-nav-flash 7s 5.6s infinite; }

.phone-screen--overview .pm-nav-item--1 .pm-nav-dot { animation: pm-nav-dot-flash 7s 0s infinite; }
.phone-screen--overview .pm-nav-item--2 .pm-nav-dot { animation: pm-nav-dot-flash 7s 1.4s infinite; }
.phone-screen--overview .pm-nav-item--3 .pm-nav-dot { animation: pm-nav-dot-flash 7s 2.8s infinite; }
.phone-screen--overview .pm-nav-item--4 .pm-nav-dot { animation: pm-nav-dot-flash 7s 4.2s infinite; }
.phone-screen--overview .pm-nav-item--5 .pm-nav-dot { animation: pm-nav-dot-flash 7s 5.6s infinite; }

/* ────────────────────────────────────────────────────────── */
/* VISUAL 2 : Movement — formulaire se remplit en 4 étapes    */
/* ────────────────────────────────────────────────────────── */

@keyframes pm-type-appear {
  0%, 8%, 96%, 100% { opacity: 0; transform: translateY(3px); }
  14%, 90% { opacity: 1; transform: translateY(0); }
}

@keyframes pm-employee-appear {
  0%, 28%, 96%, 100% { opacity: 0; transform: translateY(3px); }
  34%, 90% { opacity: 1; transform: translateY(0); }
}

@keyframes pm-ref-appear {
  0%, 48%, 96%, 100% { opacity: 0; transform: translateY(3px); }
  54%, 90% { opacity: 1; transform: translateY(0); }
}

@keyframes pm-btn-activate {
  0%, 64% {
    background: var(--bg-3);
    border-color: var(--line);
    color: var(--text-3);
  }
  70%, 88% {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
  }
  92%, 100% {
    background: var(--bg-3);
    border-color: var(--line);
    color: var(--text-3);
  }
}

.phone-screen--movement .pm-value--type {
  animation: pm-type-appear 8s infinite;
}
.phone-screen--movement .pm-value--employee {
  animation: pm-employee-appear 8s infinite;
}
.phone-screen--movement .pm-value--ref {
  animation: pm-ref-appear 8s infinite;
}
.phone-screen--movement .pm-btn--submit {
  animation: pm-btn-activate 8s infinite;
}

/* ────────────────────────────────────────────────────────── */
/* VISUAL 3 : Scan — ligne de scan + résultat reconnu         */
/* ────────────────────────────────────────────────────────── */

.phone-screen--scan {
  background: oklch(0.1 0.005 90);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.help-page .pm-scanner-frame {
  position: relative;
  width: 140px;
  height: 140px;
}

.help-page .pm-scanner-corner {
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--accent);
  border-style: solid;
}

.pm-scanner-corner--tl { top: 0; left: 0; border-width: 2px 0 0 2px; }
.pm-scanner-corner--tr { top: 0; right: 0; border-width: 2px 2px 0 0; }
.pm-scanner-corner--bl { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
.pm-scanner-corner--br { bottom: 0; right: 0; border-width: 0 2px 2px 0; }

.help-page .pm-scanner-line {
  position: absolute;
  left: 4px;
  right: 4px;
  height: 1.5px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent);
  top: 15%;
}

@keyframes pm-scan-line {
  0%, 100% { top: 15%; opacity: 1; }
  45%, 55% { top: 75%; opacity: 1; }
  60%, 65% { opacity: 0; }
  66% { top: 15%; opacity: 0; }
  70% { opacity: 1; }
}

@keyframes pm-scan-result {
  0%, 60%, 96%, 100% { opacity: 0; transform: translateY(8px); }
  68%, 90% { opacity: 1; transform: translateY(0); }
}

.phone-screen--scan .pm-scanner-line {
  animation: pm-scan-line 4s infinite;
}

.help-page .pm-scanner-result {
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in oklch, var(--accent) 12%, oklch(0.1 0.005 90));
  border: 1px solid color-mix(in oklch, var(--accent) 40%, transparent);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11px;
  color: var(--accent);
  font-family: var(--font-mono);
  opacity: 0;
}

.help-page .pm-scanner-check {
  font-size: 14px;
  font-style: normal;
}

.phone-screen--scan .pm-scanner-result {
  animation: pm-scan-result 4s infinite;
}

/* ────────────────────────────────────────────────────────── */
/* VISUAL 4 : Disponibilité — recherche + résultats           */
/* ────────────────────────────────────────────────────────── */

.phone-screen--availability {
  display: flex;
  flex-direction: column;
}

.help-page .pm-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 12px;
  color: var(--text);
}

.help-page .pm-search-icon {
  color: var(--text-3);
  font-size: 13px;
}

.help-page .pm-search-typed {
  overflow: hidden;
  white-space: nowrap;
  max-width: 0;
}

.help-page .pm-cursor {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--accent);
  margin-left: 1px;
  vertical-align: middle;
}

.help-page .pm-results {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 12px;
  opacity: 0;
}

.help-page .pm-result {
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--bg-2);
}
.help-page .pm-result--1 { border-radius: 6px 6px 0 0; }
.help-page .pm-result--3 { border-radius: 0 0 6px 6px; }
.help-page .pm-result + .pm-result { border-top: none; }

.help-page .pm-result-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}

.help-page .pm-result-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-3);
  margin-top: 2px;
}

@keyframes pm-search-type {
  0%, 5%, 96%, 100% { max-width: 0; }
  30%, 90% { max-width: 80px; }
}

@keyframes pm-cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes pm-results-appear {
  0%, 25%, 96%, 100% { opacity: 0; }
  35%, 90% { opacity: 1; }
}

@keyframes pm-result-select {
  0%, 60%, 100% {
    border-color: var(--line);
    background: var(--bg-2);
  }
  70%, 88% {
    border-color: var(--accent);
    background: color-mix(in oklch, var(--accent) 8%, var(--bg-2));
  }
}

.phone-screen--availability .pm-search-typed {
  animation: pm-search-type 6s infinite;
}

.phone-screen--availability .pm-cursor {
  animation: pm-cursor-blink 0.8s infinite;
}

.phone-screen--availability .pm-results {
  animation: pm-results-appear 6s infinite;
}

.phone-screen--availability .pm-result--1 {
  animation: pm-result-select 6s infinite;
}

/* ────────────────────────────────────────────────────────── */
/* VISUAL 5 : Historique — nouvelle entrée qui apparaît       */
/* ────────────────────────────────────────────────────────── */

.phone-screen--history {
  display: flex;
  flex-direction: column;
}

.help-page .pm-stats {
  display: flex;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
}

.help-page .pm-stat {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-right: 1px solid var(--line);
}
.help-page .pm-stat:last-child { border-right: none; }

.help-page .pm-stat-n {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  font-family: var(--font-mono);
}

.help-page .pm-stat-l {
  font-size: 8px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1px;
}

.help-page .pm-movements {
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  gap: 6px;
}

.help-page .pm-movement {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.help-page .pm-mv-info { flex: 1; min-width: 0; }

.help-page .pm-mv-name {
  font-size: 11px;
  color: var(--text);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.help-page .pm-mv-meta {
  font-size: 9px;
  color: var(--text-3);
  margin-top: 1px;
  font-family: var(--font-mono);
}

@keyframes pm-new-entry {
  0%, 8%, 96%, 100% {
    opacity: 0;
    transform: translateY(-16px);
  }
  16%, 88% {
    opacity: 1;
    transform: translateY(0);
  }
}

.phone-screen--history .pm-movement--new {
  animation: pm-new-entry 6s infinite;
}

/* ────────────────────────────────────────────────────────── */
/* VISUAL 6 : Synthèses — cartes employés apparaissent        */
/* ────────────────────────────────────────────────────────── */

.phone-screen--syntheses {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.help-page .pm-employee {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
}

.help-page .pm-emp-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in oklch, var(--accent) 20%, var(--bg-3));
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
}

.help-page .pm-emp-name {
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}

.help-page .pm-emp-count {
  font-size: 10px;
  color: var(--text-3);
  font-family: var(--font-mono);
  margin-top: 1px;
}

@keyframes pm-emp-card-1 {
  0%, 5%, 96%, 100% { opacity: 0; transform: translateY(8px); }
  12%, 90% { opacity: 1; transform: translateY(0); }
}
@keyframes pm-emp-card-2 {
  0%, 22%, 96%, 100% { opacity: 0; transform: translateY(8px); }
  29%, 90% { opacity: 1; transform: translateY(0); }
}
@keyframes pm-emp-card-3 {
  0%, 39%, 96%, 100% { opacity: 0; transform: translateY(8px); }
  46%, 90% { opacity: 1; transform: translateY(0); }
}

.phone-screen--syntheses .pm-employee--1 {
  animation: pm-emp-card-1 6s infinite;
}
.phone-screen--syntheses .pm-employee--2 {
  animation: pm-emp-card-2 6s infinite;
}
.phone-screen--syntheses .pm-employee--3 {
  animation: pm-emp-card-3 6s infinite;
}

/* ────────────────────────────────────────────────────────── */
/* VISUAL 7 : PWA — Android (Chrome) + iOS (Safari)          */
/* ────────────────────────────────────────────────────────── */

/* ── Dual phones layout ──────────────────────────────────── */
.help-page .pwa-phones-dual {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: center;
}

.help-page .help-split.reverse .pwa-phones-dual {
  order: -1;
}

.help-page .pwa-phones-dual .help-figure {
  flex: 1 1 0;
  min-width: 0;
  gap: 8px;
}

.help-page .pwa-phones-dual .phone-mock {
  width: 100%;
  max-width: 210px;
}

/* ── Icons grille home screen (partagée) ─────────────────── */
.help-page .pm-ha-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 10px 8px;
}

.help-page .pm-ha {
  aspect-ratio: 1;
  border-radius: 10px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}

.help-page .pm-ha--new {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.4);
}

/* ══════════════════════════════════════════════════════════ */
/* ANDROID — Chrome                                          */
/* ══════════════════════════════════════════════════════════ */

.phone-screen--pwa-android {
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Chrome barre d'adresse */
.help-page .pm-chr-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.help-page .pm-chr-addr-pill {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--bg-3);
  border-radius: 20px;
  padding: 4px 8px;
  min-width: 0;
}

.help-page .pm-chr-lock {
  width: 8px;
  height: 10px;
  flex-shrink: 0;
  color: var(--text-3);
}

.help-page .pm-chr-url {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--text-3);
  overflow: hidden;
  white-space: nowrap;
}

.help-page .pm-chr-tabs {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--text-3);
  border-radius: 3px;
  font-size: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-weight: 700;
  font-family: var(--font-mono);
  flex-shrink: 0;
}

.help-page .pm-chr-more {
  background: none;
  border: none;
  padding: 2px;
  cursor: default;
  color: var(--text-3);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.help-page .pm-chr-more svg {
  width: 4px;
  height: 14px;
}

/* Contenu de la page (fond) */
.help-page .pm-chr-content { flex: 1; }

.help-page .pm-chr-rows {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.help-page .pm-chr-row {
  height: 7px;
  border-radius: 4px;
  background: var(--bg-3);
}

.help-page .pm-chr-row--short { width: 58%; }

/* Menu déroulant Chrome */
.help-page .pm-chr-menu {
  position: absolute;
  top: 34px;
  right: 5px;
  width: 152px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  overflow: hidden;
  z-index: 10;
  opacity: 0;
  transform: translateY(-6px) scale(0.94);
  transform-origin: top right;
}

.help-page .pm-chr-mi {
  padding: 8px 11px;
  font-size: 9.5px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.help-page .pm-chr-mi:last-child { border-bottom: none; }

.help-page .pm-chr-mi--install {
  color: var(--accent);
  font-weight: 500;
}

/* Dialogue d'installation */
.help-page .pm-chr-dialog {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-radius: 14px 14px 0 0;
  padding: 14px 12px;
  z-index: 20;
  opacity: 0;
  transform: translateY(100%);
}

.help-page .pm-chr-dlg-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.help-page .pm-chr-dlg-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 17px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.help-page .pm-chr-dlg-title {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}

.help-page .pm-chr-dlg-sub {
  font-size: 8.5px;
  color: var(--text-3);
  margin-top: 2px;
  font-family: var(--font-mono);
}

.help-page .pm-chr-dlg-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.help-page .pm-chr-dlg-cancel,
.help-page .pm-chr-dlg-install {
  border: none;
  border-radius: 6px;
  padding: 6px 11px;
  font-size: 9.5px;
  font-weight: 600;
  cursor: default;
}

.help-page .pm-chr-dlg-cancel {
  background: transparent;
  color: var(--text-3);
}

.help-page .pm-chr-dlg-install {
  background: var(--bg-3);
  color: var(--accent);
  border: 1px solid var(--line);
}

/* Écran d'accueil Android */
.help-page .pm-chr-home {
  position: absolute;
  inset: 0;
  background: var(--bg-3);
  z-index: 30;
  display: flex;
  align-items: flex-start;
  opacity: 0;
}

.help-page .pm-chr-home .pm-ha {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.06);
}

.help-page .pm-chr-home .pm-ha--new {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ══════════════════════════════════════════════════════════ */
/* iOS — Safari                                              */
/* ══════════════════════════════════════════════════════════ */

.phone-screen--pwa-ios {
  display: flex;
  flex-direction: column;
  position: relative;
}

.help-page .pm-saf-content { flex: 1; }

.help-page .pm-saf-rows {
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.help-page .pm-saf-row {
  height: 7px;
  border-radius: 4px;
  background: var(--bg-3);
}

.help-page .pm-saf-row--short { width: 55%; }

/* Safari toolbar bas */
.help-page .pm-saf-toolbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 8px 6px;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.help-page .pm-saf-tb {
  color: var(--text-3);
  width: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-page .pm-saf-tb svg {
  width: 14px;
  height: 14px;
}

.help-page .pm-saf-tb--fwd {
  opacity: 0.3;
}

.help-page .pm-saf-share {
  color: var(--accent);
}

.help-page .pm-saf-share svg {
  width: 13px;
  height: 16px;
}

/* Share sheet iOS */
.help-page .pm-saf-sheet {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-radius: 12px 12px 0 0;
  padding: 6px 10px 8px;
  z-index: 15;
  opacity: 0;
  transform: translateY(100%);
}

.help-page .pm-saf-handle {
  width: 30px;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  margin: 0 auto 8px;
}

.help-page .pm-saf-sheet-icons {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 8px;
}

.help-page .pm-saf-si {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.help-page .pm-saf-si-ico {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.help-page .pm-saf-si-ico--hs {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.help-page .pm-saf-si-ico--hs svg {
  width: 20px;
  height: 20px;
}

.help-page .pm-saf-si-lbl {
  font-size: 7.5px;
  color: var(--text-3);
  text-align: center;
  max-width: 42px;
}

.help-page .pm-saf-actions {
  border-top: 1px solid var(--line);
  padding-top: 6px;
}

.help-page .pm-saf-action {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  font-size: 9.5px;
  color: var(--text);
  border-bottom: 1px solid var(--line);
}

.help-page .pm-saf-action:last-child { border-bottom: none; }

.help-page .pm-saf-act-ico {
  font-size: 11px;
  width: 18px;
  text-align: center;
}

/* Confirmation iOS — "Ajouter à l'écran d'accueil" */
.help-page .pm-saf-confirm {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateX(100%);
}

.help-page .pm-saf-conf-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 10px 8px;
  border-bottom: 1px solid var(--line);
}

.help-page .pm-saf-conf-cancel {
  font-size: 9px;
  color: var(--accent);
}

.help-page .pm-saf-conf-head {
  font-size: 9px;
  font-weight: 600;
  color: var(--text);
}

.help-page .pm-saf-conf-add {
  font-size: 9px;
  font-weight: 600;
  color: var(--accent);
}

.help-page .pm-saf-conf-ico {
  margin-top: 20px;
  width: 52px;
  height: 52px;
  border-radius: 13px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-page .pm-saf-conf-name {
  margin-top: 14px;
  padding: 8px 12px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--text);
  width: calc(100% - 24px);
  text-align: center;
}

.help-page .pm-saf-conf-url {
  margin-top: 5px;
  font-size: 8.5px;
  color: var(--text-3);
  font-family: var(--font-mono);
}

/* Écran d'accueil iOS */
.help-page .pm-saf-home {
  position: absolute;
  inset: 0;
  background: color-mix(in oklch, var(--accent) 22%, var(--bg-3));
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  opacity: 0;
}

.help-page .pm-saf-dock {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 8px 10px;
  background: rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.08);
}

.help-page .pm-saf-dock .pm-ha {
  width: 36px;
  height: 36px;
  aspect-ratio: unset;
}

.help-page .pm-saf-home .pm-ha {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.08);
}

.help-page .pm-saf-home .pm-ha--new {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* ── Animations Android (10s cycle) ──────────────────────── */

@keyframes pwa-chr-content-fade {
  0%, 16% { opacity: 1; }
  21%, 74% { opacity: 0; }
  80%, 100% { opacity: 1; }
}

@keyframes pwa-chr-menu-in {
  0%, 17% { opacity: 0; transform: translateY(-6px) scale(0.94); transform-origin: top right; }
  22%, 37% { opacity: 1; transform: translateY(0) scale(1); }
  41%, 100% { opacity: 0; transform: translateY(-6px) scale(0.94); }
}

@keyframes pwa-chr-mi-hl {
  0%, 28% { background: transparent; }
  32%, 38% { background: color-mix(in oklch, var(--accent) 16%, transparent); }
  42%, 100% { background: transparent; }
}

@keyframes pwa-chr-dialog-in {
  0%, 41% { opacity: 0; transform: translateY(100%); }
  46%, 67% { opacity: 1; transform: translateY(0); }
  72%, 100% { opacity: 0; transform: translateY(100%); }
}

@keyframes pwa-chr-btn-flash {
  0%, 62% { background: var(--bg-3); color: var(--accent); }
  65%, 68% { background: var(--accent); color: var(--accent-ink); }
  71%, 100% { background: var(--bg-3); color: var(--accent); }
}

@keyframes pwa-chr-home-in {
  0%, 72% { opacity: 0; }
  76%, 89% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

@keyframes pwa-chr-icon-pop {
  0%, 74% { opacity: 0; transform: scale(0.4); }
  79%, 89% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.4); }
}

.phone-screen--pwa-android .pm-chr-content  { animation: pwa-chr-content-fade 16s infinite; }
.phone-screen--pwa-android .pm-chr-menu     { animation: pwa-chr-menu-in 16s infinite; }
.phone-screen--pwa-android .pm-chr-mi--install { animation: pwa-chr-mi-hl 16s infinite; }
.phone-screen--pwa-android .pm-chr-dialog   { animation: pwa-chr-dialog-in 16s infinite; }
.phone-screen--pwa-android .pm-chr-dlg-install { animation: pwa-chr-btn-flash 16s infinite; }
.phone-screen--pwa-android .pm-chr-home     { animation: pwa-chr-home-in 16s infinite; }
.phone-screen--pwa-android .pm-ha--new      { animation: pwa-chr-icon-pop 16s infinite; }

/* ── Animations iOS (10s cycle) ──────────────────────────── */

@keyframes pwa-saf-content-fade {
  0%, 16% { opacity: 1; }
  21%, 74% { opacity: 0; }
  80%, 100% { opacity: 1; }
}

@keyframes pwa-saf-share-pulse {
  0%, 14% { transform: scale(1); }
  17%, 19% { transform: scale(1.35); }
  22%, 100% { transform: scale(1); }
}

@keyframes pwa-saf-sheet-in {
  0%, 20% { opacity: 0; transform: translateY(100%); }
  24%, 40% { opacity: 1; transform: translateY(0); }
  44%, 100% { opacity: 0; transform: translateY(100%); }
}

@keyframes pwa-saf-action-hs {
  0%, 33% { background: transparent; border-radius: 0; }
  36%, 41% { background: color-mix(in oklch, var(--accent) 18%, transparent); border-radius: 6px; }
  45%, 100% { background: transparent; border-radius: 0; }
}

@keyframes pwa-saf-confirm-in {
  0%, 43% { opacity: 0; transform: translateX(100%); }
  47%, 68% { opacity: 1; transform: translateX(0); }
  72%, 100% { opacity: 0; transform: translateX(100%); }
}

@keyframes pwa-saf-add-pulse {
  0%, 63% { opacity: 1; }
  66%, 68% { opacity: 0.35; }
  71%, 100% { opacity: 1; }
}

@keyframes pwa-saf-home-in {
  0%, 72% { opacity: 0; }
  76%, 89% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

@keyframes pwa-saf-icon-pop {
  0%, 74% { opacity: 0; transform: scale(0.4); }
  79%, 89% { opacity: 1; transform: scale(1); }
  94%, 100% { opacity: 0; transform: scale(0.4); }
}

.phone-screen--pwa-ios .pm-saf-content    { animation: pwa-saf-content-fade 16s infinite; }
.phone-screen--pwa-ios .pm-saf-toolbar    { animation: pwa-saf-content-fade 16s infinite; }
.phone-screen--pwa-ios .pm-saf-share      { animation: pwa-saf-share-pulse 16s infinite; }
.phone-screen--pwa-ios .pm-saf-sheet      { animation: pwa-saf-sheet-in 16s infinite; }
.phone-screen--pwa-ios .pm-saf-action--hs { animation: pwa-saf-action-hs 16s infinite; }
.phone-screen--pwa-ios .pm-saf-confirm    { animation: pwa-saf-confirm-in 16s infinite; }
.phone-screen--pwa-ios .pm-saf-conf-add   { animation: pwa-saf-add-pulse 16s infinite; }
.phone-screen--pwa-ios .pm-saf-home       { animation: pwa-saf-home-in 16s infinite; }
.phone-screen--pwa-ios .pm-ha--new        { animation: pwa-saf-icon-pop 16s infinite; }

/* ────────────────────────────────────────────────────────── */
/* Tap ripples + step labels — guidage visuel explicit         */
/* ────────────────────────────────────────────────────────── */

/* ── Bases partagées ─────────────────────────────────────── */
.help-page .pm-tap {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  border: 2.5px solid rgba(255,255,255,0.9);
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transform: scale(0.3);
}

.help-page .pm-lbl {
  position: absolute;
  bottom: 8px;
  left: 0; right: 0;
  text-align: center;
  font-size: 8px;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 4px rgba(0,0,0,0.95), 0 0 12px rgba(0,0,0,0.8);
  letter-spacing: 0.03em;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
}

/* ── Positions Android ───────────────────────────────────── */
/* Centre du ⋮ : ~14px du haut, ~14px du bord droit */
.help-page .pm-chr-tap--menu    { top: 3px; right: 3px; }
/* Centre item "Ajouter à l'écran" dans le menu déroulant */
.help-page .pm-chr-tap--item    { top: 88px; right: 65px; }
/* Centre bouton "Installer" dans le dialogue */
.help-page .pm-chr-tap--install { bottom: 11px; right: 29px; }

/* ── Positions iOS ───────────────────────────────────────── */
/* Bouton Partage : 3e icône sur 5, centré en bas */
.help-page .pm-saf-tap--share   { bottom: 4px; left: 94px; }
/* Action "Sur l'écran d'accueil" dans le sheet */
.help-page .pm-saf-tap--action  { bottom: 27px; left: 94px; }
/* Bouton "Ajouter" dans la barre de navigation du confirm */
.help-page .pm-saf-tap--add     { top: 5px; right: 3px; }

/* ── Keyframes tap (10s) ─────────────────────────────────── */

@keyframes pwa-chr-tap1 {
  0%, 14.9% { opacity: 0; transform: scale(0.3); }
  16.5%     { opacity: 0.95; transform: scale(0.85); }
  19%       { opacity: 0;    transform: scale(1.9); }
  100%      { opacity: 0;    transform: scale(0.3); }
}

@keyframes pwa-chr-tap2 {
  0%, 29.9% { opacity: 0; transform: scale(0.3); }
  31%       { opacity: 0.95; transform: scale(0.85); }
  34%       { opacity: 0;    transform: scale(1.9); }
  100%      { opacity: 0;    transform: scale(0.3); }
}

@keyframes pwa-chr-tap3 {
  0%, 63.9% { opacity: 0; transform: scale(0.3); }
  65%       { opacity: 0.95; transform: scale(0.85); }
  68%       { opacity: 0;    transform: scale(1.9); }
  100%      { opacity: 0;    transform: scale(0.3); }
}

@keyframes pwa-saf-tap1 {
  0%, 14.9% { opacity: 0; transform: scale(0.3); }
  16.5%     { opacity: 0.95; transform: scale(0.85); }
  19%       { opacity: 0;    transform: scale(1.9); }
  100%      { opacity: 0;    transform: scale(0.3); }
}

@keyframes pwa-saf-tap2 {
  0%, 37.9% { opacity: 0; transform: scale(0.3); }
  39%       { opacity: 0.95; transform: scale(0.85); }
  42%       { opacity: 0;    transform: scale(1.9); }
  100%      { opacity: 0;    transform: scale(0.3); }
}

@keyframes pwa-saf-tap3 {
  0%, 63.9% { opacity: 0; transform: scale(0.3); }
  65%       { opacity: 0.95; transform: scale(0.85); }
  68%       { opacity: 0;    transform: scale(1.9); }
  100%      { opacity: 0;    transform: scale(0.3); }
}

/* ── Keyframes labels (10s) ──────────────────────────────── */

@keyframes pwa-chr-lbl1 {
  0%, 12%   { opacity: 0; }
  15%, 18%  { opacity: 1; }
  21%, 100% { opacity: 0; }
}

@keyframes pwa-chr-lbl2 {
  0%, 25%   { opacity: 0; }
  28%, 37%  { opacity: 1; }
  41%, 100% { opacity: 0; }
}

@keyframes pwa-chr-lbl3 {
  0%, 60%   { opacity: 0; }
  63%, 67%  { opacity: 1; }
  71%, 100% { opacity: 0; }
}

@keyframes pwa-saf-lbl1 {
  0%, 12%   { opacity: 0; }
  15%, 18%  { opacity: 1; }
  22%, 100% { opacity: 0; }
}

@keyframes pwa-saf-lbl2 {
  0%, 26%   { opacity: 0; }
  29%, 40%  { opacity: 1; }
  44%, 100% { opacity: 0; }
}

@keyframes pwa-saf-lbl3 {
  0%, 45%   { opacity: 0; }
  48%, 67%  { opacity: 1; }
  72%, 100% { opacity: 0; }
}

/* ── Assignments ─────────────────────────────────────────── */

.phone-screen--pwa-android .pm-chr-tap--menu    { animation: pwa-chr-tap1 16s infinite; }
.phone-screen--pwa-android .pm-chr-tap--item    { animation: pwa-chr-tap2 16s infinite; }
.phone-screen--pwa-android .pm-chr-tap--install { animation: pwa-chr-tap3 16s infinite; }
.phone-screen--pwa-android .pm-chr-lbl--1       { animation: pwa-chr-lbl1 16s infinite; }
.phone-screen--pwa-android .pm-chr-lbl--2       { animation: pwa-chr-lbl2 16s infinite; }
.phone-screen--pwa-android .pm-chr-lbl--3       { animation: pwa-chr-lbl3 16s infinite; }

.phone-screen--pwa-ios .pm-saf-tap--share   { animation: pwa-saf-tap1 16s infinite; }
.phone-screen--pwa-ios .pm-saf-tap--action  { animation: pwa-saf-tap2 16s infinite; }
.phone-screen--pwa-ios .pm-saf-tap--add     { animation: pwa-saf-tap3 16s infinite; }
.phone-screen--pwa-ios .pm-saf-lbl--1       { animation: pwa-saf-lbl1 16s infinite; }
.phone-screen--pwa-ios .pm-saf-lbl--2       { animation: pwa-saf-lbl2 16s infinite; }
.phone-screen--pwa-ios .pm-saf-lbl--3       { animation: pwa-saf-lbl3 16s infinite; }