/* Guide réseaux sociaux : styles propres à ce guide (couverture animée, pastilles des réseaux, planning).
   Le reste vient de guide.css, identique au guide montage. */

/* ---------- Pastilles des réseaux ---------- */
.net{display:inline-grid;place-items:center;flex:none;width:22px;height:22px;border-radius:7px;font:700 10px/1 "Open Sauce",sans-serif;color:#fff}
.net--ig{background:radial-gradient(circle at 30% 110%,#fdd36a 0 22%,#f5733a 40%,#d4307a 65%,#7a3fd0)}
.net--ig::after{content:"";width:10px;height:10px;border:1.6px solid #fff;border-radius:3.5px;box-shadow:inset 0 0 0 2px transparent}
.net--tt{background:#111;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.net--tt::after{content:"♪";font-size:12px;text-shadow:-1px -1px 0 #25f4ee,1px 1px 0 #fe2c55}
.net--yt{background:#ff2a2a}
.net--yt::after{content:"";margin-left:2px;border-left:7px solid #fff;border-block:4.5px solid transparent}
.net--fb{background:#1877f2}
.net--fb::after{content:"f";font-size:13px}
.net--in{background:#0a66c2}
.net--in::after{content:"in";font-size:10px}

/* ---------- Couverture : comptes → IA → planning ---------- */
.hub{width:100%;max-width:760px;margin:0 auto;container-type:inline-size}
.hub__window{position:relative;overflow:hidden;border-radius:18px;background:#151412;color:var(--paper);box-shadow:0 1px 0 rgba(28,27,25,.05),0 30px 60px -36px rgba(28,27,25,.6);user-select:none}
.hub__ask{margin:14px 14px 0;text-align:right}
.hub__ask span{display:inline-block;max-width:92%;padding:9px 13px;border-radius:15px 15px 5px 15px;background:#3d3932;font-size:13px;line-height:1.4;text-align:left}
.hub__grid{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1.25fr);align-items:center;gap:8px;padding:14px 14px 16px}
.hub__col{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.hub__label{margin:0 0 2px;font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(247,244,239,.45)}
.hub__acc,.hub__slot{display:flex;align-items:center;gap:8px;min-width:0;padding:7px 8px;border-radius:10px;background:rgba(255,255,255,.05);font-size:12px;font-weight:500;white-space:nowrap}
.hub__acc .net,.hub__slot .net{width:18px;height:18px;border-radius:6px;transform:scale(.9)}
.hub__toggle{position:relative;flex:none;width:24px;height:14px;margin-left:auto;border-radius:99px;background:rgba(255,255,255,.14);transition:background .3s}
.hub__toggle::after{content:"";position:absolute;top:2px;left:2px;width:10px;height:10px;border-radius:50%;background:#fff;transition:transform .3s cubic-bezier(.5,0,.2,1)}
.hub__acc.is-on .hub__toggle{background:#2fae80}
.hub__acc.is-on .hub__toggle::after{transform:translateX(10px)}
.hub__core{position:relative;display:grid;place-items:center;height:100%}
.hub__node{position:relative;z-index:1;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--orange);box-shadow:0 0 0 0 rgba(226,87,28,.5);transition:box-shadow .5s}
.hub__node svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round}
.hub__window.is-linked .hub__node{box-shadow:0 0 0 6px rgba(226,87,28,.18)}
.hub__window.is-sending .hub__node{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(226,87,28,.1)}}
.hub__wire{position:absolute;top:50%;height:2px;width:50%;background:rgba(255,255,255,.1);overflow:hidden}
.hub__wire--in{right:50%}.hub__wire--out{left:50%}
.hub__wire::after{content:"";position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform .5s}
.hub__window.is-linked .hub__wire--in::after{transform:scaleX(1)}
.hub__window.is-sending .hub__wire--out::after,.hub__window.is-linked .hub__slot.is-ok~.hub__wire--out::after{transform:scaleX(1)}
.hub__slot{opacity:.25;transform:translateX(-6px);transition:opacity .35s,transform .35s,background .35s}
.hub__slot.is-in{opacity:1;transform:none}
.hub__slot b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.hub__slot small{display:none;font-size:11px;color:rgba(247,244,239,.5)}
.hub__slot time{margin-left:auto;font:500 10.5px/1 var(--mono);color:rgba(247,244,239,.6)}
.hub__check{flex:none;width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.12);transition:background .3s}
.hub__slot.is-ok .hub__check{background:#2fae80 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/9px no-repeat}
.hub__dm{position:absolute;right:14px;bottom:14px;display:flex;align-items:center;gap:9px;margin:0;padding:8px 12px 8px 8px;border-radius:14px;background:var(--paper);color:var(--ink);box-shadow:0 18px 34px -16px rgba(0,0,0,.7);font-size:12px;line-height:1.25;opacity:0;transform:translateY(12px) scale(.96);transition:opacity .4s,transform .45s cubic-bezier(.3,1.3,.5,1)}
.hub__dm.is-in{opacity:1;transform:none}
.hub__avatar{flex:none;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#d9c6b0,#9c8571)}
.hub__dm small{display:block;font-size:10.5px;color:var(--muted)}
.hub__dm b{color:var(--orange);font-weight:700}
.hub__dm em{margin-left:6px;padding:4px 8px;border-radius:99px;background:var(--orange-soft);font-style:normal;font-weight:600;color:var(--orange-deep);white-space:nowrap}
@container (min-width:560px){
  .hub__grid{grid-template-columns:minmax(0,1fr) 80px minmax(0,1.3fr);gap:10px;padding:18px 20px 70px}
  .hub__ask{margin:18px 20px 0}
  .hub__ask span{font-size:14px}
  .hub__node{width:48px;height:48px;border-radius:14px}
  .hub__acc,.hub__slot{padding:9px 10px;font-size:13px}
  .hub__slot small{display:inline}
  .hub__dm{right:20px;bottom:16px;font-size:13px}
}
@container (max-width:559px){
  .hub__grid{padding-bottom:76px}
  .hub__slot b{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hub *{transition:none!important;animation:none!important}
}

/* ---------- Planning (chapitre 01 et étape 04) ---------- */
.cal-dot{border-radius:4px;background:var(--orange)}
.cal{display:flex;flex-direction:column;gap:7px;margin:0;padding:0;list-style:none}
.cal__row{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.05);font-size:13px}
.cal__row b{font-weight:600}
.cal__row small{font-size:11.5px;color:rgba(247,244,239,.5)}
.cal__row time{margin-left:auto;font:500 11px/1 var(--mono);color:rgba(247,244,239,.65)}
.cal__row.is-new{background:rgba(226,87,28,.16);box-shadow:inset 0 0 0 1px rgba(226,87,28,.35)}
.cal--light .cal__row{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.cal--light .cal__row small{color:var(--muted)}
.cal--light .cal__row time{color:var(--body)}
.prose code,.row code{padding:1px 6px;border-radius:6px;background:var(--sand-soft);font:500 .86em/1 var(--mono);word-break:break-all}
.hub{--a:#e2571c;--c:#2fae80}
.tool__icon[data-n]::after{content:attr(data-n);font-variant-numeric:tabular-nums}
@media(min-width:640px){.flow{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* Très petits téléphones : comptes en icônes seules, nœud plus petit, notification compacte. */
@container (max-width:400px){
  .hub__grid{grid-template-columns:minmax(0,1fr) 34px minmax(0,1.3fr);gap:6px;padding:12px 12px 70px}
  .hub__acc{font-size:0;gap:0;justify-content:space-between}
  .hub__acc .net{font-size:10px}
  .hub__label{white-space:nowrap;font-size:8.5px;letter-spacing:.08em}
  .hub__node{width:32px;height:32px;border-radius:10px}
  .hub__node svg{width:16px;height:16px}
  .hub__slot{gap:6px;padding:7px 6px}
  .hub__slot time{font-size:9.5px}
  .hub__dm{left:12px;right:12px;bottom:12px;padding:7px 9px 7px 7px}
  .hub__dm small{display:none}
  .hub__dm em{margin-left:auto}
  .studio__status{font-size:10px;padding:4px 8px}
}