/* Publier (SPOST-7, publier-ui.js et studio/studio-planifier.js) : repris de RustDesk (publier.css), aux couleurs de
   StudioPost (style.css). Les classes génériques du dashboard (card, field, note, pill, small, btn…) sont limitées
   à la page Publier et à ses fenêtres. */
.publier-racine, .pub-dlg { --bg: var(--fond); --text: var(--texte); --muted: var(--doux); --border: var(--bord); --radius: var(--rayon);
  --accent-soft: var(--accent-doux); --ok-soft: var(--ok-doux); --err-soft: var(--err-doux); --warn: #b45309; --warn-soft: #fef3c7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.publier-racine, .pub-dlg) { --warn: #fbbf24; --warn-soft: #33270d; } }
:root[data-theme="dark"] :is(.publier-racine, .pub-dlg) { --warn: #fbbf24; --warn-soft: #33270d; }
.publier-racine [hidden], .pub-dlg [hidden] { display: none !important; }
.publier-racine .card { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: 16px; box-shadow: var(--ombre); }
.publier-racine .card h2, .pub-dlg h2 { font-size: 16px; margin: 0 0 12px; }
:is(.publier-racine, .pub-dlg) .field { margin-bottom: 12px; display: block; }
:is(.publier-racine, .pub-dlg) .label { display: block; color: var(--doux); font-size: 13px; margin-bottom: 4px; }
:is(.publier-racine, .pub-dlg) .note { font-size: 13px; color: var(--doux); }
:is(.publier-racine, .pub-dlg) .muted { color: var(--doux); }
:is(.publier-racine, .pub-dlg) :is(button, .btn).small { min-height: 30px; padding: 4px 10px; font-size: 13px; }
:is(.publier-racine, .pub-dlg) .btn { font: inherit; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 14px;
  border-radius: 10px; border: 1px solid var(--bord); background: var(--surface); color: var(--texte); text-decoration: none; cursor: pointer; }
:is(.publier-racine, .pub-dlg) :is(button, .btn).primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.publier-racine, .pub-dlg) :is(button, .btn).primary { color: #0d1430; } }
:root[data-theme="dark"] :is(.publier-racine, .pub-dlg) :is(button, .btn).primary { color: #0d1430; }
:is(.publier-racine, .pub-dlg) button.danger { color: var(--err); }
:is(.publier-racine, .pub-dlg) .two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
:is(.publier-racine, .pub-dlg) .pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px; font-size: 13px; background: var(--fond); border: 1px solid var(--bord); }
:is(.publier-racine, .pub-dlg) .pill.ok { background: var(--ok-doux); color: var(--ok); border: 0; }
:is(.publier-racine, .pub-dlg) .pill.err { background: var(--err-doux); color: var(--err); border: 0; }
:is(.publier-racine, .pub-dlg) .pill.warn { background: var(--warn-soft); color: var(--warn); border: 0; }
:is(.publier-racine, .pub-dlg) .pill.muted { opacity: .7; }
:is(.publier-racine, .pub-dlg) textarea { width: 100%; }
.pub-dlg { border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--surface); color: var(--texte); padding: 20px; width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
.pub-dlg::backdrop { background: rgb(0 0 0 / .45); }
.pub-dlg .row { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
@media (max-width: 640px) { :is(.publier-racine, .pub-dlg) .two-cols { grid-template-columns: 1fr; } }

.pub-onglets { display: flex; gap: 6px; }
.pub-onglets a { padding: 6px 14px; border-radius: 8px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 14px; border: 1px solid var(--border); background: var(--surface); }
.pub-onglets a[aria-current="true"] { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.pub-acces-grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.pub-acces { display: grid; gap: 10px; align-content: start; }
.pub-acces h2 { margin: 0; }
.pub-acces .note { margin: 0; }
.pub-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 13px; }
.pub-dl dt { color: var(--muted); }
.pub-dl dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.pub-ligne { display: flex; gap: 6px; }
.pub-ligne input { flex: 1; min-width: 0; }
.pub-acces .btn.primary, .pub-acces button.primary { justify-self: start; }
.pub-alerte { padding: 10px 12px; border-radius: var(--radius); background: var(--err-soft); color: var(--err); }
.pub-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.pub-colonne.a-ranger { border-style: dashed; }
.pub-col-titre { display: flex; align-items: center; gap: 8px; }
.pub-pastille { width: 12px; height: 12px; border-radius: 50%; background: var(--border); flex: none; }
.pub-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pub-compte { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 8px; border: 1px solid var(--border); border-radius: 8px; }
.pub-photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: var(--bg); font-weight: 700; color: var(--muted); }
.pub-compte-info { display: grid; min-width: 0; font-size: 14px; }
.pub-compte-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pub-compte-info .muted { font-size: 12px; }
.pub-reseau { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.pub-reseau.facebook { color: #1877f2; } .pub-reseau.instagram { color: #d6249f; } .pub-reseau.youtube { color: #ff0033; }
.pub-compte-actions { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.pub-compte-actions select { flex: 1; min-width: 0; }

/* Calendrier */
.pub-cal-tete { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pub-cal-tete h2 { margin: 0; min-width: 9em; text-align: center; }
.pub-filtres { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.pub-filtres button { display: inline-flex; align-items: center; gap: 6px; }
.pub-filtres button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.pub-grille { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pub-jour-nom { font-size: 12px; color: var(--muted); text-align: center; font-weight: 600; padding-bottom: 2px; }
.pub-case { display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-height: 84px; padding: 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; overflow: hidden; }
.pub-case.autre { opacity: .45; }
.pub-case.auj .pub-case-n { background: var(--accent); color: #fff; border-radius: 10px; padding: 0 6px; }
.pub-case.choisi { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pub-case-n { font-size: 12px; font-weight: 700; align-self: flex-start; font-variant-numeric: tabular-nums; }
.pub-puce { font-size: 11px; line-height: 1.3; padding: 1px 4px; border-radius: 4px; border-left: 3px solid var(--c, var(--border)); background: var(--bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pub-puce.annulee { text-decoration: line-through; opacity: .6; }
.pub-puce.erreur { background: var(--err-soft); }
.pub-plus { font-size: 11px; color: var(--muted); }
@media (max-width: 640px) {
  .pub-case { min-height: 48px; }
  .pub-puce { font-size: 0; height: 6px; padding: 0; border-left-width: 0; background: var(--c, var(--muted)); }
  .pub-filtres { margin-left: 0; }
}
.pub-agenda { display: grid; gap: 14px; }
.pub-agenda-jour h3 { margin: 0 0 6px; font-size: 14px; text-transform: capitalize; }
.pub-posts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pub-post { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 12px; padding: 8px; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 8px; }
.pub-post.annulee { opacity: .55; }
.pub-post.annulee strong { text-decoration: line-through; }
.pub-post-apercu { width: 64px; height: 64px; border-radius: 6px; object-fit: cover; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.pub-post-info { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.pub-post-tete { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pub-post-info .muted { font-size: 12px; }
.pub-cibles { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; font-size: 13px; }
.pub-cibles a { margin-left: 6px; }
.pub-erreur { display: block; color: var(--err); font-size: 12px; }
.pub-post-actions { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; }
.pub-post-actions:empty { display: none; }

/* Studio › Planifier (studio-planifier.js) */
.pl-form { display: grid; gap: 4px; }
.pl-comptes { display: grid; gap: 6px; }
.pl-compte { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.pl-compte.off { opacity: .5; cursor: default; }
.pl-compte .muted { margin-left: auto; font-size: 12px; }
.pl-alerte { padding: 8px 10px; border-radius: var(--radius); background: var(--warn-soft); color: var(--warn); margin: 6px 0; }
.pl-alerte.bloque { background: var(--err-soft); color: var(--err); }
.pl-compte input[type=checkbox] { width: 18px; height: 18px; flex: none; margin: 0; }

/* Liens (Planifier, Modifier, calendrier) */
.pl-liens { display: grid; gap: 6px; }
.pl-lien { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; gap: 6px; }
.pl-lien-ajouter { justify-self: start; }
.pl-note-liens { margin: 6px 0 0; }
.pub-liens { list-style: none; margin: 4px 0 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.pub-liens a { overflow-wrap: anywhere; }
@media (max-width: 640px) { .pl-lien { grid-template-columns: minmax(0, 1fr) auto; } .pl-lien-nom { grid-column: 1 / -1; } }

/* Story à publier à la main (téléphone) */
.pub-story { max-width: 520px; margin: 0 auto; display: grid; gap: 10px; }
.pub-story h2, .pub-story h3, .pub-story p { margin: 0; }
.pub-story-retour { font-size: 14px; }
.pub-story-media { width: 100%; max-height: 60vh; object-fit: contain; border-radius: 10px; background: #000; }
.pub-story-liens { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pub-story-liens li { display: flex; gap: 8px; align-items: center; }
.pub-story-lien { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.pub-story-actions { display: grid; gap: 10px; }
.pub-story-partager, .pub-story-fait { width: 100%; min-height: 48px; font-size: 16px; }
.pub-story-etapes { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.pub-story .btn.small { justify-self: center; }