@layer modules{
/* ════════ Complément « Figma » - pont projet ↔ Figma ════════
   La DA Figma (le proprio, 2026-10-20 : « une DA spéciale Figma, avec le style de Figma, une immersion dans l'univers
   Figma ») : l'écran prend la forme de l'éditeur de Figma. Une fenêtre : en haut la barre sombre (logo, « création /
   page », avatar, bouton bleu) ; à gauche le panneau des pages (lignes de 32 px, la page choisie sur un fond bleuté) ; au
   centre le canevas gris, où chaque carte est une frame blanche à angles vifs, son nom en petit gris AU-DESSUS, un
   contour bleu au survol comme une sélection. Inter, petits corps (11 à 13 px), boutons de 5 px de rayon, bleu de Figma.
   Couleurs : les jetons --fg-* de 01-tokens.css, sombres puis clairs ; elles ne servent qu'ici. */

.fig{ --fg-r:var(--radius-xs); display:flex; flex-direction:column; min-height:560px; border:1px solid var(--fg-ligne); border-radius:var(--radius);
  overflow:hidden; background:var(--fg-canevas); color:var(--fg-txt);
  font-family:var(--font-sans); font-size:var(--fs-sm); line-height:1.45; font-feature-settings:'cv11','ss01'; }

/* ── La barre de l'éditeur ── */
.fig-barre{ display:flex; align-items:center; gap:var(--sp-10); height:40px; padding:0 var(--sp-8) 0 var(--sp-12); flex:none;
  background:var(--fg-barre); color:var(--fg-barre-txt); font-size:var(--fs-sm); }
.fig-barre-logo{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:var(--fg-r); }
.fig-barre-fichier{ flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:var(--sp-6); white-space:nowrap; overflow:hidden; }
.fig-barre-proj{ color:var(--fg-barre-txt2); overflow:hidden; text-overflow:ellipsis; }
.fig-barre-sep{ color:var(--fg-barre-txt2); opacity:.6; }
.fig-barre-page{ font-weight:var(--fw-strong); overflow:hidden; text-overflow:ellipsis; }
.fig-barre-droite{ display:flex; align-items:center; gap:var(--sp-8); flex:none; }
.fig-barre-avatar{ display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; flex:none;
  background:var(--fg-bleu) center/cover no-repeat; color:var(--fg-barre-txt); font-size:var(--fs-xs); font-weight:var(--fw-strong); }
.fig-barre-btn{ height:24px; padding:0 var(--sp-10); border:0; border-radius:var(--fg-r); background:var(--fg-bleu); color:var(--fg-barre-txt);
  font:inherit; font-size:var(--fs-xs); font-weight:var(--fw-medium); cursor:pointer; }
.fig-barre-btn:hover{ filter:brightness(1.08); }

.fig-corps{ flex:1; min-height:0; display:grid; grid-template-columns:220px 1fr; }
@media (max-width:720px){ .fig-corps{ grid-template-columns:1fr; } .fig-barre-proj,.fig-barre-sep{ display:none; } }

/* ── Le panneau des pages ── */
.fig-rail{ display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-8); background:var(--fg-panneau); border-right:1px solid var(--fg-ligne); }
.fig-rail-t{ padding:var(--sp-6) var(--sp-8) var(--sp-8); font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--fg-txt); }
.fig-nav-btn{ display:flex; align-items:center; gap:var(--sp-8); width:100%; height:32px; padding:0 var(--sp-8); text-align:left; border:0; border-radius:var(--fg-r);
  background:none; color:var(--fg-txt); font:inherit; font-size:var(--fs-sm); cursor:pointer; }
.fig-nav-btn:hover{ background:var(--fg-survol); }
.fig-nav-btn.on{ background:color-mix(in srgb, var(--fg-bleu) 16%, var(--fg-panneau)); font-weight:var(--fw-medium); }
.fig-nav-ic{ width:16px; display:inline-flex; justify-content:center; color:var(--fg-txt2); font-size:var(--fs-sm); }
.fig-nav-ic svg{ width:13px; height:13px; }
.fig-nav-btn.on .fig-nav-ic{ color:var(--fg-bleu); }

/* ── Le canevas ── */
.fig-main{ min-width:0; display:flex; flex-direction:column; gap:var(--sp-30); padding:var(--sp-22) var(--sp-28) var(--sp-32); background:var(--fg-canevas); }
.fig-loading{ display:flex; align-items:center; gap:var(--sp-8); color:var(--fg-txt2); padding:var(--sp-24) var(--sp-4); }
.fig-spin{ width:14px; height:14px; border:2px solid var(--fg-ligne); border-top-color:var(--fg-bleu);
  border-radius:50%; display:inline-block; animation:figspin .7s linear infinite; }
@keyframes figspin{ to{ transform:rotate(360deg); } }

/* ── L'en-tête d'une page ── */
.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-md); font-weight:var(--fw-strong); letter-spacing:-.005em; }
.fig-head-t p{ margin:var(--sp-4) 0 0; color:var(--fg-txt2); font-size:var(--fs-xs); max-width:64ch; }

/* ── Le compte relié ── */
.fig-conn{ display:inline-flex; align-items:center; gap:var(--sp-6); height:24px; padding:0 var(--sp-8); white-space:nowrap; border:0; border-radius:var(--fg-r);
  background:var(--fg-frame); color:var(--fg-txt); font:inherit; font-size:var(--fs-xs); cursor:pointer; }
.fig-conn:hover{ background:var(--fg-survol); }
.fig-conn .dot{ width:6px; height:6px; border-radius:50%; background:var(--fg-txt2); }
.fig-conn.ok .dot{ background:var(--fg-vert); }
.fig-conn.off .dot{ background:var(--warn); }

/* ── Les frames : une carte posée sur le canevas, son nom au-dessus, sélectionnée au survol ── */
.fig-block,.fig-card,.fig-bridge,.fig-toolbar,.fig-node{ position:relative; background:var(--fg-frame); border:0; border-radius:var(--radius-none);
  box-shadow:0 0 0 1px transparent; transition:box-shadow .08s; }
.fig-block:hover,.fig-card:hover,.fig-node:hover{ box-shadow:0 0 0 1px var(--fg-bleu); }
.fig-block{ padding:var(--sp-16); }
.fig-block-t,.fig-card-h{ position:absolute; left:0; bottom:100%; margin:0 0 var(--sp-4); padding:0; border:0;
  font-size:var(--fs-xs); font-weight:var(--fw-regular); text-transform:none; letter-spacing:0; color:var(--fg-txt2); white-space:nowrap; }
.fig-block:hover>.fig-block-t,.fig-card:hover>.fig-card-h{ color:var(--fg-bleu-txt); }

/* ── Tableau de bord ── */
.fig-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:var(--sp-30) var(--sp-16); margin-top:var(--sp-4); }
.fig-card{ padding:var(--sp-14); }
.fig-card-b{ display:flex; flex-direction:column; gap:var(--sp-4); font-size:var(--fs-sm); }
.fig-card-b b{ font-size:var(--fs-xl); font-weight:var(--fw-strong); letter-spacing:-.01em; }
.fig-card-b .muted{ color:var(--fg-txt2); font-size:var(--fs-xs); }

/* ── 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(--fg-ligne); }
.fig-file:first-child{ border-top:none; }
.fig-thumb{ width:54px; height:40px; flex-shrink:0; border-radius:var(--radius-none); background:var(--fg-canevas) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center; color:var(--fg-bleu); font-size:var(--fs-md); 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-sm); font-weight:var(--fw-medium); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fig-file-sub{ font-size:var(--fs-xs); color:var(--fg-txt2); 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(--fg-txt2); text-align:center; padding:var(--sp-18); font-size:var(--fs-xs); }

/* ── Les champs et les boutons, à la Figma ── */
.fig input,.fig select{ height:28px; padding:0 var(--sp-8); border:1px solid transparent; border-radius:var(--fg-r); background:var(--fg-champ);
  color:var(--fg-txt); font:inherit; font-size:var(--fs-xs); }
.fig input:hover,.fig select:hover{ border-color:var(--fg-ligne); }
.fig input:focus,.fig select:focus{ outline:none; border-color:var(--fg-bleu); box-shadow:none; }
.fig .mini{ height:24px; padding:0 var(--sp-10); border:1px solid var(--fg-ligne); border-radius:var(--fg-r); background:transparent; color:var(--fg-txt);
  font:inherit; font-size:var(--fs-xs); font-weight:var(--fw-medium); display:inline-flex; align-items:center; gap:var(--sp-4); cursor:pointer; }
.fig .mini:hover{ background:var(--fg-survol); }
.fig .mini.primary{ border-color:var(--fg-bleu); background:var(--fg-bleu); color:var(--fg-barre-txt); }
.fig .mini.primary:hover{ background:var(--fg-bleu); filter:brightness(1.08); }
.fig a.mini{ text-decoration:none; }
.fig .mini svg{ width:12px; height:12px; }

.fig-linkbar{ display:flex; gap:var(--sp-8); margin-top:var(--sp-12); }
.fig-linkbar input{ flex:1; min-width:0; }

/* ══ Les fichiers liés (CDC_FIGMA_FICHIERS F1 et F2, 2026-10-20) ══ */
/* La barre d'URL en tête, comme une recherche ; l'état de la vérification à droite du champ. */
.fig-fichiers-tete{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; }
.fig-url{ flex:1; min-width:260px; display:flex; align-items:center; gap:var(--sp-8); padding:0 var(--sp-6) 0 var(--sp-10); height:36px;
  background:var(--fg-frame); border-radius:var(--fg-r); box-shadow:0 0 0 1px var(--fg-ligne); }
.fig-url:focus-within{ box-shadow:0 0 0 1px var(--fg-bleu); }
.fig-url-ic{ display:inline-flex; color:var(--fg-txt2); } .fig-url-ic svg{ width:14px; height:14px; }
.fig .fig-url input{ flex:1; min-width:0; height:30px; padding:0; border:0; background:transparent; }
.fig .fig-url input:hover,.fig .fig-url input:focus{ border:0; }
.fig-url-etat{ flex:none; max-width:45%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--fs-xs); color:var(--fg-txt2); }
.fig-url-etat.ok{ color:var(--fg-vert); } .fig-url-etat.ko{ color:var(--warn); }
.fig-aide{ flex:none; display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--fg-champ); color:var(--fg-txt2);
  font-size:var(--fs-2xs); font-weight:var(--fw-strong); cursor:help; }
.fig .fig-chercher{ width:200px; } .fig .fig-trier{ width:auto; }

/* La grille de fiches et le panneau à droite. */
.fig-fichiers-corps{ display:grid; grid-template-columns:1fr; gap:var(--sp-16); align-items:start; }
.fig-fichiers-corps.avec-panneau{ grid-template-columns:minmax(220px,1fr) minmax(360px,1.4fr); }
@media (max-width:1100px){ .fig-fichiers-corps.avec-panneau{ grid-template-columns:1fr; } }
.fig-grille{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--sp-18) var(--sp-16); }
.avec-panneau .fig-grille{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
.fig-grille-compacte{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.fig-fiche{ display:flex; flex-direction:column; gap:var(--sp-4); min-width:0; cursor:pointer; outline:none; }
.fig-fiche-vignette{ position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:var(--fg-r); background:var(--fg-frame);
  box-shadow:0 0 0 1px var(--fg-ligne); display:grid; place-items:center; transition:box-shadow .08s; }
.fig-fiche:hover .fig-fiche-vignette,.fig-fiche:focus-visible .fig-fiche-vignette{ box-shadow:0 0 0 1px var(--fg-bleu); }
.fig-fiche.on .fig-fiche-vignette{ box-shadow:0 0 0 2px var(--fg-bleu); }
.fig-fiche-vignette img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fig-fiche-ph{ font-size:var(--fs-xs); color:var(--fg-txt2); }
.fig-fiche-badges{ position:absolute; top:var(--sp-6); left:var(--sp-6); display:flex; gap:var(--sp-4); }
.fig-badge-ref,.fig-badge-maj{ padding:var(--sp-2) var(--sp-6); border-radius:var(--fg-r); font-size:var(--fs-2xs); font-weight:var(--fw-medium); }
.fig-badge-ref{ background:var(--fg-frame); color:var(--fg-txt); box-shadow:0 0 0 1px var(--fg-ligne); }
.fig-badge-maj{ background:var(--fg-bleu); color:var(--fg-barre-txt); }
.fig-fiche-actions{ position:absolute; right:var(--sp-6); bottom:var(--sp-6); display:flex; gap:var(--sp-4); opacity:0; transform:translateY(var(--sp-4)); transition:opacity .1s, transform .1s; }
.fig-fiche:hover .fig-fiche-actions,.fig-fiche:focus-within .fig-fiche-actions{ opacity:1; transform:none; }
.fig .fig-fiche-actions .mini{ background:var(--fg-frame); }
.fig-fiche-nom{ font-size:var(--fs-sm); font-weight:var(--fw-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fig-fiche.on .fig-fiche-nom{ color:var(--fg-bleu-txt); }
.fig-fiche-sous{ font-size:var(--fs-xs); color:var(--fg-txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fig-vide{ grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:var(--sp-4); padding:var(--sp-24) var(--sp-16);
  background:var(--fg-frame); border-radius:var(--fg-r); text-align:center; font-size:var(--fs-xs); color:var(--fg-txt2); }
.fig-vide b{ font-size:var(--fs-sm); color:var(--fg-txt); font-weight:var(--fw-strong); }

/* Le panneau d'un fichier : son en-tête, ses onglets, son corps. */
/* Le panneau tient dans la fenêtre (banc, 2026-10-20 : plus haut qu'elle, son bas et « Importer la sélection » restaient hors de vue) ; son corps défile. */
.fig-panneau{ position:sticky; top:var(--sp-8); max-height:calc(100vh - var(--sp-16)); display:flex; flex-direction:column; min-width:0; background:var(--fg-panneau); border-radius:var(--fg-r);
  box-shadow:0 0 0 1px var(--fg-ligne); overflow:hidden; }
.fig-panneau-tete{ display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-10); border-bottom:1px solid var(--fg-ligne); }
.fig-panneau-vign{ flex:none; width:44px; height:28px; border-radius:var(--fg-r); overflow:hidden; background:var(--fg-champ); position:relative; }
.fig-panneau-vign img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fig-panneau-id{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fig-panneau-id b{ font-size:var(--fs-sm); font-weight:var(--fw-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:text; }
.fig-panneau-id span{ font-size:var(--fs-2xs); color:var(--fg-txt2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fig-etoile{ flex:none; width:26px; height:26px; border:0; border-radius:var(--fg-r); background:transparent; color:var(--fg-txt2); font-size:var(--fs-md); cursor:pointer; }
.fig-etoile:hover{ background:var(--fg-survol); } .fig-etoile.on{ color:var(--warn); }
.fig-panneau-x{ flex:none; display:grid; place-items:center; width:26px; height:26px; border:0; border-radius:var(--fg-r); background:transparent; color:var(--fg-txt2); cursor:pointer; }
.fig-panneau-x:hover{ background:var(--fg-survol); color:var(--fg-txt); } .fig-panneau-x svg{ width:14px; height:14px; }
.fig-onglets{ display:flex; gap:var(--sp-2); padding:var(--sp-6) var(--sp-8); border-bottom:1px solid var(--fg-ligne); overflow-x:auto; }
.fig-onglets button{ flex:none; height:26px; padding:0 var(--sp-10); border:0; border-radius:var(--fg-r); background:transparent; color:var(--fg-txt2);
  font:inherit; font-size:var(--fs-xs); font-weight:var(--fw-medium); cursor:pointer; }
.fig-onglets button:hover{ color:var(--fg-txt); background:var(--fg-survol); }
.fig-onglets button.on{ color:var(--fg-txt); background:var(--fg-champ); }
.fig-panneau-corps{ flex:1; min-height:0; padding:var(--sp-12); display:flex; flex-direction:column; gap:var(--sp-10); overflow-y:auto; }
.fig-panneau-corps .fig-embed{ aspect-ratio:4/3; }

/* Frames : par page, à cocher pour l'import en lot. */
.fig-frames-tete{ display:flex; align-items:center; gap:var(--sp-8); font-size:var(--fs-xs); color:var(--fg-txt2); }
.fig-version-on{ color:var(--fg-bleu-txt); font-weight:var(--fw-medium); }
.fig-page-t{ margin:var(--sp-6) 0 0; font-size:var(--fs-xs); font-weight:var(--fw-strong); color:var(--fg-txt); }
.fig-panneau .fig-nodes{ grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:var(--sp-10); }
.fig-node{ position:relative; }
.fig-node.coche{ box-shadow:0 0 0 2px var(--fg-bleu); }
.fig-node-coche{ position:absolute; top:var(--sp-10); left:var(--sp-10); z-index:1; }
.fig .fig-node-coche input{ width:14px; height:14px; padding:0; accent-color:var(--fg-bleu); }
.fig-node-acts{ display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.fig-node-acts .mini{ flex:1 1 auto; min-width:0; justify-content:center; padding:0 var(--sp-6); }
.fig-lot{ position:sticky; bottom:0; display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; padding:var(--sp-8) 0 0; background:var(--fg-panneau); }
.fig-lot-n{ flex:1; font-size:var(--fs-xs); color:var(--fg-txt2); }
.fig .fig-lot select{ width:auto; }

/* Commentaires, styles, versions. */
.fig-coms,.fig-vers{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-8); }
.fig-com{ padding:var(--sp-8) var(--sp-10); border-radius:var(--fg-r); background:var(--fg-frame); box-shadow:0 0 0 1px var(--fg-ligne); }
.fig-com.resolu{ opacity:.6; }
.fig-com-tete{ display:flex; align-items:center; gap:var(--sp-6); font-size:var(--fs-xs); color:var(--fg-txt2); }
.fig-com-tete b{ color:var(--fg-txt); font-weight:var(--fw-strong); }
.fig-com-av{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:50%; background:var(--fg-bleu); color:var(--fg-barre-txt); font-size:var(--fs-2xs); font-weight:var(--fw-strong); }
.fig-com-ok{ margin-left:auto; color:var(--fg-vert); }
.fig-com p{ margin:var(--sp-4) 0 0; font-size:var(--fs-sm); line-height:1.5; white-space:pre-wrap; }
.fig-com-rep{ padding-left:var(--sp-10); border-left:2px solid var(--fg-ligne); color:var(--fg-txt2); font-size:var(--fs-xs); }
.fig-sws{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:var(--sp-8); }
.fig-sw{ display:flex; flex-direction:column; gap:var(--sp-2); min-width:0; font-size:var(--fs-xs); }
.fig-sw b{ font-weight:var(--fw-medium); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fig-sw code,.fig-va code{ font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--fg-txt2); }
.fig-sw-c{ display:block; height:36px; border-radius:var(--fg-r); box-shadow:0 0 0 1px var(--fg-ligne) inset; }
.fig-sw-c.petit{ width:14px; height:14px; flex:none; }
.fig-txs,.fig-vas{ display:flex; flex-direction:column; gap:var(--sp-4); }
.fig-tx,.fig-va{ display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-6) var(--sp-8); border-radius:var(--fg-r); background:var(--fg-frame); font-size:var(--fs-xs); }
.fig-tx b,.fig-va b{ font-weight:var(--fw-medium); } .fig-tx span{ color:var(--fg-txt2); } .fig-va span:first-child{ color:var(--fg-txt2); }
.fig-va code{ margin-left:auto; }
.fig-ver{ display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-8) var(--sp-10); border-radius:var(--fg-r); background:var(--fg-frame); box-shadow:0 0 0 1px var(--fg-ligne); }
.fig-ver>div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-2); font-size:var(--fs-xs); }
.fig-ver b{ font-size:var(--fs-sm); font-weight:var(--fw-medium); } .fig-ver span{ color:var(--fg-txt2); }
.fig-ver p{ margin:0; color:var(--fg-txt2); } .fig-ver.auto b{ color:var(--fg-txt2); font-weight:var(--fw-regular); }

/* CDC_FIGMA_2 (2026-10-22) : commenter depuis Hdplio, l'activité reçue de Figma, les abonnements. */
.fig-com-composer{ display:flex; flex-direction:column; gap:var(--sp-6); padding:var(--sp-8) var(--sp-10); border-radius:var(--fg-r); background:var(--fg-frame); box-shadow:0 0 0 1px var(--fg-ligne); }
.fig .fig-com-composer textarea{ width:100%; min-height:44px; resize:vertical; font-size:var(--fs-sm); }
.fig-com-acts{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-8); }
.fig-com-noeud{ display:inline-flex; align-items:center; gap:var(--sp-4); align-self:flex-start; padding:var(--sp-2) var(--sp-6); border-radius:var(--fg-r);
  background:color-mix(in srgb, var(--fg-bleu) 16%, var(--fg-frame)); color:var(--fg-bleu-txt); font-size:var(--fs-2xs); font-weight:var(--fw-medium); }
.fig-com-noeud-x{ border:0; background:none; color:inherit; font:inherit; cursor:pointer; padding:0 var(--sp-2); }
.fig-com-pied{ display:flex; align-items:center; gap:var(--sp-8); margin-top:var(--sp-6); font-size:var(--fs-2xs); }
.fig-com-reagir{ display:inline-flex; align-items:center; gap:var(--sp-4); height:22px; padding:0 var(--sp-6); border:0; border-radius:var(--fg-r); background:var(--fg-champ); color:var(--fg-txt2);
  font:inherit; font-size:var(--fs-2xs); cursor:pointer; }
.fig-com-reagir:hover{ background:var(--fg-survol); color:var(--fg-txt); }
.fig-com-reagir.on{ background:color-mix(in srgb, var(--fg-bleu) 16%, var(--fg-frame)); color:var(--fg-bleu-txt); }
.fig-com-lien{ border:0; background:none; padding:0; color:var(--fg-txt2); font:inherit; font-size:var(--fs-2xs); cursor:pointer; text-decoration:none; }
.fig-com-lien:hover{ color:var(--fg-bleu-txt); }
.fig-com-rep-form{ display:flex; gap:var(--sp-6); margin-top:var(--sp-6); } .fig-com-rep-form input{ flex:1; min-width:0; }
.fig-evs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-6); }
.fig-ev{ display:flex; gap:var(--sp-10); padding:var(--sp-8) var(--sp-10); border-radius:var(--fg-r); background:var(--fg-frame); }
.fig-ev-ic{ flex:none; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; background:var(--fg-champ); color:var(--fg-txt2); font-size:var(--fs-xs); }
.fig-ev.ev-FILE_DELETE .fig-ev-ic{ color:var(--danger); } .fig-ev.ev-FILE_COMMENT .fig-ev-ic{ background:color-mix(in srgb, var(--fg-bleu) 16%, var(--fg-frame)); }
.fig-ev>div{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-2); font-size:var(--fs-xs); }
.fig-ev b{ font-weight:var(--fw-medium); } .fig-ev span{ color:var(--fg-txt2); font-size:var(--fs-2xs); } .fig-ev p{ margin:0; color:var(--fg-txt2); white-space:pre-wrap; }
.fig-badge-sup{ padding:var(--sp-2) var(--sp-6); border-radius:var(--fg-r); font-size:var(--fs-2xs); font-weight:var(--fw-medium); background:var(--danger); color:var(--fg-barre-txt); }
.fig-wh-adresse{ display:block; padding:var(--sp-6) var(--sp-8); border-radius:var(--fg-r); background:var(--fg-champ); font-family:var(--font-mono); font-size:var(--fs-2xs); color:var(--fg-txt2);
  overflow-wrap:anywhere; user-select:all; }
.fig-wh-liste{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:var(--sp-4); }
.fig-wh-liste li{ display:flex; justify-content:space-between; gap:var(--sp-6); padding:var(--sp-4) var(--sp-8); border-radius:var(--fg-r); background:var(--fg-frame); font-size:var(--fs-2xs); }
.fig-wh-liste b{ font-weight:var(--fw-medium); } .fig-wh-liste span{ color:var(--fg-vert); }

/* F3 : les options du lot (SVG), les images de remplissage. */
.fig-lot-opt{ display:inline-flex; align-items:center; gap:var(--sp-4); font-size:var(--fs-2xs); color:var(--fg-txt2); }
.fig .fig-lot-opt input{ width:13px; height:13px; padding:0; accent-color:var(--fg-bleu); }
.fig-node-sous{ font-size:var(--fs-2xs); color:var(--fg-txt2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fig-imgs .fig-node-prev{ background-size:cover; }

/* F4 : parcourir l'équipe. */
.fig-parcours{ display:flex; flex-direction:column; gap:var(--sp-12); }
.fig-parcours .fig-frames-tete b{ color:var(--fg-txt); font-size:var(--fs-sm); }
.fig-parcours-projets{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--sp-8); }
.fig-parcours-projet{ display:flex; align-items:center; gap:var(--sp-8); height:40px; padding:0 var(--sp-12); border:0; border-radius:var(--fg-r); background:var(--fg-frame);
  box-shadow:0 0 0 1px var(--fg-ligne); color:var(--fg-txt); font:inherit; font-size:var(--fs-sm); font-weight:var(--fw-medium); text-align:left; cursor:pointer; }
.fig-parcours-projet:hover{ box-shadow:0 0 0 1px var(--fg-bleu); }
.fig-parcours-fichiers .fig-node-prev{ background-size:cover; }
.fig .fig-fichiers-tete #fig-equipe-btn.on{ background:color-mix(in srgb, var(--fg-bleu) 16%, var(--fg-frame)); }

/* F8 : les composants de l'équipe. */
.fig-cmps{ display:flex; flex-direction:column; gap:var(--sp-8); }
.fig-cmp{ display:flex; gap:var(--sp-10); padding:var(--sp-8); border-radius:var(--fg-r); background:var(--fg-frame); box-shadow:0 0 0 1px var(--fg-ligne); }
.fig-cmp.dans{ box-shadow:0 0 0 1px var(--fg-bleu); }
.fig-cmp .fig-node-prev{ flex:none; width:96px; aspect-ratio:4/3; background-size:contain; }
.fig-cmp-corps{ flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-4); }
.fig-cmp-tete{ display:flex; align-items:center; gap:var(--sp-6); flex-wrap:wrap; font-size:var(--fs-sm); } .fig-cmp-tete b{ font-weight:var(--fw-medium); }
.fig-badge-on{ background:color-mix(in srgb, var(--fg-bleu) 16%, var(--fg-frame)); color:var(--fg-bleu-txt); }
.fig-cmp-desc{ margin:0; font-size:var(--fs-xs); color:var(--fg-txt2); }
.fig-cmp-relier{ display:flex; gap:var(--sp-6); flex-wrap:wrap; align-items:center; } .fig .fig-cmp-relier input{ flex:1; min-width:160px; font-family:var(--font-mono); font-size:var(--fs-2xs); }

/* F9 : la vue proposée depuis une frame. */
.fig-vue-blocs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-4); counter-reset:bloc; }
.fig-vue-bloc{ display:flex; align-items:center; gap:var(--sp-8); padding:var(--sp-6) var(--sp-8); border-radius:var(--fg-r); background:var(--fg-frame); font-size:var(--fs-xs); }
.fig-vue-bloc::before{ counter-increment:bloc; content:counter(bloc); width:18px; text-align:center; color:var(--fg-txt2); font-size:var(--fs-2xs); }
.fig-vue-bloc b{ font-weight:var(--fw-medium); white-space:nowrap; } .fig-vue-bloc>span:last-child{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg-txt2); }
.fig-vue-bloc .fig-badge{ font-family:var(--font-mono); }

/* « Annuler » dans le toast d'un retrait (le toast est hors de .fig : fond --txt, texte --bg). */
.toast .toast-annuler{ flex:none; margin-right:var(--sp-18); padding:var(--sp-2) var(--sp-8); border:0; border-radius:var(--radius-xs); background:color-mix(in srgb, var(--bg) 18%, transparent);
  color:var(--bg); font:inherit; font-size:var(--fs-xs); font-weight:var(--fw-strong); cursor:pointer; }
.toast .toast-annuler:hover{ background:color-mix(in srgb, var(--bg) 28%, transparent); }

/* ── 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-xs); font-weight:var(--fw-strong); color:var(--fg-txt); }
.fig-field>label small{ font-weight:var(--fw-regular); color:var(--fg-txt2); }
.fig-field input,.fig-field select{ width:100%; }
.fig-hint{ font-size:var(--fs-xs); color:var(--fg-txt2); line-height:1.55; }
.fig-hint a{ color:var(--fg-bleu-txt); }
.fig-profile{ display:flex; align-items:center; gap:var(--sp-10); }
.fig-avatar{ width:32px; height:32px; border-radius:50%; background:var(--fg-bleu) center/cover no-repeat; flex-shrink:0; }
.fig-profile b{ font-size:var(--fs-sm); font-weight:var(--fw-strong); } .fig-profile span{ display:block; font-size:var(--fs-xs); color:var(--fg-txt2); }

/* Le jeton expiré (2026-10-20) : l'avertissement de la section Connexion et la ligne de la carte du tableau de bord. */
.fig-expire{ margin:var(--sp-12) 0; padding:var(--sp-8) var(--sp-10); border-radius:var(--fg-r); background:color-mix(in srgb, var(--warn) 12%, transparent);
  color:var(--fg-txt); font-size:var(--fs-xs); line-height:1.5; }
.fig-expire a{ color:var(--fg-bleu-txt); }
.fig-expire-t{ color:var(--warn); font-size:var(--fs-xs); font-weight:var(--fw-medium); }

/* ── Barre d'outils d'une page (importer) ── */
.fig-toolbar{ display:flex; align-items:center; gap:var(--sp-8); flex-wrap:wrap; padding:var(--sp-8) var(--sp-10); }
.fig-toolbar .grow{ flex:1; min-width:140px; }
.fig-status{ font-size:var(--fs-xs); color:var(--fg-txt2); min-width:60px; }

/* ── Aperçus à importer ── */
.fig-nodes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:var(--sp-16); }
.fig-node{ padding:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-6); }
.fig-node-prev{ aspect-ratio:4/3; border-radius:var(--radius-none); background:var(--fg-canevas) center/contain no-repeat; }
.fig-node-name{ font-size:var(--fs-xs); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ── Pousser vers Figma (délégué au Pilote) ── */
.fig-bridge{ display:flex; align-items:center; gap:var(--sp-10); padding:var(--sp-10) var(--sp-14); }
.fig-bridge-ic{ font-size:var(--fs-md); color:var(--fg-bleu); }
.fig-bridge p{ flex:1; margin:0; font-size:var(--fs-xs); color:var(--fg-txt2); }

/* ── Aperçu Figma intégré ── */
.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-sm); font-weight:var(--fw-strong); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fig-embed{ width:100%; aspect-ratio:16/10; border:0; border-radius:var(--radius-none); background:var(--fg-canevas); display:block; }

/* ── Jetons ── */
.fig-badge{ display:inline-block; font-size:var(--fs-2xs); padding:var(--sp-2) var(--sp-6); border-radius:var(--fg-r); background:var(--fg-champ); color:var(--fg-txt2); }

}

/* La couche overrides de 37-studio-ui.css teinte d'accent la page choisie et les barres d'outils de TOUS les compléments
   (le chrome partagé du Studio) ; l'écran Figma garde ses couleurs de Figma : mêmes propriétés, sélecteurs plus précis,
   dans la même couche. */
@layer overrides{
  .fig .fig-nav-btn.on{ background:color-mix(in srgb, var(--fg-bleu) 16%, var(--fg-panneau)); color:var(--fg-txt); border-color:transparent; font-weight:var(--fw-medium); }
  .fig .fig-toolbar{ background:var(--fg-frame); border-radius:var(--radius-none); }
}