/* Amselya — Jeu des mots : barre « hors ligne / installer », panneau des
   catégories téléchargées, guide iPhone (assets/js/jeu-pwa.js). */
.jpwa {
  box-sizing: border-box; max-width: 56rem; margin: 0 auto .45rem;
  display: flex; align-items: center; gap: .45rem; padding: .35rem .4rem .35rem .75rem;
  border-radius: 14px; background: #1F7A3D; color: #fff;
  box-shadow: 0 8px 18px -12px rgba(0,0,0,.55);
}
.jpwa.est-hors-ligne { background: #9A3A08; }
.jpwa__texte { flex: 1; min-width: 0; margin: 0; font-size: .8rem; font-weight: 700; line-height: 1.3; }
.jpwa__hl, .jpwa__installer {
  flex: none; min-height: 2.2rem; padding: 0 .85rem; border: 0; border-radius: 999px;
  font: inherit; font-size: .86rem; font-weight: 900; cursor: pointer; white-space: nowrap;
}
.jpwa__hl { background: #fff; color: #1B2A22; }
.jpwa__installer { background: #F2B705; color: #1B2A22; }
.jpwa__fermer {
  flex: none; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: #fff; font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; opacity: .85;
}
.jpwa__fermer:hover, .jpwa__fermer:focus-visible { background: rgba(255,255,255,.18); opacity: 1; }
/* Replié : il ne reste que les boutons, à droite. */
.jpwa.est-compact { width: max-content; margin-inline: auto 0; padding: .25rem; background: transparent; box-shadow: none; }
.jpwa.est-compact .jpwa__texte { display: none; }
.jpwa.est-compact .jpwa__fermer { color: #1B2A22; }
.jpwa [hidden] { display: none !important; }
/* Téléphone : le texte au-dessus, les boutons en dessous. */
@media (max-width: 640px) {
  .jpwa:not(.est-compact) { flex-wrap: wrap; row-gap: .4rem; padding: .5rem .5rem .45rem .75rem; }
  /* Texte et × sur la première ligne, boutons dessous. */
  .jpwa:not(.est-compact) .jpwa__texte { flex: 1 1 calc(100% - 2.6rem); order: 0; }
  .jpwa:not(.est-compact) .jpwa__fermer { order: 1; align-self: flex-start; }
  .jpwa:not(.est-compact) .jpwa__hl, .jpwa:not(.est-compact) .jpwa__installer { order: 2; }
  .jpwa__hl, .jpwa__installer { padding: 0 .6rem; font-size: .78rem; }
}

.jpwa-fond {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; justify-content: center;
  padding: 1rem; background: rgba(27,42,34,.55);
}
.jpwa-carte {
  width: min(100%, 30rem); max-height: calc(100dvh - 2rem); overflow-y: auto; display: flex; flex-direction: column; gap: .7rem;
  padding: 1.2rem 1.1rem 1rem; border-radius: 18px; background: #FFFDF8; border: 3px solid #F2B705;
  box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); color: #1B2A22;
}
.jpwa-carte__titre { margin: 0; font-size: 1.2rem; font-weight: 900; }
.jpwa-carte__etapes { margin: 0; padding-inline-start: 1.3rem; display: flex; flex-direction: column; gap: .45rem; font-weight: 700; line-height: 1.4; }
.jpwa-carte__txt { margin: 0; font-weight: 700; line-height: 1.45; font-size: .92rem; }
.jpwa-carte__ok { align-self: stretch; min-height: 2.8rem; }

/* Panneau « Jouer hors ligne » */
.jpwa-hl { display: flex; flex-direction: column; gap: .55rem; }
.jpwa-hl__note { margin: 0; padding: .4rem .6rem; border-radius: 10px; background: #FFF4D1; font-size: .82rem; font-weight: 700; color: #6B5A3C; }
.jpwa-hl__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.jpwa-hl__vide { font-weight: 700; color: #6B5A3C; }
.jpwa-hl__cat { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .6rem; padding: .45rem .55rem; border-radius: 12px; background: #fff; border: 2px solid #EADFC8; }
.jpwa-hl__cat.est-pret { border-color: #2EB872; background: #F1FBF4; }
.jpwa-hl__nom { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.jpwa-hl__icone { font-size: 1.4rem; line-height: 1; }
.jpwa-hl__textes { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.jpwa-hl__textes strong { font-weight: 900; }
.jpwa-hl__textes small { font-size: .76rem; font-weight: 700; color: #6B5A3C; }
.jpwa-hl__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-inline-start: auto; }
.jpwa-hl__btn { min-height: 2.1rem; padding: 0 .75rem; border: 2px solid #D4BC8C; border-radius: 999px; background: #fff; color: #1B2A22; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
.jpwa-hl__btn--principal { background: #1F7A3D; border-color: #1F7A3D; color: #fff; }
.jpwa-hl__btn--suppr { color: #B4321F; }
.jpwa-hl__pret { font-size: .8rem; font-weight: 800; color: #0B5A33; }
.jpwa-hl__prog { font-size: .82rem; font-weight: 800; color: #1565A8; }
.jpwa-hl__erreur { flex-basis: 100%; font-size: .8rem; font-weight: 800; color: #D4342A; }
.jpwa-hl__place { margin: 0; font-size: .76rem; font-weight: 700; color: #6B5A3C; text-align: center; }
.jpwa-hl__place:empty { display: none; }

@media (min-width: 641px) {
  .jpwa { padding-inline-start: .95rem; }
  .jpwa__texte { font-size: .88rem; }
  .jpwa-fond { align-items: center; }
}
/* Écrans bas : la barre se fait discrète pour laisser la place au jeu. */
@media (max-height: 640px) { .jpwa__texte { display: none; } .jpwa { justify-content: flex-end; } }

/* Connexion dans le jeu (application installée) */
.jpwa-cx { display: flex; flex-direction: column; gap: .6rem; }
.jpwa-cx__champ { display: flex; flex-direction: column; gap: .25rem; font-weight: 800; font-size: .9rem; }
.jpwa-cx__champ input {
  box-sizing: border-box; width: 100%; min-height: 2.9rem; padding: 0 .8rem; border: 2px solid #D4BC8C; border-radius: 12px;
  background: #fff; color: #1B2A22; font: inherit; font-size: 1rem; font-weight: 600;
}
.jpwa-cx__champ input:focus-visible { outline: 3px solid #1F7A3D; outline-offset: 1px; border-color: #1F7A3D; }
.jpwa-cx__erreur { margin: 0; font-size: .85rem; font-weight: 800; color: #D4342A; }
.jpwa-cx__erreur:empty { display: none; }
.jpwa-cx__ok { min-height: 3rem; font-size: 1rem; }
.jpwa-cx__ok:disabled { opacity: .6; cursor: default; }
.jpwa-cx__liens { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; font-size: .85rem; font-weight: 700; }
.jpwa-cx__liens a { color: #1565A8; }
.jpwa-cx + .jpwa-carte__ok { background: #fff; border: 2px solid #D4BC8C; min-height: 2.6rem; }

.jpwa-cx__google {
  display: flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: 0 1rem;
  border: 2px solid #C9D0D8; border-radius: 999px; background: #fff; color: #1B2A22 !important;
  font-weight: 900; font-size: 1rem; text-decoration: none;
}
.jpwa-cx__google:hover, .jpwa-cx__google:focus-visible { border-color: #1565A8; }
.jpwa-cx__g { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #4285F4; color: #fff; font-weight: 900; font-size: .95rem; line-height: 1; }
.jpwa-cx__ou { margin: .1rem 0 -.1rem; text-align: center; font-size: .8rem; font-weight: 800; color: #6B5A3C; }
.jpwa-cx__succes { margin: 0; padding: .6rem .7rem; border-radius: 12px; background: #F1FBF4; border: 2px solid #2EB872; font-weight: 700; line-height: 1.45; color: #0B5A33; }
.jpwa-cx__aide { font-size: .78rem; font-weight: 700; color: #6B5A3C; }
.jpwa-cx__piege { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.jpwa-cx__case { display: flex; align-items: flex-start; gap: .5rem; font-size: .85rem; font-weight: 700; line-height: 1.4; cursor: pointer; }
.jpwa-cx__case input { flex: none; width: 1.2rem; height: 1.2rem; margin: .1rem 0 0; accent-color: #1F7A3D; }
.jpwa-cx__case a { color: #1565A8; }
.jpwa-cx__choix { display: flex; flex-wrap: wrap; gap: .4rem; }
.jpwa-cx__choix:empty { display: none; }
.jpwa[hidden] { display: none !important; }
/* Bouton « Installer » mis en avant (arrivée depuis le menu du site). */
.jpwa__installer.est-appel { animation: jpwa-appel 1.2s ease-in-out 3; box-shadow: 0 0 0 3px #fff; }
@keyframes jpwa-appel { 50% { transform: scale(1.07); box-shadow: 0 0 0 6px rgba(255,255,255,.6); } }
@media (prefers-reduced-motion: reduce) { .jpwa__installer.est-appel { animation: none; } }