@layer modules{
/* ════════ Complément « Figma » - pont projet ↔ Figma ════════
   Réutilise les tokens de 01-tokens.css (--card, --line, --accent, --mut…).
   Même morphologie que le complément Business (rail + panneau). */

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

/* ── Rail de navigation ── */
.fig-rail{ display:flex; flex-direction:column; gap:var(--sp-4); position:sticky; top:8px; }
.fig-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);
  background:none; color:var(--mut); font:inherit; font-size:var(--fs-md); cursor:pointer; transition:.12s; }
.fig-nav-btn:hover{ background:var(--card2); color:var(--txt); }
.fig-nav-btn.on{ background:var(--card2); color:var(--txt); border-color:var(--line); font-weight:var(--fw-strong); }
.fig-nav-ic{ width:18px; text-align:center; color:var(--accent); opacity:.9; }

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

/* ── En-tête de section ── */
.fig-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-14); }
.fig-head-t h2{ margin:0; font-size:var(--fs-lg); }
.fig-head-t p{ margin:var(--sp-2) 0 0; color:var(--mut); font-size:var(--fs-sm); max-width:64ch; }

/* ── Pastille de connexion ── */
.fig-conn{ display:inline-flex; align-items:center; gap:var(--sp-6); font-size:var(--fs-sm); white-space:nowrap;
  padding:var(--sp-4) var(--sp-10); border-radius:var(--radius-pill); border:1px solid var(--line); color:var(--mut); }
.fig-conn .dot{ width:8px; height:8px; border-radius:50%; background:var(--mut2); }
.fig-conn.ok{ color:var(--ok); border-color:color-mix(in srgb,var(--ok) 45%,var(--line)); }
.fig-conn.ok .dot{ background:var(--ok); }
.fig-conn.off{ color:var(--warn); border-color:color-mix(in srgb,var(--warn) 40%,var(--line)); }
.fig-conn.off .dot{ background:var(--warn); }

/* ── Cartes / blocs ── */
.fig-block{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:var(--sp-14) var(--sp-16); }
.fig-block-t{ margin:0 0 var(--sp-12); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.05em; color:var(--mut2);
  padding-bottom:var(--sp-8); border-bottom:1px solid var(--line2); }

/* ── Tableau de bord (cartes de stats) ── */
.fig-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--sp-12); }
.fig-card{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:var(--sp-14) var(--sp-14); }
.fig-card-h{ font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.04em; color:var(--mut2); margin-bottom:var(--sp-8); }
.fig-card-b{ display:flex; flex-direction:column; gap:var(--sp-4); font-size:var(--fs-md); }
.fig-card-b b{ font-size:var(--fs-xl); }
.fig-card-b .muted{ color:var(--mut); }

/* ── Liste des fichiers liés ── */
.fig-files{ display:flex; flex-direction:column; }
.fig-file{ display:flex; align-items:center; gap:var(--sp-12); padding:var(--sp-8) 0; border-top:1px solid var(--line2); }
.fig-file:first-child{ border-top:none; }
.fig-thumb{ width:54px; height:40px; flex-shrink:0; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--card2) center/cover no-repeat; display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:var(--fs-lg); overflow:hidden; }
.fig-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.fig-file-meta{ flex:1; min-width:0; }
.fig-file-name{ font-size:var(--fs-md); font-weight:var(--fw-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fig-file-sub{ font-size:var(--fs-xs); color:var(--mut2); font-family:var(--font-mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fig-file-acts{ display:flex; gap:var(--sp-6); flex-shrink:0; }
.fig-empty{ color:var(--mut); text-align:center; padding:var(--sp-18); font-size:var(--fs-sm); }

/* ── Barre « lier une URL » ── */
.fig-linkbar{ display:flex; gap:var(--sp-8); margin-top:var(--sp-12); }
.fig-linkbar input{ flex:1; min-width:0; background:var(--card); color:var(--txt); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:var(--sp-8) var(--sp-10); font:inherit; font-size:var(--fs-sm); }
.fig-linkbar input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus); }

/* ── Section Connexion ── */
.fig-form{ display:flex; flex-direction:column; gap:var(--sp-12); }
.fig-field{ display:flex; flex-direction:column; gap:var(--sp-4); }
.fig-field>label{ font-size:var(--fs-sm); font-weight:var(--fw-strong); color:var(--txt); }
.fig-field>label small{ font-weight:var(--fw-regular); color:var(--mut); }
.fig-field input,.fig-field select{ width:100%; background:var(--card); color:var(--txt);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:var(--sp-8) var(--sp-10); font:inherit; font-size:var(--fs-md); }
.fig-field input:focus{ outline:none; border-color:var(--accent); box-shadow:var(--focus); }
.fig-hint{ font-size:var(--fs-sm); color:var(--mut); line-height:1.55; }
.fig-hint a{ color:var(--accent); }
.fig-profile{ display:flex; align-items:center; gap:var(--sp-10); }
.fig-avatar{ width:36px; height:36px; border-radius:50%; background:var(--card2) center/cover no-repeat; flex-shrink:0;
  border:1px solid var(--line); }
.fig-profile b{ font-size:var(--fs-md); } .fig-profile span{ display:block; font-size:var(--fs-xs); color:var(--mut); }

/* ── Barre d'outils générique ── */
.fig-toolbar{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap;
  padding:var(--sp-10) var(--sp-12); border:1px solid var(--line); border-radius:var(--radius); background:var(--card2); }
.fig-toolbar .grow{ flex:1; min-width:140px; }
.fig-status{ font-size:var(--fs-sm); color:var(--mut); min-width:60px; }

/* ── Grille d'aperçus à importer ── */
.fig-nodes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-10); }
.fig-node{ border:1px solid var(--line); border-radius:var(--radius); background:var(--card); padding:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-6); }
.fig-node-prev{ aspect-ratio:4/3; border-radius:var(--radius-sm); background:var(--card2) center/contain no-repeat; border:1px solid var(--line2); }
.fig-node-name{ font-size:var(--fs-sm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Bandeau de délégation Pilote (push) ── */
.fig-bridge{ display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-10) var(--sp-14); border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card2); }
.fig-bridge-ic{ font-size:var(--fs-lg); color:var(--accent); }
.fig-bridge p{ flex:1; margin:0; font-size:var(--fs-sm); color:var(--mut); }

/* ── Aperçu Figma intégré (embed) ── */
.fig-embed-out{ margin-top:var(--sp-14); }
.fig-embed-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-10); margin-bottom:var(--sp-8); }
.fig-embed-head b{ font-size:var(--fs-md); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fig-embed{ width:100%; aspect-ratio:16/10; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--card2); display:block; }

/* ── Section Tokens ── */
.fig-tok{ width:100%; border-collapse:collapse; font-size:var(--fs-sm); }
.fig-tok th{ text-align:left; color:var(--mut2); font-weight:var(--fw-medium); font-size:var(--fs-xs); padding:var(--sp-4) var(--sp-6); border-bottom:1px solid var(--line); }
.fig-tok td{ padding:var(--sp-4) var(--sp-6); border-bottom:1px solid var(--line2); }
.fig-tok .swatch{ width:14px; height:14px; border-radius:var(--radius-xs); border:1px solid var(--line); display:inline-block; vertical-align:-2px; margin-right:var(--sp-6); }
.fig-tok .mono{ font-family:var(--font-mono); color:var(--mut); }
.fig-badge{ display:inline-block; font-size:var(--fs-2xs); padding:var(--sp-1) var(--sp-6); border-radius:var(--radius-pill); background:var(--card2); color:var(--mut); border:1px solid var(--line); }

}