/* Accès : la porte du mot de passe et le mode d'emploi d'installation.
   Mêmes tokens et mêmes composants que app.css (.inp, .btn, .segment, .feuille) : les trois lumières suivent. */

/* Tant que la porte est fermée, l'appli est là mais invisible : pas de flash, pas de focus derrière la porte. */
html[data-acces="ferme"] #app, html[data-acces="ferme"] #feuille { visibility: hidden; }

.acces {
  position: fixed; inset: 0; z-index: 50; display: flex; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--sol); color: var(--encre);
  padding: calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
}
.acces-corps { margin: auto; width: 100%; max-width: 440px; display: flex; flex-direction: column; gap: 16px; }
.acces-corps.large { max-width: 560px; }
.acces-icone { width: 72px; height: 72px; border-radius: 16px; box-shadow: var(--ombre-1); }
.acces h1 { font-size: 30px; font-weight: 800; line-height: 1.1; }
.acces h1:focus { outline: none; }
.acces-porte { display: flex; flex-direction: column; gap: 16px; }
.acces-porte .champ { margin: 0; }
.acces-porte .note-bas { margin-top: 0; }
.acces .inp.erreur { border-color: var(--erreur); box-shadow: 0 0 0 3px var(--erreur-lavis); }
.acces .inp.secoue { animation: secoue .35s; }
.acces-voir {
  flex: none; min-width: 44px; min-height: 44px; margin-right: 4px; padding: 0 12px; border: 0; border-radius: 999px;
  background: none; color: var(--accent-encre); font-size: 14.5px; font-weight: 750;
}
.acces-voir:active { background: var(--accent-lavis); }
.acces-erreur { color: var(--erreur); font-size: 15px; font-weight: 700; }
.acces-erreur:empty { display: none; }
.acces-sortie { animation: acces-sortie .2s ease-in forwards; pointer-events: none; }
@keyframes acces-sortie { to { opacity: 0; } }

/* ── Le mode d'emploi ───────────────────────────────────────────────── */
.guide { display: flex; flex-direction: column; gap: 12px; }
.guide h3 { font-size: 17px; font-weight: 800; margin-top: 4px; }
.guide-ici { font-size: 15px; font-weight: 600; color: var(--encre-2); }
.guide-ici b { color: var(--encre); font-weight: 750; }
.guide-ok { padding: 12px 14px; border-radius: 16px; background: var(--accent-lavis); border: var(--bord) solid var(--accent-trace); color: var(--accent-encre); font-weight: 700; }
.guide .note-bas { margin-top: 0; }

.etapes { list-style: none; margin: 0; padding: 0; counter-reset: etape; display: flex; flex-direction: column; gap: 8px; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: var(--bord) solid var(--ligne); }
.etapes li::before {
  content: counter(etape); width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  background: var(--surface); border: var(--bord) solid var(--ligne-forte); font-size: 17px; font-weight: 800;
}
.etapes li > div { font-weight: 600; padding-top: 5px; }
.etapes b { font-weight: 800; }
.etapes span { display: block; margin-top: 4px; font-size: 14px; font-weight: 550; color: var(--encre-3); }
.etapes .ico { width: 20px; height: 20px; vertical-align: -4px; }

.guide-autres { border-top: var(--bord) solid var(--ligne); }
.guide-autres summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; cursor: pointer; list-style: none;
  color: var(--accent-encre); font-size: 15.5px; font-weight: 750;
}
.guide-autres summary::-webkit-details-marker { display: none; }
.guide-autres summary svg { width: 22px; height: 22px; transition: transform .2s; }
.guide-autres[open] summary svg { transform: rotate(180deg); }
.guide-autres > div { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }

/* Dans les réglages de l'appli, sous le bouton d'installation directe quand il est là. */
#bInstaller:not([hidden]) + #bGuideInstall { margin-top: 10px; }