/* ==========================================================================
   DediCrypto — connexion / inscription (fenêtre modale + pages /login…), 25/09/2026.
   Chargée À LA DEMANDE sur les pages publiques (site.js), d'office sur /login.
   S'appuie sur les jetons de site.css (:root). [!] CSP : aucun style en ligne.
   ========================================================================== */

/* ---------- Fenêtre modale (<dialog> natif : piège du focus, Échap, fond inerte) ---------- */
.adlg{width:min(452px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:22px;
  background:var(--white);color:var(--ink-700);box-shadow:0 40px 80px -24px rgba(10,17,29,.45),0 0 0 1px rgba(16,24,40,.06);overflow:auto;overscroll-behavior:contain}
.adlg::backdrop{background:rgba(10,17,29,.52);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.adlg[open]{animation:adlg-in .24s var(--ease)}
.adlg[open]::backdrop{animation:adlg-fade .24s var(--ease)}
@keyframes adlg-in{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
@keyframes adlg-fade{from{opacity:0}to{opacity:1}}
.adlg__x{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;color:var(--ink-500);transition:background-color .15s,color .15s}
.adlg__x:hover{background:var(--ink-100);color:var(--ink-900)}
.adlg__x .i{font-size:20px}
html.adlg-lock,html.adlg-lock body{overflow:hidden}
.adlg .auth{padding:30px 30px 22px}

/* ---------- Bloc d'authentification (modale et page) ---------- */
.auth{position:relative}
.auth__head{text-align:center;margin-bottom:20px}
.auth__mark{width:40px;height:40px;margin:0 auto 14px;border-radius:11px;box-shadow:0 6px 16px -6px rgba(5,63,49,.35)}
.auth__title{font:600 25px/1.15 var(--font-display);letter-spacing:-.025em;color:var(--ink-900)}
.auth__sub{margin-top:7px;font-size:15px;line-height:1.5;color:var(--ink-500);text-wrap:balance}

.auth__tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:0 0 20px;background:var(--ink-100);border-radius:12px}
.auth__tab{display:grid;place-items:center;height:38px;border-radius:9px;font:600 14.5px/1 var(--font-body);color:var(--ink-600);transition:background-color .15s,color .15s,box-shadow .15s}
.auth__tab:hover{color:var(--ink-900)}
.auth__tab[aria-current="page"]{background:var(--white);color:var(--ink-900);box-shadow:var(--sh-sm)}

.auth__alert{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;margin-bottom:16px;border-radius:12px;font-size:14.5px;line-height:1.5}
.auth__alert .i{flex:none;font-size:18px;margin-top:1px}
.auth__alert--bad{background:#FEF3F2;color:#912018;box-shadow:inset 0 0 0 1px #FECDCA}
.auth__alert--ok{background:var(--em-50);color:var(--em-900);box-shadow:inset 0 0 0 1px var(--em-100)}
.auth__alert--info{background:#EFF8FF;color:#194185;box-shadow:inset 0 0 0 1px #B2DDFF}

.aform{display:grid;gap:16px}
.afield{display:grid;gap:7px}
.afield label{font:600 14px/1.3 var(--font-body);color:var(--ink-900)}
.afield input,.auth__captcha input{width:100%;height:48px;padding:0 14px;border:0;border-radius:11px;background:var(--white);
  box-shadow:inset 0 0 0 1px var(--ink-300);font:500 16px/1 var(--font-body);color:var(--ink-900);transition:box-shadow .15s}
.afield input::placeholder,.auth__captcha input::placeholder{color:var(--ink-400);font-weight:400}
.afield input:hover,.auth__captcha input:hover{box-shadow:inset 0 0 0 1px var(--ink-400)}
.afield input:focus,.auth__captcha input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--em-600),0 0 0 4px rgba(18,165,127,.16)}
.afield input[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--red-600),0 0 0 4px rgba(217,45,32,.1)}
.afield input.mono,.auth__captcha input{font-family:var(--font-mono);letter-spacing:.04em}
.afield__hint{display:flex;align-items:center;gap:6px;font-size:13px;line-height:1.45;color:var(--ink-500)}
.afield__hint .i{font-size:14px;color:var(--amber-700)}
.afield__hint[data-caps]{color:var(--amber-700);font-weight:600}
.afield__err{display:flex;align-items:flex-start;gap:6px;font-size:13.5px;line-height:1.45;color:var(--red-600);font-weight:500}
.afield__err .i{flex:none;font-size:15px;margin-top:1px}
.alink{font-weight:600;font-size:14px;color:var(--em-700);display:inline-flex;align-items:center;gap:5px}
.alink:hover{color:var(--em-800);text-decoration:underline;text-underline-offset:3px}
.alink .i{font-size:15px}

/* Mot de passe + bouton « afficher » */
.pw{position:relative}
.pw input{padding-right:50px}
.pw__eye{position:absolute;top:4px;right:4px;width:40px;height:40px;border-radius:9px;display:grid;place-items:center;color:var(--ink-500)}
.pw__eye:hover{background:var(--ink-100);color:var(--ink-900)}
.pw__eye[aria-pressed="true"]{color:var(--em-700)}
.pw__eye .i{font-size:19px}

/* Case à cocher */
.acheck{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;line-height:1.4;color:var(--ink-700);cursor:pointer;user-select:none}
.acheck input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:0;border-radius:6px;background:var(--white);
  box-shadow:inset 0 0 0 1.5px var(--ink-300);display:grid;place-items:center;cursor:pointer;transition:background-color .15s,box-shadow .15s}
.acheck input::after{content:"";width:10px;height:6px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px);opacity:0}
.acheck input:checked{background:var(--em-700);box-shadow:none}
.acheck input:checked::after{opacity:1}
.acheck input:focus-visible{outline:2px solid var(--em-500);outline-offset:2px}

/* Jauge de robustesse */
.meter{display:flex;align-items:center;gap:10px}
.meter__bar{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;flex:1}
.meter__bar i{height:5px;border-radius:3px;background:var(--ink-200);transition:background-color .2s}
.meter__label{min-width:78px;text-align:right;font:600 12.5px/1 var(--font-body);color:var(--ink-500)}
.meter[data-score="1"] i:nth-child(-n+1){background:#F04438}
.meter[data-score="2"] i:nth-child(-n+2){background:#F79009}
.meter[data-score="3"] i:nth-child(-n+3){background:#66C61C}
.meter[data-score="4"] i{background:var(--em-600)}
.meter[data-score="1"] .meter__label{color:#D92D20}
.meter[data-score="2"] .meter__label{color:var(--amber-700)}
.meter[data-score="3"] .meter__label{color:#3B7C0F}
.meter[data-score="4"] .meter__label{color:var(--em-700)}

/* Vérification humaine : Turnstile (invisible sauf besoin) + défi image de repli */
.auth__human:empty{display:none}
.auth__human{min-height:0;display:flex;justify-content:center}
.auth__human iframe{max-width:100%}
.auth__captcha{display:grid;gap:8px;padding:14px;border-radius:12px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink-200)}
.auth__captcha label{font:600 14px/1.3 var(--font-body);color:var(--ink-900)}
.auth__captcha small{font-size:12.5px;line-height:1.45;color:var(--ink-500)}
.auth__capimg{width:240px;max-width:100%;height:auto;border-radius:9px;box-shadow:inset 0 0 0 1px var(--ink-200);background:#F6F7F5}
.auth__caprow{display:flex;align-items:center;gap:10px}
.auth__caprow button{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13.5px;color:var(--em-700)}
.auth__caprow button .i{font-size:15px}

/* Bouton d'envoi + états */
.auth__submit{position:relative;height:50px;font-size:16px;border-radius:12px}
.auth__spin{display:none;width:18px;height:18px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:auth-spin .7s linear infinite}
.auth__submit.is-busy{pointer-events:none;opacity:.92}
.auth__submit.is-busy .auth__spin{display:inline-block}
.auth__submit.is-done{background:var(--em-800)}
@keyframes auth-spin{to{transform:rotate(360deg)}}

.aform__alt{text-align:center;font-size:14.5px;color:var(--ink-500)}
.aform__legal{text-align:center;font-size:12.5px;line-height:1.5;color:var(--ink-500);margin-top:-4px}
.aform__legal a{color:var(--ink-700);text-decoration:underline;text-underline-offset:2px}

/* Code 2FA : grands chiffres espacés */
.aotp{height:60px !important;text-align:center;font:500 28px/1 var(--font-mono) !important;letter-spacing:.42em !important;padding-left:calc(14px + .42em) !important}

.auth__trust{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:20px;padding-top:16px;border-top:1px solid var(--ink-150);font-size:12.5px;color:var(--ink-500);text-align:center}
.auth__trust .i{font-size:14px;color:var(--em-600);flex:none}

/* Pièces (logos officiels, assets/img/coins) */
.paycoin{position:relative;display:inline-flex;flex:none;width:32px;height:32px}
.paycoin>img:first-child{display:block;width:100%;height:100%;border-radius:50%}
.paycoin__net{position:absolute;right:-3px;bottom:-3px;width:50%;height:50%;border-radius:50%;box-shadow:0 0 0 2px var(--white)}
.paycoin--18{width:18px;height:18px}.paycoin--20{width:20px;height:20px}.paycoin--22{width:22px;height:22px}
.paycoin--28{width:28px;height:28px}.paycoin--30{width:30px;height:30px}.paycoin--36{width:36px;height:36px}
.paycoin--18 .paycoin__net,.paycoin--20 .paycoin__net,.paycoin--22 .paycoin__net{right:-2px;bottom:-2px;box-shadow:0 0 0 1.5px var(--white)}

/* ---------- Pages complètes /login, /register ---------- */
.authbody{background:var(--paper);min-height:100vh}
.apage{min-height:100vh;display:flex;flex-direction:column}
.apage__top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 28px}
.apage__logo img{height:28px;width:auto}
.apage__back{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14.5px;color:var(--ink-700);padding:8px 12px;border-radius:10px}
.apage__back:hover{background:var(--white);color:var(--ink-900)}
.apage__back .i{font-size:16px}
.apage__main{flex:1;display:grid;grid-template-columns:minmax(0,470px) minmax(0,420px);justify-content:center;align-items:center;gap:64px;padding:24px 28px 48px}
.apage__card{background:var(--white);border-radius:24px;padding:34px 34px 26px;box-shadow:0 24px 48px -20px rgba(16,24,40,.18),0 0 0 1px rgba(16,24,40,.06)}
.apage__aside h2{font:600 30px/1.15 var(--font-display);letter-spacing:-.03em;margin:14px 0 24px;color:var(--ink-900)}
.apage__list{display:grid;gap:18px}
.apage__list li{display:flex;gap:14px}
.apage__list .i{flex:none;width:40px;height:40px;padding:10px;border-radius:11px;background:var(--em-50);color:var(--em-700);box-shadow:inset 0 0 0 1px var(--em-100)}
.apage__list strong{display:block;font:600 15.5px/1.35 var(--font-body);color:var(--ink-900)}
.apage__list span{display:block;font-size:14.5px;line-height:1.5;color:var(--ink-600);margin-top:2px}
.apage__coins{display:flex;gap:10px;margin-top:28px;padding-top:22px;border-top:1px solid var(--ink-200)}
.apage__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:18px 28px 26px;font-size:13.5px;color:var(--ink-500)}
.apage__foot nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.apage__foot a{color:var(--ink-600)}
.apage__foot a:hover{color:var(--ink-900)}

@media (max-width:980px){
  .apage__main{grid-template-columns:minmax(0,480px);gap:28px;padding-top:8px}
  .apage__aside{order:2}
  .apage__aside h2{font-size:24px;margin-bottom:18px}
}
@media (max-width:560px){
  .apage__top{padding:14px 16px}
  .apage__back span{display:none}
  .apage__main{padding:4px 12px 32px}
  .apage__card{padding:26px 20px 20px;border-radius:20px}
  .apage__foot{padding:16px}
  .adlg{width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0}
  .adlg .auth{padding:56px 20px 24px}
  .adlg[open]{animation:adlg-up .26s var(--ease)}
  @keyframes adlg-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){
  .adlg[open],.adlg[open]::backdrop{animation:none}
  .auth__spin{animation-duration:1.6s}
}

/* Zones de toucher (écrans tactiles) — dessin inchangé. */
@media (max-width:767px),(pointer:coarse){
  .pw__eye{width:44px;height:44px;top:2px;right:2px}
  .auth__tab{height:44px}
  .apage__back{min-height:44px;min-width:44px;justify-content:center}
  .acheck{min-height:44px;align-items:center}
  .apage__logo,.alink,.apage__foot a{position:relative}
  .apage__logo::after,.alink::after,.apage__foot a::after{content:"";position:absolute;inset:-12px -5px}
}
@media (max-width:640px){
  .apage__top{justify-content:flex-start;gap:4px}
  .apage__back{order:-1;margin-left:-10px}
  .apage__foot{padding-left:12px;padding-right:12px}
}

/* Chinois : liens de deux caractères (« 登录 », « 条款 ») — cible de 44 px de large au moins. */
:lang(zh) .apage__foot nav a{display:inline-flex;justify-content:center;min-width:44px}
:lang(zh) .aform__alt .alink{justify-content:center;min-width:44px}