/* =====================================================================
   GRAND-PLACE — Bloc « Télécharger l'application »
   ---------------------------------------------------------------------
   Chargé uniquement par la page d'accueil. Reprend les variables de
   app.css : le jour où la charte change, ce bloc suit.

   Le bouton est volontairement le plus visible de la page. Il respire,
   il brille, et une onde le traverse — mais rien ne le DÉPLACE : un
   bouton qui bouge se rate au doigt sur un petit écran, et c'est la
   première chose qu'on apprend en concevant pour le mobile.
   ===================================================================== */

.gp-install {
  position: relative;
  margin: 1rem 0;
  padding: 1.5rem 1.1rem 1.4rem;
  border-radius: var(--radius, 16px);
  text-align: center;
  overflow: hidden;
  border: 1px solid rgba(154, 85, 232, .38);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(106, 13, 173, .34), transparent 62%),
    linear-gradient(160deg, rgba(154, 85, 232, .12), rgba(0, 245, 160, .07)),
    var(--surface, #1B1B1F);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

/* L'icône de l'application, redessinée en CSS : le visiteur voit
   exactement ce qui va apparaître sur son téléphone. */
.gp-install-icone {
  width: 74px; height: 74px; margin: 0 auto .9rem;
  border-radius: 20px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, #8A2BE2, #4A0878);
  box-shadow: 0 8px 24px rgba(106, 13, 173, .5), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.gp-install-icone span {
  position: relative;
  font-size: 1.5rem; font-weight: 800; color: #FFFFFF; letter-spacing: .01em;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.gp-install-icone span::after {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: -7px;
  height: 3.5px; border-radius: 2px; background: #00F5A0;
}

.gp-install h2 {
  font-size: 1.12rem; margin: 0 0 .35rem;
}
.gp-install-sub {
  font-size: .86rem; line-height: 1.55; color: var(--text-dim, #A8A4B8);
  margin: 0 auto 1.1rem; max-width: 30rem;
}

/* ---------------------------- Le bouton ---------------------------- */
.gp-btn-install {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  width: 100%; max-width: 24rem;
  padding: 1.05rem 1.2rem;
  border: none; border-radius: 999px;
  /* Le libellé est long : on le fait tenir sur UNE ligne quelle que soit
     la largeur de l'écran, plutôt que de le laisser se couper en deux —
     un bouton d'appel se lit d'un seul coup d'œil. */
  font-size: clamp(.85rem, 3.6vw, 1.02rem);
  white-space: nowrap;
  font-weight: 800; letter-spacing: .02em;
  color: #FFFFFF; cursor: pointer;
  background: linear-gradient(135deg, #9A55E8 0%, #6A0DAD 55%, #7F2BD1 100%);
  box-shadow: 0 8px 24px rgba(106, 13, 173, .55);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  animation: gp-respire 2.1s ease-in-out infinite;
}
.gp-btn-install:active { transform: scale(.975); }
.gp-btn-install[disabled] { opacity: .6; animation: none; }

.gp-btn-install svg { flex: 0 0 auto; }

/* La respiration : uniquement de la lumière, jamais de déplacement. */
@keyframes gp-respire {
  0%, 100% { box-shadow: 0 8px 24px rgba(106, 13, 173, .50), 0 0 0 0 rgba(154, 85, 232, .55); }
  50%      { box-shadow: 0 8px 30px rgba(106, 13, 173, .70), 0 0 0 12px rgba(154, 85, 232, 0); }
}

/* L'onde qui traverse le bouton, pour attirer l'œil sans agiter la page. */
.gp-btn-install::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent);
  transform: skewX(-18deg);
  animation: gp-onde 3.4s ease-in-out infinite;
}
@keyframes gp-onde {
  0%, 55% { left: -60%; }
  100%    { left: 130%; }
}

/* La flèche descend doucement : elle dit « télécharger » sans un mot. */
.gp-btn-install .gp-fleche { animation: gp-descend 2.1s ease-in-out infinite; }
@keyframes gp-descend {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

.gp-detect {
  margin: .7rem 0 0;
  font-size: .74rem; color: var(--text-faint, #6F6B80);
}

/* Quand l'installation directe est possible, on le dit. */
.gp-install.gp-direct .gp-detect::before {
  content: '';
  display: inline-block; width: 7px; height: 7px; margin-right: .4rem;
  border-radius: 50%; background: #00F5A0;
  box-shadow: 0 0 7px #00F5A0;
  vertical-align: middle;
}

/* ------------------------- Les avantages --------------------------- */
.gp-atouts {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .5rem;
}
.gp-atouts li {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .34rem .66rem;
  font-size: .73rem; color: var(--text-dim, #A8A4B8);
  border: 1px solid var(--line, #2E2E36); border-radius: 999px;
  background: rgba(255, 255, 255, .035);
}
.gp-atouts li::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: #00F5A0; flex: 0 0 5px;
}

/* --------------------- État « déjà installée » --------------------- */
.gp-install.gp-ok {
  border-color: rgba(0, 245, 160, .45);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(0, 168, 107, .28), transparent 62%),
    var(--surface, #1B1B1F);
}
.gp-install.gp-ok h2 { color: #00F5A0; }

/* --------------------------- La fenêtre ---------------------------- */
.gp-modal-fond {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: end center;
  background: rgba(0, 0, 0, .62);
  opacity: 0; transition: opacity .22s ease;
  padding: 0;
}
.gp-modal-fond.ouvert { opacity: 1; }

.gp-modal {
  position: relative;
  width: 100%; max-width: 32rem;
  max-height: 92dvh; overflow-y: auto;
  padding: 1.5rem 1.2rem calc(1.3rem + env(safe-area-inset-bottom));
  border-radius: 22px 22px 0 0;
  background: var(--surface, #1B1B1F);
  border: 1px solid var(--line, #2E2E36); border-bottom: none;
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .6);
  transform: translateY(18px);
  transition: transform .26s cubic-bezier(.22, .61, .36, 1);
  text-align: center;
}
.gp-modal-fond.ouvert .gp-modal { transform: translateY(0); }

@media (min-width: 640px) {
  .gp-modal-fond { place-items: center; padding: 1.4rem; }
  .gp-modal { border-radius: 22px; border-bottom: 1px solid var(--line, #2E2E36); }
}

.gp-modal-fermer {
  position: absolute; top: .5rem; right: .7rem;
  background: none; border: none; cursor: pointer;
  font-size: 1.7rem; line-height: 1; color: var(--text-faint, #6F6B80);
}
.gp-modal-icone {
  width: 58px; height: 58px; margin: 0 auto .8rem;
  border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(160deg, #8A2BE2, #4A0878);
  box-shadow: 0 6px 18px rgba(106, 13, 173, .45);
}
.gp-modal-icone span {
  position: relative; font-size: 1.15rem; font-weight: 800; color: #fff;
}
.gp-modal-icone span::after {
  content: ''; position: absolute; left: 14%; right: 14%; bottom: -5px;
  height: 3px; border-radius: 2px; background: #00F5A0;
}
.gp-modal h3 { font-size: 1.05rem; margin: 0 0 .45rem; }
.gp-modal-chapeau {
  font-size: .84rem; line-height: 1.6; color: var(--text-dim, #A8A4B8);
  margin: 0 0 1.1rem;
}
.gp-modal-note {
  font-size: .76rem; line-height: 1.55; color: var(--text-faint, #6F6B80);
  margin: 1rem 0 0; text-align: left;
}

/* ---------------------------- Les étapes --------------------------- */
.gp-etapes { list-style: none; margin: 0; padding: 0; text-align: left; }
.gp-etape {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .7rem .75rem;
  border: 1px solid var(--line, #2E2E36); border-radius: 14px;
  background: var(--surface-2, #232329);
  margin-bottom: .5rem;
}
.gp-etape-n {
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8rem; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, #9A55E8, #6A0DAD);
}
.gp-etape-txt { flex: 1; min-width: 0; font-size: .84rem; line-height: 1.45; }
.gp-etape-txt b { display: block; color: var(--text, #F4F2F8); }
.gp-etape-txt span {
  display: block; margin-top: .12rem;
  font-size: .76rem; color: var(--text-faint, #6F6B80);
}
.gp-etape-ico {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 10px;
  color: #4DA3FF;                       /* le bleu des icônes d'iOS */
  background: rgba(77, 163, 255, .12);
  border: 1px solid rgba(77, 163, 255, .3);
}

.gp-modal-ok {
  width: 100%; margin-top: 1.1rem;
  padding: .9rem 1.2rem; border: none; border-radius: 999px;
  font-size: .95rem; font-weight: 700; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #7F2BD1, #6A0DAD);
}
.gp-modal-ok:active { transform: scale(.98); }

/* ------------------------------ Confort ---------------------------- */
/* Le mouvement est un agrément, jamais une information : on peut donc
   tout couper sans rien perdre. */
@media (prefers-reduced-motion: reduce) {
  .gp-btn-install,
  .gp-btn-install::after,
  .gp-btn-install .gp-fleche { animation: none; }
  .gp-btn-install::after { display: none; }
  .gp-modal, .gp-modal-fond { transition: none; }
}

/* Thème clair du site : le bloc reste lisible sans devenir criard. */
[data-theme="light"] .gp-install {
  border-color: rgba(106, 13, 173, .28);
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(106, 13, 173, .14), transparent 62%),
    linear-gradient(160deg, rgba(106, 13, 173, .07), rgba(0, 168, 107, .05)),
    var(--surface, #FFFFFF);
  box-shadow: 0 8px 24px rgba(106, 13, 173, .12);
}
[data-theme="light"] .gp-install.gp-ok h2 { color: #0A7A52; }
[data-theme="light"] .gp-atouts li { background: rgba(0, 0, 0, .02); }