/* =============================================================================
   Black Protocol — ESPACE PRIVÉ. Fidèle au site public : NOIR dominant,
   liquid glass premium (verre sombre + blur + liseré BLANC), violet CHIRURGICAL
   (accents fins seulement). Nav = pilule flottante (comme nav.nav du site).
   Boutons = pilule verre (primaire violet->noir, secondaire verre blanc).
   ============================================================================= */
:root{
  --bg:#050506; --panel:rgba(20,20,27,.5); --panel-2:rgba(14,14,18,.55);
  --violet:#6B00CC; --violet-el:#8A14FF; --violet-deep:#4A00A0;
  --white:#f0f0f0; --silver:#c9cbd1;
  --ink-1:#f2f2f4; --ink-2:rgba(240,240,240,.6); --ink-3:rgba(240,240,240,.4); --ink-4:rgba(240,240,240,.2);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --violet-line:rgba(107,0,204,.32);
  --font:'Inter','Helvetica Neue',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.16,1,.3,1); --r:10px; --r-sm:6px; --gutter:clamp(1.1rem,3vw,2.2rem); --maxw:1440px;
  /* liseré verre BLANC (border-box) — le langage "liquid glass" du site */
  --edge:linear-gradient(150deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 48%,rgba(255,255,255,.09) 100%);
  --glassbg:linear-gradient(180deg,rgba(13,13,16,.5),rgba(4,4,6,.64));
}
/* liseré "liquid glass" fin, DYNAMIQUE mais lent et discret (technique du site : bord conique masqué,
   angle animé via @property). Appliqué aux panneaux ; ralenti (42s) et peu opaque. */
@property --lg-a{syntax:'<angle>';inherits:false;initial-value:0deg;}
@keyframes lgEdge{to{--lg-a:360deg;}}
.esp-top,.card,.resume,.mod,.dispatch,.login-ok{position:relative;}
.esp-top::before,.card::before,.resume::before,.mod::before,.dispatch::before,.login-ok::before{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.1px;pointer-events:none;z-index:0;
  background:conic-gradient(from var(--lg-a),rgba(255,255,255,.05) 0deg,rgba(255,255,255,.3) 46deg,rgba(255,255,255,.04) 112deg,rgba(255,255,255,.03) 190deg,rgba(201,205,215,.24) 238deg,rgba(255,255,255,.05) 304deg,rgba(255,255,255,.05) 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
  animation:lgEdge 42s linear infinite;}
@media(prefers-reduced-motion:reduce){
  .esp-top::before,.card::before,.resume::before,.mod::before,.dispatch::before,.login-ok::before,.locked::before{animation:none;}}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--white);font-family:var(--font);-webkit-font-smoothing:antialiased;line-height:1.5;min-height:100vh;}
body.esp-lock{overflow:hidden;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
::selection{background:var(--violet);color:#fff;}
:focus-visible{outline:2px solid var(--violet-el);outline-offset:2px;}
.mono{font-family:var(--mono);}
.kick{font-family:var(--mono);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.028;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* halo d'ambiance très discret (une seule source, en haut) */
body::before{content:"";position:fixed;top:-30vh;left:50%;transform:translateX(-50%);width:120vw;height:70vh;z-index:0;pointer-events:none;
  background:radial-gradient(ellipse 40% 60% at 50% 0%,rgba(107,0,204,.10),transparent 70%);}

/* ── NAV : pilule flottante (fidèle à nav.nav) ───────────────────────────── */
.esp-top{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:50;
  width:min(940px,calc(100% - 2rem));display:flex;align-items:center;gap:.9rem;
  padding:.5rem .6rem .5rem 1.15rem;border-radius:999px;
  background:rgba(20,20,27,.66);
  -webkit-backdrop-filter:blur(50px) saturate(1.2);backdrop-filter:blur(50px) saturate(1.2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.16),0 12px 44px rgba(0,0,0,.6);}
.esp-mark{display:flex;align-items:center;gap:.5rem;flex:none;}
.esp-mark > img{width:17px;height:17px;}
.esp-mark .w{font-size:1rem;letter-spacing:-.02em;color:#fff;font-weight:400;}
.esp-mark .w b{font-weight:700;}
.esp-mark .w::after{content:'®';font-size:.5em;vertical-align:super;margin-left:.13em;font-weight:400;letter-spacing:0;opacity:.75;}
.esp-nav{display:flex;gap:.2rem;margin:0 auto;}
.esp-nav a{position:relative;font-family:var(--font);font-weight:500;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--white);opacity:.72;padding:.5rem .7rem;transition:opacity .25s,color .25s;white-space:nowrap;}
.esp-nav a:hover{opacity:1;}
.esp-nav a.on{opacity:1;}
.esp-nav a.on::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.05rem;height:1.5px;border-radius:2px;
  background:var(--violet-el);box-shadow:0 0 7px rgba(138,20,255,.8);}
.esp-right{display:flex;align-items:center;gap:.7rem;flex:none;}
.esp-mail{font-family:var(--mono);font-size:.58rem;letter-spacing:.04em;color:var(--ink-3);max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.esp-out{font-family:var(--font);font-weight:600;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--white);
  border:none;border-radius:999px;padding:.6rem 1rem;cursor:pointer;white-space:nowrap;
  background:rgba(255,255,255,.05);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.18);transition:background .2s,box-shadow .2s;}
.esp-out:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 1px 1px rgba(255,255,255,.28);}
.esp-burger{display:none;}

/* barre démo (dev only) : petite puce flottante en bas */
.esp-demo{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;justify-content:center;
  padding:.4rem .5rem;border-radius:999px;background:rgba(20,20,27,.7);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);box-shadow:inset 0 1px 1px rgba(255,255,255,.14),0 10px 30px rgba(0,0,0,.5);
  font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);}
.esp-demo>span{padding-left:.5rem;}
.esp-demo b{color:var(--ink-2);}
.esp-demo button{font:inherit;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;
  background:rgba(255,255,255,.04);border:none;border-radius:999px;padding:.34rem .7rem;transition:.2s;box-shadow:inset 0 1px 1px rgba(255,255,255,.12);}
.esp-demo button.on{color:#fff;background:rgba(255,255,255,.1);}

/* ── mise en page ────────────────────────────────────────────────────────── */
.esp-main{position:relative;z-index:2;max-width:var(--maxw);margin:0 auto;padding:clamp(4.4rem,7vw,5.6rem) var(--gutter) 6rem;}
.view{animation:espIn .5s var(--ease) both;}
@keyframes espIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.page-head{margin:.4rem 0 2rem;}
.page-head h1{font-weight:700;letter-spacing:-.03em;line-height:1;margin:.55rem 0 0;font-size:clamp(2.1rem,6vw,3.7rem);text-transform:uppercase;}
.page-head p{color:var(--ink-2);font-weight:300;margin:.7rem 0 0;max-width:60ch;}
.grid{display:grid;gap:1rem;}
.g-2{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:820px){.g-2,.g-3{grid-template-columns:1fr;}}
.sec-title{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);margin:2.6rem 0 1rem;}

/* ── carte = liquid glass (verre sombre + liseré blanc + blur) ───────────── */
.card{position:relative;border-radius:var(--r);padding:1.3rem;
  background:var(--glassbg);border:1px solid rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(30px) saturate(1.1);backdrop-filter:blur(30px) saturate(1.1);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.09),0 24px 60px -34px rgba(0,0,0,.85);}
.card-k{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;}

/* pastille de statut (fidèle à .ctag du site : mono minuscule, gris; violet si actif) */
.tag{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);}
.tag .d{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;}
.tag.owned{color:var(--violet-el);} .tag.owned .d{box-shadow:0 0 8px rgba(138,20,255,.8);}
.tag.live{color:#7CF3C4;} .tag.live .d{box-shadow:0 0 7px #7cf3c4;}

/* ── boutons (fidèles au site) ───────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--font);font-weight:600;font-size:.66rem;letter-spacing:.05em;
  text-transform:uppercase;padding:.72rem 1.2rem;border-radius:999px;cursor:pointer;border:none;white-space:nowrap;
  transition:transform var(--dur-1,.3s) var(--ease),box-shadow .25s,background .2s;}
.btn i{font-style:normal;transition:transform .2s;} .btn:hover i{transform:translateX(3px);}
/* primaire = pilule VERRE violet -> noir (comme .nav-cta), pas un aplat violet */
.btn-primary{color:#fff;
  background:linear-gradient(155deg,rgba(138,20,255,.9),rgba(107,0,204,.6) 46%,rgba(22,0,46,.78) 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.32),inset 0 -6px 14px rgba(0,0,0,.35),0 4px 20px rgba(122,10,230,.32);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:inset 0 1px 1px rgba(255,255,255,.4),inset 0 -6px 14px rgba(0,0,0,.3),0 6px 28px rgba(138,20,255,.45);}
/* secondaire = pilule VERRE blanc */
.btn-ghost{color:var(--white);background:rgba(255,255,255,.05);box-shadow:inset 0 1px 1px rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.btn-ghost:hover{background:rgba(255,255,255,.09);box-shadow:inset 0 1px 1px rgba(255,255,255,.3);}

/* ── barre de progression (violet fin) ──────────────────────────────────── */
.prog{height:4px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden;}
.prog i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--violet),var(--violet-el));}
.prog-lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--ink-3);margin-bottom:.5rem;text-transform:uppercase;}

/* ── DASHBOARD ───────────────────────────────────────────────────────────── */
.resume{position:relative;border-radius:var(--r);padding:1.4rem;display:flex;gap:1.3rem;align-items:center;
  background:var(--glassbg);border:1px solid rgba(255,255,255,.05);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.1),0 24px 60px -34px rgba(0,0,0,.85);}
.resume .thumb{flex:none;width:126px;height:74px;border-radius:var(--r-sm);background:#000;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.resume .thumb::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(138,20,255,.28),transparent 62%);}
.resume .thumb svg{width:24px;height:24px;color:#fff;position:relative;z-index:1;opacity:.9;}
.resume .meta{flex:1;min-width:0;}
.resume .meta .mk{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);}
.resume .meta h3{margin:.35rem 0 .6rem;font-size:1.12rem;font-weight:600;letter-spacing:-.01em;}
@media(max-width:640px){.resume{flex-direction:column;align-items:flex-start;} .resume .thumb{width:100%;height:120px;}}

.mini-feed{display:flex;flex-direction:column;}
.mini-feed a{display:flex;gap:.8rem;align-items:baseline;padding:.6rem .1rem;border-bottom:1px solid var(--line);transition:padding .2s;}
.mini-feed a:last-child{border-bottom:none;}
.mini-feed a:hover{padding-left:.4rem;}
.mini-feed .dt{font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;color:var(--ink-3);flex:none;}
.mini-feed .tt{color:var(--ink-1);font-size:.88rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.own-card{display:flex;flex-direction:column;gap:.9rem;}
.own-card .top{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;}
.own-card h3{font-size:1.05rem;font-weight:600;margin:0;letter-spacing:-.01em;}
.own-card .sub{color:var(--ink-2);font-size:.83rem;font-weight:300;margin-top:.2rem;}
.own-card .st{color:var(--ink-3);font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;}

/* ── CROSS-SELL VERROUILLÉ : verre noir + contour argent/violet rotatif ──── */
.locked{position:relative;border-radius:var(--r);padding:1.2px;overflow:hidden;isolation:isolate;
  box-shadow:0 24px 60px -34px rgba(0,0,0,.85);}
.locked::before{content:"";position:absolute;z-index:0;left:50%;top:50%;width:210%;height:210%;
  transform:translate(-50%,-50%) rotate(0deg);animation:espSpin 32s linear infinite;
  background:conic-gradient(rgba(255,255,255,.03) 0deg,rgba(201,205,215,.16) 52deg,rgba(255,255,255,.32) 84deg,
    rgba(176,126,255,.22) 114deg,rgba(255,255,255,.03) 170deg,rgba(255,255,255,.03) 236deg,rgba(166,75,255,.18) 278deg,
    rgba(232,234,242,.16) 308deg,rgba(255,255,255,.03) 350deg,rgba(255,255,255,.03) 360deg);}
@keyframes espSpin{to{transform:translate(-50%,-50%) rotate(360deg);}}
.locked-in{position:relative;z-index:1;border-radius:calc(var(--r) - 1px);padding:1.4rem;
  background:linear-gradient(180deg,rgba(16,16,20,.82),rgba(6,6,9,.9));-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}
.locked .lockrow{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem;}
.locked .lockrow svg{width:14px;height:14px;color:var(--ink-3);}
.locked h3{font-size:1.02rem;font-weight:600;margin:0;}
.locked .price{font-family:var(--font);font-weight:700;color:#fff;font-size:.9rem;letter-spacing:-.01em;margin-left:auto;}
.locked .desc{color:var(--ink-2);font-size:.83rem;font-weight:300;margin:.5rem 0 1rem;}
.locked .peek{display:flex;flex-direction:column;gap:.35rem;margin:.2rem 0 1.1rem;}
.locked .peek span{display:flex;align-items:center;gap:.5rem;font-size:.8rem;color:var(--ink-3);}
.locked .peek span::before{content:"";width:12px;height:12px;border:1px solid var(--ink-4);border-radius:2px;flex:none;}
.locked .peek span svg{width:11px;height:11px;margin-left:auto;color:var(--ink-4);}

/* ── FORMATION ───────────────────────────────────────────────────────────── */
.mod{position:relative;border-radius:var(--r);margin-bottom:.7rem;overflow:hidden;
  background:var(--glassbg);border:1px solid rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px 1px rgba(255,255,255,.07);}
.mod-h{display:flex;align-items:center;gap:1rem;padding:1.05rem 1.2rem;cursor:pointer;transition:background .2s;}
.mod-h:hover{background:rgba(255,255,255,.02);}
.mod-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;color:var(--ink-3);flex:none;width:2rem;}
.mod-t{flex:1;min-width:0;}
.mod-t .nm{font-weight:600;font-size:.98rem;letter-spacing:-.01em;text-transform:uppercase;}
.mod-t .st{font-family:var(--mono);font-size:.56rem;letter-spacing:.12em;color:var(--ink-3);text-transform:uppercase;margin-top:.25rem;}
.mod-ring{flex:none;width:34px;height:34px;}
.mod-tog{flex:none;width:22px;height:22px;color:var(--ink-3);transition:transform .3s var(--ease);}
.mod.open .mod-tog{transform:rotate(90deg);}
.mod-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.mod.open .mod-body{max-height:900px;}
.vid{display:flex;align-items:center;gap:.85rem;padding:.7rem 1.2rem;border-top:1px solid var(--line);transition:background .18s;cursor:pointer;}
.vid:hover{background:rgba(255,255,255,.03);}
.vid .ic{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--ink-2);}
.vid .ic svg{width:12px;height:12px;}
.vid.seen .ic{color:var(--violet-el);border-color:var(--violet-line);}
.vid .vt{flex:1;font-size:.9rem;color:var(--ink-1);}
.vid .vd{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:var(--ink-3);}
.vid.soon{cursor:default;opacity:.5;} .vid.soon:hover{background:none;} .vid.soon .vd{color:var(--ink-4);}

/* ── LECTEUR (Bunny) + filigrane ─────────────────────────────────────────── */
.player-wrap{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:var(--r);overflow:hidden;border:1px solid var(--line-2);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.08);}
.player-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.player-soon{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;text-align:center;padding:1.5rem;
  background:radial-gradient(circle at 50% 42%,rgba(107,0,204,.12),transparent 64%),#050506;}
.player-soon .em{width:42px;height:42px;color:var(--ink-3);}
.player-soon .lb{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);}
.player-soon .sm{color:var(--ink-3);font-size:.82rem;font-weight:300;max-width:34ch;}
.wm{position:absolute;z-index:3;pointer-events:none;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  color:rgba(255,255,255,.26);text-shadow:0 1px 3px rgba(0,0,0,.8);white-space:nowrap;animation:wmDrift 19s linear infinite;}
@keyframes wmDrift{0%{top:12%;left:8%;}25%{top:70%;left:64%;}50%{top:38%;left:30%;}75%{top:80%;left:12%;}100%{top:12%;left:8%;}}

/* ── FEED (lecture seule) ────────────────────────────────────────────────── */
.dispatch{position:relative;border-radius:var(--r);overflow:hidden;margin-bottom:1.1rem;
  background:var(--glassbg);border:1px solid rgba(255,255,255,.05);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);box-shadow:inset 0 1px 1px rgba(255,255,255,.07);}
.dispatch-h{display:flex;align-items:center;gap:.7rem;padding:.85rem 1.1rem;border-bottom:1px solid var(--line);}
.dispatch-h .ava{width:22px;height:22px;border-radius:50%;background:#000;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;}
.dispatch-h .ava img{width:12px;height:12px;}
.dispatch-h .nm{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);}
.dispatch-h .dt{margin-left:auto;font-family:var(--mono);font-size:.54rem;letter-spacing:.1em;color:var(--ink-3);}
.dispatch-b{padding:1.1rem;}
.dispatch-b h3{margin:0 0 .7rem;font-size:1.08rem;font-weight:700;letter-spacing:-.01em;}
.seg{display:flex;gap:.9rem;padding:.6rem 0;border-top:1px dashed var(--line);}
.seg:first-of-type{border-top:none;}
.seg .lab{flex:none;width:5.5rem;font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:.15rem;}
.seg .tx{flex:1;color:var(--ink-2);font-size:.89rem;font-weight:300;line-height:1.6;}
.feed-readonly{display:flex;align-items:center;gap:.5rem;justify-content:center;padding:.9rem;color:var(--ink-3);
  font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;border-top:1px solid var(--line);}
.feed-readonly svg{width:12px;height:12px;}

/* ── COMPTE ──────────────────────────────────────────────────────────────── */
.acct-row{display:flex;align-items:center;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line);}
.acct-row:last-child{border-bottom:none;}
.acct-row .l{flex:1;} .acct-row .l .t{font-weight:600;font-size:.95rem;} .acct-row .l .s{color:var(--ink-3);font-size:.8rem;font-weight:300;margin-top:.2rem;}
.acct-row .r{flex:none;}
.danger{color:#ff6b6b;} .danger:hover{color:#ff8a8a;background:rgba(255,107,107,.09);box-shadow:inset 0 1px 1px rgba(255,255,255,.14);}
.doclinks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem;}
.doclinks a{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;transition:.2s;}
.doclinks a:hover{color:#fff;border-color:var(--line-2);}

/* facturation intégrée */
.bill-actions{display:flex;gap:.7rem 1.1rem;flex-wrap:wrap;align-items:center;margin-top:1.1rem;}
.bill-pm{display:inline-flex;align-items:center;gap:.45rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);background:none;border:none;cursor:pointer;padding:.6rem .1rem;transition:color .2s;}
.bill-pm:hover{color:var(--ink-1);} .bill-pm svg{width:12px;height:12px;}
.bill-note{margin-top:.7rem;color:var(--ink-4);font-family:var(--mono);font-size:.54rem;letter-spacing:.05em;line-height:1.7;max-width:62ch;}
.bill-row{display:grid;grid-template-columns:.9fr 1.5fr .9fr .9fr auto;gap:1rem;align-items:center;padding:.85rem 0;border-top:1px solid var(--line);}
.bill-row:first-child{border-top:none;padding-top:.1rem;}
.bill-head{font-family:var(--mono);font-size:.54rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-bottom:.5rem;}
.bill-row .dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--ink-2);}
.bill-row .fm{font-size:.9rem;color:var(--ink-1);}
.bill-row .amt{font-weight:700;font-size:.9rem;letter-spacing:-.01em;color:#fff;}
.bill-st{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.54rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);}
.bill-st .d{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;}
.bill-st.ok{color:#7CF3C4;} .bill-st.refund{color:var(--ink-3);} .bill-st.fail{color:#ff6b6b;}
.bill-dl{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);
  border:1px solid var(--line);border-radius:999px;padding:.42rem .75rem;cursor:pointer;background:none;transition:.2s;white-space:nowrap;}
.bill-dl:hover{color:#fff;border-color:var(--line-2);} .bill-dl svg{width:12px;height:12px;}
@media(max-width:640px){
  .bill-head{display:none;}
  .bill-row{grid-template-columns:1fr auto;row-gap:.3rem;padding:.9rem 0;}
  .bill-row .fm{grid-column:1;grid-row:1;font-weight:600;}
  .bill-row .dt{grid-column:1;grid-row:2;}
  .bill-row .amt{grid-column:2;grid-row:1;justify-self:end;}
  .bill-row .bill-st{grid-column:2;grid-row:2;justify-self:end;}
  .bill-dl{grid-column:1 / -1;grid-row:3;justify-self:start;margin-top:.4rem;}
}

/* ── CONNEXION ───────────────────────────────────────────────────────────── */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;position:relative;z-index:2;}
.login-card{width:100%;max-width:430px;text-align:center;}
.login-emblem{width:50px;height:50px;margin:0 auto 1.6rem;position:relative;display:flex;align-items:center;justify-content:center;}
.login-emblem img{width:34px;height:34px;position:relative;z-index:1;}
.login h1{font-size:1.55rem;font-weight:700;letter-spacing:-.02em;margin:0 0 .5rem;text-transform:uppercase;}
.login p{color:var(--ink-2);font-weight:300;font-size:.9rem;margin:0 auto 1.8rem;max-width:34ch;}
.login form{display:flex;flex-direction:column;gap:.7rem;}
.field{width:100%;height:52px;border-radius:var(--r-sm);padding:0 1rem;color:#fff;font-family:var(--font);font-size:.95rem;outline:none;text-align:center;
  background:rgba(255,255,255,.04);border:1px solid var(--line-2);transition:.2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);}
.field::placeholder{color:var(--ink-4);} .field:focus{border-color:var(--line-2);background:rgba(255,255,255,.07);}
.login .btn{justify-content:center;width:100%;height:52px;}
.login-note{margin-top:1.4rem;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;color:var(--ink-4);line-height:1.7;text-transform:uppercase;}
.login-ok{border-radius:var(--r);padding:1.4rem;color:var(--ink-1);font-size:.9rem;line-height:1.6;
  background:var(--glassbg);border:1px solid rgba(255,255,255,.05);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);}

/* ── responsive ──────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .esp-nav{position:absolute;top:calc(100% + .6rem);left:0;right:0;flex-direction:column;gap:0;margin:0;padding:.5rem;
    border-radius:18px;background:rgba(16,16,20,.9);-webkit-backdrop-filter:blur(40px);backdrop-filter:blur(40px);
    box-shadow:inset 0 1px 1px rgba(255,255,255,.12),0 26px 60px rgba(0,0,0,.6);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:.25s;}
  .esp-nav.open{transform:none;opacity:1;visibility:visible;}
  .esp-nav a{padding:.8rem;text-align:center;} .esp-nav a.on::after{left:50%;right:auto;width:16px;transform:translateX(-50%);}
  .esp-mail{display:none;}
  .esp-right{margin-left:auto;}
  .esp-burger{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;
    background:rgba(255,255,255,.05);border:none;color:#fff;cursor:pointer;box-shadow:inset 0 1px 1px rgba(255,255,255,.18);}
}

/* Vrai logo wordmark PNG (remplace le wordmark refait en police) — se dimensionne sur le font-size du contexte, garde le ® du wrapper */
.wmk{display:inline-block;height:auto;width:7.77em;vertical-align:-.17em}
.wmk-bf{width:4.83em;vertical-align:-.02em}
.w{white-space:nowrap}

.login-err{margin-top:1.1rem;font-family:var(--font);font-size:.85rem;line-height:1.5;color:#ff6b6b;text-align:center;}

/* [formation réelle · curriculum.js] sous-modules + numéro de séquence + modules longs */
.mod.open .mod-body{max-height:8000px;}
.vid.soon{cursor:default;}
.submod{display:flex;align-items:baseline;gap:.55rem;padding:.9rem 1.2rem .45rem;border-top:1px solid var(--line);}
.submod .sn{font-family:var(--mono);font-size:.62rem;letter-spacing:.05em;color:var(--violet-el);flex:none;}
.submod .stt{font-size:.82rem;font-weight:600;color:var(--ink-1);line-height:1.4;}
.vid .vn{font-family:var(--mono);font-size:.64rem;color:var(--violet-el);margin-right:.2rem;}