/* ═══════════════════════════════════════════════════════════
   VINCIDIUM — compte.css
   Espace client : auth, tableau de bord, crédits, livres
   S'appuie sur style.css + outils.css
   ═══════════════════════════════════════════════════════════ */

.account-main{ min-height:100svh; padding-top:calc(var(--header-h) + 40px); }

/* L'attribut hidden doit gagner contre display:flex/inline-flex des composants */
.page-compte [hidden]{ display:none !important; }

/* Header : puce crédits */
.credit-chip{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; color:var(--muted);
  border:1px solid var(--line);
  background:rgba(148,158,196,.06);
  border-radius:999px; padding:8px 14px;
  white-space:nowrap;
}
.credit-chip svg{ width:14px; height:14px; color:var(--cyan); }
.credit-chip strong{ color:var(--text); font-family:var(--font-mono); font-weight:500; }

/* ─── Auth ─── */
.auth-wrap{
  display:flex; align-items:center; justify-content:center;
  padding:40px 24px 90px;
}
.auth-card{
  width:min(460px, 100%);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(165deg, rgba(20,23,40,.8), rgba(10,12,22,.92));
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7);
  padding:38px 34px;
}
.auth-title{ font-size:clamp(28px,4vw,38px); margin-bottom:12px; }
.auth-sub{ font-size:14.5px; color:var(--muted); margin-bottom:26px; }
.auth-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  border:1px solid var(--line); border-radius:12px;
  background:rgba(148,158,196,.05);
  padding:4px; margin-bottom:24px;
}
.auth-tab{
  padding:10px; border-radius:9px;
  font-weight:600; font-size:14px; color:var(--muted);
  transition:background-color .25s, color .25s;
}
.auth-tab.active{
  color:var(--text);
  background:linear-gradient(160deg, rgba(124,108,255,.24), rgba(124,108,255,.1));
  border:1px solid rgba(124,108,255,.4);
}
.field{ display:block; margin-bottom:16px; }
.field span{
  display:block;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); margin-bottom:8px;
}
.field input, .field textarea{
  width:100%;
  background:rgba(148,158,196,.06);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text);
  font:inherit; font-size:15px;
  padding:13px 16px;
  transition:border-color .25s, box-shadow .25s;
  resize:vertical;
}
.field input:focus, .field textarea:focus{
  outline:none;
  border-color:rgba(124,108,255,.55);
  box-shadow:0 0 0 4px rgba(124,108,255,.12);
}
.auth-error{
  min-height:1.3em;
  font-size:13px; color:var(--rose);
  margin:2px 0 14px;
}
.auth-note{ font-size:12.5px; color:var(--faint); text-align:center; margin-top:18px; }

/* ─── Dashboard ─── */
.dash{ padding-bottom:90px; }
.dash-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
  margin-bottom:26px; flex-wrap:wrap;
}
.dash-title{ font-size:clamp(26px,3.6vw,40px); overflow-wrap:anywhere; }
.dash-balance{
  text-align:right;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(124,108,255,.12), rgba(10,12,22,.7));
  padding:16px 22px;
}
.dash-balance-label{
  display:block;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--faint); margin-bottom:4px;
}
.dash-balance strong{
  font-family:var(--font-mono); font-weight:500;
  font-size:30px; letter-spacing:-.02em;
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.dash-balance small{ font-size:13px; }
.dash-balance-link{
  display:block; font-size:12.5px; color:var(--violet-2); margin-top:4px;
  transition:color .25s;
}
.dash-balance-link:hover{ color:var(--cyan); }

.mode-banner{
  border:1px dashed rgba(255,196,107,.45);
  background:rgba(255,177,80,.07);
  color:#FFC46B;
  border-radius:12px; padding:12px 18px;
  font-size:13.5px; margin-bottom:20px;
}
.toast-line{
  border:1px solid rgba(62,230,210,.35);
  background:rgba(62,230,210,.08);
  color:var(--cyan);
  border-radius:12px; padding:12px 18px;
  font-size:13.5px; margin-bottom:20px;
}
.toast-line.err{
  border-color:rgba(255,110,199,.4);
  background:rgba(255,110,199,.07);
  color:var(--rose);
}

.dash-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:22px; align-items:start;
  margin-bottom:22px;
}
.panel{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  background:linear-gradient(170deg, rgba(18,21,36,.72), rgba(9,11,20,.88));
  padding:28px;
}
.panel-title{ font-size:20px; margin-bottom:22px; }
.panel-note{ font-size:12.5px; color:var(--faint); margin-top:14px; line-height:1.55; }
#gen-btn[disabled]{ opacity:.55; pointer-events:none; }

/* Packs */
.packs{ display:flex; flex-direction:column; gap:12px; }
.pack{
  display:flex; align-items:center; gap:16px;
  border:1px solid var(--line);
  border-radius:14px; padding:16px 18px;
  transition:border-color .3s, transform .3s var(--ease-out);
}
.pack:hover{ border-color:rgba(124,108,255,.4); transform:translateY(-2px); }
.pack-info{ flex:1; min-width:0; }
.pack-name{ display:block; font-family:var(--font-display); font-weight:600; font-size:16px; }
.pack-detail{ font-size:12.5px; color:var(--faint); }
.pack-price{
  font-family:var(--font-mono); font-weight:500; font-size:17px;
  white-space:nowrap;
}
.pack .btn{ padding:10px 16px; font-size:13px; flex-shrink:0; }

/* Livres */
.panel-books{ margin-bottom:22px; }
.books{ display:flex; flex-direction:column; gap:14px; }
.books-empty{
  border:1px dashed rgba(148,158,196,.3);
  border-radius:14px; padding:28px;
  text-align:center; color:var(--faint); font-size:14px;
}
.book{
  border:1px solid var(--line);
  border-radius:16px; padding:20px 22px;
}
.book-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.book-title{ flex:1; min-width:200px; font-family:var(--font-display); font-weight:600; font-size:17px; }
.book-meta{ font-size:12px; color:var(--faint); }
.book-status{
  font-size:11.5px; font-weight:700;
  border-radius:8px; padding:5px 12px; white-space:nowrap;
}
.st-en_attente{ color:#FFC46B; background:rgba(255,177,80,.12); }
.st-generation{ color:#6BC8FF; background:rgba(80,180,255,.12); }
.st-termine{ color:var(--cyan); background:rgba(62,230,210,.1); }
.st-erreur{ color:var(--rose); background:rgba(255,110,199,.1); }

.book-progress{ margin-top:14px; }
.book-progress-label{
  display:flex; justify-content:space-between;
  font-family:var(--font-mono); font-size:11.5px; color:var(--muted);
  margin-bottom:7px;
}
.book-bar{
  height:6px; border-radius:4px;
  background:rgba(148,158,196,.14); overflow:hidden;
}
.book-bar span{
  display:block; height:100%;
  background:var(--grad); border-radius:4px;
  transition:width .6s var(--ease-out);
}
.book-error{ margin-top:12px; font-size:13px; color:var(--rose); }
.book-actions{ display:flex; gap:10px; margin-top:16px; flex-wrap:wrap; }
.book-actions .btn{ padding:9px 16px; font-size:13px; }
.book-demo-tag{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:#FFC46B; border:1px solid rgba(255,196,107,.4);
  border-radius:6px; padding:3px 8px;
}

/* Détails KDP repliables */
.book-kdp{ margin-top:14px; }
.book-kdp summary{
  cursor:pointer; list-style:none;
  font-size:13px; font-weight:600; color:var(--violet-2);
}
.book-kdp summary::-webkit-details-marker{ display:none; }
.book-kdp summary::before{ content:"▸ "; }
.book-kdp[open] summary::before{ content:"▾ "; }
.book-kdp-body{
  margin-top:12px;
  border:1px solid rgba(62,230,210,.2);
  background:rgba(62,230,210,.04);
  border-radius:12px; padding:14px 16px;
  font-size:13px; color:var(--muted);
  display:flex; flex-direction:column; gap:8px;
}
.book-kdp-body b{ color:var(--text); }
.book-kdp-body .pc-kw{ margin-right:4px; }

/* Renvoi vers l'espace Outils */
.notice-card{
  display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap;
  border:1px solid rgba(124,108,255,.35);
  background:linear-gradient(120deg, rgba(124,108,255,.14), rgba(62,230,210,.06));
  border-radius:var(--radius); padding:18px 22px;
  margin-bottom:22px;
}
.notice-card strong{ display:block; font-family:var(--font-display); font-size:15.5px; }
.notice-card span{ font-size:13px; color:var(--muted); }
.notice-card .btn{ flex-shrink:0; }

/* Bandeau de suppression programmée */
.deact-banner{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  border:1px solid rgba(255,110,199,.45);
  background:rgba(255,110,199,.08);
  border-radius:12px; padding:14px 18px;
  margin-bottom:20px;
}
.deact-banner strong{ display:block; color:var(--rose); font-size:14px; }
.deact-banner span{ font-size:12.5px; color:var(--muted); }

/* Zone dangereuse */
.panel-danger{ border-color:rgba(255,110,199,.3); margin-bottom:22px; }
.panel-danger .panel-title{ color:var(--rose); }
.delete-form{ display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-top:14px; }
.delete-form .field{ margin-bottom:0; min-width:240px; }
.btn-danger{
  color:#fff;
  background:linear-gradient(100deg, #E23A8C, #FF6EC7);
  box-shadow:0 8px 24px -8px rgba(255,110,199,.5);
}
.btn-danger:hover{ transform:translateY(-2px); box-shadow:0 12px 30px -8px rgba(255,110,199,.65); }
#delete-btn[disabled], #reactivate-btn[disabled]{ opacity:.55; pointer-events:none; }

/* Rangées de champs (profil, inscription) */
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field-row-3{ grid-template-columns:1fr 1fr 1fr; }
#section-profil{ margin-bottom:22px; }
#section-profil .btn{ margin-top:6px; }

/* ─── Bulle d'assistance ─── */
.support-fab{
  position:fixed; right:22px; bottom:22px; z-index:140;
  width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  background:linear-gradient(135deg, #6E5BFF, #37C7BC);
  box-shadow:0 14px 34px -10px rgba(124,108,255,.65);
  transition:transform .3s var(--ease-spring), box-shadow .3s;
}
.support-fab:hover{ transform:scale(1.07); }
.support-fab svg{ width:26px; height:26px; }
.support-badge{
  position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; padding:0 5px;
  color:#fff; background:var(--rose);
  border:2px solid var(--ink);
}
.support-panel{
  position:fixed; right:22px; bottom:92px; z-index:140;
  width:min(360px, calc(100vw - 44px));
  height:min(480px, calc(100svh - 130px));
  display:flex; flex-direction:column;
  border:1px solid rgba(124,108,255,.35);
  border-radius:18px;
  background:linear-gradient(170deg, rgba(20,23,40,.97), rgba(10,12,22,.99));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);
  overflow:hidden;
}
.support-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 18px;
  border-bottom:1px solid var(--line-soft);
  background:rgba(124,108,255,.08);
}
.support-head strong{ display:block; font-family:var(--font-display); font-size:15px; }
.support-head span{ font-size:11.5px; color:var(--faint); }
.support-close{
  width:30px; height:30px; border-radius:8px;
  color:var(--muted); font-size:13px;
  transition:background-color .25s, color .25s;
}
.support-close:hover{ background:rgba(148,158,196,.12); color:var(--text); }
.support-msgs{
  flex:1; overflow-y:auto;
  padding:16px; display:flex; flex-direction:column; gap:10px;
}
.support-empty{ margin:auto; text-align:center; color:var(--faint); font-size:13px; padding:0 20px; }
.smsg{
  max-width:85%;
  padding:9px 13px; border-radius:14px;
  font-size:13.5px; line-height:1.5;
  white-space:pre-wrap; overflow-wrap:anywhere;
}
.smsg-client{
  align-self:flex-end;
  background:linear-gradient(120deg, rgba(124,108,255,.4), rgba(124,108,255,.22));
  border-bottom-right-radius:4px;
}
.smsg-admin{
  align-self:flex-start;
  background:rgba(148,158,196,.13);
  border-bottom-left-radius:4px;
}
.smsg time{ display:block; font-size:10px; color:var(--faint); margin-top:4px; }
.support-input{
  display:flex; gap:8px; align-items:flex-end;
  padding:12px;
  border-top:1px solid var(--line-soft);
}
.support-input textarea{
  flex:1; resize:none;
  background:rgba(148,158,196,.07);
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--text); font:inherit; font-size:13.5px;
  padding:9px 12px;
}
.support-input textarea:focus{ outline:none; border-color:rgba(124,108,255,.55); }
.support-input .btn{ padding:11px 14px; }
.support-input .btn svg{ width:15px; height:15px; }

/* Footer slim */
.footer-slim{ padding-top:0; }
.footer-slim .footer-bottom a{ color:var(--muted); }
.footer-slim .footer-bottom a:hover{ color:var(--text); }

/* Responsive */
@media (max-width: 1080px){
  .dash-grid{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .credit-chip{ display:none; }
  .field-row, .field-row-3{ grid-template-columns:1fr; }
  .support-fab{ right:14px; bottom:14px; }
  .support-panel{ right:14px; bottom:82px; }
  /* style.css masque .btn-ghost dans le header en mobile — on garde la déconnexion */
  .page-compte .header-actions .btn-ghost{ display:inline-flex; }
  .dash-head{ flex-direction:column; align-items:stretch; }
  .dash-balance{ text-align:left; }
  .auth-card{ padding:28px 22px; }
  .panel{ padding:22px 18px; }
  .pack{ flex-wrap:wrap; }
}