/* Back-office Zaply — feuille unique.

   Volontairement sobre et distincte de l'application : une console
   d'exploitation doit se distinguer au premier coup d'œil du produit qu'elle
   administre, sinon on finit par ne plus savoir où l'on agit. */

:root {
  --bo-bg: #0e1013;
  --bo-surface: #14171c;
  --bo-tile: #191d23;
  --bo-tile-hover: #202630;
  --bo-border: #262c35;
  --bo-text: #eef1f5;
  --bo-text-2: #c3cad4;
  --bo-mut: #98a2b0;
  --bo-dim: #6e7885;
  --bo-accent: #c33a52;
  --bo-accent-2: #e0607a;
  --bo-ok: #3ecf8e;
  --bo-err: #e5484d;
  --bo-r: 11px;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bo-bg); color: var(--bo-text);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }

/* ---------------------------------------------------------------- connexion */
.bo-login { display: grid; place-items: center; min-height: 100dvh; padding: 20px; }
.lg-card {
  width: 100%; max-width: 380px; padding: 34px 32px 30px;
  background: var(--bo-surface); border: 1px solid var(--bo-border);
  border-radius: 16px;
}
.lg-mark {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bo-accent), var(--bo-accent-2));
  font-weight: 800; margin-bottom: 18px;
}
.lg-card h1 { margin: 0 0 5px; font-size: 21px; letter-spacing: -.5px; }
.lg-sub { margin: 0 0 24px; color: var(--bo-mut); font-size: 13px; }
.lg-card label { display: block; margin: 0 0 6px; font-size: 12px; color: var(--bo-text-2); }
.lg-card input {
  width: 100%; margin-bottom: 16px; padding: 10px 12px;
  background: var(--bo-tile); color: var(--bo-text);
  border: 1px solid var(--bo-border); border-radius: 9px;
}
.lg-card input:focus { outline: 0; border-color: var(--bo-accent); }
.lg-card button[type=submit] {
  width: 100%; padding: 11px; border: 0; border-radius: 9px; cursor: pointer;
  background: linear-gradient(135deg, var(--bo-accent), var(--bo-accent-2));
  color: #fff; font-weight: 700;
}
.lg-card button[disabled] { opacity: .6; cursor: default; }
.lg-err { min-height: 20px; margin-bottom: 8px; color: var(--bo-err); font-size: 12.5px; }
.lg-foot { margin: 20px 0 0; font-size: 11.5px; color: var(--bo-dim); }

/* ------------------------------------------------------------------ console */
.bo { display: grid; grid-template-columns: 230px 1fr; min-height: 100dvh; }
.bo-rail {
  background: var(--bo-surface); border-right: 1px solid var(--bo-border);
  display: flex; flex-direction: column; padding: 18px 14px;
}
.bo-logo { display: flex; align-items: center; gap: 8px; padding: 0 8px 20px; }
.bo-mark {
  width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--bo-accent), var(--bo-accent-2));
  font-weight: 800; font-size: 13px;
}
.bo-logo small { color: var(--bo-dim); font-size: 11px; }
.bo-rail nav { display: flex; flex-direction: column; gap: 2px; }
.bo-rail nav button {
  text-align: left; padding: 9px 11px; border: 0; border-radius: 9px;
  background: transparent; color: var(--bo-mut); cursor: pointer;
}
.bo-rail nav button:hover { background: var(--bo-tile); color: var(--bo-text); }
.bo-rail nav button.on { background: var(--bo-tile-hover); color: var(--bo-text); font-weight: 600; }
.bo-rail-foot {
  margin-top: auto; padding: 14px 10px 0; border-top: 1px solid var(--bo-border);
  font-size: 12px; color: var(--bo-dim); display: flex; flex-direction: column; gap: 6px;
}
.bo-lien { border: 0; background: none; padding: 0; text-align: left;
  color: var(--bo-mut); cursor: pointer; text-decoration: underline; font-size: 12px; }
.bo-lien:hover { color: var(--bo-text); }

.bo-vue { padding: 26px 30px 60px; overflow-y: auto; height: 100dvh; }
.bo-attente { color: var(--bo-dim); padding: 40px 0; }
.bo-bandeau:empty { display: none; }
.bo-bandeau {
  margin-bottom: 18px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid var(--bo-border); background: var(--bo-tile); font-size: 13px;
}
.bo-bandeau.err { border-color: var(--bo-err); color: #ffd7d8; }
.bo-bandeau.ok { border-color: var(--bo-ok); color: #cdf5e4; }

h1.bo-t { margin: 0 0 4px; font-size: 22px; letter-spacing: -.6px; }
p.bo-st { margin: 0 0 24px; color: var(--bo-mut); font-size: 13px; }
h2.bo-t2 { margin: 30px 0 12px; font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--bo-dim); }

/* Cartes de compteurs */
.bo-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.bo-carte {
  background: var(--bo-tile); border: 1px solid var(--bo-border);
  border-radius: var(--bo-r); padding: 14px 16px;
}
.bo-carte b { display: block; font-size: 24px; letter-spacing: -1px; }
.bo-carte span { display: block; margin-top: 2px; font-size: 12px; color: var(--bo-mut); }

/* Tableaux */
.bo-outils { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.bo-outils input, .bo-outils select {
  padding: 8px 11px; background: var(--bo-tile); color: var(--bo-text);
  border: 1px solid var(--bo-border); border-radius: 9px;
}
/* Uniquement les champs de saisie : la regle s'appliquait aussi aux cases a
   cocher, qui se retrouvaient larges de 240 px, loin de leur libelle. */
.bo-outils input[type="search"], .bo-outils input[type="text"] { min-width: 240px; }
.bo-outils input[type="checkbox"] { min-width: 0; width: auto; margin: 0; }
.bo-tab-wrap { overflow-x: auto; border: 1px solid var(--bo-border); border-radius: var(--bo-r); }
table.bo-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
table.bo-tab th, table.bo-tab td {
  text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--bo-border);
  white-space: nowrap;
}
table.bo-tab th { background: var(--bo-tile); color: var(--bo-mut);
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
table.bo-tab tr:last-child td { border-bottom: 0; }
table.bo-tab td.wrap { white-space: normal; max-width: 380px; }
.bo-pied { display: flex; align-items: center; gap: 12px; margin-top: 12px;
  font-size: 12.5px; color: var(--bo-mut); }
.bo-pied button {
  padding: 6px 12px; border: 1px solid var(--bo-border); border-radius: 8px;
  background: var(--bo-tile); color: var(--bo-text); cursor: pointer;
}
.bo-pied button[disabled] { opacity: .4; cursor: default; }
.bo-pastille { display: inline-block; padding: 2px 7px; border-radius: 6px;
  font-size: 11px; font-weight: 700; background: var(--bo-tile-hover); color: var(--bo-text-2); }
.bo-pastille.ok { background: rgb(62 207 142 / .18); color: #7fe6b8; }
.bo-pastille.err { background: rgb(229 72 77 / .18); color: #ff9b9e; }

/* ------------------------------------------------------------------- thèmes */
.th-presets { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.th-preset {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  padding: 8px 13px 8px 9px; border-radius: 10px;
  background: var(--bo-tile); border: 1px solid var(--bo-border); color: var(--bo-text);
}
.th-preset:hover { border-color: var(--bo-accent); }
.th-pastilles { display: flex; }
.th-pastilles i { width: 14px; height: 14px; border-radius: 4px; display: block;
  margin-left: -4px; border: 1px solid rgb(0 0 0 / .4); }
.th-pastilles i:first-child { margin-left: 0; }

.th-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.th-jeton {
  display: flex; align-items: center; gap: 10px; padding: 8px 11px;
  background: var(--bo-tile); border: 1px solid var(--bo-border); border-radius: 10px;
}
.th-jeton input[type=color] {
  width: 34px; height: 30px; padding: 0; border: 1px solid var(--bo-border);
  border-radius: 7px; background: none; cursor: pointer; flex: none;
}
.th-jeton .th-nom { flex: 1; min-width: 0; font-size: 12px; color: var(--bo-text-2);
  overflow: hidden; text-overflow: ellipsis; }
.th-jeton input[type=text] {
  width: 104px; flex: none; padding: 5px 7px; font-size: 11.5px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--bo-bg); color: var(--bo-text);
  border: 1px solid var(--bo-border); border-radius: 7px;
}
.th-jeton input.faux { border-color: var(--bo-err); }

.th-actions { display: flex; gap: 10px; align-items: center; margin-top: 20px; flex-wrap: wrap; }
.th-actions button {
  padding: 10px 18px; border-radius: 9px; cursor: pointer; font-weight: 600;
  border: 1px solid var(--bo-border); background: var(--bo-tile); color: var(--bo-text);
}
.th-actions button.primaire {
  border: 0; background: linear-gradient(135deg, var(--bo-accent), var(--bo-accent-2)); color: #fff;
}
.th-actions button[disabled] { opacity: .5; cursor: default; }
.th-note { font-size: 12px; color: var(--bo-dim); }

/* Aperçu : une maquette réduite de l'application, peinte avec les jetons en
   cours d'édition. Elle évite l'aller-retour « j'enregistre, je vais voir ». */
.th-apercu {
  margin-top: 8px; border: 1px solid var(--bo-border); border-radius: 14px;
  overflow: hidden; display: grid; grid-template-columns: 132px 1fr; min-height: 220px;
}
.th-apercu .ap-rail { padding: 14px 12px; }
.th-apercu .ap-logo { display: flex; align-items: center; gap: 7px; margin-bottom: 16px;
  font-weight: 800; font-size: 13px; }
.th-apercu .ap-mark { width: 22px; height: 22px; border-radius: 7px; display: grid;
  place-items: center; font-size: 11px; }
.th-apercu .ap-nav { display: flex; flex-direction: column; gap: 3px; font-size: 12px; }
.th-apercu .ap-nav span { padding: 6px 9px; border-radius: 7px; }
.th-apercu .ap-corps { padding: 16px 18px; }
.th-apercu .ap-titre { font-size: 16px; font-weight: 800; letter-spacing: -.4px; }
.th-apercu .ap-sous { font-size: 11.5px; margin: 3px 0 14px; }
.th-apercu .ap-tuiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.th-apercu .ap-tuile { aspect-ratio: 2/3; border-radius: 7px; }
.th-apercu .ap-btn { display: inline-block; margin-top: 14px; padding: 7px 15px;
  border-radius: 8px; font-size: 12px; font-weight: 700; color: #fff; }

@media (max-width: 860px) {
  .bo { grid-template-columns: 1fr; }
  .bo-rail { flex-direction: row; align-items: center; gap: 12px; overflow-x: auto; }
  .bo-rail nav { flex-direction: row; }
  .bo-rail-foot { margin-top: 0; border-top: 0; border-left: 1px solid var(--bo-border);
    padding: 0 0 0 12px; }
  .bo-vue { height: auto; }
}

/* ------------------------------------------------------------ tarifs */
/* La grille sert à COMPARER les zones entre elles : l'édition se fait donc
   dans la case, sans quitter le tableau. */
table.bo-tab.tf-grille th, table.bo-tab.tf-grille td { vertical-align: top; }
table.bo-tab.tf-grille thead th small {
  display: block; margin-top: 2px; font-size: 10px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--bo-dim);
}
.tf-ligne {
  background: var(--bo-tile); position: sticky; left: 0; z-index: 1;
  text-align: left; font-weight: 700; font-size: 13px; color: var(--bo-text);
  text-transform: none; letter-spacing: 0;
}
.tf-ligne small { display: block; margin-top: 2px; font-size: 11px;
  font-weight: 500; color: var(--bo-dim); }
.tf-sep { background: var(--bo-tile); color: var(--bo-dim);
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }

td.tf-case { position: relative; cursor: text; min-width: 118px; }
td.tf-case:hover { background: var(--bo-tile); }
td.tf-case .tf-val { font-size: 14px; font-weight: 700; }
/* Hérité : lisible mais visiblement second — c'est une valeur constatée, pas
   une valeur posée ici. */
td.tf-case.herite .tf-val { font-weight: 500; color: var(--bo-mut); }
td.tf-case.vide .tf-val { color: var(--bo-dim); }
.tf-sous { display: block; margin-top: 2px; font-size: 10.5px; color: var(--bo-dim); }
.tf-stripe {
  display: inline-block; margin-top: 4px; padding: 1px 6px; border-radius: 5px;
  font-size: 10px; background: rgb(229 72 77 / .16); color: #ff9b9e;
}
.tf-x {
  position: absolute; top: 5px; right: 5px; width: 18px; height: 18px;
  border: 0; border-radius: 5px; background: transparent; cursor: pointer;
  color: var(--bo-dim); font-size: 10px; line-height: 1; opacity: 0;
}
td.tf-case:hover .tf-x { opacity: 1; }
.tf-x:hover { background: rgb(229 72 77 / .2); color: #ff9b9e; }
.tf-saisie {
  width: 92px; padding: 4px 6px; font-size: 13px; font-weight: 700;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  background: var(--bo-bg); color: var(--bo-text);
  border: 1px solid var(--bo-accent); border-radius: 6px;
}

/* ------------------------------------------------- synchronisation Stripe */
.sy-etat { padding: 10px 13px; border-radius: 9px; font-size: 13px;
  background: var(--bo-tile); border: 1px solid var(--bo-border); }
.sy-etat.ok { border-color: var(--bo-ok); color: #cdf5e4; }
.sy-groupe { margin-top: 14px; }
.sy-groupe > b { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .07em; color: var(--bo-dim); margin-bottom: 7px; }
.sy-groupe ul { margin: 0; padding: 0; list-style: none;
  border: 1px solid var(--bo-border); border-radius: var(--bo-r); overflow: hidden; }
.sy-groupe li { padding: 8px 12px; font-size: 13px;
  border-bottom: 1px solid var(--bo-border); }
.sy-groupe li:last-child { border-bottom: 0; }
.sy-groupe li small { display: block; margin-top: 2px; font-size: 11px;
  color: var(--bo-dim); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ---------------------------------------------------------------- audience */
.ca-carte { border: 1px solid var(--bo-border); border-radius: var(--bo-r);
  overflow: hidden; background: #0b0e13; }
.ca-carte svg { display: block; width: 100%; height: auto; }
.ca-fond { fill: #0b0e13; }
.ca-grille { stroke: #1b212a; stroke-width: 1; }
.ca-grille.fort { stroke: #2b3542; }
.ca-bulle circle { fill: rgb(195 58 82 / .42); stroke: #e0607a; stroke-width: 1.2; }
.ca-bulle:hover circle, .ca-bulle:focus circle { fill: rgb(224 96 122 / .7); outline: none; }
.ca-bulle text { fill: #fff; font-size: 11px; font-weight: 700; text-anchor: middle;
  pointer-events: none; paint-order: stroke; stroke: rgb(0 0 0 / .5); stroke-width: 3px; }
.ca-hors { margin: 10px 0 0; font-size: 12px; color: var(--bo-dim); }

.ca-courbe { width: 100%; height: 90px; display: block;
  border: 1px solid var(--bo-border); border-radius: var(--bo-r); background: #0b0e13; }
.ca-aire { fill: rgb(195 58 82 / .18); }
.ca-trait { fill: none; stroke: #e0607a; stroke-width: 2;
  vector-effect: non-scaling-stroke; }

.ca-jauge { display: inline-block; width: 90px; height: 6px; border-radius: 3px;
  background: var(--bo-tile-hover); vertical-align: middle; overflow: hidden; margin-right: 7px; }
.ca-jauge i { display: block; height: 100%;
  background: linear-gradient(90deg, var(--bo-accent), var(--bo-accent-2)); }

.ca-natures { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ca-nature { background: var(--bo-tile); border: 1px solid var(--bo-border);
  border-radius: var(--bo-r); padding: 11px 13px; }
.ca-nature b { display: block; font-size: 13px; margin-bottom: 7px; }
.ca-nature .ca-jauge { width: 100%; margin: 0 0 6px; }
.ca-nature small { font-size: 11.5px; color: var(--bo-dim); }

/* Palmarès : le rang, le titre, une barre proportionnelle au TEMPS regardé,
   puis les chiffres. La barre est ce qui se lit en premier, et c'est voulu. */
.ca-top { list-style: none; margin: 0; padding: 0; counter-reset: rang;
  border: 1px solid var(--bo-border); border-radius: var(--bo-r); overflow: hidden; }
.ca-top li { counter-increment: rang; display: grid;
  grid-template-columns: 34px minmax(0, 1.4fr) minmax(90px, 2fr) minmax(0, 150px);
  gap: 12px; align-items: center; padding: 10px 13px;
  border-bottom: 1px solid var(--bo-border); }
.ca-top li:last-child { border-bottom: 0; }
.ca-top li:nth-child(-n+3) .ca-rang { color: var(--bo-accent-2); }
.ca-rang::before { content: counter(rang, decimal-leading-zero);
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 13px; color: var(--bo-dim); }
.ca-nom { min-width: 0; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ca-nom small { display: block; font-weight: 500; font-size: 11px; color: var(--bo-dim); }
.ca-barre { height: 9px; border-radius: 5px; background: var(--bo-tile-hover); overflow: hidden; }
.ca-barre i { display: block; height: 100%;
  background: linear-gradient(90deg, var(--bo-accent), var(--bo-accent-2)); }
.ca-chiffres { text-align: right; font-size: 13px; font-weight: 700; }
.ca-chiffres small { display: block; font-weight: 500; font-size: 10.5px; color: var(--bo-dim); }

@media (max-width: 900px) {
  .ca-top li { grid-template-columns: 28px 1fr; }
  .ca-barre, .ca-chiffres { grid-column: 2; text-align: left; }
}

/* Terres émergées : une masse sourde, jamais un sujet. Elle doit situer les
   bulles sans leur disputer l'attention — d'où le remplissage très bas et le
   trait fin qui suffit à dessiner les côtes. */
.ca-terres { fill: #1a212b; stroke: #2d3846; stroke-width: 0.6;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* ------------------------------------------------ actions et journal */
.bo-actions { display: flex; gap: 5px; flex-wrap: wrap; }
/* `.of-edit` partage l'apparence mais PAS la classe : `.bo-act` déclenche
   l'écouteur des actions de compte, et un bouton qui n'en est pas une n'a rien
   à faire dans sa délégation. */
.bo-act, .of-edit {
  padding: 4px 9px; border-radius: 7px; cursor: pointer; font-size: 11.5px;
  border: 1px solid var(--bo-border); background: var(--bo-tile); color: var(--bo-text-2);
  white-space: nowrap;
}
.bo-act:hover, .of-edit:hover { color: var(--bo-text); border-color: var(--bo-mut); }
/* Les actions irréversibles ou visibles par l'utilisateur se distinguent au
   survol seulement : les colorer en permanence rendrait la ligne illisible. */
.bo-act.danger:hover { border-color: var(--bo-err); color: #ff9b9e;
  background: rgb(229 72 77 / .12); }
.bo-act[disabled] { opacity: .45; cursor: default; }

.bo-check { display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--bo-text-2); }
.j-src { display: block; font-size: 10.5px; color: var(--bo-dim); }
.j-act { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 11.5px; color: var(--bo-text-2); }
.j-evo { display: block; margin-top: 2px; font-size: 11px; color: var(--bo-dim); }
/* Une ligne refusée doit se repérer en parcourant, sans lire la colonne d'état. */
tr.j-ko td { background: rgb(229 72 77 / .06); }

/* ----------------------------------------------- formules et zones (offres) */
.of-form {
  margin-top: 20px; padding: 18px 20px 20px; border-radius: 14px;
  border: 1px solid var(--bo-border); background: var(--bo-tile);
}
.of-form h3 { margin: 0 0 16px; font-size: 15px; }
.of-grille { display: grid; gap: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.of-champ { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.of-champ.of-large { grid-column: 1 / -1; }
.of-champ > label { font-size: 12px; font-weight: 600; color: var(--bo-text-2); }
.of-champ input[type="text"], .of-champ input[type="number"], .of-champ select {
  padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 13px;
  border: 1px solid var(--bo-border); background: var(--bo-bg); color: var(--bo-text);
}
/* Un champ figé reste LISIBLE : on le grise sans le rendre indéchiffrable,
   parce que sa valeur est justement l'information qu'on vient chercher. */
.of-champ :disabled { opacity: .62; cursor: not-allowed; }
.of-aide, .of-fige { font-size: 11px; line-height: 1.35; }
.of-aide { color: var(--bo-dim); }
.of-fige { color: var(--bo-warn, #d98324); }
.of-alerte { color: var(--bo-warn, #d98324); font-weight: 600; }

/* ------------------------------------------------- API publique du catalogue */
.pb-alerte {
  display: flex; flex-direction: column; gap: 4px; margin: 18px 0;
  padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--bo-border); background: var(--bo-tile);
}
/* Le flux occupé n'est pas une erreur — c'est un état qui empêche d'essayer.
   Rouge le ferait lire comme une panne ; on le distingue sans dramatiser. */
.pb-alerte.chaud { border-color: rgb(217 131 36 / .5); background: rgb(217 131 36 / .1); }
.pb-alerte b { font-size: 13px; }
.pb-alerte span { font-size: 12px; line-height: 1.5; color: var(--bo-text-2); }

.pb-cartes { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.pb-c {
  flex: 1 1 140px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--bo-border); background: var(--bo-tile);
}
.pb-c b { display: block; font-size: 22px; }
.pb-c span { font-size: 12px; color: var(--bo-dim); }

.pb-url, .pb-appel {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: 10px;
  border: 1px solid var(--bo-border); background: var(--bo-bg);
}
.pb-url code, .pb-appel code, .pb-chemin {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px; color: var(--bo-text); word-break: break-all;
}
.pb-appel { margin: 14px 0 8px; }
.pb-meta { font-size: 12px; color: var(--bo-dim); margin-bottom: 12px; }

.pb-grille {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.pb-i { margin: 0; display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.pb-i img, .pb-vide {
  width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 10px;
  background: var(--bo-tile); border: 1px solid var(--bo-border);
}
.pb-i figcaption { font-size: 12.5px; line-height: 1.3; }
.pb-i figcaption small { display: block; margin-top: 2px; font-size: 11px; color: var(--bo-dim); }
.pb-lire {
  padding: 5px 9px; border-radius: 7px; cursor: pointer; font-size: 11.5px;
  border: 1px solid var(--bo-border); background: var(--bo-tile); color: var(--bo-text-2);
}
.pb-lire:hover { border-color: var(--bo-accent); color: var(--bo-text); }

.pb-json { margin-top: 18px; }
.pb-json summary { cursor: pointer; font-size: 12.5px; color: var(--bo-text-2); }
.pb-json pre {
  margin-top: 10px; padding: 14px; border-radius: 10px; max-height: 420px;
  overflow: auto; font-size: 11.5px; line-height: 1.5;
  border: 1px solid var(--bo-border); background: var(--bo-bg); color: var(--bo-text-2);
}

.pb-lecteur {
  margin-bottom: 18px; padding: 14px; border-radius: 12px;
  border: 1px solid var(--bo-border); background: var(--bo-tile);
}
.pb-lec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pb-lecteur video { width: 100%; max-height: 62vh; border-radius: 10px; background: #000; display: block; }
.pb-lecteur .th-note { display: block; margin-top: 9px; }

/* Clé révélée : volontairement encombrante — elle ne s'affiche qu'une fois. */
.cl-revele {
  margin-top: 16px; padding: 16px 18px; border-radius: 12px;
  border: 1px solid var(--bo-ok); background: rgb(62 207 142 / .08);
}
.cl-revele b { display: block; margin-bottom: 10px; font-size: 13px; }
.cl-revele .pb-url code { color: #cdf5e4; font-size: 13px; }
.cl-revele small { display: block; margin-top: 10px; font-size: 11.5px;
  line-height: 1.5; color: var(--bo-text-2); }
.cl-rate { padding: 5px 8px; border-radius: 7px; font: inherit; font-size: 12.5px;
  border: 1px solid var(--bo-border); background: var(--bo-bg); color: var(--bo-text); }
/* Le reste de quota se lit à côté de l'appel, pas dans un coin : c'est la même
   information que le résultat, prise sous un autre angle. */
.pb-debit { margin-left: auto; font-size: 11.5px; color: var(--bo-dim); white-space: nowrap; }
.pb-debit.vide { color: var(--bo-err); font-weight: 600; }


/* Le logo remplace le monogramme. Fond BLANC et non le dégradé : le logo est
   déjà coloré, et superposer deux couleurs les affaiblit toutes les deux. */
.bo-mark, .lg-mark { background: #fff !important; overflow: hidden; }
.bo-mark img, .lg-mark img {
  width: 100%; height: 100%; object-fit: contain; padding: 2px; display: block;
}