/*
 * Pages Connexion / Inscription / « Dernière étape » / inscription PlayStation (inscription en 1 clic, 26/10/2026).
 * Reprise de la maquette validée par Ben (_tools/maquette_connexion_inscription.php, supprimée le 27/10 : historique git), plan _doc/inscription_rapide/00_PLAN.md D9.
 * Chargée par views/partial/header.php sur ces pages seulement (?v=_VERSION_).
 */
/* Carte unique : panneau sombre (envie) + panneau blanc (action) */
.vxa { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "form" "perks"; border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px rgba(15, 15, 35, 0.18); margin: 10px 0 0; background: #fff; }
/* espace sous la carte DANS le bloc blanc (une marge sortait du bloc et laissait voir le fond noir) */
.vxa-page { padding-top: 20px; padding-bottom: 40px; }
@media (min-width: 992px) {
    .vxa { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "hero form" "perks form"; grid-template-rows: auto 1fr; }
}
.vxa > * { min-width: 0; } /* la frise (très large) ne doit pas élargir la colonne */
.vxa-hero, .vxa-perks { background: #13132e; color: #fff; }
.vxa-hero { background: radial-gradient(circle at 0 0, rgba(90, 90, 200, 0.28), transparent 65%), #13132e; }
.vxa-hero { grid-area: hero; padding: 28px 22px 18px; }
.vxa-perks { grid-area: perks; padding: 6px 22px 22px; display: flex; flex-direction: column; }
.vxa-form { grid-area: form; padding: 26px 20px 30px; }
@media (min-width: 992px) {
    .vxa-hero { padding: 48px 46px 10px; }
    .vxa-perks { padding: 10px 46px 34px; }
    .vxa-form { padding: 48px 52px; display: flex; flex-direction: column; justify-content: flex-start; } /* en haut : les onglets restent à la même place d'une page à l'autre */
}

/* Accroche */
.vxa-kicker { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #aab4d4; margin-bottom: 14px; }
.vxa-title { font-weight: 900; color: #fff; line-height: 1.08; font-size: 2rem; margin: 0 0 12px; letter-spacing: -0.5px; }
.vxa-title span { display: block; }
.vxa-title .vxa-sub { font-size: 1.15rem; font-weight: 700; line-height: 1.35; color: #dfe4f5; margin-top: 10px; letter-spacing: 0; }
.vxa-title em { font-style: normal; color: #F2E70D; }
@media (min-width: 992px) {
    .vxa-title { font-size: 3rem; }
    .vxa-title .vxa-sub { font-size: 1.35rem; }
}
/* mobile : l'accroche n'est qu'une bande de réassurance, le formulaire passe tout de suite */
@media (max-width: 991px) {
    .vxa-hero { padding: 12px 18px; }
    .vxa-kicker { display: none; }
    .vxa-title { font-size: 1.05rem; margin: 0; letter-spacing: 0; }
    .vxa-title .vxa-sub { font-size: 0.8rem; margin-top: 2px; font-weight: 600; }
    .vxa-form { padding-top: 20px; }
    .vxa-row-between { flex-wrap: wrap; font-size: 0.8rem; }
}
.vxa-lead { color: #aab4d4; font-size: 0.95rem; margin: 0; }

/* 4 avantages */
.vxa-list { list-style: none; padding: 0; margin: 18px 0 22px; }
.vxa-list li { display: flex; gap: 14px; align-items: flex-start; padding: 9px 0; }
.vxa-ico { flex: 0 0 38px; height: 38px; border-radius: 10px; background: rgba(242, 231, 13, 0.12); color: #F2E70D; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.vxa-list strong { display: block; color: #fff; font-size: 0.98rem; }
.vxa-list small { color: #aab4d4; font-size: 0.84rem; line-height: 1.35; display: block; }
@media (max-width: 991px) {
    .vxa-list { margin: 14px 0 16px; }
    .vxa-list li { align-items: center; gap: 12px; padding: 5px 0; }
    .vxa-list small { display: none; }
    .vxa-ico { flex-basis: 30px; height: 30px; font-size: 0.85rem; border-radius: 8px; }
}

/* Aperçu « J'y ai joué » (exemple figé) : carte blanche légèrement inclinée, comme une capture du site */
.vxa-demo { background: #fff; border-radius: 12px; padding: 12px 14px 6px; margin: 4px 0 24px; transform: rotate(-1.5deg); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35); color: #111; }
.vxa-demo-head { display: flex; align-items: center; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid #eef0f3; font-size: 0.85rem; }
.vxa-demo-head b { flex: 1; }
.vxa-demo-head b i { color: #111; }
.vxa-demo-src { display: inline-flex; gap: 6px; color: #9ca3af; font-size: 0.9rem; }
.vxa-demo-tag { background: #F2E70D; color: #111; font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 20px; padding: 2px 8px; }
.vxa-demo-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 62px 74px; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f3f4f6; }
.vxa-demo-row:last-child { border-bottom: 0; }
.vxa-demo-row img { width: 34px; height: 46px; object-fit: cover; border-radius: 4px; background: #e5e7eb; }
.vxa-demo-name b { display: block; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vxa-demo-name span { font-size: 0.72rem; font-weight: 600; }
.c-xbox-txt { color: #107C10; } .c-psn-txt { color: #00439c; } .c-steam-txt { color: #1b2838; }
.vxa-demo-time { font-size: 0.74rem; color: #374151; white-space: nowrap; }
.vxa-demo-prog span { display: block; font-size: 0.72rem; font-weight: 800; text-align: center; }
.vxa-demo-prog i { display: block; height: 5px; background: #e5e7eb; border-radius: 3px; overflow: hidden; margin-top: 3px; }
.vxa-demo-prog em { display: block; height: 100%; background: #1358c9; }
.vxa-demo-prog.full em { background: #16a34a; }
.vxa-demo-prog.full span { color: #16a34a; }
.vxa-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-size: 0.64rem; font-weight: 800; border-radius: 20px; padding: 1px 7px; vertical-align: 1px; white-space: nowrap; }
.vxa-badge-plat { background: linear-gradient(135deg, #e8eef5, #a9b8c9); color: #1f2d3d; border: 1px solid #93a4b8; }
.vxa-badge-plat i { color: #4b6584; }
.vxa-st-done { background: #16a34a; color: #fff; }
.vxa-st-pause { background: #17a2b8; color: #fff; }
.vxa-st-play { background: #1358c9; color: #fff; }

/* Logos des marques, en blanc ; chacun s'allume en jaune à son tour (coupé si l'utilisateur réduit les animations) */
.vxa-brands-label { margin-top: auto; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.7rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #7d86a8; margin-bottom: 14px; }
.vxa-brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 14px; }
.vxa-brand { color: rgba(255, 255, 255, 0.55); display: inline-flex; animation: vxaGlow 14s infinite; }
.vxa-brand svg { width: auto; display: block; fill: currentColor; }
.vxa-brand:nth-child(2) { animation-delay: 2s; } .vxa-brand:nth-child(3) { animation-delay: 4s; } .vxa-brand:nth-child(4) { animation-delay: 6s; }
.vxa-brand:nth-child(5) { animation-delay: 8s; } .vxa-brand:nth-child(6) { animation-delay: 10s; } .vxa-brand:nth-child(7) { animation-delay: 12s; }
@keyframes vxaGlow { 0%, 12% { color: #F2E70D; } 16%, 100% { color: rgba(255, 255, 255, 0.55); } }
@media (prefers-reduced-motion: reduce) { .vxa-brand { animation: none; } }
@media (max-width: 575px) { .vxa-brands { justify-content: center; gap: 18px 26px; } }

/* Panneau formulaire */
.vxa-h1 { font-weight: 900; font-size: 1.6rem; color: #0f0f23; margin: 0 0 4px; letter-spacing: -0.3px; }
.vxa-h1-sub { color: #6b7280; font-size: 0.92rem; margin-bottom: 22px; }
/* Onglets Se connecter | Créer un compte : même taille, l'onglet courant en bleu nuit */
.vxa-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #f1f2f5; border-radius: 12px; padding: 4px; margin-bottom: 24px; }
.vxa-tabs a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 8px; border-radius: 9px; font-weight: 800; font-size: 0.95rem; color: #4b5563; text-decoration: none !important; transition: background 0.15s, color 0.15s; }
.vxa-tabs a:hover { background: #e4e6eb; color: #111; }
.vxa-tabs a.on, .vxa-tabs a.on:hover { background: #13132e; color: #fff; box-shadow: 0 4px 12px rgba(19, 19, 46, 0.25); cursor: default; }
.vxa-tabs a.on i { color: #F2E70D; }
.vxa-tabs a { white-space: nowrap; }
@media (max-width: 400px) { .vxa-tabs a { font-size: 0.86rem; gap: 6px; padding: 10px 4px; } }
/* le titre de la page est porté par l'onglet actif (h1 masqué gardé pour le SEO / lecteurs d'écran) */
.vxa-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.vxa-providers { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 576px) { .vxa-providers { grid-template-columns: 1fr 1fr; } .vxa-prov-full { grid-column: 1 / -1; } }
.vxa-prov { display: flex; align-items: center; gap: 10px; border-radius: 10px; padding: 11px 12px; text-decoration: none !important; border: 1px solid transparent; transition: transform 0.12s, box-shadow 0.12s, filter 0.12s; }
.vxa-prov:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14); filter: brightness(1.06); }
.vxa-prov-ico { flex: 0 0 26px; font-size: 1.45rem; line-height: 1; display: flex; justify-content: center; }
.vxa-prov-txt { line-height: 1.2; min-width: 0; }
.vxa-prov-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #6b7280; margin-bottom: 8px; }
.vxa-prov-txt b { display: block; font-size: 0.98rem; white-space: nowrap; }
.vxa-prov-txt small { display: block; font-size: 0.76rem; opacity: 0.92; white-space: nowrap; }
.vxa-prov-txt small b { display: inline; font-size: 0.76rem; font-weight: 800; }
/* couleur redonnée au survol : le site passe tous les liens en rouge (custom.css a:hover) */
.vxa-prov-xbox, .vxa-prov-xbox:hover { background: #107C10; color: #fff; }
.vxa-prov-psn, .vxa-prov-psn:hover { background: #00439c; color: #fff; }
.vxa-prov-steam, .vxa-prov-steam:hover { background: linear-gradient(135deg, #171a21, #1b2838); color: #fff; }
.vxa-prov-google, .vxa-prov-google:hover { background: #fff; color: #3c4043; border-color: #dadce0; }
.vxa-prov-google small { color: #5f6368; opacity: 1; }

/* « Aidez-moi à choisir » : fuchsia du site, allumé (dégradé du badge BETA) : tout le monde devrait comparer avant de choisir */
.vxa-choose-link { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, #ff5fb4, #e6007e 55%, #7b2ff7); border: 0; color: #fff; font-size: 0.9rem; font-weight: 700; text-decoration: none !important; transition: filter 0.15s, box-shadow 0.15s; }
.vxa-choose-link:hover { color: #fff; filter: brightness(1.08); box-shadow: 0 4px 14px rgba(230, 0, 126, 0.35); }
.vxa-choose-link i { font-size: 1rem; }

/* Popup « Lequel choisir ? » (fancybox du site) */
.vxa-choose { width: 100%; max-width: 860px; padding: 26px 24px; border-radius: 14px; }
@media (max-width: 767px) { .vxa-choose { padding: 20px 14px; } }
.vxa-cmp-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; margin-bottom: 10px; }
.vxa-cmp-card-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; color: #fff; }
.vxa-cmp-card-head b { flex: 1; font-size: 0.95rem; }
.vxa-cmp-card-ico { font-size: 1.15rem; display: inline-flex; }
.vxa-cmp-card { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
.vxa-cmp-card-chev { font-size: 0.85rem; opacity: 0.85; transition: transform 0.15s; }
.vxa-cmp-card.is-open .vxa-cmp-card-chev { transform: rotate(180deg); }
.vxa-cmp-card ul { display: none; }
.vxa-cmp-card.is-open ul { display: block; }
/* les 2 temps sur 2 lignes : libellé à gauche, valeur à droite */
.vxa-cmp-card-times { padding: 6px 12px 8px; }
.vxa-cmp-card-times > div { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; font-size: 0.86rem; color: #374151; }
.vxa-cmp-card-times b { color: #111; font-weight: 800; font-size: 0.9rem; }
.vxa-pill { display: inline-block; background: #F2E70D; color: #111 !important; font-weight: 800; border-radius: 20px; padding: 2px 11px; white-space: nowrap; }
.vxa-cmp-card-times > div > span { padding-right: 10px; }
.vxa-manual { display: block; font-size: 0.74rem; font-style: italic; color: #6b7280; line-height: 1.2; }
.vxa-cmp-card.is-open .vxa-cmp-card-times { border-bottom: 1px solid #f1f2f4; }
/* oui / non / sous condition : pastilles pleines, lisibles d'un coup d'œil */
.vxa-yes, .vxa-no { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; color: #fff; font-size: 0.8rem; flex: 0 0 24px; }
.vxa-yes { background: #16a34a; }
.vxa-no { background: #dc2626; }
.vxa-no-note { display: inline-flex; align-items: center; gap: 6px; color: #6b7280; font-size: 0.76rem; line-height: 1.2; text-align: left; }
.vxa-cond { display: inline-flex; align-items: center; gap: 6px; color: #6b7280; font-size: 0.76rem; font-weight: 400; line-height: 1.2; text-align: left; } /* même texte que .vxa-no-note : seule la pastille change de couleur (Ben 26/10) */
.vxa-cond i { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: 0 0 20px; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 0.65rem; }
.vxa-cmp-card li { align-items: center; }
.vxa-cmp tr.signup td { font-weight: 700; color: #374151; }
.vxa-cmp td small { display: block; font-size: 0.7rem; font-weight: 400; color: #6b7280; }
.vxa-cmp tr.time td.slow { color: #b45309; }
.vxa-cmp-card ul { list-style: none; margin: 0; padding: 4px 12px 6px; }
.vxa-cmp-card li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 0.84rem; border-bottom: 1px solid #f1f2f4; }
.vxa-cmp-card li:last-child { border-bottom: 0; }
.vxa-cmp-card li > span:first-child { color: #374151; }
.c-xbox { background: #107C10; } .c-psn { background: #00439c; } .c-steam { background: #1b2838; } .c-mail { background: #6b7280; }
.vxa-cmp-card .c-google { background: #fff; color: #3c4043; border-bottom: 1px solid #dadce0; }
.vxa-choose h3 { font-weight: 900; font-size: 1.35rem; margin: 0 0 4px; color: #0f0f23; }
.vxa-choose p { color: #6b7280; font-size: 0.9rem; margin-bottom: 16px; }
.vxa-cmp { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.86rem; table-layout: fixed; }
.vxa-cmp th:first-child { width: 20%; }
.vxa-cmp th, .vxa-cmp td { padding: 9px 10px; text-align: center; border-bottom: 1px solid #eef0f3; vertical-align: middle; }
.vxa-cmp th:first-child, .vxa-cmp td:first-child { text-align: left; color: #374151; font-weight: 600; white-space: nowrap; }
.vxa-cmp thead th { font-size: 0.82rem; font-weight: 800; color: #fff; border-bottom: 0; }
.vxa-cmp thead th:first-child { background: transparent; }
.vxa-cmp thead th i, .vxa-cmp thead th svg { display: block; margin: 0 auto 3px; font-size: 1.2rem; }
.vxa-cmp .c-xbox { background: #107C10; } .vxa-cmp .c-psn { background: #00439c; } .vxa-cmp .c-steam { background: #1b2838; }
.vxa-cmp .c-google { background: #fff; color: #3c4043; border: 1px solid #dadce0; } .vxa-cmp .c-mail { background: #6b7280; }
.vxa-cmp thead th:nth-child(2) { border-radius: 10px 0 0 0; } .vxa-cmp thead th:last-child { border-radius: 0 10px 0 0; }
.vxa-cmp .ok { color: #1e7d32; font-weight: 700; } .vxa-cmp .no { color: #c0c4cc; } .vxa-cmp .warn { color: #8a6d00; font-size: 0.78rem; line-height: 1.25; }
.vxa-cmp tr.time td { font-weight: 800; color: #0f0f23; background: #13132e; border-bottom: 0; padding: 14px 8px; vertical-align: top; } /* pastilles alignées sur la même ligne pour comparer (Ben 26/10) ; la note de Google / Email passe dessous */
.vxa-cmp tr.time td:first-child { color: #fff; white-space: normal; padding-top: 16px; }
.vxa-cmp tr.time td small { color: #aab4d4; margin-top: 4px; }
.vxa-cmp tr.time td:first-child { border-radius: 0 0 0 10px; } .vxa-cmp tr.time td:last-child { border-radius: 0 0 10px 0; }
.vxa-choose-note { font-size: 0.78rem; color: #6b7280; margin-top: 12px; }
/* encadré d'information (bleu du site, --ColorSecondary) */
.vxa-choose-tip { display: flex; gap: 10px; align-items: flex-start; background: #eaf2ff; border: 1px solid #c7dbfb; border-left: 4px solid #1358c9; color: #1e3a6b; border-radius: 10px; padding: 10px 12px; font-size: 0.85rem; line-height: 1.35; margin: 8px 0 16px; }
.vxa-choose-tip i { color: #1358c9; margin-top: 3px; }
.vxa-choose-tip b { color: #0f2d5c; }

.vxa-or { display: flex; align-items: center; gap: 12px; color: #9ca3af; font-size: 0.8rem; margin: 22px 0 16px; }
.vxa-or::before, .vxa-or::after { content: ""; flex: 1; height: 1px; background: #e5e7eb; }

.vxa-field { margin-bottom: 12px; }
.vxa-field label { font-size: 0.82rem; font-weight: 600; color: #374151; margin-bottom: 4px; display: block; }
.vxa-field .form-control { height: 44px; border-radius: 9px; border-color: #d1d5db; }
.vxa-field .form-control:focus { border-color: #1358c9; box-shadow: 0 0 0 4px rgba(19, 88, 201, .28); } /* halo bleu, comme sur le mur (Ben 27/10) */
/* l'œil est ajouté par js/global.js (input-group Bootstrap) : on l'habille seulement */
.vxa-pass .input-group .form-control { border-radius: 9px 0 0 9px; }
.vxa-pass .input-group .btn { border-radius: 0 9px 9px 0; border-color: #d1d5db; color: #6b7280; height: 44px; width: 48px; }
.vxa-pass .input-group .btn:hover { background: #f3f4f6; color: #111; }
.vxa-row-between { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 16px; font-size: 0.84rem; white-space: nowrap; }
.vxa-check { font-size: 0.82rem; color: #374151; margin-bottom: 8px; }
.vxa-check label { font-weight: 400; }

.vxa-cta { display: block; width: 100%; background: #F2E70D; color: #111; font-weight: 800; border: 0; border-radius: 10px; padding: 13px; font-size: 1rem; margin-top: 8px; transition: background 0.15s, transform 0.12s; }
.vxa-cta:hover { background: #111; color: #F2E70D; }
.vxa-switch { text-align: center; font-size: 0.9rem; color: #6b7280; margin-top: 18px; }
.vxa-switch a { font-weight: 700; color: #0f0f23; text-decoration: underline; }
.vxa-legal { font-size: 0.72rem; color: #9ca3af; text-align: center; margin-top: 12px; }

/* Écrans « Dernière étape » et PlayStation : l'identité reçue du fournisseur */
.vxa-who { display: flex; align-items: center; gap: 12px; background: #f6f7fb; border: 1px solid #e5e7eb; border-radius: 12px; padding: 10px 12px; margin-bottom: 18px; }
.vxa-who img, .vxa-who .vxa-who-ico { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; flex: 0 0 52px; }
.vxa-who .vxa-who-ico { display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; }
.vxa-who b { display: block; font-size: 1rem; color: #0f0f23; }
.vxa-who small { display: block; color: #6b7280; font-size: 0.8rem; }
.vxa-who a { margin-left: auto; font-size: 0.8rem; white-space: nowrap; }
.vxa-note { font-size: 0.78rem; color: #6b7280; margin-top: 10px; }
.vxa-mail-fixed { background: #f6f7fb; border: 1px solid #e5e7eb; border-radius: 9px; padding: 10px 12px; font-size: 0.9rem; color: #111; }
.vxa-mail-fixed i { color: #16a34a; margin-right: 6px; }
.vxa-form .alert { border-radius: 10px; font-size: 0.88rem; }
/* tableau (ordinateur) : la pastille au centre de la colonne, la précision dessous : toutes les pastilles d'une colonne sur le même axe (Ben 26/10) */
.vxa-cmp .vxa-cond, .vxa-cmp .vxa-no-note { flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.vxa-cmp td { vertical-align: top; }
/* encadré « Lequel choisir ? » : l'icône devant la phrase importante (2e ligne) */
.vxa-choose-tip { display: block; }
.vxa-tip-intro { padding-left: 24px; }
.vxa-tip-main { display: flex; gap: 10px; align-items: flex-start; }
/* encadré « Lequel choisir ? » en jaune fluo de la charte : hyper visible sans faire « erreur » comme le rouge (Ben 26/10) */
.vxa-choose-tip { background: #F2E70D; border: 0; border-left: 5px solid #111; color: #111; font-size: 0.95rem; padding: 12px 14px; }
.vxa-choose-tip i { color: #111; }
.vxa-choose-tip b { color: #111; font-weight: 800; }
.vxa-choose-tip span { color: #111; }
/* « Dernière étape » / PlayStation (Ben 27/10) : intitulé qui dit quoi faire, et le reflet bleu du mur (même lueur, même durée
   que .vx-reply-invite-field, keyframes vxInviteSheen de custom.css) qui glisse une fois le long du champ à l'arrivée ;
   un input n'a pas de ::after, d'où l'enveloppe .vxa-sheen ; le champ email passe juste après le pseudo. */
.vxa-field label.vxa-label-do { font-size: 0.95rem; font-weight: 800; color: #0f0f23; }
.vxa-sheen { position: relative; border-radius: 9px; }
.vxa-sheen::after { content: ""; position: absolute; inset: -1px; padding: 1.5px; border-radius: inherit; pointer-events: none; opacity: 0;
    background: linear-gradient(100deg, transparent 32%, rgba(19, 88, 201, .65) 50%, transparent 68%) no-repeat; background-size: 260% 100%; background-position: 88% 0;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    animation: vxaSheenLoop 2.6s ease-in-out .6s infinite; }
/* en boucle (Ben 27/10) : un passage de 0,8 s comme sur le mur, puis une pause ; s'arrête dès qu'on clique dans le champ */
@keyframes vxaSheenLoop { 0% { background-position: 88% 0; opacity: 0; } 2% { opacity: 1; } 27% { opacity: 1; } 31% { background-position: 12% 0; opacity: 0; } 100% { background-position: 12% 0; opacity: 0; } }
.vxa-sheen-2::after { animation-delay: 1.9s; }
.vxa-sheen:focus-within::after { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .vxa-sheen::after { animation: none; } }
/* case cochée : le reflet s'arrête (plus rien à faire là) */
.vxa-sheen:has(input:checked)::after { animation: none; opacity: 0; }
/* « Dernière étape » : la règle à suivre en jaune fluo, même couleur que « Créer mon compte » (Ben 27/10) */
.vxa-h1-sub.vxa-todo { background: #F2E70D; color: #111; font-weight: 800; font-size: 0.98rem; border-left: 5px solid #111; border-radius: 10px; padding: 10px 14px; }
/* pseudo déjà acquis : lien « modifier » ; les deux cases encadrées quand elles sont la seule chose à faire (Ben 27/10) */
.vxa-edit-link { margin-left: auto; font-size: 0.82rem; }
.vxa-mail-fixed { display: flex; align-items: center; gap: 6px; }
.vxa-legal-todo { border: 1px solid #c7dbfb; background: #f5f8fe; padding: 10px 12px 4px; margin-bottom: 4px; }
.vxa-paste-hint { color: #b45309; font-weight: 600; } /* « Confirme ton email » : collage refusé (Ben 27/10) */
/* voile d'attente sur la carte pendant un envoi (Ben 27/10) */
.vxa-form { position: relative; }
.vxa-wait { display: none; position: absolute; inset: 0; z-index: 20; background: rgba(255, 255, 255, .88); align-items: center; justify-content: center; text-align: center; border-radius: 0 18px 18px 0; }
.vxa-wait.on { display: flex; }
.vxa-wait-box { font-weight: 800; color: #0f0f23; font-size: 1rem; padding: 0 20px; }
.vxa-wait-spin { width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 50%; border: 4px solid #e4e6eb; border-top-color: #1358c9; animation: vxaSpin .8s linear infinite; }
@keyframes vxaSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vxa-wait-spin { animation-duration: 2s; } }
/* email + confirmation en un seul bloc : le 2e champ colle au 1er (Ben 27/10) */
.vxa-field .vxa-mail2 { margin-top: 8px; }