*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0b0b14;
  --bg2:     #0f0f1e;
  --surf:    #17172c;
  --surf2:   #1e1e38;
  --border:  #272740;
  --border2: #323254;
  --accent:  #7b6ef6;
  --accent2: #a899ff;
  --text:    #e2e2f0;
  --text2:   #9090b4;
  --text3:   #52527a;
  --green:   #34d399;
  --yellow:  #fbbf24;
  --red:     #f87171;
  --success: #34d399;
  --danger:  #f87171;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
body.center-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }

/* ── Nav ─────────────────────────────────────────────────────────────────── */
nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: .65rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11,11,20,.9);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50;
}
.logo { font-weight: 700; font-size: 1rem; text-decoration: none; color: var(--text); letter-spacing: -.01em; }
.nav-links { display: flex; gap: 1.25rem; }
.nav-links a { color: var(--text2); text-decoration: none; font-size: .85rem; }
.nav-links a:hover { color: var(--text); }

/* ── Main ────────────────────────────────────────────────────────────────── */
main { max-width: 860px; margin: 0 auto; padding: 2rem 1rem 4rem; }

/* ── Page header (title + search) ────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  gap: .85rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.page-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-shrink: 0;
}
.page-title h1 {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.badge-count {
  background: var(--surf2);
  border: 1px solid var(--border2);
  color: var(--text2);
  font-size: .7rem;
  font-weight: 700;
  padding: .15rem .55rem;
  border-radius: 20px;
  letter-spacing: .02em;
}

/* ── Search box (flex, no absolute positioning) ──────────────────────────── */
.searchbox {
  flex: 1;
  min-width: 180px;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--surf);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 0 .75rem;
  cursor: text;
  transition: border-color .2s, box-shadow .2s;
}
.searchbox:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(123,110,246,.12);
}
.search-ico { color: var(--text3); flex-shrink: 0; display: block; }
#srch {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  padding: .68rem 0;
  color: var(--text);
  font-size: .9rem;
}
#srch:focus { outline: none; }
#srch::placeholder { color: var(--text3); }
.srch-clr {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 1rem;
  padding: .15rem .25rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}
.srch-clr:hover { color: var(--text); background: var(--surf2); }

/* ── Profile cards ───────────────────────────────────────────────────────── */
#list { display: flex; flex-direction: column; gap: .65rem; }

.pcard {
  background: var(--surf);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.pcard:hover {
  border-color: var(--border2);
  border-left-color: var(--border2);
  box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
.pcard--tagged { border-left-color: var(--accent); }
.pcard--tagged:hover { border-left-color: var(--accent2); }

/* Card header row */
.pcard-top {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .95rem;
}
.av {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--c, var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .78rem; color: #fff;
  flex-shrink: 0;
  letter-spacing: -.01em;
}
.pcard-name {
  font-weight: 600;
  font-size: .88rem;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.01em;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: .28rem;
  background: rgba(123,110,246,.14);
  border: 1px solid rgba(123,110,246,.3);
  color: var(--accent2);
  font-size: .67rem;
  font-weight: 700;
  padding: .15rem .52rem;
  border-radius: 20px;
  letter-spacing: .03em;
  white-space: nowrap;
  text-transform: uppercase;
}
.tag-x {
  background: none; border: none;
  color: var(--accent2); cursor: pointer;
  font-size: .9rem; opacity: .55; padding: 0; line-height: 1;
}
.tag-x:hover { opacity: 1; }
.tag-add {
  background: transparent;
  border: 1px dashed var(--border2);
  color: var(--text3);
  font-size: .67rem;
  padding: .15rem .5rem;
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.tag-add:hover { border-color: var(--accent); color: var(--accent); }
.tag-inp {
  background: var(--bg2); border: 1px solid var(--accent);
  border-radius: 20px; color: var(--text); font-size: .74rem;
  padding: .15rem .6rem; width: 115px; outline: none;
}

/* ── Subscription block ──────────────────────────────────────────────────── */
.sub {
  padding: .75rem .95rem;
  border-top: 1px solid var(--border);
}
.sub-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .6rem;
}
.svc {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent2);
  background: rgba(123,110,246,.1);
  border: 1px solid rgba(123,110,246,.2);
  padding: .16rem .55rem;
  border-radius: 6px;
}
.exp {
  font-size: .7rem;
  font-weight: 600;
  padding: .16rem .6rem;
  border-radius: 20px;
  letter-spacing: .01em;
}
.exp--ok      { background: rgba(52,211,153,.1);  color: var(--green); }
.exp--soon    { background: rgba(251,191,36,.1);   color: var(--yellow); }
.exp--expired { background: rgba(248,113,113,.1);  color: var(--red); }

/* Creds grid */
.creds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin-bottom: .55rem;
}
@media (max-width: 520px) { .creds { grid-template-columns: 1fr; } }

.cred {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .48rem .68rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.ck {
  font-size: .63rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text3);
  white-space: nowrap;
  min-width: 72px;
  flex-shrink: 0;
}
.cv {
  flex: 1;
  min-width: 0;
  font-size: .83rem;
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  background: none;
  padding: 0;
  word-break: break-all;
  color: var(--text);
}

/* Copy button */
.cp {
  flex-shrink: 0;
  width: 25px; height: 25px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--text3);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.cp:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.cp.ok    { background: var(--green);  border-color: var(--green);  color: #fff; }

/* M3U collapse */
.m3u { margin-top: .35rem; }
.m3u summary {
  font-size: .7rem; color: var(--text3);
  cursor: pointer; user-select: none;
  list-style: none;
  display: inline-flex; align-items: center; gap: .3rem;
}
.m3u summary::-webkit-details-marker { display: none; }
.m3u summary::before { content: '▸'; font-size: .58rem; transition: transform .15s; display: inline-block; }
.m3u[open] summary::before { transform: rotate(90deg); }
.m3u-body {
  margin-top: .4rem;
  display: flex; align-items: flex-start; gap: .4rem;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: .45rem .68rem;
}
.m3u-url {
  flex: 1; min-width: 0;
  font-size: .68rem;
  font-family: 'SF Mono', 'Fira Code', monospace;
  word-break: break-all;
  background: none; color: var(--text3); padding: 0;
}

.sub-note {
  font-size: .78rem; color: var(--text2);
  margin-top: .4rem;
  padding: .3rem .55rem;
  background: var(--bg2);
  border-radius: 6px;
  border-left: 2px solid var(--border2);
}

/* ── Vendor bar ──────────────────────────────────────────────────────────── */
.vendor-bar {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surf); border: 1px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: 10px; padding: .7rem 1rem;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: .5rem;
}
.vendor-balance { display: flex; align-items: baseline; gap: .6rem; }
.vendor-bal-label { font-size: .72rem; color: var(--text3); text-transform: uppercase; letter-spacing: .06em; }
.vendor-bal-amount { font-size: 1.5rem; font-weight: 700; }
.bal-ok  { color: var(--green); }
.bal-low { color: var(--yellow); }
.bal-neg { color: var(--red); }

/* ── Top actions (no wallet) ─────────────────────────────────────────────── */
.top-actions { display: flex; gap: .6rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.btn-outline {
  background: transparent;
  border: 1px solid var(--border2);
  color: var(--text2);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); opacity: 1; }

/* ── Pay banner ───────────────────────────────────────────────────────────── */
.pay-banner {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surf); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px; padding: .7rem 1rem;
  margin-bottom: .6rem; flex-wrap: wrap; gap: .5rem;
}
.pay-banner-title { font-size: .88rem; font-weight: 600; }
.pay-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.pay-rules { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.25rem; }
.pay-sum {
  font-size: .8rem; font-weight: 600; color: var(--text2);
  cursor: pointer; list-style: none; padding: .6rem .9rem;
  background: var(--surf); border: 1px solid var(--border);
  border-radius: 8px; display: flex; align-items: center; gap: .4rem;
  user-select: none;
}
.pay-sum::-webkit-details-marker { display: none; }
.pay-sum::before { content: '▸'; font-size: .6rem; transition: transform .15s; display: inline-block; }
details[open] .pay-sum::before { transform: rotate(90deg); }
.pay-body {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 8px; padding: .9rem 1rem;
  font-size: .8rem; color: var(--text2); line-height: 1.7;
}

/* ── Ticket thread ────────────────────────────────────────────────────────── */
.ticket-thread { display: flex; flex-direction: column; gap: .65rem; }
.tmsg {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: 10px; padding: .75rem .95rem;
  border-left: 3px solid var(--border2);
}
.tmsg--admin { border-left-color: var(--accent); background: var(--surf2); }
.tmsg-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.tmsg-who { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text2); }
.admin-badge { color: var(--accent2); }
.tmsg-date { font-size: .7rem; color: var(--text3); }
.tmsg-body { font-size: .88rem; color: var(--text); }

/* ── Catalog grid ─────────────────────────────────────────────────────────── */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: .55rem;
  margin-bottom: .9rem;
}
.catalog-item {
  display: block; cursor: pointer;
}
.catalog-item input[type=radio] { display: none; }
.catalog-label {
  display: flex; flex-direction: column; align-items: center;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 10px; padding: .75rem .5rem;
  transition: all .15s; gap: .25rem;
}
.catalog-item input:checked + .catalog-label {
  border-color: var(--accent);
  background: rgba(123,110,246,.1);
  box-shadow: 0 0 0 2px rgba(123,110,246,.2);
}
.catalog-dur { font-size: .82rem; font-weight: 600; color: var(--text); }
.catalog-price { font-size: 1rem; font-weight: 700; color: var(--accent2); }

/* ── Empty state ─────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 5rem 2rem; }
.empty-icon  { font-size: 2.5rem; margin-bottom: 1rem; }
.empty-state h2 { font-size: 1.1rem; margin-bottom: .4rem; }
.empty-state p  { color: var(--text2); margin-bottom: 1.5rem; font-size: .9rem; }

/* ── Orders table ────────────────────────────────────────────────────────── */
.section-title { font-size: .75rem; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem; }
.tbl { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.tbl table { width: 100%; border-collapse: collapse; margin: 0; }
.tbl th {
  text-align: left; padding: .55rem .9rem;
  color: var(--text3); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--border);
}
.tbl td { padding: .6rem .9rem; border-bottom: 1px solid var(--border); font-size: .86rem; }
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(255,255,255,.018); }

/* ── Shared globals ──────────────────────────────────────────────────────── */
h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 1rem; margin: 1.75rem 0 .6rem; }
.subtitle { color: var(--text2); margin-bottom: 1.5rem; font-size: .9rem; }

.card {
  background: var(--surf); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem;
}
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.login-card { width: 100%; max-width: 360px; }
.login-card h1 { margin-bottom: 1.5rem; text-align: center; }
.platform-card { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.platform-name { font-weight: 600; min-width: 120px; }

label { display: block; font-size: .78rem; color: var(--text2); margin-bottom: .3rem; }
input[type=email], input[type=text] {
  width: 100%; padding: .65rem .9rem;
  background: var(--bg2); border: 1px solid var(--border2);
  border-radius: 8px; color: var(--text); font-size: .9rem; margin-bottom: .9rem;
}
input:focus { outline: none; border-color: var(--accent); }

.btn {
  display: inline-block; padding: .55rem 1.1rem;
  background: var(--accent); color: #fff; border: none;
  border-radius: 8px; font-size: .88rem;
  cursor: pointer; text-decoration: none; transition: opacity .15s;
}
.btn:hover { opacity: .85; }
.btn-sm { padding: .3rem .7rem; font-size: .78rem; }
.btn-danger { background: var(--danger); }

.badge { display: inline-block; padding: .18rem .55rem; border-radius: 20px; font-size: .75rem; background: var(--border); }
.badge-done       { background: rgba(52,211,153,.1);  color: var(--green); }
.badge-pending    { background: rgba(251,191,36,.1);   color: var(--yellow); }
.badge-processing { background: rgba(96,165,250,.1);   color: #60a5fa; }
.badge-cancelled  { background: rgba(248,113,113,.1);  color: var(--red); }

.alert { padding: .7rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .88rem; }
.alert.success { background: rgba(52,211,153,.1); border: 1px solid rgba(52,211,153,.25); }
.alert.error   { background: rgba(248,113,113,.1); border: 1px solid rgba(248,113,113,.25); }

.hidden { display: none; }
.mt { margin-top: 1rem; }

details summary { cursor: pointer; color: var(--accent); font-size: .88rem; margin-bottom: .6rem; }
.inline-form { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
.inline-form input { margin-bottom: 0; width: auto; flex: 1; min-width: 200px; }
.chip {
  display: inline-block; background: var(--surf); border: 1px solid var(--border);
  border-radius: 20px; padding: .18rem .7rem; font-size: .8rem; margin: .2rem;
}
code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  background: var(--bg2); padding: .1rem .35rem; border-radius: 4px;
}
.link-token { margin-top: .5rem; padding: .6rem; background: var(--bg2); border-radius: 8px; font-size: .83rem; }

table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
th {
  text-align: left; padding: .5rem .75rem; color: var(--text2);
  font-size: .78rem; font-weight: 600; text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
td { padding: .6rem .75rem; border-bottom: 1px solid var(--border); font-size: .88rem; }
tr:hover td { background: rgba(255,255,255,.015); }
.info-table th { width: 160px; }

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE — l'admin doit être utilisable au doigt sur téléphone.
   ════════════════════════════════════════════════════════════════════════════ */
/* Anti-débordement horizontal : rien ne doit rendre la page plus large que l'écran
   (sinon on scrolle « dans le vide » à droite). `clip` n'affecte pas le sticky de la nav. */
html { overflow-x: clip; }
.navburger { display: none; }              /* caché sur desktop */

@media (max-width: 720px) {
  /* Nav : logo + hamburger sur une ligne ; les liens deviennent un menu déroulant
     vertical (plus de longue barre qui déborde). */
  nav { padding: .55rem .75rem; gap: .5rem; flex-wrap: wrap; }
  .logo { flex-shrink: 0; margin-right: auto; }
  .navburger {
    display: block; font-size: 1.5rem; line-height: 1; cursor: pointer;
    padding: .1rem .5rem; color: var(--text); user-select: none;
  }
  .nav-links {
    display: none;                          /* masqué tant que le menu n'est pas ouvert */
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
    order: 3;                               /* passe SOUS logo + hamburger */
    margin-top: .5rem;
  }
  .navtoggle:checked ~ .nav-links { display: flex; }   /* ☰ ouvre le menu */
  .nav-links a,
  .nav-links form {
    display: block; width: 100%;
    padding: .7rem .3rem;
    border-top: 1px solid var(--border);
    font-size: .95rem;
  }
  .nav-links form button { text-align: left; width: 100%; }

  /* Contenu : marges resserrées, plus de place utile. */
  main { padding: 1rem .6rem 3rem; }

  /* En-têtes de page : titre au-dessus, actions/recherche en dessous. */
  .page-header { flex-direction: column; align-items: stretch; gap: .6rem; }
  .page-title { justify-content: space-between; }
  .page-title h1 { font-size: 1.05rem; }

  /* Cartes un peu plus compactes. */
  .card { padding: .85rem .9rem; }
  h1 { font-size: 1.2rem; }
  h2 { font-size: 1rem; }

  /* Tables larges : deviennent scrollables horizontalement au lieu de casser
     la mise en page (marche même sans conteneur overflow autour). */
  main table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  th, td { padding: .45rem .55rem; font-size: .82rem; }
  .info-table th { width: auto; }

  /* Champs et boutons plein cadre plus faciles à toucher. */
  input[type=text], input[type=email], input[type=number], input[type=password],
  select, textarea { font-size: 16px; }   /* ≥16px : évite le zoom auto iOS */
  .btn { padding: .45rem .8rem; }

  /* Les rangées de boutons/formulaires inline débordent moins. */
  form[style*="inline"] { display: inline-block; }
}

/* Très petits écrans : on serre encore un cran. */
@media (max-width: 400px) {
  .nav-links { gap: .7rem; }
  .nav-links a { font-size: .8rem; }
  main { padding: .8rem .5rem 3rem; }
}

/* ── Accordéon admin (sections repliables, fermées par défaut) ── */
details.acc{border:1px solid var(--border2);border-radius:10px;margin-bottom:.8rem;overflow:hidden;background:var(--bg1,transparent)}
details.acc>summary{cursor:pointer;list-style:none;padding:.85rem 1rem;font-weight:600;font-size:1rem;display:flex;align-items:center;gap:.5rem}
details.acc>summary::-webkit-details-marker{display:none}
details.acc>summary::before{content:"\25B8";color:var(--text3);transition:transform .15s ease;display:inline-block}
details.acc[open]>summary::before{transform:rotate(90deg)}
details.acc>summary:hover{background:var(--bg2)}
details.acc>.acc-body{padding:.2rem 1rem 1rem}
details.acc .badge-count{margin-left:.15rem}

/* Switch perso / gérée sur la barre d'une ligne (fiche admin) */
.persosw{display:inline-flex;align-items:center;gap:.35rem;cursor:pointer;user-select:none}
.persosw-tr{width:34px;height:18px;border-radius:9px;background:#5a5a5a;position:relative;transition:background .15s;flex:none}
.persosw.on .persosw-tr{background:var(--accent)}
.persosw-th{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .15s}
.persosw.on .persosw-th{left:18px}
.persosw-lb{font-size:.66rem;color:var(--text2);min-width:34px;text-align:left}

/* Carte de ligne (fiche admin) : summary sur 2 lignes, sans triangle */
summary.linesum{list-style:none;cursor:pointer}
summary.linesum::-webkit-details-marker{display:none}

/* Regroupement des lignes client par pseudo */
.pseudo-group{margin-bottom:1rem;border:1px solid var(--border2);border-radius:10px;overflow:hidden}
.pseudo-group>summary{cursor:pointer;padding:.6rem .9rem;background:var(--bg2);font-weight:600;font-size:.95rem;list-style:none}
.pseudo-group>summary::-webkit-details-marker{display:none}
.pseudo-group>summary::before{content:"▸ ";color:var(--text3)}
.pseudo-group[open]>summary::before{content:"▾ "}
.pseudo-group>.pg-body{padding:.6rem .7rem}
.lines-ctrl [data-linesort].active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* Pastilles de catégorie (organisation d'une ligne côté client) */
.catchip{background:var(--bg2);border:1px solid var(--border2);color:var(--text2);border-radius:999px;padding:.12rem .5rem;font-size:.7rem;cursor:pointer;line-height:1.5}
.catchip:hover{border-color:var(--accent);color:var(--text)}
.catchip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.catchip-new{border-style:dashed;color:var(--accent);background:transparent}
.catchip-new:hover{background:var(--bg2)}
details.lineorg>summary{list-style:none}
details.lineorg>summary::-webkit-details-marker{display:none}
details.lineorg>summary::before{content:"▸ ";color:var(--text3)}
details.lineorg[open]>summary::before{content:"▾ "}

/* Pôles de la page « Tickets & demandes » : trois blocs thématiques (comptes / abos /
   divers) qui séparent visuellement des files qui n'ont rien à voir entre elles. */
.pole{font-size:1rem;font-weight:700;margin:0;padding:.5rem 0 .35rem;border-bottom:2px solid var(--border2);cursor:pointer;list-style:none;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.pole::-webkit-details-marker{display:none}
.pole::before{content:"▸";color:var(--text2);font-size:.8rem;transition:transform .15s}
.pole-acc[open] > .pole::before{transform:rotate(90deg)}
.pole-acc{margin-top:1.4rem}
.pole-acc:first-of-type{margin-top:.6rem}
.pole-body{padding-top:.5rem}

/* Workspace refresh: readable surfaces, stable navigation and usable touch targets. */
:root{--bg:#f5f7f9;--bg1:#fff;--bg2:#f0f4f6;--surf:#fff;--surf2:#eaf1f3;--border:#e3e9ed;--border2:#ccd8de;--accent:#087e82;--accent2:#096b70;--text:#182e3a;--text2:#526974;--text3:#657b86;--green:#167458;--yellow:#986300;--red:#b43f47;--success:#167458;--danger:#b43f47}
body{font-size:15px;line-height:1.6;background:var(--bg);color:var(--text)}
a{color:var(--accent2)}
button,input,select,textarea{font:inherit}
button,.btn,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select{min-height:42px}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:17px;height:17px;vertical-align:middle;margin-right:.3rem}
input,select,textarea{max-width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline:3px solid #4caeb4;outline-offset:3px}
.btn{border-radius:9px;background:var(--accent);border:1px solid var(--accent);color:#fff;font-weight:600;box-shadow:none;padding:.6rem 1rem;line-height:1.3;display:inline-flex;align-items:center;justify-content:center;gap:.4rem;text-decoration:none}
.btn:hover{background:var(--accent2);color:#fff;transform:none}
.btn-outline{background:var(--surf);border-color:var(--border2);color:var(--text)}
.btn-outline:hover{background:var(--bg2);border-color:var(--accent);color:var(--accent2)}
.btn-sm{font-size:.8rem;padding:.45rem .75rem}
button:disabled,.btn:disabled{opacity:.45;cursor:not-allowed}
.card,.pcard,.sub-card{background:var(--surf);border:1px solid var(--border);border-radius:14px;box-shadow:0 3px 15px #20374404}
.card{padding:1.25rem}
h1{font-size:1.8rem;letter-spacing:-.045em;line-height:1.22;color:var(--text)}
h2{font-size:1.2rem;letter-spacing:-.025em;color:var(--text)}
.page-header{justify-content:space-between;align-items:center;gap:1rem}
.page-title{flex-wrap:wrap;flex-shrink:1}
.page-title h1{font-size:1.8rem;font-weight:720;letter-spacing:-.04em}
.page-intro{color:var(--text2);margin:.6rem 0 1.8rem;max-width:680px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--accent2);font-size:.68rem;font-weight:750;margin-bottom:.6rem}
.skip-link{position:fixed;top:-80px;left:16px;z-index:100;background:#fff;padding:12px;border:2px solid var(--accent)}
.skip-link:focus{top:12px}
.app-nav{position:fixed;top:0;left:0;bottom:0;width:226px;padding:30px 18px 20px;background:#fff;border:0;border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;backdrop-filter:none;z-index:50}
.logo{display:flex;align-items:center;gap:10px;font-size:1.35rem;letter-spacing:-.05em;color:var(--text);padding:0 10px}
.logo-mark{display:grid;place-items:center;background:var(--accent);color:#fff;width:35px;height:35px;border-radius:11px;font-size:1.6rem;font-weight:750;line-height:1;padding-bottom:3px}
.logo small{display:block;color:var(--text3);font-size:.65rem;font-weight:500;letter-spacing:.025em;margin-top:1px}
.nav-links{display:flex;flex-direction:column;gap:5px;align-items:stretch;width:100%;margin-top:38px;flex:1}
.nav-links>a{display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:9px;padding:10px 12px;color:var(--text2);font-size:.85rem;font-weight:550;min-height:43px}
.nav-links>a:hover{background:var(--bg2);color:var(--text)}
.nav-links>a[aria-current=page]{background:#e5f3f2;color:#08676b;font-weight:700;box-shadow:inset 3px 0 var(--accent)}
.nav-account{margin-top:auto;border-top:1px solid var(--border);padding:18px 10px 8px;display:flex;gap:10px;align-items:center;font-size:.78rem;overflow-wrap:anywhere}
.nav-account small{display:block;color:var(--text3);font-size:.68rem}
.account-dot{width:28px;height:28px;border-radius:50%;background:#dcecea;flex-shrink:0;border:7px solid #edf5f3}
.nav-logout{padding:8px 12px!important;color:var(--text2);font-size:.78rem}
.nav-logout button{min-height:36px}
.navburger{display:none}
body:has(.app-nav) main{max-width:1440px;margin:0 0 0 226px;padding:38px 38px 60px;min-width:0}
.overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-bottom:20px}
.overview-card{background:#fff;border:1px solid var(--border);border-radius:13px;padding:18px 22px;display:flex;flex-direction:column}
.overview-card>span{color:var(--text2);font-size:.78rem;font-weight:550}
.overview-card strong{font-size:2rem;font-weight:650;letter-spacing:-.05em;line-height:1.5;font-variant-numeric:tabular-nums}
.overview-card small{color:var(--text3);font-size:.7rem}
.sync-notice{display:flex;gap:12px;align-items:flex-start;padding:13px 17px;border:1px solid #cce5df;background:#eff8f5;border-radius:10px;margin-bottom:22px;font-size:.78rem}
.sync-notice p{margin:2px 0 0;color:var(--text2);font-size:.74rem}
.sync-notice.is-stale{background:#fffaed;border-color:#ecddb6}
.status-dot{height:8px;width:8px;background:var(--green);border-radius:50%;margin-top:6px;flex-shrink:0}
.is-stale .status-dot{background:#bd851c}
.server-overview{margin-bottom:20px;color:var(--text2);font-size:.78rem}
.server-overview>summary{cursor:pointer;padding:6px 0}
.chipbar{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip-pill{padding:6px 11px;border:1px solid var(--border);background:#fff;border-radius:7px;font-size:.73rem}
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:16px;background:#fff;border:1px solid var(--border);border-radius:12px;margin-bottom:16px}
.filters input[type=text]{flex:1;min-width:220px}
.filters input[type=text],.filters select,.attachbar input{padding:10px 12px;border:1px solid var(--border2);border-radius:8px;background:#fff;color:var(--text);font-size:.8rem}
.filters label{display:flex;align-items:center;gap:3px;font-size:.75rem!important;white-space:nowrap;min-height:40px;color:var(--text2)}
.results-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--text2);font-size:.76rem;margin-bottom:12px}
.pagination{display:flex;gap:8px}
.lines-wrap{max-height:62vh;overflow:auto;border:1px solid var(--border);border-radius:12px;background:#fff}
table{width:100%;border-collapse:collapse;background:#fff}
table th{color:var(--text2);font-size:.7rem;font-weight:650;text-align:left;letter-spacing:.02em;background:#f7f9fa}
table td{color:var(--text);border-bottom:1px solid var(--border);padding:13px 12px}
table.lines th,table.lines td{padding:13px 11px;font-size:.76rem;text-align:left}
table.lines thead th{position:sticky;top:0;background:#f7f9fa;z-index:2;white-space:nowrap}
table.lines td:nth-child(6){min-width:140px;max-width:240px;overflow-wrap:anywhere}
table.lines tbody tr:hover{background:#f6faf9}
table.lines tr:has(input[name=line]:checked){background:#edf7f5}
table.lines code{color:var(--text2);overflow-wrap:anywhere;white-space:normal}
.badge{border-radius:6px;padding:3px 7px;font-size:.68rem;font-weight:600;background:var(--bg2);color:var(--text2)}
.badge-done,.badge-active{background:#e5f4eb;color:#216746}
.attachbar{position:sticky;bottom:12px;background:#fff;border:1px solid var(--border2);border-radius:12px;padding:14px 16px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px;box-shadow:0 5px 22px #20374412;z-index:10}
.selection-summary{font-size:.78rem;min-width:160px}
.selection-summary small{display:block;color:var(--text3);font-size:.7rem;margin-top:2px}
.attachbar>span{flex:1}
.attachbar input{width:100%;min-width:0!important}
.login-card{width:min(480px,calc(100% - 32px));max-width:none;padding:32px;border-radius:18px;box-shadow:0 16px 50px #2037440a}
.login-card h1{font-size:1.8rem;margin-bottom:8px}
.login-logo{padding:0;margin-bottom:30px;justify-content:center;text-decoration:none}
.login-card .eyebrow{text-align:center}
.login-card .page-intro{text-align:center;font-size:.88rem;margin-bottom:18px}
.login-security{font-size:.78rem;color:var(--text2);background:var(--bg2);padding:12px 14px;border-radius:9px;margin:16px 0 22px}
.login-card label{font-size:.8rem;font-weight:600}
.login-card input{background:#fff;border:1px solid var(--border2);color:var(--text);border-radius:9px;padding:11px 13px}
.signup-details{font-size:.8rem;margin:14px 0}.signup-details summary{cursor:pointer;color:var(--text2);padding:8px 0}
.signup-details[open]>summary{margin-bottom:8px}
details.acc{background:#fff;border-color:var(--border);border-radius:12px}
details.acc>summary{padding:17px 20px;font-size:.9rem}
body.center-page{padding:28px 0;background:radial-gradient(ellipse at 20% 15%,#e4f0ed,transparent 55%),var(--bg)}
@media(min-width:1800px){body:has(.app-nav) main{margin-right:auto;margin-left:260px}}
@media(max-width:1100px){.app-nav{width:200px;padding:24px 12px}body:has(.app-nav) main{margin-left:200px;padding:28px 22px 50px}.page-title h1{font-size:1.5rem}.attachbar .btn{flex:0 0 auto}}
@media(max-width:760px){
 .app-nav{position:sticky;top:0;bottom:auto;width:100%;height:70px;padding:12px 16px;flex-direction:row;align-items:center;justify-content:space-between;border-right:0;border-bottom:1px solid var(--border)}
 .logo{padding:0;font-size:1.2rem}.logo-mark{width:32px;height:32px}
 .navburger{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border2);border-radius:8px;font-size:.78rem;cursor:pointer;min-height:42px}
 .app-nav .nav-links{display:none;position:absolute;top:69px;left:0;right:0;background:#fff;margin:0;padding:12px 16px 20px;border-bottom:1px solid var(--border);box-shadow:0 14px 22px #20374414;max-height:calc(100dvh - 70px);overflow:auto}
 .app-nav .navtoggle:checked~.nav-links{display:flex;flex-direction:column}.nav-account{margin-top:12px}
 body:has(.app-nav) main{margin:0;padding:24px 16px 36px}.page-title h1{font-size:1.55rem}.page-header{gap:12px}.page-intro{font-size:.85rem;margin-bottom:20px}
 .overview-grid{gap:8px}.overview-card{padding:12px 10px}.overview-card>span{font-size:.65rem}.overview-card strong{font-size:1.6rem}.overview-card small{font-size:.6rem}
 .filters{padding:12px;gap:8px}.filters input[type=text]{width:100%;flex-basis:100%;min-width:0;order:-1}.filters select{flex:1}.filters label{font-size:.73rem!important}
 .results-bar{flex-wrap:wrap}.lines-wrap{max-height:none;overflow:visible;border:0;background:transparent}
 table.lines{display:block;background:transparent}table.lines thead{display:none}table.lines tbody{display:grid;gap:12px}table.lines tbody tr{display:grid;grid-template-columns:1fr 1fr;background:#fff;border:1px solid var(--border);border-radius:12px;padding:10px;gap:2px}
 table.lines td{display:flex;flex-direction:column;gap:4px;border:0;padding:7px!important;font-size:.8rem;overflow-wrap:anywhere;min-width:0!important;max-width:none!important}
 table.lines td::before{content:attr(data-label);color:var(--text3);font-size:.61rem;font-weight:600;text-transform:uppercase;letter-spacing:.035em}
 table.lines td:first-child{flex-direction:row;align-items:center;justify-content:space-between;grid-column:1/-1;border-bottom:1px solid var(--border);padding-bottom:10px!important}
 table.lines td:nth-child(4),table.lines td:nth-child(6),table.lines td:nth-child(9){grid-column:1/-1}
 table.lines td[colspan]{grid-column:1/-1}
 table.lines .btn{align-self:flex-start;min-height:38px;min-width:42px}
 .attachbar{position:static;padding:12px;gap:10px}.selection-summary{min-width:0;width:100%}.attachbar>span{flex-basis:100%}.attachbar>.btn{width:100%}
 .login-card{padding:26px 22px}.login-card h1{font-size:1.55rem}.login-card input{font-size:16px}
 main .card{padding:16px}main input[type=text],main input[type=email],main textarea{min-width:0!important}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Destructive actions must remain visually distinct from primary actions. */
.btn.btn-danger{background:#fff;color:#a12c35;border:1px solid #e8c4c8;box-shadow:none}
.btn.btn-danger:hover{background:#fff0f1;color:#8d202a;border-color:#cd949b}