/* ═══ Légal et aide (lot 3, 09/10) — logique et textes : legal.js ════════════════════════════════════════════════════
   1. Feuille de lecture .lg-sheet : glisse depuis la droite comme les pages de détail (.sheet), mais classe à part :
      html.syn-hide (pg-auth.css) masque .sheet alors que cette feuille doit aussi s'ouvrir au-dessus des écrans d'accès
      (#gate, z 85) — d'où z 88 (sous le toast, 90). Fond quasi opaque : du texte long se lit mieux sans le fond animé.
   2. Carte « Légal et aide » de Réglages (lignes .ps-item de pg-settings.css) et lien de la fiche broker.
   3. Liens des écrans d'accès (#gate .ga-legal, pg-auth.js).
   Lisibilité : texte courant 14 px, rien sous 12 px. ═══ */

.lg-sheet{position:fixed;inset:0;z-index:88;display:flex;flex-direction:column;color:#fff;visibility:hidden;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 60% at 50% 0%,rgba(61,167,254,.10),rgba(61,167,254,0) 60%),linear-gradient(180deg,#0b1430 0%,#070c1c 55%,#050811 100%);
  transform:translate3d(100%,0,0);transition:transform .42s cubic-bezier(.32,.72,0,1),visibility 0s linear .42s;will-change:transform;box-shadow:-24px 0 48px rgba(0,0,0,.5)}
.lg-sheet.on{transform:translate3d(0,0,0);visibility:visible;transition:transform .42s cubic-bezier(.32,.72,0,1),visibility 0s linear 0s}
.lg-sheet *,.lg-sheet *::before,.lg-sheet *::after{box-sizing:border-box}
body.lg-open{overflow:hidden}
body.lg-open #pager{transform:translate(-50%,120px);opacity:0;pointer-events:none}

/* barre du haut : même « Retour » que les pages de détail */
.lg-bar{display:flex;align-items:center;gap:8px;flex:none;padding:calc(env(safe-area-inset-top,0px) + 12px) 12px 10px;
  border-bottom:1px solid rgba(255,255,255,.10);background:linear-gradient(180deg,rgba(8,12,26,.6),rgba(8,12,26,0))}
.lg-back{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px 0 9px;border:0;border-radius:17px;cursor:pointer;-webkit-tap-highlight-color:transparent;
  color:#fff;font:600 13px -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
  background:linear-gradient(160deg,rgba(255,255,255,.17),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.40),inset 0 -1px 0 rgba(0,0,0,.22),inset 0 0 0 .5px rgba(255,255,255,.10),0 3px 8px rgba(0,0,0,.30)}
.lg-back:active{transform:scale(.95)}
.lg-title{min-width:0;margin-left:4px;font-size:16px;font-weight:800;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lg-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 40px)}
.lg-doc{max-width:560px;margin:0 auto}
.lg-sheet.on .lg-doc{animation:lgIn .5s cubic-bezier(.22,1,.36,1) both}
@keyframes lgIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── texte ── */
.lg-h1{margin:2px 0 12px;font-size:24px;line-height:29px;font-weight:800;letter-spacing:-.5px;text-wrap:balance}
.lg-draft{margin:0 0 16px;padding:8px 11px;border-radius:12px;font-size:12.5px;line-height:17px;color:#ffd08a;
  background:linear-gradient(180deg,rgba(255,159,10,.13),rgba(255,159,10,.05));box-shadow:inset 0 0 0 .5px rgba(255,159,10,.35)}
.lg-lead{margin:0 0 8px;font-size:15.5px;line-height:23px;font-weight:500;color:#e3e8f4;text-wrap:pretty}
.lg-h{margin:24px 0 7px;font-size:15px;line-height:20px;font-weight:700;letter-spacing:-.15px;color:#fff}
.lg-p{margin:0 0 10px;font-size:14px;line-height:21px;color:rgba(235,240,255,.86);text-wrap:pretty}
.lg-p b,.lg-ul b,.lg-note b,.lg-dl b{color:#fff;font-weight:700}
.lg-ul{margin:0 0 10px;padding:0 0 0 19px}
.lg-ul li{margin:0 0 7px;font-size:14px;line-height:21px;color:rgba(235,240,255,.86)}
.lg-ul li::marker{color:#6cbcff}
.lg-note{margin:4px 0 12px;padding:12px 14px;border-radius:16px;font-size:14px;line-height:21px;color:#ffe2b8;
  background:linear-gradient(180deg,rgba(255,159,10,.14),rgba(255,159,10,.05)),linear-gradient(180deg,rgba(24,24,30,.4),rgba(16,16,20,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 .5px rgba(255,159,10,.38)}
/* libellé / valeur : tuiles de verre comme celles de Réglages */
.lg-dl{margin:4px 0 12px;display:flex;flex-direction:column;gap:6px}
.lg-dl > div{padding:9px 12px 10px;border-radius:13px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 .5px rgba(255,255,255,.07)}
.lg-dl dt{font-size:12px;line-height:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(235,240,255,.72)}
.lg-dl dd{margin:3px 0 0;font-size:14px;line-height:20px;color:#eef2fb;word-break:break-word}
.lg-ver{margin:26px 0 0;font-size:12.5px;line-height:18px;color:rgba(235,240,255,.6)}
/* repère « [À compléter : …] » : bien visible tant que la config n'est pas remplie */
.lg-ph{padding:1px 5px;border-radius:6px;font-weight:600;color:#ffd479;background:rgba(255,196,0,.15);box-shadow:inset 0 0 0 .5px rgba(255,196,0,.4);
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.lg-ln,.lg-a{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;font-weight:600;color:#9fd2ff;text-decoration:underline;text-decoration-color:rgba(159,210,255,.45);
  text-underline-offset:2px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.lg-sm{font-size:13px;line-height:19px;color:rgba(235,240,255,.75)}
.lg-c{text-align:center}

/* ── « Supprimer mon compte » ── */
.lg-steps{list-style:none;margin:6px 0 14px;padding:0;display:flex;flex-direction:column;gap:8px}
.lg-steps li{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:15px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 .5px rgba(255,255,255,.07)}
.lg-steps li > i{flex:none;width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;margin-top:1px;
  background:var(--c,#0a84ff);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(0,0,0,.35)}
.lg-steps li.stop > i{--c:#ff453a}.lg-steps li.warn > i{--c:#ff9f0a}.lg-steps li.card > i{--c:#0a84ff}.lg-steps li.trash > i{--c:#636a7e}.lg-steps li.bank > i{--c:#30d158}
.lg-steps li > span{min-width:0;font-size:13.5px;line-height:19px;color:rgba(235,240,255,.82)}
.lg-steps li b{display:block;margin-bottom:2px;font-size:14.5px;line-height:19px;font-weight:700;color:#fff}
.lg-form{display:flex;flex-direction:column;gap:10px;margin:14px 0 10px;padding:12px;border-radius:22px;
  background:linear-gradient(180deg,rgba(32,38,62,.80) 0%,rgba(14,18,34,.88) 100%);
  box-shadow:0 18px 44px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.20),inset 0 0 0 .5px rgba(255,255,255,.12)}
.lg-f{display:flex;flex-direction:column;gap:4px;padding:9px 13px 10px;border-radius:15px;margin:0;cursor:text;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035));box-shadow:inset 0 1px 0 rgba(255,255,255,.15),inset 0 0 0 .5px rgba(255,255,255,.08);
  transition:box-shadow .25s,background .25s}
.lg-f:focus-within{background:linear-gradient(180deg,rgba(61,167,254,.16),rgba(61,167,254,.06));box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 0 0 1px rgba(61,167,254,.6),0 0 16px rgba(0,102,255,.28)}
.lg-f > small{font-size:12px;line-height:15px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(235,240,255,.75)}
/* 16 px : iOS ne zoome pas au focus */
.lg-f input,.lg-f textarea{width:100%;margin:0;padding:0;border:0;outline:0;background:transparent;color:#fff;font:600 16px -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;
  -webkit-appearance:none;appearance:none;border-radius:0}
.lg-f input{height:26px;letter-spacing:.06em}
.lg-f textarea{min-height:66px;line-height:22px;font-weight:500;resize:vertical}
.lg-f input::placeholder,.lg-f textarea::placeholder{color:rgba(235,240,255,.38);font-weight:500}
.lg-err{padding:0 4px;font-size:13.5px;line-height:19px;font-weight:500;color:#ff8a82}
.lg-err[hidden]{display:none}
.lg-btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:50px;border:0;border-radius:25px;cursor:pointer;
  font:700 16px -apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,system-ui,sans-serif;letter-spacing:-.2px;color:#fff;-webkit-tap-highlight-color:transparent;
  transition:transform .15s,opacity .25s,background .25s}
.lg-btn:active{transform:scale(.97)}
.lg-btn.danger{background:linear-gradient(180deg,#ff5a50,#d9342a);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.2),0 4px 14px rgba(217,52,42,.38)}
.lg-btn:disabled{cursor:default;color:rgba(255,255,255,.45);background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 .5px rgba(255,255,255,.08)}
.lg-btn.busy{color:transparent!important}
.lg-btn.busy::after{content:"";position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;animation:lgSpin .8s linear infinite}
@keyframes lgSpin{to{transform:rotate(360deg)}}
.lg-done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;margin:6px 0 14px;padding:18px 16px;border-radius:20px;
  background:linear-gradient(180deg,rgba(48,209,88,.12),rgba(48,209,88,.04)),linear-gradient(180deg,rgba(24,30,50,.6),rgba(14,18,32,.66));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 .5px rgba(48,209,88,.35)}
.lg-ok{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:4px;
  background:linear-gradient(180deg,#44df6c,#1f9e43);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 24px rgba(48,209,88,.4)}
.lg-done b{font-size:18px;line-height:23px;font-weight:800;letter-spacing:-.3px}
.lg-done span{font-size:14px;line-height:20px;color:rgba(235,240,255,.86)}
.lg-done .lg-warn{color:#ffd08a}
@media (prefers-reduced-motion:reduce){.lg-sheet,.lg-sheet.on{transition:visibility 0s}.lg-sheet.on .lg-doc{animation:none}.lg-f,.lg-btn{transition:none}}

/* ── Réglages › Légal et aide (lignes .ps-item de pg-settings.css) ── */
#pageSettings .lg-list .ps-dev svg{display:block}
#pageSettings .lg-list .st-chev{margin:0 6px 0 4px}
#pageSettings .lg-list .lg-del b{color:#ff6b61}
#pageSettings .lg-list .lg-del .ps-dev{background:linear-gradient(180deg,rgba(255,69,58,.22),rgba(255,69,58,.08));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 .5px rgba(255,69,58,.35)}
/* fiche broker en modification : rappel discret avant de relier un compte */
#pageSettings .lg-inline{margin:8px 2px 0;font-size:12px;line-height:17px;color:var(--lab-2,rgba(235,240,255,.8))}
#pageSettings .lg-inline .lg-ln{font-size:12px}
.lg-nw{white-space:nowrap} /* « l’ » reste collé à son lien (fiche broker, textes) */

/* ── écrans d'accès (pg-auth.js) : liens vers les textes ── */
#gate p.ga-legal{margin:0;padding:0 4px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:8px;font-size:13px;line-height:18px;color:#8e95a6;text-align:center}
/* premiers pas (écran centré) : le dernier élément garde sa marge automatique de pg-auth.css, sinon le contenu tombe en bas */
#gate .ga-scr.mid > .ga-steps ~ p.ga-legal:last-child{margin-bottom:auto}
/* « Avant de payer : » sur sa propre ligne, les liens dessous */
#gate .ga-legal > span{flex-basis:100%;padding:2px 0 0}
#gate .ga-legal .ga-link{font-size:13px;padding:6px 5px}
#gate .ga-legal .ga-link.ko{color:#ff8a82}
#gate .ga-risk .ga-rl{display:inline;padding:0;margin:0;border:0;background:none;font:inherit;font-weight:600;color:#ffd08a;text-decoration:underline;text-underline-offset:2px;cursor:pointer;-webkit-tap-highlight-color:transparent}