@layer modules{
/* ════════ Complément « Réseaux sociaux » - gestionnaire multi-comptes ════════
   Réutilise les tokens de 01-tokens.css. Accent du complément : #db2777. */

.smed{ --smed:#db2777; display:grid; grid-template-columns:212px 1fr; gap:var(--sp-18); align-items:start; }
@media (max-width:760px){ .smed{ grid-template-columns:1fr; } }

.smed-rail{ display:flex; flex-direction:column; gap:var(--sp-4); position:sticky; top:8px; }
.smed-nav-btn{ display:flex; align-items:center; gap:var(--sp-8); width:100%; text-align:left; padding:var(--sp-8) var(--sp-10);
  border:1px solid transparent; border-radius:var(--radius-sm,8px); background:none; color:var(--mut); font:inherit; font-size:var(--fs-md); cursor:pointer; transition:.12s; }
.smed-nav-btn:hover{ background:var(--card2); color:var(--txt); }
.smed-nav-btn.on{ background:var(--card2); color:var(--txt); border-color:var(--line); font-weight:var(--fw-strong); }
.smed-nav-ic{ width:18px; height:18px; display:flex; align-items:center; justify-content:center; color:var(--smed); flex:none; }
.smed-nav-ic svg{ width:15px; height:15px; stroke:currentColor; stroke-width:1.8; fill:none; }

.smed-main{ min-width:0; display:flex; flex-direction:column; gap:var(--sp-16); }
.smed-loading{ display:flex; align-items:center; gap:var(--sp-8); color:var(--mut); padding:var(--sp-24) var(--sp-4); }
.smed-spin{ width:14px; height:14px; border:2px solid var(--line); border-top-color:var(--smed); border-radius:50%; display:inline-block; animation:smedspin .7s linear infinite; }
@keyframes smedspin{ to{ transform:rotate(360deg); } }

.smed-head{ display:flex; align-items:flex-start; gap:var(--sp-14); }
.smed-head-t h2{ margin:0 0 var(--sp-2); font-size:var(--fs-lg); }
.smed-head-t p{ margin:0; color:var(--mut); font-size:var(--fs-md); }
.smed-head-a{ margin-left:auto; display:flex; gap:var(--sp-8); align-items:center; }
.smed-soon{ font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em; color:var(--mut); border:1px solid var(--line); border-radius:var(--radius-pill); padding:var(--sp-2) var(--sp-8); }
.smed-upd{ color:var(--mut); font-size:var(--fs-sm); }
.smed-hint{ font-size:var(--fs-sm); color:var(--mut); border:1px dashed var(--line); border-radius:var(--radius-sm,8px); padding:var(--sp-8) var(--sp-12); }

/* ── Badge réseau (pastille colorée + glyphe) ── */
.smed-net{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; flex:none;
  font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--on-solid); background:var(--c,#64748b); opacity:.45; }
.smed-net.on{ opacity:1; }

/* ── Cartes ── */
.smed-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--sp-12); }
.smed-card{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:var(--sp-12) var(--sp-14); }
.smed-card-h{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--mut); margin-bottom:var(--sp-6); }
.smed-card-b{ display:flex; flex-direction:column; gap:var(--sp-4); }
.smed-card-b b{ font-size:var(--fs-lg); } .smed-card-b .muted{ color:var(--mut); font-size:var(--fs-sm); }
.smed-card-b b.smed-next{ font-size:var(--fs-base); }
.smed-card-acts{ margin-top:var(--sp-4); }
.smed-net-row{ display:flex; gap:var(--sp-4); flex-wrap:wrap; }

/* ── Comptes ── */
.smed-accs{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:var(--sp-12); }
.smed-acc{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:var(--sp-12) var(--sp-14); display:flex; flex-direction:column; gap:var(--sp-8); }
.smed-acc.on{ border-color:var(--c); }
.smed-acc-h{ display:flex; align-items:center; gap:var(--sp-8); }
.smed-acc-h b{ font-size:var(--fs-base); }
.smed-acc-st{ margin-left:auto; font-size:var(--fs-xs); color:var(--mut); border:1px solid var(--line); border-radius:var(--radius-pill); padding:var(--sp-1) var(--sp-8); }
.smed-acc-st.ok{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,transparent); }
.smed-acc-d{ margin:0; font-size:var(--fs-sm); color:var(--mut); }
.smed-acc-handle{ padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-md); }

/* ── Composer ── */
.smed-composer{ display:grid; grid-template-columns:1fr 280px; gap:var(--sp-14); align-items:start; }
@media (max-width:820px){ .smed-composer{ grid-template-columns:1fr; } }
.smed-comp-main{ display:flex; flex-direction:column; gap:var(--sp-8); min-width:0; }
.smed-comp-text{ width:100%; padding:var(--sp-10) var(--sp-12); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); color:var(--txt); font:inherit; font-size:var(--fs-base); resize:vertical; }
.smed-comp-tools{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; }
.smed-ai-st{ font-size:var(--fs-sm); color:var(--mut); }
.smed-count{ margin-left:auto; font-size:var(--fs-sm); color:var(--mut); }
.smed-media{ display:flex; flex-wrap:wrap; gap:var(--sp-6); }
.smed-media-chip{ display:inline-flex; align-items:center; gap:var(--sp-6); font-size:var(--fs-sm); padding:var(--sp-2) var(--sp-6) var(--sp-2) var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-pill); background:var(--card2); }
.smed-media-chip button{ border:none; background:none; color:var(--mut); cursor:pointer; font-size:var(--fs-base); }

.smed-comp-side{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:var(--sp-12); display:flex; flex-direction:column; gap:var(--sp-12); }
.smed-field{ display:flex; flex-direction:column; gap:var(--sp-6); }
.smed-field>label{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.03em; color:var(--mut); }
.smed-nets{ display:flex; flex-direction:column; gap:var(--sp-4); }
.smed-netpick{ display:flex; align-items:center; gap:var(--sp-8); font-size:var(--fs-md); color:var(--txt); cursor:pointer; padding:var(--sp-2) 0; }
.smed-netpick input{ margin:0; }
.smed-when{ padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-md); }
.smed-comp-actions{ display:flex; flex-direction:column; gap:var(--sp-6); }
.smed-comp-actions .mini{ width:100%; justify-content:center; }

.smed-block-t{ font-size:var(--fs-md); margin:var(--sp-6) 0 0; }
.smed-queue{ display:flex; flex-direction:column; gap:var(--sp-6); }
.smed-q-empty{ color:var(--mut); font-size:var(--fs-md); padding:var(--sp-14) var(--sp-4); }
.smed-post{ display:flex; align-items:flex-start; gap:var(--sp-10); padding:var(--sp-10) var(--sp-12); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
.smed-post.s-scheduled{ border-left:3px solid var(--smed); }
.smed-post.s-published{ opacity:.7; }
.smed-post-b{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-6); }
.smed-post-txt{ font-size:var(--fs-md); line-height:1.45; }
.smed-post-meta{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; }
.smed-post-st{ font-size:var(--fs-xs); color:var(--mut); border:1px solid var(--line); border-radius:var(--radius-pill); padding:var(--sp-1) var(--sp-8); }
.smed-post-when,.smed-post-media{ font-size:var(--fs-xs); color:var(--mut); }
.smed-post-acts{ display:flex; align-items:center; gap:var(--sp-6); flex:none; }
.smed-x{ border:1px solid var(--line); background:var(--card); color:var(--mut); border-radius:var(--radius-sm); width:28px; height:28px; cursor:pointer; }
.smed-x:hover{ color:var(--err); border-color:color-mix(in srgb,var(--err) 40%,transparent); }

/* ── Calendrier ── */
.smed-cal{ display:flex; flex-direction:column; gap:var(--sp-14); }
.smed-day-h{ font-size:var(--fs-md); margin:0 0 var(--sp-6); color:var(--smed); }
.smed-cal-item{ display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-8) var(--sp-10); border:1px solid var(--line); border-radius:var(--radius-sm,8px); background:var(--card); margin-bottom:var(--sp-4); }
.smed-cal-time{ font-weight:var(--fw-bold); font-size:var(--fs-md); flex:none; width:46px; }
.smed-cal-nets{ display:flex; gap:var(--sp-2); flex:none; }
.smed-cal-txt{ color:var(--mut); font-size:var(--fs-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Publicités ── */
.smed-camps{ display:flex; flex-direction:column; gap:var(--sp-8); }
.smed-camp{ display:grid; grid-template-columns:1.2fr 1.6fr auto auto auto; gap:var(--sp-8); align-items:center; padding:var(--sp-10) var(--sp-12); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); }
@media (max-width:760px){ .smed-camp{ grid-template-columns:1fr 1fr; } }
.smed-camp.s-active{ border-left:3px solid var(--ok); }
.smed-camp.s-paused{ border-left:3px solid var(--warn); }
.smed-camp-n,.smed-camp-o{ padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-md); min-width:0; }
.smed-camp-n{ font-weight:var(--fw-strong); }
.smed-camp-bud{ font-size:var(--fs-sm); color:var(--mut); display:flex; align-items:center; gap:var(--sp-4); white-space:nowrap; }
.smed-camp-bud input{ width:74px; padding:var(--sp-4) var(--sp-6); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card2); color:var(--txt); font:inherit; }
.smed-camp-st{ width:auto; min-width:110px; padding:var(--sp-6) var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-sm); }

/* ════════ Facebook (connexion réelle Graph API) ════════ */
.fb-card{ border:1px solid var(--line); border-left:3px solid var(--c,#1877F2); border-radius:var(--radius); background:var(--card); padding:var(--sp-16); margin-bottom:var(--sp-18); }
.fb-card.on{ background:linear-gradient(180deg,color-mix(in srgb,var(--c) 6%,var(--card)),var(--card)); }
.fb-card-top{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-12); }
.fb-net{ display:flex; align-items:center; gap:var(--sp-10); }
.fb-net b{ font-size:var(--fs-base); display:block; }
.fb-badge{ font-size:var(--fs-2xs); font-weight:var(--fw-strong); padding:var(--sp-1) var(--sp-6); border-radius:var(--radius-pill); }
.fb-badge.real{ background:color-mix(in srgb,var(--ok) 10%,transparent); color:var(--ok); border:1px solid color-mix(in srgb,var(--ok) 27%,transparent); }
.fb-card-acct{ margin:var(--sp-8) 0; font-size:var(--fs-md); }
.fb-page-row{ display:flex; align-items:center; gap:var(--sp-12); padding:var(--sp-10); border:1px solid var(--line); border-radius:var(--radius-sm,8px); background:var(--card2); margin-top:var(--sp-8); }
.fb-page-pic{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; }
.fb-page-meta{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; }
.fb-page-meta label{ font-size:var(--fs-xs); color:var(--mut); text-transform:uppercase; letter-spacing:.04em; }
.fb-page-select{ padding:var(--sp-4) var(--sp-8); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); color:var(--txt); font:inherit; font-size:var(--fs-md); }
.fb-card-cta{ margin-top:var(--sp-12); }
.fb-conn{ display:grid; grid-template-columns:1fr auto 1fr; gap:var(--sp-18); align-items:start; margin-top:var(--sp-12); }
@media (max-width:720px){ .fb-conn{ grid-template-columns:1fr; } .fb-conn-sep{ display:none; } }
.fb-conn-col h4{ margin:0 0 var(--sp-4); font-size:var(--fs-md); }
.fb-conn-col p.muted{ font-size:var(--fs-sm); margin:0 0 var(--sp-8); }
.fb-conn-col input{ width:100%; padding:var(--sp-8) var(--sp-10); border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-md); margin-bottom:var(--sp-6); }
.fb-conn-sep{ writing-mode:vertical-rl; text-align:center; color:var(--mut); font-size:var(--fs-xs); padding-top:var(--sp-20); }
.fb-token-row{ display:flex; align-items:center; gap:var(--sp-10); }
.fb-hint{ font-size:var(--fs-xs); color:var(--mut); margin:var(--sp-6) 0 0; line-height:var(--lh-normal); }
.fb-hint code{ background:var(--card2); padding:var(--sp-1) var(--sp-4); border-radius:var(--radius-xs); font-size:var(--fs-xs); word-break:break-all; }
.fb-app{ margin-top:var(--sp-10); }
.fb-app summary{ cursor:pointer; font-size:var(--fs-sm); color:var(--mut); }
.fb-app input{ margin-top:var(--sp-6); }

/* Console à onglets */
.fb-tabs{ display:flex; gap:var(--sp-4); border-bottom:1px solid var(--line); margin:var(--sp-4) 0 var(--sp-14); flex-wrap:wrap; }
.fb-tab{ padding:var(--sp-6) var(--sp-12); border:none; background:none; color:var(--mut); font:inherit; font-size:var(--fs-md); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.fb-tab.on{ color:var(--txt); border-bottom-color:var(--c,#1877F2); font-weight:var(--fw-strong); }
.fb-tab:hover{ color:var(--txt); }
.fb-pane{ min-height:120px; }

/* Aperçu */
.fb-cover{ height:170px; border-radius:var(--radius); background:var(--card2) center/cover no-repeat; position:relative; border:1px solid var(--line); }
.fb-ov-pic{ width:84px; height:84px; border-radius:50%; object-fit:cover; border:3px solid var(--card); position:absolute; left:18px; bottom:-30px; background:var(--card); }
.fb-ov-body{ padding:var(--sp-38) var(--sp-6) 0; }
.fb-ov-body h3{ margin:0 0 var(--sp-4); }
.fb-ov-stats{ display:flex; gap:var(--sp-14); align-items:baseline; font-size:var(--fs-md); }
.fb-ov-about{ font-size:var(--fs-md); color:var(--txt); margin:var(--sp-10) 0 0; line-height:1.55; }

/* Fil */
.fb-feed{ display:flex; flex-direction:column; gap:var(--sp-12); }
.fb-post{ display:flex; gap:var(--sp-12); border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:var(--sp-12); }
.fb-post-img{ width:96px; height:96px; object-fit:cover; border-radius:var(--radius); flex:none; }
.fb-post-body{ min-width:0; flex:1; }
.fb-post-txt{ font-size:var(--fs-md); line-height:var(--lh-normal); white-space:pre-wrap; }
.fb-post-meta{ display:flex; gap:var(--sp-12); align-items:center; margin-top:var(--sp-8); font-size:var(--fs-sm); color:var(--mut); }
.fb-post-meta a{ text-decoration:none; }

/* Photos */
.fb-photos{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--sp-8); }
.fb-photo{ aspect-ratio:1; border-radius:var(--radius); background:var(--card2) center/cover no-repeat; border:1px solid var(--line); display:block; }

/* Publier */
.fb-publish{ max-width:640px; }
.fb-publish h3{ margin:0 0 var(--sp-10); }
.fb-pub-text,.fb-pub-link,.fb-pub-photo{ width:100%; padding:var(--sp-8) var(--sp-10); border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); color:var(--txt); font:inherit; font-size:var(--fs-md); margin-bottom:var(--sp-8); }
.fb-pub-text{ resize:vertical; line-height:var(--lh-normal); }
.fb-pub-actions{ display:flex; align-items:center; gap:var(--sp-10); }

/* Pubs */
.fb-ads{ display:flex; flex-direction:column; gap:var(--sp-12); }
.fb-adacct{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:var(--sp-12) var(--sp-14); }
.fb-adacct-h{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--sp-8); }
.fb-camp-t{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.fb-camp-t th{ text-align:left; color:var(--mut); font-weight:var(--fw-strong); border-bottom:1px solid var(--line); padding:var(--sp-4) var(--sp-6); }
.fb-camp-t td{ padding:var(--sp-4) var(--sp-6); border-bottom:1px solid var(--line); }

.smed-acc.soon{ opacity:.62; }

}