/* Page de téléchargement (/download/…), version soignée. Le composant React n'a presque que des styles
   en ligne : on le cible par sa structure (le conteneur w-[580px] n'existe que sur cette page) et on
   passe par !important. Chargé après wk-site.css (lien séparé dans index.html). */

/* Fond de page : lueurs bleues + fine grille */
html body #root .min-h-screen:has(> .w-\[580px\]) {
  background:
    radial-gradient(700px 420px at 50% 35%, rgba(47, 134, 255, .16), transparent 70%),
    radial-gradient(600px 400px at 85% 90%, rgba(88, 101, 242, .10), transparent 70%),
    linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 44px 44px,
    #0b0d13 !important;
}
html body #root .min-h-screen:has(> .w-\[580px\]) > .absolute.inset-0 { display: none; }

/* Bouton retour */
html body #root .min-h-screen:has(> .w-\[580px\]) > button.absolute {
  padding: 9px 14px !important;
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .04) !important;
  border: 1px solid rgba(255, 255, 255, .09) !important;
  color: #b8bdcb !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: color .15s, border-color .15s, background-color .15s;
}
html body #root .min-h-screen:has(> .w-\[580px\]) > button.absolute:hover {
  color: #fff !important;
  border-color: rgba(80, 140, 255, .45) !important;
  background: rgba(47, 134, 255, .12) !important;
}

/* Carte */
html body #root .w-\[580px\] > .rounded-3xl {
  position: relative;
  background: linear-gradient(180deg, #151821, #0f1117) !important;
  border: 1px solid rgba(80, 140, 255, .24) !important;
  border-radius: 22px !important;
  box-shadow: 0 50px 120px -24px rgba(0, 0, 0, .85), 0 0 90px -30px rgba(47, 134, 255, .5), 0 1px 0 rgba(255, 255, 255, .06) inset !important;
}
html body #root .w-\[580px\] > .rounded-3xl::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(130, 185, 255, .95), transparent);
}

/* Visuel */
html body #root .w-\[580px\] > .rounded-3xl > .h-36 { height: 190px !important; }
html body #root .w-\[580px\] > .rounded-3xl > .h-36 img { opacity: 1 !important; filter: saturate(1.1); }
html body #root .w-\[580px\] > .rounded-3xl > .h-36 > .absolute {
  background: linear-gradient(to bottom, rgba(15, 17, 23, 0) 30%, rgba(15, 17, 23, .7) 70%, #12141c) !important;
}

/* En-tête : icône, nom, badges */
html body #root .w-\[580px\] .px-7.pt-7.pb-5 { position: relative; margin-top: -34px; padding-top: 0 !important; }
html body #root .w-\[580px\] .px-7.pt-7.pb-5 .w-14.h-14 {
  width: 64px !important;
  height: 64px !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg, #3b92ff, #1c5fe0) !important;
  box-shadow: 0 0 0 4px #12141c, 0 14px 34px -6px rgba(47, 134, 255, .8) !important;
}
html body #root .w-\[580px\] .px-7.pt-7.pb-5 .min-w-0.flex-1 { padding-top: 36px; }
html body #root .w-\[580px\] .px-7.pt-7.pb-5 .min-w-0.flex-1 > p:first-child { color: #6fa8ff !important; letter-spacing: .14em !important; }
html body #root .w-\[580px\] .px-7.pt-7.pb-5 .text-base.font-black { font-size: 17px !important; letter-spacing: -.01em; }
html body #root .w-\[580px\] .px-7.pt-7.pb-5 .text-base + span {
  border-radius: 7px !important;
  background: rgba(47, 134, 255, .16) !important;
  border-color: rgba(80, 140, 255, .4) !important;
  color: #b9d3ff !important;
}
html body #root .w-\[580px\] .px-7.pt-7.pb-5 .min-w-0.flex-1 > p:last-child {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px !important;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  color: #c4c9d6 !important;
  font-size: 11.5px !important;
}
html body #root .w-\[580px\] .px-7.pt-7.pb-5 .min-w-0.flex-1 > p:last-child::before {
  content: "";
  width: 13px;
  height: 13px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236fa8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8v13H3V8'/%3E%3Cpath d='M1 3h22v5H1z'/%3E%3Cpath d='M10 12h4'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body #root .w-\[580px\] .px-7.pt-7.pb-5 .items-end { padding-top: 36px; gap: 7px !important; }
html body #root .w-\[580px\] .px-7.pt-7.pb-5 .items-end > div {
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 10.5px !important;
  letter-spacing: .02em;
}

/* Séparateurs */
html body #root .w-\[580px\] > .rounded-3xl > div[style*="height: 1px"] {
  margin: 0 28px;
  background: linear-gradient(90deg, transparent, rgba(120, 170, 255, .22), transparent) !important;
}

/* Statut (« Vérification du lien… », « Ready in 3s… ») */
html body #root .w-\[580px\] .px-7.py-6 .space-y-5 > .text-\[11px\] {
  width: fit-content;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .07);
  color: #c9cedb !important;
  font-size: 11.5px !important;
}
html body #root .w-\[580px\] .px-7.py-6 .space-y-5 > .text-\[11px\] > span:first-child { box-shadow: 0 0 10px currentColor, 0 0 8px rgba(251, 191, 36, .8); }

/* Bouton principal */
html body #root .w-\[580px\] .px-7.py-6 button.w-full {
  position: relative;
  overflow: hidden;
  height: 58px;
  border-radius: 16px !important;
  font-size: 15px !important;
  letter-spacing: .01em;
  transition: box-shadow .2s, filter .2s;
}
html body #root .w-\[580px\] .px-7.py-6 button.w-full:not(:disabled):hover { filter: brightness(1.08); }
/* Prêt : dégradé bleu + reflet */
html body #root .w-\[580px\] .px-7.py-6 button.w-full:not(:disabled)[style*="58, 116, 194"] {
  background: linear-gradient(135deg, #3b92ff, #1c5fe0) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 16px 40px -10px rgba(47, 134, 255, .85) !important;
}
html body #root .w-\[580px\] .px-7.py-6 button.w-full:not(:disabled)[style*="58, 116, 194"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .3), transparent);
  animation: wkDlShine 2.8s ease-in-out infinite;
}
@keyframes wkDlShine { 0%, 50% { left: -40%; } 100% { left: 130%; } }
/* Attente (« Patientez 3s… ») : rayures bleues qui défilent */
html body #root .w-\[580px\] .px-7.py-6 button.w-full:disabled {
  background:
    repeating-linear-gradient(115deg, rgba(47, 134, 255, .16) 0 14px, rgba(47, 134, 255, .06) 14px 28px) 0 0 / 60px 100%,
    #161a24 !important;
  border: 1px solid rgba(80, 140, 255, .3) !important;
  color: #cfe0ff !important;
  opacity: 1 !important;
  animation: wkDlWait 1s linear infinite;
}
@keyframes wkDlWait { to { background-position: 60px 0, 0 0; } }

/* Pied */
html body #root .w-\[580px\] .px-7.py-3\.5 p { color: #5d6476 !important; letter-spacing: .14em !important; }
html body #root .w-\[580px\] .px-7.py-3\.5::after {
  content: "Transfert sécurisé";
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 18px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234ade80' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") left center / 12px no-repeat;
  color: #6b7285;
  font: 600 10.5px/1 Inter, system-ui, sans-serif;
}

@media (max-width: 640px) {
  html body #root .w-\[580px\] .px-7.pt-7.pb-5 .items-end { display: none !important; }
  html body #root .w-\[580px\] > .rounded-3xl > .h-36 { height: 150px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body #root .w-\[580px\] .px-7.py-6 button.w-full,
  html body #root .w-\[580px\] .px-7.py-6 button.w-full::after { animation: none !important; }
}