/* ==========================================================================
   La proposition d'installation.

   Une bande posee EN BAS, au-dessus de la barre d'onglets : c'est la que
   le pouce est, et c'est la que le navigateur aurait mis la sienne. Elle
   ne recouvre rien de ce qu'on est en train de lire.

   Elle se retire des qu'on a repondu, et ne revient pas. Une carte de
   restaurant qui redemande a chaque visite finit desinstallee avant
   d'avoir ete installee.
   ========================================================================== */

.pose {
  position: fixed;
  left: max(0.75rem, env(safe-area-inset-left));
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: calc(var(--bar-h, 0px) + 0.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 70;

  display: flex; align-items: center; gap: 0.75rem;
  max-width: 34rem; margin: 0 auto;
  padding: 0.875rem;

  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  /* Posee par-dessus le contenu, elle a besoin d'une ombre franche :
     une ombre discrete la laisserait flotter sans qu'on sache a quelle
     distance. */
  box-shadow: 0 0.75rem 2rem rgba(20, 16, 10, .22);

  animation: pose-monte .28s cubic-bezier(.22, .68, .3, 1) both;
}

.pose__ico { flex: none; display: flex; color: var(--accent); }
.pose__ico svg { width: 1.5rem; height: 1.5rem; }

.pose__texte { flex: 1; min-width: 0; }
.pose__texte strong { display: block; font-size: 0.9375rem; }
.pose__texte span {
  display: block; margin-top: .125rem;
  font-size: 0.8125rem; line-height: 1.45; color: var(--text-2);
}
/* L'icone de partage, dessinee au milieu de la phrase : l'utilisateur
   cherche un dessin dans sa barre, pas un mot. */
.pose__texte svg {
  width: 1rem; height: 1rem;
  vertical-align: -.2rem; margin: 0 .1rem;
}

.pose__actes { flex: none; display: flex; gap: .5rem; }

.pose__oui, .pose__non {
  padding: .5rem .875rem;
  font: inherit; font-size: .875rem; font-weight: 600;
  border-radius: var(--r); cursor: pointer;
  white-space: nowrap;
}
.pose__oui {
  color: var(--accent-ink); background: var(--accent);
  border: 1px solid var(--accent);
}
.pose__non {
  color: var(--text-2); background: transparent;
  border: 1px solid var(--border);
}
.pose__non:hover { color: var(--text); border-color: var(--border-strong); }

/* Le mode d'emploi d'iOS tient en une phrase et n'a qu'un bouton : le
   texte peut alors prendre toute la largeur. */
.pose--mode-emploi { align-items: flex-start; }
.pose--mode-emploi .pose__actes { align-self: flex-end; }

@keyframes pose-monte {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: none; }
}

/* Un ecran etroit ne tient pas trois colonnes : les boutons passent
   dessous, et gardent une cible confortable. */
@media (max-width: 28rem) {
  .pose { flex-wrap: wrap; }
  .pose__texte { flex: 1 1 calc(100% - 2.25rem); }
  .pose__actes { flex: 1 1 100%; }
  .pose__oui, .pose__non { flex: 1; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pose { animation: none; }
}