/* portal.v1.css — feuille partagée /portal /recover /buy /trial.
   Langage visuel de blackhateditors.com/tools (tokens identiques). */
:root{
  --bg:#050605; --card:#0f110e; --card2:#131612;
  --line:#20241e; --line2:#2b3028;
  --ink:#f2f4ee; --body:#b9bfb2; --muted:#878e80;
  --lime:#bfff00; --lime-soft:rgba(191,255,0,.13); --lime-glow:rgba(191,255,0,.32);
  --lime-ink:#141a00;
  --warn:#ffb84d; --danger:#ff6d5c;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --z-nav:100;
}
*{margin:0;padding:0;box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{
  background:var(--bg);color:var(--body);font-family:var(--sans);
  font-size:1.03rem;line-height:1.7;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:clip;position:relative;min-height:100vh;
  display:flex;flex-direction:column;
}
body::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:
    radial-gradient(38% 24% at 50% 3%,rgba(191,255,0,.075),transparent 70%),
    radial-gradient(30% 18% at 82% 38%,rgba(191,255,0,.045),transparent 70%),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);
  background-size:auto,auto,44px 44px,44px 44px;
}
img{max-width:100%;display:block}
a{color:var(--lime);text-decoration:none}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:6px}
::selection{background:var(--lime);color:var(--lime-ink)}
main{flex:1}

h1,h2,h3{color:var(--ink);font-weight:700;line-height:1.12;letter-spacing:-.015em;text-wrap:balance}
h1{font-size:clamp(1.9rem,4.5vw,2.9rem)}
h2{font-size:clamp(1.35rem,2.6vw,1.8rem)}
h3{font-size:1.06rem}
.lime{color:var(--lime)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)}
.wrap{width:min(1120px,92vw);margin-inline:auto}
.wrap-slim{width:min(760px,92vw);margin-inline:auto}

.pill{
  display:inline-flex;align-items:center;gap:.5em;
  border:1px solid var(--line2);border-radius:999px;
  background:rgba(15,17,14,.7);
  padding:.42em 1.05em;font-size:.83rem;color:var(--body);
}
.pill b{color:var(--lime);font-weight:500}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;white-space:nowrap;
  font-family:var(--sans);font-weight:700;font-size:.98rem;
  padding:.85em 1.6em;border-radius:999px;border:1px solid transparent;cursor:pointer;
  transition:transform .16s cubic-bezier(.22,1,.36,1),box-shadow .16s,background .16s,border-color .16s,opacity .16s;
}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}
.btn-solid{
  background:linear-gradient(180deg,#e4ff70 0%,#c6ff1a 38%,#a4e300 100%);
  color:var(--lime-ink);
  text-shadow:0 1px 0 rgba(255,255,255,.3);
  box-shadow:0 0 24px var(--lime-glow),inset 0 1.5px 0 rgba(255,255,255,.65),inset 0 -2.5px 0 rgba(35,54,0,.5),0 3px 8px rgba(0,0,0,.45);
}
.btn-solid:hover{
  background:linear-gradient(180deg,#eeff96 0%,#d3ff3d 40%,#b4f200 100%);
  color:var(--lime-ink);transform:translateY(-1px);
  box-shadow:0 0 38px var(--lime-glow),inset 0 1.5px 0 rgba(255,255,255,.7),inset 0 -2.5px 0 rgba(35,54,0,.45),0 5px 12px rgba(0,0,0,.5);
}
.btn-solid:active{transform:translateY(1px);box-shadow:0 0 16px var(--lime-glow),inset 0 2px 5px rgba(28,44,0,.55),0 1px 3px rgba(0,0,0,.4)}
.btn-ghost{
  border-color:var(--line2);color:var(--ink);
  background:linear-gradient(180deg,#181c16 0%,#0f120e 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),inset 0 -2px 0 rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.35);
}
.btn-ghost:hover{border-color:var(--lime);color:var(--ink);transform:translateY(-1px);box-shadow:0 4px 10px rgba(0,0,0,.4),0 0 14px rgba(191,255,0,.12)}
.btn-danger{border-color:rgba(255,109,92,.4);color:var(--danger);background:rgba(255,109,92,.06)}
.btn-danger:hover{border-color:var(--danger);background:rgba(255,109,92,.12);transform:translateY(-1px)}
.btn-sm{padding:.5em 1.05em;font-size:.86rem;font-weight:600}
.btn .arr{font-weight:500}
/* bouton Google Sign-In — relief via gradient + inset shadows, pas de border+blur combo */
.btn-google{
  width:100%;background:linear-gradient(180deg,#fff 0%,#f2f2f2 100%);
  color:#1f1f1f;font-weight:600;
  border:1px solid #dadce0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.25);
}
.btn-google:hover{
  background:linear-gradient(180deg,#fff 0%,#e8e8e8 100%);
  border-color:#bdc1c6;transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(0,0,0,.1),0 3px 8px rgba(0,0,0,.35);
}
.btn-google:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(0,0,0,.12)}
.btn-google svg{width:18px;height:18px;flex:none}

/* ============ nav flottante ============ */
.nav{position:sticky;top:12px;z-index:var(--z-nav);pointer-events:none}
.nav-in{
  pointer-events:auto;
  display:flex;align-items:center;gap:1.8rem;height:60px;padding:0 .9rem 0 1.1rem;
  border:1px solid var(--line);border-radius:16px;
  background:rgba(7,8,6,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--ink);font-weight:700;font-size:.98rem;letter-spacing:-.01em}
.brand img{width:30px;height:30px;filter:drop-shadow(0 0 8px rgba(191,255,0,.5))}
.nav-links{display:flex;gap:1.5rem;margin-left:auto;font-size:.92rem;font-weight:500}
.nav-links a{color:var(--body)}
.nav-links a:hover{color:var(--ink)}
.nav .btn{padding:.55em 1.2em;font-size:.9rem}
@media (max-width:760px){.nav-links{display:none}.nav-in{justify-content:space-between}}

/* ============ cartes ============ */
.card{
  border:1px solid var(--line);border-radius:16px;background:var(--card);
  padding:1.5rem 1.6rem;
}
.card + .card{margin-top:1rem}
.card h3{display:flex;align-items:center;gap:.55rem;margin-bottom:.85rem}
.card h3 svg{width:17px;height:17px;stroke:var(--lime);flex:none}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}

/* badge de formule */
.tierbadge{
  display:inline-flex;align-items:center;gap:.45em;
  font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--lime);color:var(--lime);border-radius:8px;padding:.3em .7em;
  background:var(--lime-soft);box-shadow:0 0 14px rgba(191,255,0,.15);
}
.dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime-glow);flex:none}
.dot.warn{background:var(--warn);box-shadow:0 0 8px rgba(255,184,77,.5)}
.dot.bad{background:var(--danger);box-shadow:0 0 8px rgba(255,109,92,.5)}

/* lignes machine */
.mrow{
  display:flex;align-items:center;gap:.9rem;padding:.8rem .2rem;
  border-top:1px solid var(--line);
}
.mrow:first-of-type{border-top:0}
.mrow .mid{font-family:var(--mono);font-size:.86rem;color:var(--ink)}
.mrow .msub{font-size:.8rem;color:var(--muted)}
.mrow .spacer{margin-left:auto}

/* formulaires */
.field{margin:1rem 0}
.field label{display:block;font-size:.86rem;font-weight:600;color:var(--ink);margin-bottom:.4rem}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=tel],textarea{
  width:100%;padding:.8em 1em;border-radius:12px;border:1px solid var(--line2);
  background:#0a0c09;color:var(--ink);font-family:var(--mono);font-size:.95rem;
  transition:border-color .15s,box-shadow .15s;-webkit-appearance:none;appearance:none;
}
input::placeholder,textarea::placeholder{color:#5a6053;font-family:var(--mono)}
input:focus,textarea:focus{outline:none;border-color:var(--lime);box-shadow:0 0 0 3px rgba(191,255,0,.12)}
/* Neutralise le fond crème de l'autofill Chrome/Safari → garde le thème sombre */
input:-webkit-autofill,input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 100px #0a0c09 inset;
  caret-color:var(--ink);border:1px solid var(--line2);font-family:var(--mono);
}
input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 100px #0a0c09 inset,0 0 0 3px rgba(191,255,0,.12);
  border-color:var(--lime);
}
textarea{font-family:var(--sans);min-height:90px;resize:vertical}
.hint{font-size:.8rem;color:var(--muted);margin-top:.4rem}

/* clé affichée en grand */
.bigkey{
  font-family:var(--mono);font-size:clamp(1.05rem,3.2vw,1.5rem);font-weight:600;letter-spacing:.04em;
  color:var(--lime);text-shadow:0 0 22px rgba(191,255,0,.3);
  border:1px dashed var(--line2);border-radius:12px;background:#0a0c09;
  padding:.9em 1em;text-align:center;user-select:all;word-break:break-all;
}

/* modal */
.overlay{
  position:fixed;inset:0;background:rgba(3,4,3,.72);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;z-index:200;padding:5vw;
}
.modal{
  width:min(480px,100%);border:1px solid var(--line2);border-radius:18px;
  background:linear-gradient(180deg,#12150f 0%,#0c0e0a 100%);
  box-shadow:0 0 60px rgba(0,0,0,.6),0 0 40px rgba(191,255,0,.06);
  padding:1.8rem 1.7rem;
}
.modal h3{font-size:1.25rem;margin-bottom:.6rem}
.modal .row{display:flex;gap:.7rem;margin-top:1.3rem;flex-wrap:wrap}
.modal .row .btn{flex:1}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:300;
  background:#10130d;border:1px solid var(--line2);border-radius:12px;color:var(--ink);
  padding:.75em 1.3em;font-size:.92rem;box-shadow:0 6px 24px rgba(0,0,0,.5);
  opacity:0;translate:0 8px;transition:opacity .2s,translate .2s;pointer-events:none;max-width:88vw;
}
.toast.show{opacity:1;translate:0 0}
.toast.err{border-color:rgba(255,109,92,.5)}

/* bannière d'état (abo annulé, essai, etc.) */
.notice{
  display:flex;gap:.7rem;align-items:flex-start;
  border:1px solid rgba(191,255,0,.25);border-radius:12px;
  background:rgba(191,255,0,.04);padding:.9rem 1.1rem;font-size:.92rem;margin-bottom:1rem;
}
.notice.warn{border-color:rgba(255,184,77,.3);background:rgba(255,184,77,.04)}
.notice.bad{border-color:rgba(255,109,92,.3);background:rgba(255,109,92,.04)}

/* barre de progression (essai) */
.meter{height:8px;border-radius:999px;background:#161a13;border:1px solid var(--line);overflow:hidden}
.meter i{display:block;height:100%;background:linear-gradient(90deg,#a4e300,var(--lime));box-shadow:0 0 10px var(--lime-glow)}

/* plans (page /buy) */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1rem;margin-top:2rem}
.plan{position:relative;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:1.6rem 1.5rem;display:flex;flex-direction:column}
.plan .name{font-family:var(--mono);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.plan .price{margin:.85rem 0 .15rem;color:var(--ink);font-weight:700;font-size:2.5rem;letter-spacing:-.03em;line-height:1}
.plan .price small{font-size:.92rem;font-weight:500;color:var(--muted);letter-spacing:0}
.plan .alt{font-size:.85rem;color:var(--muted);margin-bottom:.9rem}
.plan ul{list-style:none;margin:0 0 1.4rem;font-size:.92rem}
.plan ul li{padding:.32em 0 .32em 1.4em;position:relative}
.plan ul li::before{content:"✓";position:absolute;left:0;color:var(--lime);font-weight:700}
.plan .btn{margin-top:auto}
.plan-hot{border-color:rgba(191,255,0,.5);box-shadow:0 0 34px rgba(191,255,0,.08)}
.plan-hot .price{color:var(--lime);text-shadow:0 0 22px rgba(191,255,0,.3)}
.badge{
  position:absolute;top:-11px;right:16px;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  background:linear-gradient(180deg,#e4ff70,#a4e300);color:var(--lime-ink);font-weight:700;
  border-radius:999px;padding:.25em .8em;box-shadow:0 0 14px var(--lime-glow);
}

/* étapes numérotées (page /trial) */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin:2rem 0}
.step{border:1px solid var(--line);border-radius:16px;background:var(--card);padding:1.4rem 1.3rem}
.step .n{
  font-family:var(--mono);font-weight:600;color:var(--lime);font-size:.82rem;
  border:1px solid var(--line2);border-radius:8px;display:inline-block;padding:.15em .6em;margin-bottom:.7rem;
  background:var(--lime-soft);
}

/* util */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:820px){.grid2{grid-template-columns:1fr}}
.center{text-align:center}
.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mb1{margin-bottom:1rem}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

footer{border-top:1px solid var(--line);margin-top:4rem;padding:2rem 0 2.4rem;font-size:.88rem}
.foot{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot nav{display:flex;gap:1.3rem}
.foot nav a{color:var(--muted)}
.foot nav a:hover{color:var(--ink)}
.legalline{margin-top:1rem;font-size:.78rem;color:#5a6053;max-width:none}

/* page shell */
.page{padding:clamp(2.4rem,6vw,4rem) 0}
.page-head{text-align:center;margin-bottom:2.2rem}
.page-head .pill{margin-bottom:1.1rem}
.page-head p{margin:.8rem auto 0;max-width:52ch}

/* ── App shell (dashboard façon SaaS : sidebar + contenu) ── */
.shell{display:grid;grid-template-columns:232px 1fr;width:min(1180px,94vw);margin:1.2rem auto 0;
  border:1px solid var(--line);border-radius:18px;background:rgba(9,11,8,.55);overflow:hidden;
  min-height:min(720px,calc(100vh - 200px))}
.side{border-right:1px solid var(--line);padding:1.1rem .8rem;display:flex;flex-direction:column;gap:.2rem;background:rgba(10,12,9,.7)}
.side .brand{padding:.2rem .55rem 1rem;font-size:.92rem}
.snav{display:flex;flex-direction:column;gap:.15rem}
.snav button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;padding:.55rem .7rem;border-radius:10px;
  color:var(--body);font-size:.92rem;font-weight:500;font-family:var(--sans);background:none;border:0;cursor:pointer;transition:background .12s,color .12s}
.snav button svg{width:16px;height:16px;stroke:currentColor;flex:none}
.snav button:hover{background:rgba(255,255,255,.045);color:var(--ink)}
.snav button.on{background:var(--lime-soft);color:var(--lime)}
.side .grow{flex:1}
.side .helplink{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:10px;color:var(--muted);font-size:.88rem}
.side .helplink:hover{color:var(--ink);background:rgba(255,255,255,.045)}
.acct{border-top:1px solid var(--line);margin-top:.6rem;padding:.8rem .55rem 0;display:flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.73rem;color:var(--muted)}
.acct .em{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.acct button{background:none;border:1px solid var(--line2);border-radius:8px;color:var(--muted);cursor:pointer;
  font-size:.7rem;padding:.25em .6em;font-family:var(--sans)}
.acct button:hover{color:var(--ink);border-color:var(--lime)}
.mainp{padding:1.7rem 1.9rem;min-width:0}
.pgt{font-size:1.35rem;color:var(--ink);font-weight:700;letter-spacing:-.01em}
.pgs{color:var(--muted);font-size:.9rem;margin:.15rem 0 1.5rem}
.lrow{display:flex;align-items:center;gap:1rem;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:12px;
  background:var(--card);margin-bottom:.7rem;flex-wrap:wrap;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.lrow:hover{border-color:var(--line2)}
.lrow.sel{border-color:rgba(191,255,0,.55);box-shadow:0 0 18px rgba(191,255,0,.07)}
.lrow .kmask{font-family:var(--mono);font-size:.9rem;color:var(--ink)}
.lrow .sub{font-size:.78rem;color:var(--muted)}
.upsell{border:1px dashed var(--line2);border-radius:14px;background:var(--card2);padding:1.35rem 1.4rem;text-align:center;margin-top:1.5rem}
.upsell p{max-width:none}
.keytoggle{background:none;border:0;color:var(--muted);font-size:.84rem;cursor:pointer;text-decoration:underline;font-family:var(--sans)}
.keytoggle:hover{color:var(--ink)}
@media (max-width:860px){
  .shell{grid-template-columns:1fr;min-height:0}
  .side{flex-direction:row;align-items:center;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line);padding:.7rem .8rem}
  .side .brand{padding:0 .6rem 0 0}
  .snav{flex-direction:row;flex-wrap:wrap}
  .side .grow,.side .helplink{display:none}
  .acct{border:0;margin:0;padding:0;margin-left:auto;max-width:46%}
  .mainp{padding:1.2rem 1rem}
}

/* ── Feedback : cartes de type + historique ── */
.fbcards{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
@media (max-width:720px){.fbcards{grid-template-columns:1fr}}
.fbcard{
  display:flex;flex-direction:column;align-items:flex-start;gap:.3rem;text-align:left;
  border:1px solid var(--line);border-radius:14px;background:var(--card);cursor:pointer;
  padding:1.1rem 1.15rem;font-family:var(--sans);color:var(--body);
  transition:border-color .16s,transform .16s,box-shadow .16s;
}
.fbcard:hover{transform:translateY(-2px);border-color:var(--line2)}
.fbcard.on{border-color:rgba(191,255,0,.6);box-shadow:0 0 22px rgba(191,255,0,.1);background:linear-gradient(180deg,rgba(191,255,0,.05),transparent 60%),var(--card)}
.fbcard .fbico{font-size:1.5rem;filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.fbcard b{color:var(--ink);font-size:.95rem}
.fbcard.on b{color:var(--lime)}
.fbcard small{font-size:.78rem;color:var(--muted);line-height:1.4}
.fbrow{
  display:flex;align-items:baseline;gap:.8rem;padding:.75rem 1rem;margin-bottom:.5rem;
  border:1px solid var(--line);border-radius:11px;background:var(--card);font-size:.88rem;
}
.fbchip{flex:none;font-family:var(--mono);font-size:.68rem;border-radius:999px;padding:.22em .7em;font-weight:600}
.fbtxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.fbmeta{flex:none;font-size:.74rem;color:var(--muted)}
@media (max-width:640px){.fbtxt{white-space:normal}.fbrow{flex-wrap:wrap}}

/* ── Compte connecté (pages /buy/ et /portal/credits/) ────────────────────
   2026-07-28 — il existait DEUX implémentations one-off du même bloc, toutes
   deux construites en nœuds texte nus dans un conteneur flex : « Connecté : »
   devenait un élément flex anonyme qui se coupait sur deux lignes, et
   l'action était un <a href="#"> qui ne se lisait pas comme un bouton.
   Un seul composant : identité à gauche, action à droite, aucune césure
   interne possible (chaque fragment est un élément flex avec nowrap). */
.acct-bar{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:.4rem .7rem;width:max-content;max-width:100%;
  margin:1.3rem auto 0;padding:.4rem .4rem .4rem .9rem;
  border:1px solid var(--line2);border-radius:999px;background:var(--card2);
  font-size:.85rem;color:var(--muted);
}
.acct-bar__id{display:flex;align-items:center;gap:.5rem;min-width:0}
.acct-bar__dot{width:6px;height:6px;border-radius:50%;background:var(--lime);flex:0 0 auto}
.acct-bar img{width:22px;height:22px;border-radius:50%;border:1px solid var(--line2);flex:0 0 auto}
.acct-bar__label{white-space:nowrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.03em}
.acct-bar__em{color:var(--ink);font-weight:600;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-bar__act{
  flex:0 0 auto;white-space:nowrap;font:600 .75rem/1 var(--sans);
  color:var(--body);background:rgba(255,255,255,.04);
  border:1px solid var(--line2);border-radius:999px;padding:.58em 1.05em;
  cursor:pointer;text-decoration:none;
  transition:color .2s,border-color .2s,background .2s;
}
.acct-bar__act:hover{color:var(--lime);border-color:var(--lime);background:var(--lime-soft)}
@media(max-width:520px){
  .acct-bar{width:auto;border-radius:16px;padding:.7rem .85rem;justify-content:space-between}
}
@media (prefers-reduced-motion:reduce){ .acct-bar__act{transition:none} }

/* ── GlowingEffect : liseré conic lime qui suit le curseur (cartes tarifs, packs) ── */
.glowfx{--gstart:0;--gactive:0}
.glowfx::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  border:2px solid transparent;
  background:
    radial-gradient(circle,#bfff00 10%,#bfff0000 20%),
    radial-gradient(circle at 40% 40%,#eaffb0 5%,#eaffb000 15%),
    radial-gradient(circle at 60% 60%,#7edb00 10%,#7edb0000 20%),
    radial-gradient(circle at 40% 60%,#d3ff3d 10%,#d3ff3d00 20%),
    repeating-conic-gradient(from 236.84deg at 50% 50%,#bfff00 0%,#eaffb0 5%,#7edb00 10%,#d3ff3d 15%,#bfff00 20%);
  background-attachment:fixed;
  -webkit-mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--gstart) - 28) * 1deg),#00000000 0deg,#fff,#00000000 56deg);
  mask-image:linear-gradient(#0000,#0000),conic-gradient(from calc((var(--gstart) - 28) * 1deg),#00000000 0deg,#fff,#00000000 56deg);
  -webkit-mask-clip:padding-box,border-box;mask-clip:padding-box,border-box;
  -webkit-mask-composite:source-in;mask-composite:intersect;
  opacity:var(--gactive);transition:opacity .3s;
}

/* ── Toggle mensuel / annuel ── */
/* 2026-07-28 (Alex) — le switch reprend l'effet VERRE de la barre de nav
   (rgba(7,8,6,.78) + blur 14px) : c'est le seul traitement « verre » validé
   de la charte, il n'avait jamais été repris ici. Le repli sans
   backdrop-filter reste lisible (fond opaque). */
.bill-switch{
  position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
  margin:0 auto 2.2rem;width:max-content;
  border:1px solid var(--line);border-radius:999px;padding:.32rem;
  background:rgba(7,8,6,.78);
  backdrop-filter:blur(14px) saturate(1.35);-webkit-backdrop-filter:blur(14px) saturate(1.35);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.55),inset 0 -1px 0 rgba(255,255,255,.05);
}
.bill-switch::before{
  content:"";position:absolute;z-index:0;
  top:.32rem;bottom:.32rem;left:.32rem;right:50%;
  border-radius:999px;
  background:linear-gradient(180deg,
    color-mix(in srgb,var(--lime) 88%,#fff) 0%,
    var(--lime) 45%,
    color-mix(in srgb,var(--lime) 84%,#000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 2px 5px rgba(0,0,0,.45),
    0 6px 18px color-mix(in srgb,var(--lime) 26%,transparent);
  transition:transform .44s cubic-bezier(.34,1.35,.44,1);
}
.bill-switch:has(button:last-of-type.on)::before{transform:translateX(100%)}
.bill-switch button{
  position:relative;z-index:1;white-space:nowrap;
  font:600 .85rem/1 var(--sans);color:var(--muted);background:none;border:0;
  border-radius:999px;padding:.62em 1.2em;cursor:pointer;
  transition:color .3s ease;
}
.bill-switch button:hover:not(.on){color:var(--ink)}
.bill-switch button em{font-style:normal;font-size:.72em;color:var(--lime);margin-left:.35em;transition:color .3s ease}
.bill-switch button.on{color:var(--lime-ink)}
.bill-switch button.on em{color:var(--lime-ink)}
@media (prefers-reduced-motion:reduce){.bill-switch::before{transition:none}}

/* ── FAQ accordéon ── */
.faq{max-width:640px;margin-inline:auto}
.faq details{border:1px solid var(--line);border-radius:12px;padding:0 1rem;margin-bottom:.6rem;background:var(--card)}
.faq details[open]{background:var(--card2)}
.faq summary{cursor:pointer;list-style:none;padding:.95rem 0;font-weight:500;display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--lime);font-family:var(--mono);font-size:1.25rem;line-height:1;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 0 1rem;color:var(--body);font-size:.94rem;line-height:1.6}
.faq .ans code{font-family:var(--mono);background:var(--lime-soft);color:var(--lime);padding:.08em .4em;border-radius:5px;font-size:.85em}

/* Bandeau Lifetime (2026-07-28) — paiement UNIQUE, donc hors de la grille des
   abonnements : en 5e carte il restait orphelin sur une 2e ligne, et le switch
   mensuel/annuel n'a aucun sens pour lui. Bandeau horizontal = sa nature est
   lisible d'un coup d'œil. */
.plan-life{
  display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;
  align-items:center;gap:1.2rem 2rem;
  margin-top:1rem;padding:1.3rem 1.5rem;
  border:1px solid var(--lime);border-radius:16px;background:var(--card2);
}
.plan-life__id .name{display:block;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.plan-life__id .price{margin:.25rem 0 0;font-size:1.9rem;font-weight:700;color:var(--ink);line-height:1}
.plan-life__id .price small{font-size:.5em;font-weight:500;color:var(--muted)}
.plan-life__id .alt{margin:.3rem 0 0;font-size:.85rem;color:var(--muted)}
.plan-life__pts{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin:0;padding:0;list-style:none;
  font-size:.9rem;color:var(--body)}
.plan-life__pts li{position:relative;padding-left:1.1rem}
.plan-life__pts li::before{content:"✓";position:absolute;left:0;color:var(--lime)}
.plan-life .btn{white-space:nowrap}
@media (max-width:860px){
  .plan-life{grid-template-columns:1fr;text-align:left}
  .plan-life .btn{justify-self:stretch;text-align:center}
}