/* ============================================================
   ANIMA — bouton « Installer ANIMA » (js/installer/installer.js ; spec 2026-10-05-installer-pwa-design.md)
   Trois endroits : carte de l'accueil (.inst-carte), entrée de « Compte » (.inst-entree), bouton discret de la connexion
   (.inst-connexion) ; et le guide en deux étapes (.inst-voile > .inst-feuille). Langage de surface : filets et serif, pas
   d'ombre sur la carte. Préfixe de classes : inst- (vérifié libre : git grep '\.inst-' css/). Aucune couleur en dur : tokens.
   ============================================================ */

/* Les hôtes restent vides et masqués tant qu'il n'y a rien à proposer (jamais de trou, jamais de faux bouton). */
.inst-hote[hidden] { display: none !important; }
.profil-compte-inner > .inst-hote { justify-self: stretch; }
.inst-copie[hidden] { display: none !important; }

/* ---------- Carte de l'accueil ---------- */
.ac-installer { margin-top: clamp(.4rem, 1.4vw, 1rem); }
.inst-carte {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6rem 1.4rem; align-items: center;
  padding-block: 1.2rem; border-top: 1px solid var(--texte); border-bottom: 1px solid var(--ligne);
}
.inst-icone { display: block; width: 48px; height: 48px; border-radius: var(--r-lg); border: 1px solid var(--ligne-2); background: var(--s1); }
.inst-corps { min-width: 0; }
.inst-corps .kicker { margin: 0 0 .3rem; }
.inst-titre { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(1.35rem, 2.2vw, 1.7rem); line-height: 1.1; color: var(--texte); }
.inst-detail { margin: .45rem 0 0; max-width: 46ch; font-size: .92rem; line-height: 1.5; color: var(--texte-2); }
.inst-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; }
.inst-actions .c-btn, .inst-entree .c-btn, .inst-integre .c-btn { min-height: 44px; white-space: normal; text-align: center; }

/* ---------- Entrée du menu du compte ---------- */
.inst-entree { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.4rem; width: 100%; padding-top: 1rem; border-top: 1px solid var(--ligne); }
.inst-entree-texte { min-width: 0; flex: 1 1 16rem; }
.inst-entree-titre { margin: 0; font-weight: 600; font-size: .95rem; color: var(--texte); }
.inst-entree-detail { margin: .25rem 0 0; max-width: 46ch; font-size: .86rem; line-height: 1.45; color: var(--texte-2); }

/* ---------- Navigateur intégré : texte + « Copier le lien » ---------- */
.inst-integre { display: grid; justify-items: start; gap: .7rem; min-width: 0; }
.inst-integre-txt { margin: 0; max-width: 46ch; font-size: .95rem; line-height: 1.5; color: var(--texte); }
.inst-copie { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--texte-2); }
.inst-lien { width: 100%; min-width: 0; height: 44px; padding: 0 .8rem; font: inherit; font-size: .9rem; color: var(--texte); background: var(--bg-0); border: 1px solid var(--ligne-2); border-radius: 2px; }
.inst-hors-champ { position: fixed; left: -9999px; top: 0; width: 1px; height: 1px; opacity: 0; }
.inst-entree .inst-integre { flex: 1 1 16rem; }

/* ---------- Bouton discret de la connexion ---------- */
.auth-installer { text-align: center; }
.inst-connexion { display: grid; justify-items: center; }
.inst-lien-bouton {
  min-height: 44px; padding: .5rem .2rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .8rem; line-height: 1.45; color: var(--text-2);
  text-decoration: underline; text-underline-offset: 3px;
}
.inst-lien-bouton:is(:hover, :focus-visible) { color: var(--survol-texte); }
.inst-connexion .inst-integre { justify-items: center; text-align: center; gap: .1rem; }
.inst-connexion .inst-integre-txt { font-size: .8rem; color: var(--text-2); }
.inst-connexion .inst-copie { text-align: center; }

/* ---------- Guide en deux étapes ---------- */
.inst-voile { position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; padding: 16px; background: var(--voile-modal); overflow: auto; }
.inst-feuille {
  width: 100%; max-width: 28rem; padding: 1.3rem 1.4rem 1.2rem; background: var(--bg-0); color: var(--texte);
  border: 1px solid var(--ligne-2); border-top: 2px solid var(--texte); border-radius: 2px; box-shadow: var(--shadow-elevated);
}
.inst-feuille-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.inst-feuille-titre { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 1.7rem; line-height: 1.1; }
.inst-fermer { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: -.5rem -.7rem 0 0; border: 0; background: none; color: var(--texte); cursor: pointer; }
.inst-fermer:is(:hover, :focus-visible) { color: var(--survol-texte); }
.inst-picto { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; color: var(--accent); }
.inst-picto svg { width: 100%; height: 100%; }
.inst-picto-x { color: inherit; }
.inst-etapes { list-style: none; margin: 1.1rem 0 0; padding: 0; border-top: 1px solid var(--ligne); }
.inst-etape { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .8rem; align-items: start; padding: .95rem 0; border-bottom: 1px solid var(--ligne); }
.inst-num { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 1px solid var(--texte); border-radius: 50%; font-family: var(--serif); font-size: 1.2rem; line-height: 1; font-variant-numeric: lining-nums; }
.inst-etape-corps { min-width: 0; }
.inst-etape-titre { display: flex; align-items: center; gap: .55rem; margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.inst-etape-detail { margin: .3rem 0 0; font-size: .9rem; line-height: 1.5; color: var(--texte-2); }
.inst-feuille-pied { display: flex; justify-content: flex-end; margin-top: 1.1rem; }
.inst-feuille-pied .c-btn { min-height: 44px; }

/* Message « ANIMA est sur ton écran d'accueil » : au-dessus de la navigation basse sur téléphone. */
.inst-message { max-width: calc(100vw - 32px); }

/* media-queries APRÈS les règles de base */
@media (max-width: 860px) {
  .inst-message { bottom: calc(var(--nav-bas-h, 56px) + 16px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) {
  .inst-carte { grid-template-columns: auto minmax(0, 1fr); }
  .inst-actions { grid-column: 1 / -1; justify-content: stretch; }
  .inst-actions .c-btn { flex: 1 1 8rem; }
  .inst-voile { align-items: end; padding: 0; }
  .inst-feuille { max-width: none; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); border-left: 0; border-right: 0; border-bottom: 0; }
}