/*
 * OEI Widgets - feuille de style unique de TOUS les widgets interactifs OEI.
 *
 * Chargee par <link rel="stylesheet"> sur :
 *   - les pages de cours (celles qui chargent shared/components/base/ConceptPage.js) ;
 *   - slides/viewer.html, slides/editor.html, slides/student.html ;
 *   - inlinee dans les exports HTML autonomes (shared/slides/editor-export.js).
 *
 * Remplace les methodes ensureStyles() qui injectaient chacune un <style> dans
 * document.head au premier montage d'un widget (revue 2026-09 section 3.3, lot 3H).
 *
 * ===================================================================
 * CONVENTION DE NAMESPACE CSS  (obligatoire pour tout nouveau widget)
 * ===================================================================
 *  1. UN prefixe de classe court, unique, en kebab-case, derive du nom du
 *     widget (ex. .sw- -> SortingWidget, .msw- -> MergeSortWidget). Le prefixe
 *     figure dans la TABLE ci-dessous et reste stable dans le temps.
 *  2. TOUTES les regles d'un widget sont scopees par ce prefixe (ou par une
 *     classe racine dediee : .event-widget, .dom-widget, .boolean-*, .dnw ...).
 *     Jamais de selecteur d'element nu, jamais de classe generique
 *     (.btn, .card, .panel, .grid ...).
 *  3. Couleurs : utiliser les tokens du design-system (var(--primary),
 *     var(--card), var(--border), var(--tone-*) ...). Pour les widgets partages
 *     avec les slides, la chaine var(--sl-x, <fallback>) est conservee telle
 *     quelle. Pour les fonds/textes pastel de la famille git/ + systemes :
 *     tokens --widget-* (voir plus bas) sous la forme
 *     `var(--widget-x, <litteral d'origine>)` - le token n'est defini QUE dans
 *     les blocs sombres, donc le rendu CLAIR reste le litteral d'origine
 *     (pixel-identique) et seul le rendu SOMBRE est corrige.
 *  4. Theme sombre : ne rien ecrire de specifique au widget hors des blocs
 *     --widget-* ci-dessous - laisser les var() heritees porter la bascule.
 *  5. @keyframes : nom prefixe par le widget (aucune collision possible).
 *  6. INTERDIT : document.createElement('style') / ensureStyles() dans un
 *     composant. Garde-fou : tools/audit-no-ensure-styles.mjs (qa:content + CI).
 *     Les 2 blocs sombres --widget-* doivent rester synchronises :
 *     garde-fou tools/audit-theme-tokens.mjs.
 *
 * TABLE DES PREFIXES
 * -----------------------------------------------------------------------------
 *   sw-     SortingWidget + QuickSortWidget      msw-    MergeSortWidget
 *   crw-    CountingRadixWidget                  srw-    SearchWidget
 *   hpw-    HeapWidget                           bstw-   BSTWidget (arbre binaire)
 *   llw-    LinkedListWidget                     htw-    HashTableWidget
 *   stw-    StructureWidget (pile / file)
 *   dnw-    DnsWidget            cnw-   ConcurrencyWidget
 *   rsw-    RoutingSimulatorWidget
 *   cltw-   CLTWidget            ciw-   ConfidenceIntervalWidget
 *   bayw-   ConditionalBayesWidget
 *   sqlw-   SqlPlaygroundWidget
 *   mpw-    MemoryWidget         plw-   PipelineWidget
 *   ipw-    IpSubnetWidget       tcpw-  TcpWidget        schw-  SchedulingWidget
 *   dom-widget-         DomTreeWidget
 *   event-widget- / deleg- / flow- / flow3d- / loop- / restaurant- ...  EventWidgets
 *   boolean-gates- / boolean-expression- / boolean-kmap- /
 *   boolean-simplifier- / boole-eval-summary-      (logique booleenne)
 *   sl-embed-          SlidesEmbed
 *   oei-    PRIMITIVES PARTAGEES (bouton, champ, puce, onglets, statut) : a utiliser a la place
 *           de redefinir un bouton ou un champ par widget (voir fin de fichier)
 *   git/  gzw- gflw- gdw- gtw- gsc- gmcw- gcew- gflow- grbi- gbw- grv- gcsw-
 *         gssw- gfr- slt- cicd- gaw- wts- jdg- mbw- prlw- gitw- gkw- grw- bpw-
 *         codeow- dep-
 * -----------------------------------------------------------------------------
 *
 * NOTE DE MIGRATION : ce fichier est une EXTRACTION FIDELE des blocs
 * ensureStyles() existants (formatage d'origine conserve section par section).
 * Vague 2 : la famille git/ + Dns/Concurrency/Memory/Pipeline voit ses couleurs
 * pastel codees en dur remplacees par `var(--widget-x, <litteral>)` - rendu
 * clair inchange, rendu sombre corrige via les blocs ci-dessous.
 */

/* =====================================================================
   TOKENS --widget-*
   Derives des jetons Signature (shared/signature.css, shared/slides/signature-base.css) :
   ils suivent donc les trois themes (clair, sombre, contraste) sans bloc dedie.
   Aucune couleur en dur dans ce fichier : tout passe par var(--...) ou color-mix().
   ===================================================================== */
:root {
    --widget-success-bg: var(--ok-fond);
    --widget-success-border: color-mix(in srgb, var(--ok) 40%, var(--surface));
    --widget-success-fg: var(--ok);
    --widget-danger-bg: var(--critique-fond);
    --widget-danger-border: color-mix(in srgb, var(--critique) 40%, var(--surface));
    --widget-danger-fg: var(--critique);
    --widget-warn-bg: var(--attention-fond);
    --widget-warn-border: color-mix(in srgb, var(--attention) 40%, var(--surface));
    --widget-warn-fg: var(--attention);
    --widget-info-bg: var(--surface-sunken);
    --widget-info-border: var(--line-subtle);
    --widget-info-fg: var(--ink);
    --widget-surface: var(--surface-sunken);
    --widget-surface-2: var(--surface-wood);
    --widget-neutral-border: var(--line-subtle);
    --widget-fg-strong: var(--ink);
    --widget-fg-muted: var(--ink-muted);
    --widget-heading: var(--ink);
    --widget-hover: color-mix(in srgb, var(--ink) 6%, transparent);
}


/* =====================================================================
   ACCESSIBILITE - prefers-reduced-motion
   Seule exception tolérée au principe "pas de sélecteur d'élément nu"
   ci-dessus : garde-fou d'accessibilité global, même règle que
   shared/style.css (chargée par les pages de cours mais PAS par
   slides/*.html - les widgets montés dans les slides n'avaient donc
   aucune protection). Les `transitionend`/`animationend` continuent de
   se déclencher (durée quasi nulle), donc pas de simulation bloquée.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* =====================================================================
   PATRON .widget-fit - widget qui s'adapte a sa boite (slides canvas)
   Un widget place comme element `type:"widget"` sur une slide recoit une
   boite de taille FIXE (voir overflow:auto sur _canvasElement / .cel-inner).
   Ce patron isole les zones a taille fixe (controles toujours visibles) de
   la zone de contenu variable (seule a defiler si necessaire), plutot que
   de laisser le conteneur ecreter silencieusement le widget entier.
   Usage : envelopper la sortie de mount() avec .widget-fit, puis repartir
   les elements existants dans les 3 zones (header/footer optionnels,
   beaucoup de widgets n'auront qu'un header + un body) :
     <div class="widget-fit">
       <div class="widget-fit-header">...controles permanents...</div>
       <div class="widget-fit-body">...contenu variable...</div>
       <div class="widget-fit-footer">...actions permanentes...</div>
     </div>
   ===================================================================== */
.widget-fit { display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0; }
.widget-fit-header,
.widget-fit-footer { flex: 0 0 auto; }
.widget-fit-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }


/* #################################################################### */
/* #  VISUALISEURS - tri / recherche / structures                 # */
/* #################################################################### */

/* -------------------------------------------------------------------
   .sw-*  -  SortingWidget (bulle / insertion / selection) + QuickSortWidget
   source : SortingVisualizer.js  (+ 2 regles propres a QuickSortVisualizer.js)
   ------------------------------------------------------------------- */
.sw-container{display:flex;flex-direction:column;gap:10px;padding:16px;height:100%;box-sizing:border-box;font-family:var(--sl-font-body,sans-serif);color:var(--sl-text,var(--surface));}
.sw-header{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:600;color:var(--sl-muted,var(--production));}
.sw-array-zone{display:flex;align-items:flex-end;gap:4px;height:140px;padding-top:24px;padding-bottom:20px;position:relative;}
.sw-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;position:relative;}
.sw-bar-inner{width:100%;border-radius:4px 4px 0 0;background:var(--sl-primary,var(--accent));transition:height .25s,background .2s;border:1px solid color-mix(in srgb, var(--line) 20%, transparent);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent);}
.sw-bar.current .sw-bar-inner{background:var(--sl-accent,var(--consommation));}
.sw-bar.swapping .sw-bar-inner{background:var(--critique);}
.sw-bar.sorted .sw-bar-inner{background:var(--ok);}
.sw-bar.min-mark .sw-bar-inner{background:var(--stockage);}
.sw-bar.key-mark .sw-bar-inner{background:var(--attention);}
.sw-val{position:absolute;top:-18px;font-size:var(--text-2xs);color:var(--sl-text,var(--surface));white-space:nowrap;}
.sw-idx{position:absolute;bottom:-16px;font-size:var(--text-2xs);color:var(--sl-muted,var(--production));}
.sw-info-bar{font-size:var(--text-xs);color:var(--sl-text,var(--production));min-height:16px;line-height:1.4;display:flex;justify-content:space-between;gap:8px;}
.sw-action{flex:1;opacity:.9;}
.sw-metrics{color:var(--sl-muted,var(--production));white-space:nowrap;}
.sw-controls{display:flex;gap:8px;flex-wrap:wrap;}
.sw-btn{padding:5px 12px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-xs);font-weight:500;background:var(--sl-primary,var(--accent));color:var(--surface);transition:opacity .15s;}
.sw-btn:hover:not(:disabled){opacity:.8;}
.sw-btn:disabled{opacity:.35;cursor:not-allowed;}
.sw-btn-secondary{background:color-mix(in srgb, var(--surface) 8%, transparent);color:var(--sl-text,var(--surface));}
/* regles specifiques a QuickSortWidget (marque de pivot / borne de partition) */
.sw-bar.pivot-mark .sw-bar-inner{background:var(--attention);}
.sw-bar.bound-mark .sw-bar-inner{background:var(--accent);opacity:.5;}

/* -------------------------------------------------------------------
   .msw-*  -  MergeSortWidget
   source : MergeSortVisualizer.js
   ------------------------------------------------------------------- */
.msw-container{display:flex;flex-direction:column;gap:10px;padding:16px;height:100%;box-sizing:border-box;font-family:var(--sl-font-body,sans-serif);color:var(--sl-text,var(--surface));}
.msw-header{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:600;color:var(--sl-muted,var(--production));}
.msw-bars-zone{display:flex;align-items:flex-end;gap:4px;height:130px;padding-top:22px;position:relative;}
.msw-bar{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;flex:1;position:relative;}
.msw-bar-inner{width:100%;border-radius:4px 4px 0 0;background:var(--sl-primary,var(--accent));transition:height .25s,background .2s;border:1px solid color-mix(in srgb, var(--line) 20%, transparent);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent);}
.msw-bar.left .msw-bar-inner{background:var(--production);}
.msw-bar.right .msw-bar-inner{background:var(--stockage);}
.msw-bar.merged .msw-bar-inner{background:var(--ok);}
.msw-val{position:absolute;top:-16px;font-size:var(--text-2xs);color:var(--sl-text,var(--surface));white-space:nowrap;}
.msw-info-bar{font-size:var(--text-xs);color:var(--sl-text,var(--production));min-height:16px;line-height:1.4;}
.msw-controls{display:flex;gap:8px;flex-wrap:wrap;}
.msw-btn{padding:5px 12px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-xs);font-weight:500;background:var(--sl-primary,var(--accent));color:var(--surface);transition:opacity .15s;}
.msw-btn:hover:not(:disabled){opacity:.8;}
.msw-btn-secondary{background:color-mix(in srgb, var(--surface) 8%, transparent);color:var(--sl-text,var(--surface));}

/* -------------------------------------------------------------------
   .crw-*  -  CountingRadixWidget
   source : CountingRadixVisualizer.js
   ------------------------------------------------------------------- */
.crw-container{display:flex;flex-direction:column;gap:8px;padding:16px;height:100%;box-sizing:border-box;font-family:var(--sl-font-body,sans-serif);color:var(--sl-text,var(--surface));}
.crw-header{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:600;color:var(--sl-muted,var(--production));}
.crw-section{display:flex;flex-direction:column;gap:3px;}
.crw-label{font-size:var(--text-2xs);color:var(--sl-muted,var(--production));font-weight:600;text-transform:uppercase;letter-spacing:.05em;}
.crw-cells{display:flex;gap:4px;flex-wrap:wrap;}
.crw-cell{display:flex;flex-direction:column;align-items:center;gap:2px;}
.crw-cell-val{min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);font-size:var(--text-xs);font-weight:600;background:var(--sl-primary,var(--accent));color:var(--surface);transition:background .2s;border:1px solid color-mix(in srgb, var(--line) 20%, transparent);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent);}
.crw-cell-val.active{background:var(--sl-accent,var(--consommation));}
.crw-cell-val.output{background:var(--ok);}
.crw-cell-val.empty{background:var(--surface,color-mix(in srgb, var(--ink) 12%, transparent));color:var(--sl-muted,var(--production));border-color:var(--border,var(--sl-border,color-mix(in srgb, var(--line-subtle) 12%, transparent)));box-shadow:none;}
.crw-cell-idx{font-size:var(--text-2xs);color:var(--sl-muted,var(--production));}
.crw-info-bar{font-size:var(--text-xs);color:var(--sl-text,var(--production));min-height:16px;line-height:1.4;}
.crw-controls{display:flex;gap:8px;flex-wrap:wrap;}
.crw-btn{padding:5px 12px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-xs);font-weight:500;background:var(--sl-primary,var(--accent));color:var(--surface);transition:opacity .15s;}
.crw-btn:hover:not(:disabled){opacity:.8;}
.crw-btn-secondary{background:color-mix(in srgb, var(--surface) 8%, transparent);color:var(--sl-text,var(--surface));}

/* -------------------------------------------------------------------
   .srw-*  -  SearchWidget
   source : SearchVisualizer.js
   ------------------------------------------------------------------- */
.srw-container{display:flex;flex-direction:column;gap:10px;padding:16px;height:100%;box-sizing:border-box;font-family:var(--sl-font-body,sans-serif);color:var(--sl-text,var(--surface));}
.srw-header{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:600;color:var(--sl-muted,var(--production));}
.srw-input-row{display:flex;gap:8px;align-items:center;font-size:.78rem;}
.srw-input-row label{color:var(--sl-muted,var(--production));}
.srw-input-row input{width:70px;padding:4px 8px;border-radius:var(--radius-md);border:1px solid var(--border,var(--sl-border,var(--production)));background:var(--surface,color-mix(in srgb, var(--ink) 18%, transparent));color:var(--text,var(--sl-text,var(--surface)));font-size:.78rem;}
.srw-array-zone{display:flex;gap:4px;align-items:stretch;flex-wrap:wrap;min-height:60px;}
.srw-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:40px;flex:1;border-radius:var(--radius-lg);background:var(--surface,color-mix(in srgb, var(--ink) 14%, transparent));border:2px solid var(--border,var(--sl-border,color-mix(in srgb, var(--line-subtle) 15%, transparent)));position:relative;padding:8px 4px;transition:border-color .2s,background .2s;}
.srw-cell .srw-val{font-size:.9rem;font-weight:600;}
.srw-cell .srw-cell-idx{font-size:var(--text-2xs);color:var(--sl-muted,var(--production));margin-top:2px;}
.srw-cell.current{border-color:var(--sl-accent,var(--consommation));background:color-mix(in srgb, var(--consommation) 12%, transparent);}
.srw-cell.found{border-color:var(--ok);background:color-mix(in srgb, var(--ok) 15%, transparent);}
.srw-cell.checked{border-color:var(--sl-border,var(--production));opacity:.45;}
.srw-cell.eliminated{opacity:.3;text-decoration:line-through;}
.srw-cell.low-mark,.srw-cell.high-mark{border-color:var(--accent);}
.srw-cell.mid-mark{border-color:var(--stockage);background:color-mix(in srgb, var(--stockage) 15%, transparent);}
.srw-pointer-row{display:flex;gap:4px;align-items:flex-start;min-height:16px;margin-top:2px;}
.srw-pointer{font-size:var(--text-2xs);padding:1px 4px;border-radius:var(--radius-sm);background:var(--sl-primary,var(--accent));color:var(--surface);white-space:nowrap;}
.srw-pointer.p-low{background:var(--accent);}
.srw-pointer.p-high{background:var(--accent);}
.srw-pointer.p-mid{background:var(--stockage);}
.srw-pointer.p-cur{background:var(--sl-accent,var(--consommation));}
.srw-info-bar{font-size:var(--text-xs);color:var(--sl-text,var(--production));min-height:16px;line-height:1.4;display:flex;justify-content:space-between;gap:8px;}
.srw-action{flex:1;opacity:.9;}
.srw-metrics{color:var(--sl-muted,var(--production));white-space:nowrap;}
.srw-controls{display:flex;gap:8px;flex-wrap:wrap;}
.srw-btn{padding:5px 12px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-xs);font-weight:500;background:var(--sl-primary,var(--accent));color:var(--surface);transition:opacity .15s;}
.srw-btn:hover:not(:disabled){opacity:.8;}
.srw-btn:disabled{opacity:.35;cursor:not-allowed;}
.srw-btn-secondary{background:color-mix(in srgb, var(--surface) 8%, transparent);color:var(--sl-text,var(--surface));}

/* -------------------------------------------------------------------
   .hpw-*  -  HeapWidget
   source : HeapVisualizer.js
   ------------------------------------------------------------------- */
.hpw-container{display:flex;flex-direction:column;gap:10px;padding:16px;height:100%;box-sizing:border-box;font-family:var(--sl-font-body,sans-serif);color:var(--sl-text,var(--surface));}
.hpw-header{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:600;color:var(--sl-muted,var(--production));}
.hpw-array{display:flex;gap:3px;flex-wrap:wrap;}
.hpw-cell{min-width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-md);font-size:.75rem;font-weight:600;background:var(--sl-primary,var(--accent));color:var(--surface);transition:background .2s;border:1px solid color-mix(in srgb, var(--line) 20%, transparent);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 18%, transparent);}
.hpw-cell.root{background:var(--sl-accent,var(--consommation));}
.hpw-tree{height:120px;}
.hpw-tree svg{width:100%;height:100%;display:block;}
.hpw-controls{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.hpw-input{background:color-mix(in srgb, var(--surface) 8%, transparent);border:1px solid color-mix(in srgb, var(--line-subtle) 15%, transparent);border-radius:var(--radius-lg);padding:4px 8px;font-size:.75rem;color:var(--sl-text,var(--surface));width:58px;}
.hpw-btn{padding:4px 10px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-xs);font-weight:500;background:var(--sl-primary,var(--accent));color:var(--surface);transition:opacity .15s;}
.hpw-btn:hover:not(:disabled){opacity:.8;}
.hpw-btn-secondary{background:color-mix(in srgb, var(--surface) 8%, transparent);color:var(--sl-text,var(--surface));}
.hpw-info-bar{font-size:var(--text-xs);color:var(--sl-text,var(--production));min-height:16px;line-height:1.4;}

/* -------------------------------------------------------------------
   .bstw-*  -  BSTWidget (arbre binaire de recherche)
   source : BinaryTreeVisualizer.js
   ------------------------------------------------------------------- */
.bstw-root{font-family:var(--font,system-ui);padding:.65rem;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden;}
.bstw-controls{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.45rem;align-items:center;flex-shrink:0;}
.bstw-input{padding:.28rem .5rem;border:1px solid var(--border,var(--line-subtle));border-radius:var(--radius-lg);font-size:.82rem;width:100px;background:var(--bg,var(--surface));color:var(--text,var(--ink));}
.bstw-btn{padding:.28rem .65rem;border:1px solid var(--border,var(--line-subtle));border-radius:var(--radius-lg);cursor:pointer;font-size:.78rem;font-weight:500;background:var(--card,var(--surface));color:var(--text,var(--ink));transition:opacity .15s;}
.bstw-btn:hover{opacity:.8;}
.bstw-btn-primary{background:var(--primary,var(--accent));border-color:var(--primary,var(--accent));color:var(--surface);}
.bstw-trav-row{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:.4rem;align-items:center;flex-shrink:0;}
.bstw-trav-label{font-size:.78rem;color:var(--muted,var(--ink-muted));}
.bstw-svg-wrap{flex:1;min-height:0;overflow:auto;border:1px solid var(--border,var(--line-subtle));border-radius:var(--radius-lg);background:var(--bg,var(--surface));margin-bottom:.35rem;}
.bstw-svg{width:100%;display:block;}
.bstw-feedback{min-height:1.3rem;font-size:.8rem;padding:.15rem 0;color:var(--muted,var(--ink-muted));}
.bstw-feedback.success{color:var(--ok);}
.bstw-feedback.error{color:var(--critique);}
.bstw-feedback.info{color:var(--cote);}
.bstw-traversal{font-size:.78rem;color:var(--muted,var(--ink-muted));min-height:1.1rem;margin-bottom:.3rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bstw-info{display:flex;flex-wrap:wrap;gap:.35rem;font-size:.78rem;color:var(--muted,var(--ink-muted));}
.bstw-info-chip{background:var(--card,var(--surface));border:1px solid var(--border,var(--line-subtle));border-radius:var(--radius-md);padding:.1rem .4rem;}
.bstw-svg .bst-edge{stroke:var(--border,color-mix(in srgb, var(--production) 45%, var(--surface)));stroke-width:1.5;fill:none;}
.bstw-svg .bst-edge.visited{stroke:var(--ok);}
.bstw-svg .bst-edge.found{stroke:var(--accent);}
.bstw-svg .bst-node{fill:var(--bg,var(--surface));stroke:var(--accent);stroke-width:2;}
.bstw-svg .bst-node.visited{fill:var(--ok);stroke:var(--ok);}
.bstw-svg .bst-node.found{fill:var(--accent);stroke:var(--accent);}
.bstw-svg .bst-label{text-anchor:middle;dominant-baseline:central;font-size:var(--text-xs);font-weight:600;fill:var(--text,var(--ink));font-family:var(--font,system-ui);}
.bstw-svg .bst-label.visited,.bstw-svg .bst-label.found{fill:var(--surface);}

/* -------------------------------------------------------------------
   .llw-*  -  LinkedListWidget
   source : LinkedListVisualizer.js
   ------------------------------------------------------------------- */
.llw-container{display:flex;flex-direction:column;gap:10px;padding:16px;height:100%;box-sizing:border-box;font-family:var(--sl-font-body,sans-serif);color:var(--sl-text,var(--surface));}
.llw-header{font-size:.8rem;font-weight:600;color:var(--sl-muted,var(--production));}
.llw-list-zone{display:flex;align-items:center;flex-wrap:wrap;min-height:50px;padding:8px 0;row-gap:8px;}
.llw-node{display:flex;align-items:center;}
.llw-box{min-width:36px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg);font-size:.8rem;font-weight:600;background:var(--sl-primary,var(--accent));color:var(--surface);border:2px solid color-mix(in srgb, var(--line) 22%, transparent);transition:background .2s,border-color .2s;padding:0 6px;box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 20%, transparent);}
.llw-box.head-mark{border-color:var(--sl-accent,var(--consommation));}
.llw-box.active{background:var(--sl-accent,var(--consommation));}
.llw-box.found{background:var(--ok);}
.llw-arrow{color:var(--sl-muted,var(--production));font-size:1rem;padding:0 3px;}
.llw-null{font-size:var(--text-xs);color:var(--sl-muted,var(--production));font-style:italic;padding-left:4px;}
.llw-badge{font-size:var(--text-2xs);background:var(--sl-accent,var(--consommation));color:var(--surface);border-radius:var(--radius-sm);padding:1px 3px;margin-left:2px;}
.llw-controls{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.llw-input{background:var(--surface,color-mix(in srgb, var(--ink) 18%, transparent));border:1px solid var(--border,var(--sl-border,var(--production)));border-radius:var(--radius-lg);padding:4px 8px;font-size:.75rem;color:var(--text,var(--sl-text,var(--surface)));width:58px;}
.llw-btn{padding:4px 10px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-xs);font-weight:500;background:var(--sl-primary,var(--accent));color:var(--surface);transition:opacity .15s;}
.llw-btn:hover:not(:disabled){opacity:.8;}
.llw-btn-secondary{background:color-mix(in srgb, var(--surface) 8%, transparent);color:var(--sl-text,var(--surface));}
.llw-info-bar{font-size:var(--text-xs);color:var(--sl-text,var(--production));min-height:16px;line-height:1.4;}

/* -------------------------------------------------------------------
   .htw-*  -  HashTableWidget
   source : HashTableVisualizer.js
   ------------------------------------------------------------------- */
.htw-container{display:flex;flex-direction:column;gap:10px;padding:16px;height:100%;box-sizing:border-box;font-family:var(--sl-font-body,sans-serif);color:var(--sl-text,var(--surface));}
.htw-header{font-size:.8rem;font-weight:600;color:var(--sl-muted,var(--production));}
.htw-table{display:flex;flex-direction:column;gap:4px;flex:1;overflow-y:auto;}
.htw-row{display:flex;align-items:center;gap:5px;}
.htw-row-idx{min-width:22px;font-size:var(--text-2xs);color:var(--sl-muted,var(--production));text-align:right;font-weight:600;}
.htw-cell{min-width:32px;height:24px;border-radius:var(--radius-md);background:color-mix(in srgb, var(--surface) 6%, transparent);border:1px solid color-mix(in srgb, var(--line-subtle) 10%, transparent);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:600;transition:background .2s;}
.htw-cell.filled{background:var(--sl-primary,var(--accent));border-color:var(--sl-primary,var(--accent));color:var(--surface);}
.htw-cell.active{background:var(--sl-accent,var(--consommation));border-color:var(--sl-accent,var(--consommation));color:var(--surface);}
.htw-cell.found{background:var(--ok);border-color:var(--ok);color:var(--surface);}
.htw-cell.collision{background:var(--stockage);border-color:var(--stockage);color:var(--surface);}
.htw-chain-arr{font-size:var(--text-2xs);color:var(--sl-muted,var(--production));}
.htw-controls{display:flex;gap:6px;flex-wrap:wrap;align-items:center;}
.htw-input{background:var(--surface,color-mix(in srgb, var(--ink) 18%, transparent));border:1px solid var(--border,var(--sl-border,var(--production)));border-radius:var(--radius-lg);padding:4px 8px;font-size:.75rem;color:var(--text,var(--sl-text,var(--surface)));width:64px;}
.htw-btn{padding:4px 10px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-xs);font-weight:500;background:var(--sl-primary,var(--accent));color:var(--surface);transition:opacity .15s;}
.htw-btn:hover:not(:disabled){opacity:.8;}
.htw-btn-secondary{background:color-mix(in srgb, var(--surface) 8%, transparent);color:var(--sl-text,var(--surface));}
.htw-info-bar{font-size:var(--text-xs);color:var(--sl-text,var(--production));min-height:16px;line-height:1.4;}

/* -------------------------------------------------------------------
   .stw-*  -  StructureWidget (pile LIFO / file FIFO)
   source : StructureVisualizer.js
   ------------------------------------------------------------------- */
.stw-container{display:flex;flex-direction:column;gap:10px;padding:16px;height:100%;box-sizing:border-box;font-family:var(--sl-font-body,sans-serif);color:var(--sl-text,var(--surface));}
.stw-header{font-size:.8rem;font-weight:600;color:var(--sl-muted,var(--production));display:flex;justify-content:space-between;align-items:center;}
.stw-input-row{display:flex;gap:8px;align-items:center;}
.stw-input-row input{flex:1;padding:5px 10px;border-radius:var(--radius-md);border:1px solid var(--border,var(--sl-border,var(--production)));background:var(--surface,color-mix(in srgb, var(--ink) 18%, transparent));color:var(--text,var(--sl-text,var(--surface)));font-size:.8rem;}
.stw-btn{padding:5px 12px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:.75rem;font-weight:500;background:var(--sl-primary,var(--accent));color:var(--surface);transition:opacity .15s;white-space:nowrap;}
.stw-btn:hover:not(:disabled){opacity:.8;}
.stw-btn:disabled{opacity:.35;cursor:not-allowed;}
.stw-btn-danger{background:var(--critique);}
.stw-btn-secondary{background:color-mix(in srgb, var(--surface) 8%, transparent);color:var(--sl-text,var(--surface));}
.stw-viz{flex:1;display:flex;min-height:0;gap:12px;align-items:flex-end;justify-content:center;}
.stw-stack-zone{display:flex;flex-direction:column-reverse;gap:4px;align-items:center;min-width:120px;max-width:200px;padding:8px;border:1px dashed var(--sl-border,var(--production));border-radius:var(--radius-lg);min-height:80px;justify-content:flex-start;}
.stw-queue-zone{display:flex;flex-direction:row;gap:4px;align-items:center;flex-wrap:wrap;padding:8px;border:1px dashed var(--sl-border,var(--production));border-radius:var(--radius-lg);min-height:60px;align-content:flex-start;}
.stw-item{padding:6px 16px;border-radius:var(--radius-lg);background:var(--sl-primary,var(--accent));color:var(--surface);font-size:.85rem;font-weight:600;transition: all var(--dur-base) var(--ease-standard);text-align:center;white-space:nowrap;border:1px solid color-mix(in srgb, var(--line) 22%, transparent);box-shadow:inset 0 1px 0 color-mix(in srgb, var(--ink) 20%, transparent);}
.stw-item.new-item{background:var(--sl-accent,var(--consommation));animation:stw-pop .3s ease-out;}
.stw-item.top-item{outline:2px solid var(--sl-accent,var(--consommation));}
.stw-slot{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px;padding:4px 8px;}
.stw-slot-empty{background:transparent;color:var(--sl-muted,var(--ink-muted));border:1px dashed var(--sl-border,var(--production));box-shadow:none;}
.stw-slot-index{font-size:var(--text-2xs);font-weight:400;opacity:.8;}
.stw-slot-ptr{font-size:var(--text-2xs);font-weight:700;color:var(--sl-accent,var(--consommation));}
.stw-arrow{font-size:.8rem;color:var(--sl-muted,var(--production));}
@keyframes stw-pop{0%{transform:scale(1.25);opacity:.5;}100%{transform:scale(1);opacity:1;}}
.stw-info{font-size:var(--text-xs);color:var(--sl-text,var(--production));min-height:16px;display:flex;justify-content:space-between;}
.stw-empty-hint{font-size:var(--text-xs);color:var(--sl-muted,var(--ink-muted));text-align:center;padding:12px 0;}
.stw-labels{display:flex;flex-direction:row;justify-content:space-between;font-size:var(--text-2xs);color:var(--sl-muted,var(--production));padding:0 4px;}


/* #################################################################### */
/* #  CONCEPTS - logique booleenne                                # */
/* #################################################################### */

/* -------------------------------------------------------------------
   .boolean-gates-*  -  BooleanGatesWidget
   source : concepts/BooleanGatesWidget.js
   ------------------------------------------------------------------- */
            /* Variables locales : se raccordent aux vars slides (--sl-*) quand les vars page
               (--card, --bg, etc.) ne sont pas définies (viewer.html ne charge pas style.css) */
            .boolean-gates-widget {
                display: grid;
                gap: 0.8rem;
                --_bg:       var(--bg,               var(--sl-slide-bg,  var(--bg)));
                --_card:     var(--card,    color-mix(in srgb, var(--sl-slide-bg, var(--surface)) 82%, var(--surface)));
                --_bd:       var(--border,            color-mix(in srgb, var(--ink-muted) 22%, transparent));
                --_primary:  var(--primary,            var(--sl-primary,   var(--accent)));
                --_muted:    var(--muted,              var(--sl-muted,     var(--ink-muted)));
                --_text:     var(--text,               var(--sl-text,      var(--ink)));
                --_accent:   var(--ok,             var(--sl-accent,    var(--ok)));
                --_danger:   var(--danger,             var(--critique));
                --_mono:     var(--font-mono,          var(--sl-font-mono, ui-monospace, monospace));
                --_r:        var(--radius-sm,          8px);
                --_indigo-bg: var(--tone-indigo-bg,    color-mix(in srgb, var(--accent) 12%, transparent));
                --_indigo-bd: var(--tone-indigo-border,color-mix(in srgb, var(--accent) 35%, transparent));
                --_indigo-tx: var(--tone-indigo-text,  var(--sl-primary,   var(--accent)));
                --_ok-bg:    var(--tone-success-bg,    color-mix(in srgb, var(--ok) 15%, transparent));
                --_ok-tx:    var(--tone-success-text,  var(--ok));
                --_no-tx:    var(--tone-danger-text,   var(--critique));
            }
            .boolean-gates-intro {
                border: 1px solid var(--_indigo-bd);
                background: var(--_indigo-bg);
                color: var(--_indigo-tx);
                border-radius: var(--_r);
                padding: 0.55rem 0.65rem;
                font-size: 0.84rem;
                line-height: 1.45;
            }
            .boolean-gates-grid {
                display: grid;
                grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 0.7rem;
                padding: 2px;
            }
            .boolean-gate-card {
                position: relative;
                perspective: 1200px;
                cursor: pointer;
            }
            .boolean-gate-card:focus-visible {
                outline: 2px solid var(--_primary);
                outline-offset: 2px;
            }
            .boolean-gate-card-inner {
                display: grid;
                grid-template-columns: 1fr;
                grid-template-rows: 1fr;
                transform-style: preserve-3d;
                transition: transform 280ms ease;
            }
            .boolean-gate-card[data-flipped="1"] .boolean-gate-card-inner {
                transform: rotateY(180deg);
            }
            .boolean-gate-face {
                grid-area: 1 / 1;
                border: 1px solid var(--_bd);
                border-radius: var(--_r);
                padding: 0.65rem;
                background: var(--_card);
                display: flex;
                flex-direction: column;
                gap: 0.45rem;
                min-height: 240px;
                box-sizing: border-box;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
            }
            .boolean-gate-face-back {
                grid-area: 1 / 1;
                transform: rotateY(180deg);
                background: var(--_bg);
            }
            .boolean-gate-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; overflow: hidden; }
            .boolean-gate-name { margin: 0; font-size: 0.92rem; color: var(--_primary); }
            .boolean-gate-label { margin: 0; font-size: 0.76rem; color: var(--_muted); white-space: nowrap; }
            .boolean-gate-card-hint {
                margin: 0;
                font-size: var(--text-xs);
                color: var(--_muted);
            }
            .boolean-gate-symbol {
                margin: 0;
                font-family: var(--_mono);
                font-size: 0.76rem;
                color: var(--_muted);
            }
            .boolean-gate-visual {
                display: grid;
                grid-template-columns: auto minmax(0, 1fr) auto;
                align-items: center;
                gap: 0.4rem;
                min-height: 80px;
            }
            .boolean-gate-inputs {
                display: grid;
                gap: 0.38rem;
            }
            .boolean-gate-input-row {
                display: flex;
                align-items: center;
                justify-content: flex-end;
                gap: 0.3rem;
            }
            .boolean-gate-input-row label {
                font-size: var(--text-xs);
                color: var(--_muted);
                font-weight: 600;
                width: 14px;
                text-align: center;
            }
            .boolean-toggle {
                width: 26px;
                height: 26px;
                flex-shrink: 0;
                border-radius: 999px;
                border: 1px solid var(--_bd);
                background: var(--_bg);
                color: var(--_text);
                font-weight: 700;
                font-family: var(--_mono);
                cursor: pointer;
            }
            .boolean-toggle:focus-visible {
                outline: 2px solid var(--_primary);
                outline-offset: 2px;
            }
            .boolean-toggle[data-value="1"] {
                background: var(--_primary);
                border-color: var(--_primary);
                color: var(--surface);
            }
            .boolean-gate-svg-wrap {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 80px;
                overflow: hidden;
            }
            .boolean-gate-svg-panel {
                border: 1px solid var(--_bd);
                border-radius: var(--radius-lg);
                background: var(--_bg);
                padding: 0.2rem 0.3rem;
                display: grid;
                justify-items: center;
                gap: 0.12rem;
                transition: border-color 120ms ease, box-shadow 120ms ease;
            }
            .boolean-gate-svg-panel.signal-0 {
                border-color: var(--_danger);
            }
            .boolean-gate-svg-panel.signal-1 {
                border-color: var(--_accent);
            }
            .boolean-gate-svg-panel.signal-pulse {
                animation: booleanSignalPulse 280ms ease;
            }
            .boolean-gate-svg-label {
                font-size: var(--text-2xs);
                color: var(--_muted);
                text-transform: uppercase;
                letter-spacing: 0.04em;
            }
            .boolean-gate-svg {
                width: 100px;
                height: 60px;
                display: block;
                color: var(--_text);
            }
            .boolean-gate-svg path,
            .boolean-gate-svg line,
            .boolean-gate-svg circle,
            .boolean-gate-svg rect {
                stroke: currentColor;
                stroke-width: 2.2;
                vector-effect: non-scaling-stroke;
                fill: none;
            }
            .boolean-gate-svg .gate-bubble {
                fill: var(--_bg);
            }
            .boolean-output-wrap {
                display: grid;
                justify-items: center;
                gap: 0.18rem;
            }
            .boolean-output-row {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.5rem;
            }
            .boolean-output-label { font-size: var(--text-xs); color: var(--_muted); }
            .boolean-output-value {
                min-width: 28px;
                text-align: center;
                border-radius: 999px;
                border: 1px solid var(--_bd);
                padding: 0.12rem 0.45rem;
                font-family: var(--_mono);
                font-weight: 700;
                color: var(--_text);
                background: var(--_bg);
            }
            .boolean-output-value[data-value="1"] {
                background: var(--_accent);
                color: var(--surface);
                border-color: var(--_accent);
            }
            .boolean-gate-formula {
                font-family: var(--_mono);
                font-size: var(--text-xs);
                color: var(--_text);
                border: 1px solid var(--_bd);
                border-radius: 999px;
                padding: 0.18rem 0.45rem;
                background: var(--_bg);
                justify-self: start;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
                max-width: 100%;
            }
            .boolean-gate-table-meta {
                margin: 0;
                font-size: 0.76rem;
                color: var(--_text);
                font-weight: 600;
            }
            .boolean-gate-back-table {
                overflow: auto;
                border: 1px solid var(--_bd);
                border-radius: var(--radius-lg);
                background: var(--_bg);
                max-height: 160px;
            }
            .boolean-truth-hint {
                margin: 0 0 0.5rem;
                font-size: 0.76rem;
                color: var(--_muted);
            }
            .boolean-truth-table { width: 100%; border-collapse: collapse; font-family: var(--_mono); font-size: 0.8rem; }
            .boolean-truth-table th,
            .boolean-truth-table td {
                border: 1px solid var(--_bd);
                padding: 0.3rem 0.4rem;
                text-align: center;
            }
            .boolean-truth-table th { background: var(--_bg); color: var(--_text); }
            .boolean-truth-row-current td { background: var(--_indigo-bg); }
            .boolean-result-one { color: var(--_ok-tx); font-weight: 700; }
            .boolean-result-zero { color: var(--_no-tx); font-weight: 700; }
            @keyframes booleanSignalPulse {
                0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ink) 35%, transparent); }
                100% { box-shadow: 0 0 0 11px color-mix(in srgb, var(--ink) 0%, transparent); }
            }
            @media (max-width: 900px) {
                .boolean-gates-grid {
                    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
                }
            }
            @media (max-width: 640px) {
                .boolean-gate-visual {
                    grid-template-columns: 1fr;
                    justify-items: center;
                    gap: 0.38rem;
                }
                .boolean-gate-inputs {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                    flex-wrap: wrap;
                    gap: 0.5rem;
                }
                .boolean-gate-input-row {
                    justify-content: center;
                }
                .boolean-output-wrap {
                    width: 100%;
                }
            }

/* -------------------------------------------------------------------
   .boolean-expression-*  -  BooleanExpressionPlaygroundWidget
   source : concepts/BooleanGatesWidget.js
   ------------------------------------------------------------------- */
            .boolean-expression-widget { display: grid; gap: 0.75rem; }
            .boolean-expression-input-row {
                display: flex;
                flex-wrap: wrap;
                gap: 0.55rem;
                align-items: center;
            }
            .boolean-expression-input-row .input { flex: 1; min-width: 260px; }
            .boolean-expression-input-row .btn { min-width: 116px; }
            .boolean-expression-legend { color: var(--muted); font-size: 0.82rem; margin: 0; }
            .boolean-expression-note {
                color: var(--tone-indigo-text);
                background: var(--tone-indigo-bg);
                border: 1px solid var(--tone-indigo-border);
                border-radius: var(--radius-sm);
                font-size: 0.8rem;
                padding: 0.4rem 0.5rem;
                margin: 0;
            }
            .boolean-expression-vars {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            .boolean-expression-var {
                display: inline-flex;
                align-items: center;
                gap: 0.35rem;
                border: 1px solid var(--border);
                border-radius: 999px;
                padding: 0.2rem 0.5rem;
                background: var(--card);
            }
            .boolean-expression-var label { font-size: 0.78rem; color: var(--muted); }
            .boolean-expression-var button {
                width: 26px;
                height: 26px;
                border-radius: 999px;
                border: 1px solid var(--border);
                font-family: var(--font-mono);
                font-weight: 700;
                background: var(--card);
                color: var(--text);
                cursor: pointer;
            }
            .boolean-expression-var button:focus-visible {
                outline: 2px solid var(--primary);
                outline-offset: 2px;
            }
            .boolean-expression-var button[data-value="1"] {
                background: var(--primary);
                border-color: var(--primary);
                color: var(--surface);
            }
            .boolean-expression-result {
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                padding: 0.55rem 0.65rem;
                background: var(--bg);
                display: grid;
                gap: 0.35rem;
            }
            .boolean-expression-result-line {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.6rem;
                flex-wrap: wrap;
            }
            .boolean-expression-badge {
                display: inline-block;
                min-width: 34px;
                text-align: center;
                border-radius: 999px;
                border: 1px solid var(--border);
                padding: 0.15rem 0.55rem;
                font-family: var(--font-mono);
                font-weight: 700;
                color: var(--muted);
                background: var(--card);
            }
            .boolean-expression-badge[data-value="1"] {
                color: var(--tone-success-text);
                border-color: var(--ok);
                background: var(--tone-success-bg);
            }
            .boolean-expression-error {
                color: var(--tone-danger-text);
                background: var(--tone-danger-bg);
                border: 1px solid var(--danger);
                border-radius: var(--radius-sm);
                padding: 0.45rem 0.55rem;
                font-size: 0.82rem;
            }
            .boolean-expression-table-wrap { overflow-x: auto; }
            .boolean-expression-table {
                width: 100%;
                border-collapse: collapse;
                font-family: var(--font-mono);
                font-size: 0.8rem;
            }
            .boolean-expression-table th,
            .boolean-expression-table td {
                border: 1px solid var(--border);
                padding: 0.34rem 0.45rem;
                text-align: center;
            }
            .boolean-expression-table th { background: var(--bg); }
            .boolean-expression-table tr.current td { background: var(--tone-indigo-bg); }
            @media (max-width: 640px) {
                .boolean-expression-input-row {
                    display: grid;
                    grid-template-columns: 1fr;
                }
                .boolean-expression-input-row .input {
                    min-width: 100%;
                }
                .boolean-expression-input-row .btn {
                    width: 100%;
                }
                .boolean-expression-result-line {
                    grid-template-columns: 1fr;
                }
            }

/* -------------------------------------------------------------------
   .boolean-kmap-*  -  BooleanKarnaughWidget
   source : concepts/BooleanKarnaughWidget.js
   ------------------------------------------------------------------- */
            .boolean-kmap-widget { display: grid; gap: 0.85rem; }
            .boolean-kmap-widget.widget-fit { display: flex; height: 100%; box-sizing: border-box; }
            .boolean-kmap-controls {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
                align-items: center;
            }
            .boolean-kmap-controls .input,
            .boolean-kmap-controls select { max-width: 360px; }
            .boolean-kmap-hint {
                margin: 0;
                color: var(--tone-indigo-text);
                font-size: 0.82rem;
                line-height: 1.45;
                background: var(--tone-indigo-bg);
                border: 1px solid var(--tone-indigo-border);
                border-radius: var(--radius-sm);
                padding: 0.45rem 0.55rem;
            }
            .boolean-kmap-help {
                border: 1px dashed var(--border);
                border-radius: var(--radius-lg);
                background: var(--bg);
                padding: 0.5rem 0.55rem;
                display: grid;
                gap: 0.35rem;
            }
            .boolean-kmap-help-text {
                margin: 0;
                font-size: 0.78rem;
                color: var(--muted);
                line-height: 1.4;
            }
            .boolean-kmap-status {
                border-radius: var(--radius-lg);
                border: 1px solid var(--border);
                background: var(--bg);
                color: var(--text);
                padding: 0.45rem 0.55rem;
                font-size: 0.8rem;
            }
            .boolean-kmap-status.ok {
                border-color: var(--ok);
                background: var(--tone-success-bg);
                color: var(--tone-success-text);
            }
            .boolean-kmap-status.error {
                border-color: var(--danger);
                background: var(--tone-danger-bg);
                color: var(--tone-danger-text);
            }
            .boolean-kmap-grid-wrap { overflow-x: auto; }
            .boolean-kmap-table {
                border-collapse: collapse;
                font-family: var(--font-mono);
                min-width: 420px;
            }
            .boolean-kmap-table th,
            .boolean-kmap-table td {
                border: 1px solid var(--border);
                text-align: center;
                padding: 0.38rem 0.46rem;
                font-size: 0.78rem;
            }
            .boolean-kmap-table th {
                background: var(--bg);
                color: var(--text);
                font-weight: 700;
            }
            .boolean-kmap-cell {
                min-width: 38px;
                min-height: 32px;
                cursor: pointer;
                font-weight: 700;
                transition: background 120ms ease, border-color 120ms ease;
                user-select: none;
            }
            .boolean-kmap-cell:focus-visible {
                outline: 2px solid var(--primary);
                outline-offset: -2px;
            }
            .boolean-kmap-cell.v0 { background: var(--card); color: var(--text); }
            .boolean-kmap-cell.v1 { background: var(--tone-success-bg); color: var(--tone-success-text); }
            .boolean-kmap-cell.vx { background: var(--tone-warning-bg); color: var(--tone-warning-text); }
            .boolean-kmap-cell.covered {
                box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 35%, transparent);
            }
            .boolean-kmap-cell.focus-group {
                box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--ink) 35%, transparent);
                background-image: linear-gradient(135deg, color-mix(in srgb, var(--production) 28%, transparent), color-mix(in srgb, var(--accent) 18%, transparent));
            }
            .boolean-kmap-output {
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: var(--card);
                padding: 0.7rem;
                display: grid;
                gap: 0.48rem;
            }
            .boolean-kmap-output-row {
                display: grid;
                gap: 0.2rem;
            }
            .boolean-kmap-output-row label {
                font-size: var(--text-xs);
                color: var(--muted);
                text-transform: uppercase;
                letter-spacing: 0.04em;
            }
            .boolean-kmap-code {
                font-family: var(--font-mono);
                font-size: 0.8rem;
                border: 1px solid var(--border);
                background: var(--bg);
                border-radius: var(--radius-lg);
                padding: 0.4rem 0.5rem;
                word-break: break-word;
            }
            .boolean-kmap-implicants {
                margin: 0;
                padding-left: 1.05rem;
                display: grid;
                gap: 0.32rem;
                max-height: 170px;
                overflow: auto;
            }
            .boolean-kmap-implicants li { font-size: 0.78rem; color: var(--text); }
            .boolean-kmap-imp-btn {
                width: 100%;
                text-align: left;
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
                padding: 0.35rem 0.45rem;
                background: var(--bg);
                color: var(--text);
                font-family: inherit;
                font-size: 0.78rem;
                cursor: pointer;
            }
            .boolean-kmap-imp-btn.active {
                border-color: var(--primary);
                background: var(--tone-indigo-bg);
            }
            .boolean-kmap-imp-summary {
                margin: 0;
                font-size: 0.78rem;
                color: var(--muted);
            }
            @media (max-width: 740px) {
                .boolean-kmap-controls {
                    display: grid;
                    grid-template-columns: 1fr;
                }
                .boolean-kmap-controls .input,
                .boolean-kmap-controls select,
                .boolean-kmap-controls .btn {
                    width: 100%;
                    max-width: 100%;
                }
            }

/* -------------------------------------------------------------------
   .boolean-simplifier-*  -  BooleanSimplifierWidget
   source : concepts/BooleanSimplifierWidget.js
   ------------------------------------------------------------------- */
            .boolean-simplifier-widget { display: grid; gap: 0.9rem; }
            /* .widget-fit impose display:flex (voir en tête de fichier) : la specificite
               a deux classes garantit qu'il l'emporte sur le display:grid ci-dessus,
               quel que soit l'ordre des regles dans la feuille. */
            .boolean-simplifier-widget.widget-fit { display: flex; height: 100%; box-sizing: border-box; }
            .boolean-simplifier-toolbar {
                display: grid;
                gap: 0.6rem;
            }
            .boolean-simplifier-input-row {
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
                align-items: center;
            }
            .boolean-simplifier-input-row .input { flex: 1; min-width: 240px; }
            .boolean-simplifier-hint {
                margin: 0;
                color: var(--tone-indigo-text);
                font-size: 0.82rem;
                line-height: 1.45;
                border: 1px solid var(--tone-indigo-border);
                background: var(--tone-indigo-bg);
                border-radius: var(--radius-sm);
                padding: 0.45rem 0.55rem;
            }
            .boolean-simplifier-actions {
                display: flex;
                flex-wrap: wrap;
                gap: 0.45rem;
            }
            .boolean-simplifier-actions .btn {
                min-width: 140px;
            }
            .boolean-simplifier-grid {
                display: grid;
                grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
                gap: 0.8rem;
            }
            .boolean-simplifier-panel {
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: var(--bg);
                padding: 0.7rem;
                display: grid;
                gap: 0.5rem;
            }
            .boolean-simplifier-panel h4 {
                margin: 0;
                font-size: 0.88rem;
                color: var(--text);
            }
            .boolean-simplifier-line {
                display: grid;
                gap: 0.2rem;
            }
            .boolean-simplifier-line label {
                font-size: var(--text-xs);
                color: var(--muted);
                text-transform: uppercase;
                letter-spacing: 0.04em;
            }
            .boolean-simplifier-code {
                font-family: var(--font-mono);
                font-size: 0.82rem;
                color: var(--text);
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
                padding: 0.45rem 0.5rem;
                word-break: break-word;
            }
            .boolean-simplifier-diff {
                border: 1px dashed var(--border);
                border-radius: var(--radius-lg);
                background: var(--card);
                padding: 0.45rem 0.5rem;
                display: grid;
                gap: 0.28rem;
                font-family: var(--font-mono);
                font-size: 0.79rem;
                line-height: 1.45;
            }
            .boolean-simplifier-diff-line {
                margin: 0;
                word-break: break-word;
            }
            .boolean-simplifier-diff-tag {
                font-family: var(--font);
                font-size: var(--text-xs);
                color: var(--muted);
                margin-right: 0.28rem;
            }
            .boolean-simplifier-diff-changed {
                background: var(--tone-warning-bg);
                border-radius: var(--radius-md);
                padding: 0 0.08rem;
            }
            .boolean-simplifier-error {
                color: var(--tone-danger-text);
                background: var(--tone-danger-bg);
                border: 1px solid var(--danger);
                border-radius: var(--radius-lg);
                padding: 0.45rem 0.55rem;
                font-size: 0.82rem;
            }
            .boolean-simplifier-steps {
                margin: 0;
                padding-left: 1.1rem;
                display: grid;
                gap: 0.38rem;
                max-height: 340px;
                overflow: auto;
            }
            .boolean-simplifier-step {
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
                padding: 0.42rem 0.5rem;
                background: var(--bg);
                font-size: 0.78rem;
                color: var(--text);
            }
            .boolean-simplifier-step.active {
                border-color: var(--primary);
                background: var(--tone-indigo-bg);
            }
            .boolean-simplifier-step.current {
                border-color: var(--primary);
                box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 20%, transparent);
            }
            .boolean-simplifier-rule {
                font-weight: 700;
                color: var(--primary);
            }
            .boolean-simplifier-meta {
                font-size: 0.78rem;
                color: var(--muted);
            }
            .boolean-simplifier-cue {
                margin-top: 0.18rem;
                font-size: 0.76rem;
                color: var(--tone-indigo-text);
                background: var(--tone-indigo-bg);
                border: 1px solid var(--tone-indigo-border);
                border-radius: var(--radius-lg);
                padding: 0.25rem 0.35rem;
            }
            .boolean-simplifier-verdict {
                border-radius: var(--radius-lg);
                padding: 0.45rem 0.55rem;
                font-size: 0.8rem;
                border: 1px solid var(--border);
                background: var(--bg);
                color: var(--text);
            }
            .boolean-simplifier-verdict.ok {
                color: var(--tone-success-text);
                border-color: var(--ok);
                background: var(--tone-success-bg);
            }
            .boolean-simplifier-verdict.bad {
                color: var(--tone-danger-text);
                border-color: var(--danger);
                background: var(--tone-danger-bg);
            }
            .boolean-simplifier-table-wrap {
                overflow-x: auto;
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
            }
            .boolean-simplifier-table {
                width: 100%;
                border-collapse: collapse;
                font-family: var(--font-mono);
                font-size: 0.78rem;
            }
            .boolean-simplifier-table th,
            .boolean-simplifier-table td {
                border: 1px solid var(--border);
                padding: 0.32rem 0.42rem;
                text-align: center;
            }
            .boolean-simplifier-table th {
                background: var(--bg);
            }
            .boolean-simplifier-table tr.mismatch td {
                background: var(--tone-danger-bg);
                color: var(--tone-danger-text);
            }
            @media (max-width: 1000px) {
                .boolean-simplifier-grid { grid-template-columns: 1fr; }
            }
            @media (max-width: 640px) {
                .boolean-simplifier-actions {
                    display: grid;
                    grid-template-columns: 1fr;
                }
                .boolean-simplifier-actions .btn {
                    width: 100%;
                }
            }

/* -------------------------------------------------------------------
   .boole-eval-summary-*  -  BooleEvaluationPage (bilan de competences)
   source : concepts/BooleEvaluationPage.js
   ------------------------------------------------------------------- */
            .boole-eval-summary {
                margin-top: 1rem;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: var(--card);
                padding: 0.8rem;
                display: grid;
                gap: 0.55rem;
            }
            .boole-eval-summary h3 {
                margin: 0;
                color: var(--primary);
                font-size: 0.95rem;
            }
            .boole-eval-summary-note {
                margin: 0;
                font-size: 0.8rem;
                color: var(--muted);
                line-height: 1.4;
            }
            .boole-eval-summary-list {
                margin: 0;
                padding: 0;
                list-style: none;
                display: grid;
                gap: 0.45rem;
            }
            .boole-eval-summary-item {
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
                background: var(--bg);
                padding: 0.45rem 0.55rem;
                display: grid;
                gap: 0.28rem;
            }
            .boole-eval-summary-head {
                display: flex;
                justify-content: space-between;
                gap: 0.5rem;
                align-items: baseline;
                font-size: 0.8rem;
                color: var(--text);
            }
            .boole-eval-summary-bar {
                width: 100%;
                height: 7px;
                border-radius: 999px;
                background: var(--border);
                overflow: hidden;
            }
            .boole-eval-summary-bar span {
                display: block;
                height: 100%;
                width: 0;
                border-radius: inherit;
                background: linear-gradient(90deg, var(--primary), var(--ok));
            }
            .boole-eval-summary-remediation {
                margin: 0;
                font-size: 0.8rem;
                color: var(--tone-indigo-text);
                background: var(--tone-indigo-bg);
                border: 1px solid var(--tone-indigo-border);
                border-radius: var(--radius-lg);
                padding: 0.45rem 0.55rem;
            }


/* #################################################################### */
/* #  RESEAU                                                      # */
/* #################################################################### */

/* -------------------------------------------------------------------
   .dnw-*  -  DnsWidget (resolution DNS)
   source : DnsSimulatorPage.js
   ------------------------------------------------------------------- */
.dnw { font-family: inherit; display: flex; flex-direction: column; gap: 10px; }
.dnw-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dnw-input { font-size: 0.85rem; padding: 4px 8px; border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); flex: 1; min-width: 140px; }
.dnw-types { display: flex; gap: 4px; flex-wrap: wrap; }
.dnw-type { font-size: 0.75rem; padding: 3px 8px; border-radius: var(--radius-lg); border: 1px solid var(--border, var(--line-subtle)); background: transparent; cursor: pointer; color: var(--text, var(--ink)); font-weight: 600; }
.dnw-type.active { background: var(--primary, var(--accent)); color: var(--surface); border-color: var(--primary, var(--accent)); }
.dnw-btn { font-size: 0.82rem; padding: 4px 12px; border-radius: var(--radius-lg); border: 1px solid var(--primary, var(--accent)); background: var(--primary, var(--accent)); color: var(--surface); cursor: pointer; }
.dnw-btn.sec { background: transparent; color: var(--text, var(--ink)); border-color: var(--border, var(--line-subtle)); }
.dnw-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dnw-chip { font-size: 0.75rem; padding: 2px 8px; border-radius: var(--radius-lg); background: var(--surface2, var(--widget-surface-2, var(--surface-sunken))); border: 1px solid var(--border, var(--line-subtle)); cursor: pointer; color: var(--text, var(--ink)); }
.dnw-chip:hover { background: var(--primary, var(--accent)); color: var(--surface); border-color: var(--primary, var(--accent)); }
.dnw-diagram { display: flex; gap: 6px; align-items: stretch; flex-wrap: wrap; }
.dnw-srv { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 10px; border-radius: var(--radius-lg); border: 2px solid var(--border, var(--line-subtle)); background: var(--surface2, var(--widget-surface-2, var(--surface))); min-width: 72px; font-size: 0.78rem; font-weight: 700; transition: border-color 0.2s, background 0.2s; }
.dnw-srv-icon { font-size: 1.3rem; }
.dnw-srv-name { font-size: var(--text-xs); color: var(--muted, var(--ink-muted)); font-weight: 500; text-align: center; }
.dnw-srv.active { border-color: var(--primary, var(--accent)); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.dnw-srv.resolved { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.dnw-srv.queried { border-color: var(--attention); background: color-mix(in srgb, var(--attention) 10%, transparent); }
.dnw-steps { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.dnw-step { display: flex; gap: 8px; align-items: flex-start; font-size: 0.82rem; }
.dnw-step-num { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: 700; background: var(--primary, var(--accent)); color: var(--surface); }
.dnw-step-num.resp { background: var(--ok); }
.dnw-step-text { flex: 1; line-height: 1.4; }
.dnw-cache table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
.dnw-cache th { padding: 4px 8px; text-align: left; font-size: 0.75rem; color: var(--muted, var(--ink-muted)); border-bottom: 1px solid var(--border, var(--line-subtle)); }
.dnw-cache td { padding: 3px 8px; border-bottom: 1px solid var(--border, var(--line-subtle)); }
.dnw-badge { font-size: var(--text-xs); padding: 1px 6px; border-radius: var(--radius-lg); font-weight: 700; background: var(--primary, var(--accent)); color: var(--surface); }
.dnw-empty { font-size: 0.8rem; color: var(--muted, var(--ink-muted)); font-style: italic; padding: 4px 0; }
.dnw-feedback { font-size: 0.82rem; min-height: 1.3em; }
.dnw-feedback.ok { color: var(--ok); font-weight: 600; }
.dnw-feedback.err { color: var(--critique); font-weight: 600; }
.dnw-section-lbl { font-size: 0.78rem; font-weight: 700; color: var(--muted, var(--ink-muted)); }
.dnw .record-badge { font-size: var(--text-xs); padding: 1px 6px; border-radius: var(--radius-lg); font-weight: 700; background: var(--primary, var(--accent)); color: var(--surface); }
.dnw-select { font-size: 0.8rem; padding: 3px 8px; border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); background: var(--surface, var(--widget-surface-2, var(--surface-sunken))); color: var(--text, var(--ink)); }
.dnw-clock { font-size: 0.8rem; color: var(--muted, var(--ink-muted)); }

/* -------------------------------------------------------------------
   .rsw-*  -  RoutingSimulatorWidget (routage, Dijkstra pas-a-pas)
   source : RoutingSimulatorPage.js
   ------------------------------------------------------------------- */
.rsw-container { display: flex; flex-direction: column; gap: 10px; font-family: inherit; color: var(--text, var(--ink)); height: 100%; box-sizing: border-box; }
.rsw-topo-row { display: flex; flex-wrap: wrap; gap: 6px; }
.rsw-topo-btn { font-size: 0.78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 2px solid var(--border, var(--line-subtle)); background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); cursor: pointer; }
.rsw-topo-btn.active { border-color: var(--primary, var(--accent)); background: var(--primary, var(--accent)); color: var(--surface); }
.rsw-selection { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.8rem; color: var(--text, var(--ink)); }
.rsw-network { border: 2px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); background: var(--surface, var(--widget-surface, var(--surface))); overflow: hidden; }
.rsw-svg { width: 100%; height: 260px; display: block; }
.rsw-router-circle { cursor: pointer; transition: fill 0.25s; }
.rsw-router-circle:hover { filter: brightness(1.1); }
.rsw-router-circle:focus-visible { outline: 2px solid var(--primary, var(--accent)); outline-offset: 2px; }
.rsw-router-label { font-size: 14px; font-weight: 700; fill: var(--surface); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rsw-router-name { font-size: var(--text-xs); fill: var(--muted, var(--ink-muted)); text-anchor: middle; font-weight: 600; pointer-events: none; }
.rsw-edge-line { stroke: var(--border, var(--line-subtle)); stroke-width: 3; stroke-linecap: round; transition: stroke 0.3s, stroke-width 0.3s; }
.rsw-edge-line.visited { stroke: var(--primary, var(--accent)); stroke-width: 4; }
.rsw-edge-line.path { stroke: var(--ok); stroke-width: 5; }
.rsw-edge-weight { font-size: 13px; font-weight: 700; fill: var(--text, var(--ink)); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.rsw-edge-weight-bg { fill: var(--surface, var(--widget-surface, var(--surface))); rx: 4; }
.rsw-router-default { fill: var(--muted, var(--ink-muted)); }
.rsw-router-source { fill: var(--primary, var(--accent)); }
.rsw-router-dest { fill: var(--stockage); }
.rsw-router-current { fill: var(--warning, var(--attention)); }
.rsw-router-visited { fill: var(--accent); }
.rsw-router-path { fill: var(--ok); }
.rsw-select-ring { fill: none; stroke: var(--primary, var(--accent)); stroke-width: 3; stroke-dasharray: 5 3; opacity: 0; }
.rsw-select-ring.visible { opacity: 1; }
.rsw-step-desc { background: var(--surface2, var(--widget-surface-2, var(--surface))); border-left: 4px solid var(--primary, var(--accent)); border-radius: var(--radius-lg); padding: 8px 10px; font-size: 0.82rem; min-height: 2em; }
.rsw-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.rsw-btn { font-size: 0.82rem; font-weight: 600; padding: 5px 12px; border-radius: var(--radius-lg); border: 1px solid var(--primary, var(--accent)); background: var(--primary, var(--accent)); color: var(--surface); cursor: pointer; }
.rsw-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rsw-btn-secondary { background: transparent; color: var(--text, var(--ink)); border-color: var(--border, var(--line-subtle)); }
.rsw-tables { display: flex; flex-wrap: wrap; gap: 10px; }
.rsw-tables .rsw-table { flex: 1; min-width: 180px; }
.rsw-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); }
.rsw-table th, .rsw-table td { padding: 3px 6px; border: 1px solid var(--border, var(--line-subtle)); text-align: center; }
.rsw-table th { background: var(--surface2, var(--widget-surface-2, var(--surface-sunken))); font-weight: 700; }
.rsw-table td.updated { background: color-mix(in srgb, var(--attention) 15%, transparent); font-weight: 700; }
.rsw-table td.finalized { background: color-mix(in srgb, var(--ok) 15%, transparent); font-weight: 700; }
.rsw-route-section { display: flex; flex-direction: column; gap: 6px; }
.rsw-route-selector { display: flex; flex-wrap: wrap; gap: 4px; }
.rsw-route-chip { font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 2px solid var(--border, var(--line-subtle)); background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); cursor: pointer; }
.rsw-route-chip.active { border-color: var(--primary, var(--accent)); background: var(--primary, var(--accent)); color: var(--surface); }
.rsw-muted { color: var(--muted, var(--ink-muted)); }
.rsw-mono { font-family: var(--font-mono, monospace); font-size: 0.75rem; }

/* -------------------------------------------------------------------
   .ipw-*  -  IpSubnetWidget (calculateur CIDR)
   source : IpSubnetPage.js
   ------------------------------------------------------------------- */
.ipw-container{display:flex;flex-direction:column;gap:8px;padding:16px;height:100%;box-sizing:border-box;font-family:var(--sl-font-body,sans-serif);color:var(--sl-text,var(--surface));}
.ipw-header{font-size:.8rem;font-weight:600;color:var(--sl-muted,var(--production));}
.ipw-input-row{display:flex;gap:8px;align-items:center;}
.ipw-input{flex:1;background:color-mix(in srgb, var(--surface) 8%, transparent);border:1px solid color-mix(in srgb, var(--line-subtle) 20%, transparent);border-radius:var(--radius-lg);padding:6px 10px;font-size:.8rem;color:var(--sl-text,var(--surface));font-family: var(--font-mono);}
.ipw-input:focus{outline:none;border-color:var(--sl-primary,var(--accent));}
.ipw-btn{padding:5px 12px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-xs);font-weight:500;background:var(--sl-primary,var(--accent));color:var(--surface);transition:opacity .15s;white-space:nowrap;}
.ipw-btn:hover{opacity:.8;}
.ipw-btn-secondary{background:color-mix(in srgb, var(--surface) 8%, transparent);color:var(--sl-text,var(--surface));}
.ipw-error{font-size:var(--text-xs);color:var(--critique);min-height:16px;}
.ipw-summary{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.ipw-item{background:color-mix(in srgb, var(--surface) 5%, transparent);border-radius:var(--radius-lg);padding:5px 8px;}
.ipw-item-label{font-size:var(--text-2xs);color:var(--sl-muted,var(--production));text-transform:uppercase;letter-spacing:.04em;}
.ipw-item-value{font-size:.78rem;font-weight:600;font-family: var(--font-mono);color:var(--sl-text,var(--surface));}
.ipw-item.highlight .ipw-item-value{color:var(--sl-accent,var(--consommation));}
.ipw-binary{display:flex;flex-direction:column;gap:3px;overflow:auto;}
.ipw-bin-row{display:flex;align-items:center;gap:4px;font-size:var(--text-2xs);font-family: var(--font-mono);}
.ipw-bin-label{width:80px;color:var(--sl-muted,var(--production));text-align:right;flex-shrink:0;}
.ipw-bits{display:flex;gap:1px;flex-wrap:nowrap;}
.ipw-bit{width:13px;height:13px;display:flex;align-items:center;justify-content:center;border-radius:2px;font-size:var(--text-2xs);}
.ipw-bit.net{background:color-mix(in srgb, var(--accent) 45%, transparent);color:var(--surface);}
.ipw-bit.host{background:color-mix(in srgb, var(--consommation) 30%, transparent);color:var(--surface);}
.ipw-bit.plain{background:color-mix(in srgb, var(--surface) 10%, transparent);color:var(--production);}
.ipw-sep{color:color-mix(in srgb, var(--surface) 20%, transparent);padding:0 1px;}

/* -------------------------------------------------------------------
   .tcpw-*  -  TcpWidget (3-way handshake)
   source : TcpHandshakePage.js
   ------------------------------------------------------------------- */
.tcpw-container{display:flex;flex-direction:column;gap:8px;padding:16px;height:100%;box-sizing:border-box;font-family:var(--sl-font-body,sans-serif);color:var(--sl-text,var(--surface));}
.tcpw-header{font-size:.8rem;font-weight:600;color:var(--sl-muted,var(--production));}
.tcpw-scenario-bar{display:flex;gap:6px;flex-wrap:wrap;}
.tcpw-sc-btn{padding:3px 10px;border:1px solid color-mix(in srgb, var(--line-subtle) 15%, transparent);border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-2xs);background:transparent;color:var(--sl-text,var(--surface));transition: all var(--dur-fast) var(--ease-standard);}
.tcpw-sc-btn.active,.tcpw-sc-btn:hover{background:var(--sl-primary,var(--accent));border-color:var(--sl-primary,var(--accent));color:var(--surface);}
.tcpw-diagram{display:flex;gap:0;flex:1;min-height:100px;position:relative;}
.tcpw-lane{display:flex;flex-direction:column;align-items:center;gap:0;flex:1;}
.tcpw-lane-label{font-size:.75rem;font-weight:700;padding:4px 8px;border-radius:var(--radius-lg);background:color-mix(in srgb, var(--surface) 8%, transparent);margin-bottom:4px;}
.tcpw-lane-line{flex:1;width:2px;background:color-mix(in srgb, var(--surface) 15%, transparent);margin:0 auto;}
.tcpw-messages{position:absolute;left:0;right:0;top:30px;bottom:0;pointer-events:none;}
.tcpw-msg{position:absolute;left:15%;width:70%;display:flex;flex-direction:column;align-items:center;opacity:0;transition:opacity .3s;}
.tcpw-msg.visible{opacity:1;}
.tcpw-msg-arrow{width:100%;height:18px;position:relative;display:flex;align-items:center;}
.tcpw-msg-arrow::after{content:'';position:absolute;height:2px;background:var(--sl-primary,var(--accent));width:100%;}
.tcpw-msg-arrow.reverse::after{background:var(--stockage);}
.tcpw-msg-arrow.lost::after{background:color-mix(in srgb, var(--critique) 40%, transparent);border-top:2px dashed var(--critique);height:0;top:50%;}
.tcpw-msg-arrow::before{content:'';position:absolute;right:-4px;top:50%;transform:translateY(-50%);border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent var(--sl-primary,var(--accent));}
.tcpw-msg-arrow.reverse::before{content:'◀';right:auto;left:-4px;color:var(--stockage);}
.tcpw-msg-arrow.lost::before{display:none;}
.tcpw-msg-label{font-size:var(--text-xs);font-weight:700;color:var(--sl-text,var(--surface));}
.tcpw-msg-detail{font-size:var(--text-2xs);color:var(--sl-muted,var(--production));}
.tcpw-status{display:flex;gap:8px;}
.tcpw-state{flex:1;padding:4px 8px;border-radius:var(--radius-lg);background:color-mix(in srgb, var(--surface) 6%, transparent);font-size:var(--text-xs);text-align:center;}
.tcpw-state-name{font-weight:700;color:var(--sl-accent,var(--consommation));}
.tcpw-state.established .tcpw-state-name{color:var(--ok);}
.tcpw-info{font-size:var(--text-xs);color:var(--sl-text,var(--production));min-height:28px;line-height:1.4;}
.tcpw-controls{display:flex;gap:8px;flex-wrap:wrap;}
.tcpw-btn{padding:4px 10px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-xs);font-weight:500;background:var(--sl-primary,var(--accent));color:var(--surface);transition:opacity .15s;}
.tcpw-btn:hover:not(:disabled){opacity:.8;}
.tcpw-btn-secondary{background:color-mix(in srgb, var(--surface) 8%, transparent);color:var(--sl-text,var(--surface));}


/* #################################################################### */
/* #  SYSTEMES                                                    # */
/* #################################################################### */

/* -------------------------------------------------------------------
   .cnw-*  -  ConcurrencyWidget (mutex / deadlock)
   source : ConcurrencyPage.js
   ------------------------------------------------------------------- */
.cnw { font-family: inherit; display: flex; flex-direction: column; gap: 10px; }
.cnw-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border, var(--line-subtle)); }
.cnw-tab { font-size: 0.82rem; padding: 6px 16px; border: none; background: transparent; cursor: pointer; color: var(--muted, var(--ink-muted)); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -2px; }
.cnw-tab.active { color: var(--primary, var(--accent)); border-bottom-color: var(--primary, var(--accent)); }
.cnw-panel { display: none; flex-direction: column; gap: 8px; }
.cnw-panel.active { display: flex; }
.cnw-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cnw-opt { display: flex; align-items: center; gap: 5px; font-size: 0.82rem; cursor: pointer; }
.cnw-btns { display: flex; gap: 6px; margin-left: auto; }
.cnw-btn { font-size: 0.82rem; padding: 4px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border, var(--line-subtle)); background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); cursor: pointer; }
.cnw-btn.primary { background: var(--primary, var(--accent)); color: var(--surface); border-color: var(--primary, var(--accent)); }
.cnw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cnw-card { border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); padding: 10px; background: var(--surface2, var(--widget-surface-2, var(--surface))); }
.cnw-card-title { font-size: 0.8rem; font-weight: 700; margin-bottom: 6px; color: var(--muted, var(--ink-muted)); }
.cnw-kv { display: flex; justify-content: space-between; font-size: 0.82rem; padding: 2px 0; border-bottom: 1px solid var(--border, var(--line-subtle)); }
.cnw-kv:last-child { border-bottom: none; }
.cnw-kv-key { color: var(--muted, var(--ink-muted)); }
.cnw-kv-val { font-weight: 700; }
.cnw-counter-big { font-size: 2.2rem; font-weight: 800; text-align: center; color: var(--primary, var(--accent)); padding: 6px 0; }
.cnw-expected { font-size: 0.78rem; text-align: center; color: var(--muted, var(--ink-muted)); }
.cnw-log { font-size: 0.78rem; max-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.cnw-log-item { padding: 2px 6px; border-radius: var(--radius-md); background: var(--surface2, var(--widget-surface-2, var(--surface-sunken))); }
.cnw-status { font-size: 0.82rem; font-weight: 700; padding: 4px 10px; border-radius: var(--radius-lg); text-align: center; }
.cnw-status.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.cnw-status.bad { background: color-mix(in srgb, var(--critique) 12%, transparent); color: var(--critique); }
.cnw-status.pending { background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--primary, var(--accent)); }
.cnw-section-lbl { font-size: 0.78rem; font-weight: 700; color: var(--muted, var(--ink-muted)); }
.cnw-res-grid { display: flex; gap: 10px; }
.cnw-res-box { flex: 1; border: 2px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); padding: 8px; text-align: center; font-size: 0.82rem; }
.cnw-res-box .res-name { font-weight: 700; font-size: 0.9rem; }
.cnw-res-box .res-owner { color: var(--muted, var(--ink-muted)); font-size: 0.78rem; margin-top: 2px; }
.cnw-res-box.owned { border-color: var(--primary, var(--accent)); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cnw-res-box.deadlocked { border-color: var(--critique); background: color-mix(in srgb, var(--critique) 8%, transparent); }

/* -------------------------------------------------------------------
   .mpw-*  -  MemoryWidget (remplacement de pages)
   source : MemoryPagingPage.js
   ------------------------------------------------------------------- */
.mpw { font-family: inherit; display: flex; flex-direction: column; gap: 10px; }
.mpw-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mpw-lbl { font-size: 0.78rem; font-weight: 600; color: var(--muted, var(--ink-muted)); }
.mpw-input { font-size: 0.85rem; padding: 4px 8px; border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); }
.mpw-pills { display: flex; gap: 4px; }
.mpw-pill { font-size: 0.8rem; padding: 4px 10px; border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); background: transparent; color: var(--text, var(--ink)); cursor: pointer; }
.mpw-pill.active { background: var(--primary, var(--accent)); color: var(--surface); border-color: var(--primary, var(--accent)); }
.mpw-btns { display: flex; gap: 6px; margin-left: auto; }
.mpw-btn { font-size: 0.82rem; padding: 4px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border, var(--line-subtle)); background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); cursor: pointer; }
.mpw-btn.primary { background: var(--primary, var(--accent)); color: var(--surface); border-color: var(--primary, var(--accent)); }
.mpw-ref { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 36px; }
.mpw-rc { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); font-size: 0.88rem; font-weight: 700; background: var(--surface2, var(--widget-surface-2, var(--surface-sunken))); border: 2px solid transparent; }
.mpw-rc.current { border-color: var(--primary, var(--accent)); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.mpw-rc.processed { opacity: 0.45; }
.mpw-frame-row { display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.mpw-frame-lbl { font-size: 0.75rem; font-weight: 600; color: var(--muted, var(--ink-muted)); width: 52px; flex-shrink: 0; }
.mpw-frame-cells { display: flex; gap: 2px; flex-wrap: wrap; }
.mpw-fc { width: 30px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-size: 0.82rem; font-weight: 700; background: var(--surface2, var(--widget-surface-2, var(--surface-sunken))); }
.mpw-fc sub { font-size: 0.55rem; margin-left: 1px; }
.mpw-fc.hand { outline: 2px dashed var(--ink); outline-offset: -3px; }
.mpw-curve { display: flex; gap: 4px; align-items: flex-end; height: 80px; }
.mpw-curve-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; font-size: 0.7rem; }
.mpw-curve-bar { width: 100%; background: var(--cote); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 2px; }
.mpw-curve-col.selected .mpw-curve-bar { background: var(--accent); }
.mpw-curve-col.up .mpw-curve-bar { background: var(--critique); }
.mpw-curve-val { font-weight: 700; }
.mpw-curve-lbl { color: var(--muted, var(--ink-muted)); font-size: 0.6rem; text-align: center; }
.mpw-xlate { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.mpw-xlate th, .mpw-xlate td { border-bottom: 1px solid var(--border, var(--line-subtle)); padding: 2px 6px; text-align: left; }
.mpw-xlate .mpw-fault { color: var(--critique); font-weight: 700; }
.mpw-xlate .mpw-hit { color: var(--ok); font-weight: 700; }
.mpw-fc.empty { color: var(--muted, var(--ink-muted)); font-weight: 400; }
.mpw-fc.hit { background: var(--ok); color: var(--surface); }
.mpw-fc.fault { background: var(--primary, var(--accent)); color: var(--surface); }
.mpw-fc.victim { background: var(--critique); color: var(--surface); }
.mpw-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; }
.mpw-stat { display: flex; flex-direction: column; align-items: center; }
.mpw-sv { font-size: 1.1rem; font-weight: 700; color: var(--primary, var(--accent)); }
.mpw-sl { color: var(--muted, var(--ink-muted)); font-size: 0.75rem; }
.mpw-info { font-size: 0.82rem; color: var(--muted, var(--ink-muted)); min-height: 1.4em; }

/* -------------------------------------------------------------------
   .plw-*  -  PipelineWidget (pipeline processeur)
   source : PipelinePage.js
   ------------------------------------------------------------------- */
.plw { font-family: inherit; display: flex; flex-direction: column; gap: 10px; }
.plw-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.plw-select { font-size: 0.82rem; padding: 4px 8px; border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); }
.plw-opts { display: flex; gap: 10px; align-items: center; font-size: 0.82rem; }
.plw-opts label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.plw-btns { display: flex; gap: 6px; margin-left: auto; }
.plw-btn { font-size: 0.82rem; padding: 4px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border, var(--line-subtle)); background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); cursor: pointer; }
.plw-btn.primary { background: var(--primary, var(--accent)); color: var(--surface); border-color: var(--primary, var(--accent)); }
.plw-grid-wrap { overflow-x: auto; }
.plw-grid { display: grid; gap: 2px; width: max-content; }
.plw-grid-hdr { display: contents; }
.plw-cell { height: 28px; min-width: 42px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; border-radius: var(--radius-md); padding: 0 4px; }
.plw-cell.inst-lbl { background: transparent; color: var(--text, var(--ink)); font-size: var(--text-xs); min-width: 100px; justify-content: flex-start; font-weight: 600; }
.plw-cell.cy-lbl { background: transparent; color: var(--muted, var(--ink-muted)); font-size: var(--text-xs); font-weight: 500; }
.plw-cell.empty { background: transparent; }
.plw-cell.IF  { background: var(--accent); color: var(--surface); }
.plw-cell.ID  { background: var(--accent); color: var(--surface); }
.plw-cell.EX  { background: var(--attention); color: var(--surface); }
.plw-cell.MEM { background: var(--cote); color: var(--surface); }
.plw-cell.WB  { background: var(--ok); color: var(--surface); }
.plw-cell.WAIT { background: transparent; border: 1px dashed var(--border, var(--ink-muted)); color: var(--muted, var(--ink-muted)); }
.plw-cell.FLUSH { background: color-mix(in srgb, var(--critique) 14%, transparent); color: var(--critique); font-size: 0.6rem; text-decoration: line-through; }
.plw-cell.STALL { background: var(--critique); color: var(--surface); font-size: var(--text-2xs); }
.plw-stats { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; }
.plw-stat { display: flex; flex-direction: column; align-items: center; }
.plw-sv { font-size: 1.1rem; font-weight: 700; color: var(--primary, var(--accent)); }
.plw-sl { color: var(--muted, var(--ink-muted)); font-size: 0.75rem; }
.plw-hazlog { display: flex; flex-direction: column; gap: 2px; max-height: 100px; overflow-y: auto; }
.plw-hz { font-size: 0.77rem; padding: 2px 6px; border-radius: var(--radius-md); }
.plw-hz.stall { background: color-mix(in srgb, var(--critique) 10%, transparent); color: var(--critique); }
.plw-hz.stale { background: color-mix(in srgb, var(--critique) 10%, transparent); color: var(--critique); }
.plw-hz.forwarded { background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok); }
.plw-section-lbl { font-size: 0.78rem; font-weight: 700; color: var(--muted, var(--ink-muted)); }

/* -------------------------------------------------------------------
   .schw-*  -  SchedulingWidget (ordonnancement CPU)
   source : SchedulingPage.js
   ------------------------------------------------------------------- */
.schw-container{display:flex;flex-direction:column;gap:8px;padding:16px;height:100%;box-sizing:border-box;font-family:var(--sl-font-body,sans-serif);color:var(--sl-text,var(--surface));}
.schw-header{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;font-weight:600;color:var(--sl-muted,var(--production));}
.schw-algo-bar{display:flex;gap:5px;flex-wrap:wrap;}
.schw-algo-btn{padding:3px 9px;border:1px solid color-mix(in srgb, var(--line-subtle) 15%, transparent);border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-2xs);background:transparent;color:var(--sl-text,var(--surface));transition: all var(--dur-fast) var(--ease-standard);}
.schw-algo-btn.active,.schw-algo-btn:hover{background:var(--sl-primary,var(--accent));border-color:var(--sl-primary,var(--accent));color:var(--surface);}
.schw-quantum-row{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--sl-muted,var(--production));}
.schw-quantum-input{width:40px;background:color-mix(in srgb, var(--surface) 8%, transparent);border:1px solid color-mix(in srgb, var(--line-subtle) 15%, transparent);border-radius:var(--radius-md);padding:2px 6px;font-size:var(--text-xs);color:var(--sl-text,var(--surface));text-align:center;}
.schw-proc-table{font-size:var(--text-2xs);border-collapse:collapse;width:100%;}
.schw-proc-table th{color:var(--sl-muted,var(--production));font-weight:600;padding:2px 6px;text-align:left;}
.schw-proc-table td{padding:2px 6px;}
.schw-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;}
.schw-gantt-zone{overflow-x:auto;}
.schw-gantt{display:flex;gap:1px;min-height:28px;align-items:stretch;}
.schw-gblock{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:24px;border-radius:var(--radius-sm);font-size:var(--text-2xs);font-weight:700;color:var(--surface);padding:0 3px;position:relative;}
.schw-gblock.switch{border-left:3px solid var(--ink);}
.schw-grange{font-size:.5rem;opacity:.8;}
.schw-gblock.idle{background:color-mix(in srgb, var(--surface) 10%, transparent);color:var(--sl-muted,var(--production));}
.schw-gtick{display:flex;gap:1px;font-size:var(--text-2xs);color:var(--sl-muted,var(--production));margin-top:2px;}
.schw-gtick span{text-align:left;}
.schw-metrics{display:flex;gap:6px;flex-wrap:wrap;font-size:var(--text-2xs);}
.schw-metric{background:color-mix(in srgb, var(--surface) 6%, transparent);border-radius:var(--radius-md);padding:3px 8px;}
.schw-metric strong{color:var(--sl-accent,var(--consommation));}
.schw-controls{display:flex;gap:6px;flex-wrap:wrap;}
.schw-btn{padding:4px 10px;border:none;border-radius:var(--radius-lg);cursor:pointer;font-size:var(--text-xs);font-weight:500;background:var(--sl-primary,var(--accent));color:var(--surface);transition:opacity .15s;}
.schw-btn:hover{opacity:.8;}
.schw-btn-secondary{background:color-mix(in srgb, var(--surface) 8%, transparent);color:var(--sl-text,var(--surface));}


/* #################################################################### */
/* #  WEB - DOM / evenements                                      # */
/* #################################################################### */

/* -------------------------------------------------------------------
   .dom-widget-*  -  DomTreeWidget
   source : web/DomTreeWidget.js
   ------------------------------------------------------------------- */
            .dom-widget { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.9rem; background: var(--card); margin: 0.9rem 0; }
            .dom-widget.widget-fit { margin: 0; box-sizing: border-box; }
            .dom-widget h3 { margin: 0 0 0.45rem; font-size: 0.95rem; }
            .dom-widget p { margin: 0 0 0.55rem; color: var(--muted); font-size: 0.86rem; }
            .dom-widget-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0.7rem; }
            .dom-widget-editor { width: 100%; min-height: 180px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem; font-family: var(--font-mono); font-size: 0.8rem; background: var(--code-bg); color: var(--code-text); resize: vertical; }
            .dom-widget-tree { min-height: 180px; max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); padding: 0.5rem; font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.6; }
            .dom-widget-info { margin-top: 0.5rem; padding: 0.45rem 0.55rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); font-size: 0.8rem; color: var(--muted); }
            .dom-widget-diff {
                margin-top: 0.5rem;
                padding: 0.45rem 0.55rem;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: var(--bg);
                font-size: 0.78rem;
                color: var(--text);
                display: grid;
                gap: 0.3rem;
            }
            .dom-widget-diff-title {
                font-weight: 700;
                color: var(--text);
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.5rem;
            }
            .dom-widget-diff-grid {
                display: grid;
                grid-template-columns: repeat(3, minmax(0, 1fr));
                gap: 0.35rem;
            }
            .dom-widget-diff-pill {
                border: 1px solid var(--border);
                border-radius: 999px;
                background: var(--card);
                padding: 0.2rem 0.5rem;
                text-align: center;
                font-family: var(--font-mono);
            }
            .dom-widget-diff-pill .k { color: var(--muted); font-size: var(--text-xs); }
            .dom-widget-diff-pill .v { font-weight: 700; color: var(--text); }
            .dom-widget-diff-list {
                font-family: var(--font-mono);
                font-size: var(--text-xs);
                line-height: 1.45;
                color: var(--muted);
            }
            .dom-widget-diff-list .add { color: var(--tone-success-text); }
            .dom-widget-diff-list .remove { color: var(--tone-danger-text); }
            .dom-widget-node { margin-left: 1.1rem; }
            .dom-widget-node.root { margin-left: 0; }
            .dom-widget-line { display: inline-flex; gap: 0.32rem; align-items: center; padding: 2px 6px; border-radius: var(--radius-md); cursor: pointer; }
            .dom-widget-line:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
            .dom-widget-line.selected { outline: 2px solid var(--primary); background: color-mix(in srgb, var(--accent) 14%, transparent); }
            .dom-widget-tag { color: var(--primary); font-weight: 700; }
            .dom-widget-attr { color: var(--tone-warning-text); }
            .dom-widget-value { color: var(--ok); }
            .dom-widget-text { color: var(--ok); font-style: italic; }
            .dom-widget-comment { color: var(--muted); font-style: italic; }
            .dom-widget-children.collapsed { display: none; }
            .dom-widget-toggle { width: 18px; height: 18px; border: none; border-radius: var(--radius-md); background: var(--bg); color: var(--muted); cursor: pointer; font-size: var(--text-xs); }
            .dom-widget-toggle:hover { background: var(--border); }
            .dom-widget-toggle-placeholder { display: inline-block; width: 18px; }
            @media (max-width: 980px) { .dom-widget-grid { grid-template-columns: 1fr; } }

/* -------------------------------------------------------------------
   .event-widget / .deleg- / .flow- / .flow3d- / .loop- / .restaurant- ...  -  EventWidgets
   source : web/EventWidgets.js  (couvre aussi le fallback .deleg-* de event-widgets/delegation-standardiste.js)
   ------------------------------------------------------------------- */
            .event-widget { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); padding: 1rem; margin: 1rem 0; }
            /* Widget monte plein cadre sur une slide (voir .widget-fit) : la marge
               verticale (pensee pour l'empilement en page de cours) ferait deborder
               la boite de la slide de facon incompressible ; box-sizing:border-box
               explicite car les pages slides ne chargent pas le reset global de
               shared/style.css. Specificite a deux classes = l'emporte a coup sur. */
            .event-widget.widget-fit { margin: 0; box-sizing: border-box; }
            .event-widget h3 { margin: 0 0 0.55rem; font-size: 1rem; }
            .event-widget p { margin: 0 0 0.6rem; color: var(--muted); font-size: 0.88rem; }
            .event-widget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
            .event-widget .panel { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.75rem; box-sizing: border-box; }
            .event-widget .panel.widget-fit { box-sizing: border-box; }
            .event-widget .controls { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.55rem; align-items: center; }
            .event-widget .mini-log {
                min-height: 110px;
                max-height: 220px;
                overflow: auto;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: var(--code-bg);
                color: var(--code-text);
                padding: 0.6rem;
                font-family: var(--font-mono);
                font-size: 0.8rem;
                white-space: pre-wrap;
            }
            .event-widget .badge-counter {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                min-width: 2.2rem;
                height: 1.8rem;
                padding: 0 0.45rem;
                border-radius: 999px;
                border: 1px solid var(--border);
                background: var(--bg);
                font-family: var(--font-mono);
                font-size: 0.85rem;
                font-weight: 700;
            }
            .event-widget .nested {
                display: grid;
                place-items: center;
                min-height: 220px;
                background: var(--bg);
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                padding: 1rem;
            }
            .event-widget .box {
                width: 100%;
                max-width: 360px;
                border: 2px solid var(--border);
                border-radius: var(--radius-lg);
                padding: 0.8rem;
                text-align: center;
            }
            .event-widget .box.parent { background: var(--tone-blue-bg); }
            .event-widget .box.child { background: var(--tone-cyan-bg); margin-top: 0.6rem; }
            .event-widget .box.grandchild { background: var(--tone-success-bg); margin-top: 0.6rem; cursor: pointer; font-weight: 700; }
            .event-widget .probe-zone {
                border: 2px dashed var(--border);
                border-radius: var(--radius-sm);
                padding: 0.8rem;
                min-height: 88px;
                display: grid;
                place-items: center;
                color: var(--muted);
            }
            .event-widget .event-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
            .event-widget .event-table th, .event-widget .event-table td { border: 1px solid var(--border); padding: 0.45rem 0.5rem; text-align: left; }
            .event-widget .event-table th { background: var(--bg); }
            .event-widget .flow-lab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
            .event-widget .flow-scene {
                position: relative;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: var(--bg);
                min-height: 320px;
                padding: 0.75rem;
            }
            .event-widget .flow-stack { display: grid; gap: 0.45rem; }
            .event-widget .flow-node {
                border: 2px solid var(--border);
                border-radius: var(--radius-lg);
                padding: 0.55rem 0.7rem;
                background: var(--card);
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.5rem;
                transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
            }
            .event-widget .flow-node[data-node="document"] { background: var(--tone-blue-bg); }
            .event-widget .flow-node[data-node="section"] { background: var(--tone-violet-bg); }
            .event-widget .flow-node[data-node="card"] { background: var(--tone-cyan-bg); }
            .event-widget .flow-node[data-node="target"] { background: var(--tone-success-bg); cursor: pointer; }
            .event-widget .flow-node.active {
                border-color: var(--primary);
                box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 18%, transparent);
                transform: translateX(4px);
            }
            .event-widget .flow-arrow {
                text-align: center;
                font-size: 0.75rem;
                color: var(--muted);
                font-family: var(--font-mono);
            }
            .event-widget .flow-token {
                position: absolute;
                width: 16px;
                height: 16px;
                border-radius: 999px;
                background: var(--primary);
                box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 20%, transparent);
                transition: left 180ms ease, top 180ms ease, opacity 120ms ease;
                opacity: 0;
                pointer-events: none;
            }
            .event-widget .flow-route {
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: var(--bg);
                padding: 0.5rem;
                display: grid;
                gap: 0.35rem;
                min-height: 132px;
            }
            .event-widget .flow-step {
                display: grid;
                grid-template-columns: auto auto 1fr;
                gap: 0.5rem;
                align-items: center;
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
                padding: 0.35rem 0.45rem;
                font-size: 0.8rem;
                background: var(--card);
            }
            .event-widget .flow-step.pending { opacity: 0.8; }
            .event-widget .flow-step.hit { border-color: var(--ok); background: var(--tone-success-bg); }
            .event-widget .flow-step.blocked { border-color: var(--danger); background: var(--tone-danger-bg); text-decoration: line-through; }
            .event-widget .flow-step.stopped { border-color: var(--danger); background: var(--tone-danger-bg); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 18%, transparent); }
            .event-widget .flow-states { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.55rem 0; }
            .event-widget .flow-state {
                border: 1px solid var(--border);
                border-radius: 999px;
                padding: 0.2rem 0.55rem;
                font-size: 0.78rem;
                background: var(--card);
            }
            .event-widget .flow-state.on { border-color: var(--ok); background: var(--tone-success-bg); }
            .event-widget .flow-state.off { border-color: var(--border); background: var(--bg); }
            .event-widget .flow3d-scene {
                position: relative;
                height: 360px;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: radial-gradient(circle at 25% 20%, var(--bg) 0%, var(--card) 45%, var(--bg) 100%);
                overflow: hidden;
                perspective: 900px;
            }
            .event-widget .flow3d-world {
                position: absolute;
                inset: 0;
                transform-style: preserve-3d;
                transform: rotateX(58deg) rotateZ(-26deg);
            }
            .event-widget .flow3d-layer {
                position: absolute;
                left: 50%;
                transform-style: preserve-3d;
                transform: translateX(-50%);
                height: 52px;
                border-radius: var(--radius-lg);
                border: 2px solid var(--border);
                background: var(--card);
                box-shadow: 0 8px 16px color-mix(in srgb, var(--ink) 12%, transparent);
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 0 0.75rem;
                color: var(--text);
                font-size: 0.82rem;
                transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
            }
            .event-widget .flow3d-layer[data-node="document"] { width: 260px; top: 42px; }
            .event-widget .flow3d-layer[data-node="section"] { width: 220px; top: 114px; }
            .event-widget .flow3d-layer[data-node="card"] { width: 185px; top: 186px; }
            .event-widget .flow3d-layer[data-node="target"] { width: 140px; top: 258px; }
            .event-widget .flow3d-layer.capture-hit { border-color: var(--tone-cyan-border); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 25%, transparent), 0 8px 16px color-mix(in srgb, var(--ink) 12%, transparent); background: var(--tone-cyan-bg); }
            .event-widget .flow3d-layer.bubble-hit { border-color: var(--warning); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 20%, transparent), 0 8px 16px color-mix(in srgb, var(--ink) 12%, transparent); background: var(--tone-warning-bg); }
            .event-widget .flow3d-layer.target-hit { border-color: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 22%, transparent), 0 8px 16px color-mix(in srgb, var(--ink) 12%, transparent); background: var(--tone-success-bg); }
            .event-widget .flow3d-layer.stopped { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 22%, transparent), 0 8px 16px color-mix(in srgb, var(--ink) 12%, transparent); background: var(--tone-danger-bg); }
            .event-widget .flow3d-layer.blocked { opacity: 0.38; filter: grayscale(0.2); }
            .event-widget .flow3d-beam {
                position: absolute;
                left: 50%;
                top: 16px;
                transform: translateX(-50%);
                width: 6px;
                height: 328px;
                border-radius: 999px;
                background: linear-gradient(to bottom, color-mix(in srgb, var(--production) 22%, transparent), color-mix(in srgb, var(--production) 15%, transparent), color-mix(in srgb, var(--cote) 20%, transparent));
            }
            .event-widget .flow3d-beam.capture { background: linear-gradient(to bottom, color-mix(in srgb, var(--cote) 45%, transparent), color-mix(in srgb, var(--cote) 16%, transparent)); }
            .event-widget .flow3d-beam.bubble { background: linear-gradient(to top, color-mix(in srgb, var(--consommation) 50%, transparent), color-mix(in srgb, var(--consommation) 16%, transparent)); }
            .event-widget .flow3d-pulse {
                position: absolute;
                left: 50%;
                top: 18px;
                width: 16px;
                height: 16px;
                transform: translate(-50%, -50%);
                border-radius: 999px;
                background: var(--tone-cyan-text);
                box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 24%, transparent);
                transition: top 220ms ease, background 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
                opacity: 0;
            }
            .event-widget .flow3d-pulse.capture { background: var(--tone-cyan-text); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 24%, transparent); }
            .event-widget .flow3d-pulse.bubble { background: var(--tone-warning-text); box-shadow: 0 0 0 6px color-mix(in srgb, var(--ink) 24%, transparent); }
            .event-widget .flow3d-legend {
                display: flex;
                flex-wrap: wrap;
                gap: 0.4rem;
                margin-top: 0.55rem;
            }
            .event-widget .flow3d-legend .dot {
                width: 11px;
                height: 11px;
                border-radius: 999px;
                display: inline-block;
                margin-right: 0.25rem;
                vertical-align: -1px;
            }
            .event-widget .flow3d-badge {
                border: 1px solid var(--border);
                border-radius: 999px;
                padding: 0.2rem 0.55rem;
                font-size: 0.77rem;
                background: var(--card);
            }
            .event-widget .flow3d-badge.ok { border-color: var(--ok); background: var(--tone-success-bg); }
            .event-widget .flow3d-badge.warn { border-color: var(--danger); background: var(--tone-danger-bg); }
            .event-widget .deleg-grid {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 0.85rem;
                align-items: start;
            }
            .event-widget .deleg-building {
                position: relative;
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: linear-gradient(180deg, var(--bg) 0%, var(--card) 100%);
                padding: 0.7rem;
                min-height: 340px;
                overflow: hidden;
            }
            .event-widget .deleg-windows {
                display: grid;
                grid-template-columns: repeat(10, minmax(0, 1fr));
                gap: 0.35rem;
                margin-bottom: 0.5rem;
            }
            .event-widget .deleg-window {
                height: 22px;
                border: 1px solid var(--border);
                border-radius: var(--radius-md);
                background: var(--card);
                cursor: pointer;
                font-size: var(--text-2xs);
                display: grid;
                place-items: center;
                color: var(--muted);
                transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
            }
            .event-widget .deleg-window:hover {
                transform: translateY(-1px);
                border-color: var(--primary);
            }
            .event-widget .deleg-window.targeted {
                border-color: var(--tone-cyan-border);
                background: var(--tone-cyan-bg);
                box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 20%, transparent);
            }
            .event-widget .deleg-guards {
                display: grid;
                grid-template-columns: repeat(10, minmax(0, 1fr));
                gap: 0.35rem;
            }
            .event-widget .deleg-guard {
                height: 14px;
                border-radius: 999px;
                background: var(--tone-danger-bg);
                border: 1px solid var(--danger);
            }
            .event-widget .deleg-entrance {
                position: relative;
                margin-top: 0.6rem;
                border: 1px dashed var(--border);
                border-radius: var(--radius-lg);
                padding: 0.5rem;
                background: var(--card);
                min-height: 72px;
            }
            .event-widget .deleg-main-guard {
                display: inline-flex;
                align-items: center;
                gap: 0.3rem;
                border: 1px solid var(--ok);
                border-radius: 999px;
                background: var(--tone-success-bg);
                padding: 0.22rem 0.5rem;
                font-size: 0.75rem;
            }
            .event-widget .deleg-bubble {
                position: absolute;
                right: 0.5rem;
                top: 0.5rem;
                max-width: 70%;
                border: 1px solid var(--tone-cyan-border);
                border-radius: var(--radius-lg);
                background: var(--tone-cyan-bg);
                padding: 0.35rem 0.45rem;
                font-size: 0.75rem;
                color: var(--text);
                opacity: 0;
                transform: translateY(-4px);
                transition: opacity 160ms ease, transform 160ms ease;
            }
            .event-widget .deleg-bubble.visible {
                opacity: 1;
                transform: translateY(0);
            }
            .event-widget .deleg-svg {
                position: absolute;
                inset: 0;
                pointer-events: none;
            }
            .event-widget .deleg-path {
                stroke: var(--primary);
                stroke-width: 2.5;
                fill: none;
                stroke-linecap: round;
                stroke-dasharray: 7 7;
                animation: delegDash 750ms linear infinite;
                opacity: 0;
                transition: opacity 150ms ease;
            }
            .event-widget .deleg-path.visible { opacity: 1; }
            .event-widget .deleg-stats {
                display: grid;
                gap: 0.35rem;
                margin-top: 0.45rem;
                font-size: 0.8rem;
            }
            .event-widget .loop-grid {
                display: grid;
                grid-template-columns: 1.2fr 0.8fr;
                gap: 0.85rem;
            }
            .event-widget .restaurant {
                border: 1px solid var(--border);
                border-radius: var(--radius-sm);
                background: linear-gradient(180deg, var(--bg) 0%, var(--card) 100%);
                min-height: 360px;
                padding: 0.65rem;
                position: relative;
                overflow: hidden;
            }
            .event-widget .restaurant.freeze {
                background: linear-gradient(180deg, var(--tone-danger-bg) 0%, color-mix(in srgb, var(--critique) 22%, transparent) 100%);
            }
            .event-widget .restaurant-layout {
                display: grid;
                grid-template-columns: 1.15fr 0.75fr 1.1fr;
                grid-template-rows: 1fr auto;
                gap: 0.6rem;
            }
            .event-widget .zone {
                border: 1px dashed var(--border);
                border-radius: var(--radius-lg);
                background: var(--card);
                padding: 0.45rem;
                min-height: 150px;
            }
            .event-widget .zone h4 {
                margin: 0 0 0.35rem;
                font-size: 0.78rem;
                color: var(--muted);
                text-transform: uppercase;
                letter-spacing: 0.03em;
            }
            .event-widget .zone.salle { grid-column: 1; grid-row: 1; }
            .event-widget .zone.server { grid-column: 2; grid-row: 1; min-height: 150px; display: grid; place-items: center; }
            .event-widget .zone.kitchen { grid-column: 3; grid-row: 1; }
            .event-widget .zone.pass { grid-column: 1 / -1; grid-row: 2; min-height: 96px; }
            .event-widget .chips {
                display: flex;
                flex-wrap: wrap;
                gap: 0.35rem;
            }
            .event-widget .chip {
                border: 1px solid var(--border);
                border-radius: 999px;
                padding: 0.16rem 0.46rem;
                font-size: var(--text-xs);
                background: var(--card);
                color: var(--text);
            }
            .event-widget .chip.active {
                border-color: var(--primary);
                background: var(--tone-blue-bg);
                font-weight: 700;
            }
            .event-widget .waiter-area {
                position: relative;
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
                background: var(--card);
                min-height: 120px;
                width: 100%;
            }
            .event-widget .waiter {
                position: absolute;
                left: 50%;
                top: 52%;
                transform: translate(-50%, -50%);
                width: 38px;
                height: 38px;
                border-radius: 999px;
                border: 2px solid var(--text);
                background: var(--tone-warning-bg);
                display: grid;
                place-items: center;
                font-size: 1rem;
                transition: transform 280ms ease, border-color 180ms ease, box-shadow 180ms ease;
            }
            .event-widget .waiter.busy {
                transform: translate(-50%, -50%) scale(1.08);
                border-color: var(--danger);
                box-shadow: 0 0 0 5px color-mix(in srgb, var(--ink) 16%, transparent);
            }
            .event-widget .waiter.at-salle { transform: translate(-160%, -50%); }
            .event-widget .waiter.at-kitchen { transform: translate(60%, -50%); }
            .event-widget .waiter.at-pass { transform: translate(-50%, 44%); }
            .event-widget .waiter.at-center { transform: translate(-50%, -50%); }
            .event-widget .kitchen-bell {
                display: inline-flex;
                align-items: center;
                gap: 0.3rem;
                border: 1px solid var(--warning);
                border-radius: 999px;
                background: var(--tone-warning-bg);
                padding: 0.2rem 0.5rem;
                font-size: var(--text-xs);
                color: var(--tone-warning-text);
            }
            .event-widget .kitchen-bell.on {
                background: var(--tone-warning-bg);
                box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 20%, transparent);
            }
            .event-widget .loop-stats {
                display: grid;
                gap: 0.35rem;
                font-size: 0.8rem;
                margin-top: 0.45rem;
            }
            .event-widget .loop-stat {
                border: 1px solid var(--border);
                border-radius: var(--radius-lg);
                background: var(--card);
                padding: 0.3rem 0.45rem;
            }
            .event-widget .loop-stat.warn {
                border-color: var(--danger);
                background: var(--tone-danger-bg);
            }
            .event-widget .loop-stat.info {
                border-color: var(--tone-cyan-border);
                background: var(--tone-cyan-bg);
            }
            @keyframes delegDash {
                to { stroke-dashoffset: -28; }
            }
            @media (max-width: 980px) {
                .event-widget-grid { grid-template-columns: 1fr; }
                .event-widget .flow-lab-grid { grid-template-columns: 1fr; }
                .event-widget .deleg-grid { grid-template-columns: 1fr; }
                .event-widget .loop-grid { grid-template-columns: 1fr; }
            }


/* #################################################################### */
/* #  GIT  -  cours Git / GitHub (27 widgets, revue : conserves entiers) # */
/* #################################################################### */

/* -------------------------------------------------------------------
   .gzw-*  -  GitZonesWidget (3 zones : working / staging / repo)
   source : git/GitZonesWidget.js
   ------------------------------------------------------------------- */
.gzw-root {
    font-family: var(--font);
    color: var(--text);
}
.gzw-zones {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .gzw-zones { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 500px) {
    .gzw-zones { grid-template-columns: 1fr; }
}
.gzw-zone-remote {
    border-style: dashed;
    background: var(--widget-info-bg, var(--surface));
}
.gzw-zone-remote .gzw-commit {
    border-color: var(--widget-info-border, color-mix(in srgb, var(--cote) 45%, var(--surface)));
    background: var(--widget-info-bg, var(--surface));
}
.gzw-zone-remote .gzw-commit-hash { color: var(--widget-info-fg, var(--production)); }
.gzw-zone {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 0.75rem;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.25s;
}
.gzw-zone.highlight {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 12%, transparent);
}
.gzw-zone-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.gzw-zone-subtitle {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--muted);
    font-weight: 400;
}
.gzw-files {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}
.gzw-file {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--card);
    font-size: 0.82rem;
    font-family: var(--font-mono);
    font-weight: 500;
    transition: all var(--dur-base) var(--ease-standard);
    cursor: default;
}
.gzw-file.entering {
    animation: gzwSlideIn 0.3s ease-out;
}
.gzw-file.leaving {
    animation: gzwSlideOut 0.25s ease-in forwards;
}
.gzw-file-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gzw-file.state-untracked .gzw-file-dot { background: var(--widget-fg-muted, var(--line-subtle)); }
.gzw-file.state-modified  .gzw-file-dot { background: var(--attention); }
.gzw-file.state-staged    .gzw-file-dot { background: var(--accent); }
.gzw-file.state-committed .gzw-file-dot { background: var(--ok); }

.gzw-file.state-untracked { border-color: var(--widget-neutral-border, var(--line-subtle)); color: var(--muted); }
.gzw-file.state-modified  { border-color: var(--widget-warn-border, var(--attention)); background: var(--widget-warn-bg, var(--attention-fond)); }
.gzw-file.state-staged    { border-color: var(--widget-info-border, color-mix(in srgb, var(--production) 45%, var(--surface))); background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); color: var(--accent); }
.gzw-file.state-committed { border-color: var(--widget-success-border, var(--ok)); background: var(--widget-success-bg, var(--ok-fond)); color: var(--widget-success-fg, var(--ok)); }

.gzw-file-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gzw-file-badge {
    font-size: var(--text-2xs);
    font-family: var(--font);
    font-weight: 600;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    white-space: nowrap;
}
.state-untracked .gzw-file-badge { background: var(--widget-surface, var(--surface-sunken)); color: var(--widget-fg-muted, var(--ink-muted)); }
.state-modified  .gzw-file-badge { background: var(--widget-warn-bg, var(--attention-fond)); color: var(--widget-warn-fg, var(--consommation)); }
.state-staged    .gzw-file-badge { background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); color: var(--widget-info-fg, var(--accent)); }
.state-committed .gzw-file-badge { background: var(--widget-success-bg, var(--ok-fond)); color: var(--widget-success-fg, var(--ok)); }

.gzw-commits {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.gzw-commit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    background: var(--card);
    border: 1.5px solid var(--widget-success-border, var(--ok));
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    animation: gzwSlideIn 0.3s ease-out;
}
.gzw-commit-hash {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--widget-success-fg, var(--ok));
    font-weight: 700;
    flex-shrink: 0;
}
.gzw-commit-msg {
    color: var(--muted);
    font-size: 0.75rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gzw-arrows {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 0.75rem;
    font-size: 0.8rem;
    text-align: center;
}
.gzw-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: var(--muted);
    font-size: 0.75rem;
}
.gzw-arrow-line {
    flex: 1;
    height: 1px;
    background: var(--border);
}
@media (max-width: 680px) {
    .gzw-arrows { grid-template-columns: 1fr; }
}

.gzw-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.gzw-cmd {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    font-weight: 600;
    transition: all var(--dur-base) var(--ease-standard);
}
.gzw-cmd:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface)));
}
.gzw-cmd:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.gzw-cmd.danger:hover:not(:disabled) {
    border-color: var(--critique);
    color: var(--critique);
    background: var(--widget-danger-bg, var(--surface));
}
.gzw-feedback {
    font-size: 0.82rem;
    min-height: 1.4em;
    padding: 0.4rem 0.6rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
}
.gzw-feedback.ok  { background: var(--widget-success-bg, var(--ok-fond)); color: var(--widget-success-fg, var(--ok)); }
.gzw-feedback.bad { background: var(--widget-danger-bg, var(--surface)); color: var(--widget-danger-fg, var(--critique)); }
.gzw-feedback.info{ background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); color: var(--widget-info-fg, var(--accent)); }

@keyframes gzwSlideIn {
    from { transform: translateY(-8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
@keyframes gzwSlideOut {
    from { transform: translateX(0);  opacity: 1; }
    to   { transform: translateX(20px); opacity: 0; }
}

/* -------------------------------------------------------------------
   .gflw-*  -  GitFileLifecycleWidget (untracked -> staged -> committed)
   source : git/GitFileLifecycleWidget.js
   ------------------------------------------------------------------- */
.gflw-root {
    font-family: var(--font);
    color: var(--text);
}

/* Diagramme SVG */
.gflw-diagram {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 1.25rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem 0;
}
.gflw-diagram svg {
    display: block;
    margin: 0 auto;
    overflow: visible;
}

/* Carte fichier centrale */
.gflw-file-card {
    border: 2.5px solid var(--widget-fg-muted, var(--line-subtle));
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    background: var(--widget-surface, var(--surface));
    margin-bottom: 1rem;
    transition: border-color 0.3s, background 0.3s;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.gflw-file-card.state-untracked { border-color: var(--widget-fg-muted, var(--line-subtle)); background: var(--widget-surface, var(--surface)); }
.gflw-file-card.state-modified  { border-color: var(--attention); background: var(--widget-warn-bg, var(--attention-fond)); }
.gflw-file-card.state-staged    { border-color: var(--accent); background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); }
.gflw-file-card.state-committed { border-color: var(--ok); background: var(--widget-success-bg, var(--ok-fond)); }
.gflw-file-card.state-pushed    { border-color: var(--cote); background: var(--widget-info-bg, var(--surface)); }

.gflw-file-icon { font-size: 1.8rem; flex-shrink: 0; }
.gflw-file-info { flex: 1; }
.gflw-file-name {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}
.gflw-state-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    margin-bottom: 0.4rem;
}
.state-untracked .gflw-state-badge { background: var(--widget-surface, var(--surface-sunken)); color: var(--widget-fg-strong, var(--ink)); }
.state-modified  .gflw-state-badge { background: var(--widget-warn-bg, var(--attention-fond)); color: var(--widget-warn-fg, var(--consommation)); }
.state-staged    .gflw-state-badge { background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); color: var(--widget-info-fg, var(--accent)); }
.state-committed .gflw-state-badge { background: var(--widget-success-bg, var(--ok-fond)); color: var(--widget-success-fg, var(--ok)); }
.state-pushed    .gflw-state-badge { background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); color: var(--widget-info-fg, var(--production)); }
.gflw-state-desc { font-size: 0.82rem; color: var(--muted); line-height: 1.4; }

/* Boutons */
.gflw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    align-items: center;
}
.gflw-btn {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.42rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-standard);
}
.gflw-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); }
.gflw-btn.danger:hover { border-color: var(--critique); color: var(--critique); background: var(--widget-danger-bg, var(--surface)); }
.gflw-btn-reset {
    font-family: var(--font);
    font-size: 0.82rem;
    padding: 0.42rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--card);
    color: var(--muted);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-standard);
    margin-left: auto;
}
.gflw-btn-reset:hover { border-color: var(--muted); color: var(--text); }

/* Historique */
.gflw-history {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
}
.gflw-history-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
    padding: 0.45rem 0.75rem;
    border-bottom: 1px solid var(--border);
    background: var(--card);
}
.gflw-history-list { list-style: none; margin: 0; padding: 0; }
.gflw-history-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.38rem 0.75rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
    font-family: var(--font-mono);
    animation: gflwFadeIn 0.25s ease-out;
}
.gflw-history-list li:last-child { border-bottom: none; }
.gflw-history-prompt { color: var(--ok); font-weight: 700; }
.gflw-history-empty { padding: 0.55rem 0.75rem; font-size: 0.8rem; color: var(--muted); font-style: italic; }

@keyframes gflwFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------
   .gdw-*  -  GitDAGWidget (graphe de commits)
   source : git/GitDAGWidget.js
   ------------------------------------------------------------------- */
.gdw-root { font-family: var(--font); }
.gdw-svg-wrap {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius);
    background: var(--bg);
    border: 1px solid var(--border);
    padding: 1rem 1.5rem;
}
.gdw-svg { display: block; margin: 0 auto; }
.gdw-commit-circle {
    fill: var(--card);
    stroke-width: 2.5;
    cursor: pointer;
    transition: r 0.15s;
}
.gdw-commit-circle:hover { r: 18; }
.gdw-commit-hash {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    fill: var(--widget-fg-muted, var(--ink-muted));
    text-anchor: middle;
    pointer-events: none;
    user-select: none;
}
.gdw-commit-msg {
    font-size: var(--text-xs);
    fill: var(--text, var(--production));
    text-anchor: middle;
    pointer-events: none;
    user-select: none;
}
.gdw-edge {
    fill: none;
    stroke-width: 2;
    stroke: var(--widget-neutral-border, var(--line-subtle));
}
.gdw-branch-label {
    font-size: var(--text-xs);
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}
.gdw-head-label {
    font-size: var(--text-2xs);
    font-weight: 700;
    fill: var(--critique);
    pointer-events: none;
    user-select: none;
}
.gdw-tooltip {
    position: absolute;
    background: var(--card, var(--surface));
    border: 1px solid var(--border, var(--line-subtle));
    border-radius: var(--radius-lg);
    padding: 0.5rem 0.75rem;
    font-size: 0.78rem;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 10%, transparent);
    pointer-events: none;
    max-width: 260px;
    z-index: 100;
    transition: opacity 0.15s;
}
.gdw-tooltip-hash { font-family: var(--font-mono); font-weight: 700; color: var(--primary, var(--accent)); }
.gdw-tooltip-msg  { color: var(--text); margin-top: 0.2rem; }
.gdw-tooltip-parents { font-size: var(--text-xs); color: var(--muted); margin-top: 0.2rem; }
.gdw-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    margin-top: 0.75rem;
    font-size: 0.78rem;
}
.gdw-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.gdw-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid;
    flex-shrink: 0;
}

/* -------------------------------------------------------------------
   .gtw-*  -  GitTerminalWidget (terminal interactif)
   source : git/GitTerminalWidget.js
   ------------------------------------------------------------------- */
.gtw-root {
    font-family: var(--font);
    color: var(--text);
}
.gtw-top-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}
.gtw-scenario-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}
.gtw-scenario-select {
    font-family: var(--font);
    font-size: 0.82rem;
    padding: 0.35rem 0.6rem;
    border: 1.5px solid var(--control-border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
}
.gtw-counter {
    margin-left: auto;
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 600;
}

/* Fenêtre terminal */
.gtw-terminal {
    background: var(--production);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0.75rem;
    border: 1px solid var(--production);
}
.gtw-terminal-bar {
    background: var(--production);
    padding: 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.gtw-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gtw-dot-red   { background: var(--critique); }
.gtw-dot-amber { background: var(--attention); }
.gtw-dot-green { background: var(--ok); }
.gtw-terminal-title {
    font-size: 0.75rem;
    color: var(--production);
    font-family: var(--font-mono);
    margin-left: 0.25rem;
}
.gtw-terminal-body {
    padding: 0.85rem 1rem;
    min-height: 160px;
    max-height: 280px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.6;
}
.gtw-line {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.25rem;
    animation: gtwFadeIn 0.2s ease-out;
}
.gtw-prompt {
    color: var(--ok);
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}
.gtw-cmd-text {
    color: var(--surface);
    white-space: pre-wrap;
    word-break: break-all;
}
.gtw-output {
    color: var(--production);
    white-space: pre-wrap;
    font-size: 0.78rem;
    margin-left: 0;
    margin-bottom: 0.5rem;
    display: block;
    animation: gtwFadeIn 0.3s ease-out;
}
.gtw-output.comment { color: var(--ink-muted); font-style: italic; }

/* Description pédagogique */
.gtw-desc-box {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.9rem;
    font-size: 0.83rem;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: 0.75rem;
    min-height: 2.5rem;
}
.gtw-desc-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary);
    margin-bottom: 0.25rem;
}

/* Contrôles */
.gtw-controls {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.gtw-btn {
    font-family: var(--font);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 1rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--border);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-standard);
}
.gtw-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface)));
}
.gtw-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.gtw-btn-primary {
    background: var(--primary);
    color: var(--surface);
    border-color: var(--primary);
}
.gtw-btn-primary:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface);
}

@keyframes gtwFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------
   .gsc-*  -  GitStrategyComparator (merge / rebase / squash)
   source : git/GitStrategyComparator.js
   ------------------------------------------------------------------- */
.gsc-root {
    font-family: var(--font);
    color: var(--text);
}
.gsc-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1rem;
    overflow-x: auto;
}
.gsc-tab {
    font-family: var(--font);
    font-size: 0.83rem;
    font-weight: 600;
    padding: 0.55rem 1.1rem;
    border: none;
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.18s, border-color 0.18s;
}
.gsc-tab:hover { color: var(--text); }
.gsc-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}
.gsc-diagram-wrap {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 0;
    margin-bottom: 1rem;
    overflow-x: auto;
}
.gsc-diagram-wrap svg {
    display: block;
    margin: 0 auto;
    overflow: visible;
}
.gsc-info-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--card);
}
.gsc-info-header {
    padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text);
}
.gsc-info-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
@media (max-width: 520px) {
    .gsc-info-cols { grid-template-columns: 1fr; }
}
.gsc-pros, .gsc-cons {
    padding: 0.75rem 1rem;
}
.gsc-pros { border-right: 1px solid var(--border); }
@media (max-width: 520px) {
    .gsc-pros { border-right: none; border-bottom: 1px solid var(--border); }
}
.gsc-col-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.gsc-pros .gsc-col-title { color: var(--ok); }
.gsc-cons .gsc-col-title { color: var(--critique); }
.gsc-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.gsc-list li {
    font-size: 0.82rem;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    color: var(--text);
    line-height: 1.4;
}
.gsc-pros .gsc-list li::before { content: '+'; color: var(--ok); font-weight: 700; flex-shrink: 0; }
.gsc-cons .gsc-list li::before { content: '-'; color: var(--critique); font-weight: 700; flex-shrink: 0; }
.gsc-legend {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border);
}
.gsc-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-xs);
    color: var(--muted);
}
.gsc-legend-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* -------------------------------------------------------------------
   .gmcw-*  -  GitMergeComparisonWidget
   source : git/GitMergeComparisonWidget.js
   ------------------------------------------------------------------- */
.gmcw-root {
    font-family: var(--font);
    color: var(--text);
}

/* Situation de départ */
.gmcw-start {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
    margin-bottom: 1rem;
}
.gmcw-start-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.6rem;
}
.gmcw-start-diagram {
    display: flex;
    align-items: center;
    gap: 0;
    flex-wrap: wrap;
    row-gap: 0.75rem;
}

/* Grille 3 colonnes */
.gmcw-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
@media (max-width: 750px) {
    .gmcw-grid { grid-template-columns: 1fr; }
}

/* Carte de stratégie */
.gmcw-card {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.gmcw-card:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--widget-info-border, color-mix(in srgb, var(--ink) 35%, transparent));
}
.gmcw-card.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--widget-info-border, color-mix(in srgb, var(--ink) 35%, transparent));
}
.gmcw-card-header {
    padding: 0.65rem 0.85rem;
    font-weight: 700;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--surface);
}
.gmcw-card-ff     .gmcw-card-header { background: var(--accent); }
.gmcw-card-merge  .gmcw-card-header { background: var(--cote); }
.gmcw-card-rebase .gmcw-card-header { background: var(--ok); }

.gmcw-card-body {
    padding: 0.75rem 0.85rem;
    background: var(--card);
}
.gmcw-card-graph {
    margin-bottom: 0.6rem;
}
.gmcw-card-when {
    font-size: var(--text-xs);
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: 0.45rem;
    margin-top: 0.45rem;
    line-height: 1.4;
}
.gmcw-card-when b { color: var(--text); }

/* SVG commit nodes */
.gmcw-svg {
    display: block;
    overflow: visible;
}

/* Panel d'explication */
.gmcw-detail {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    min-height: 80px;
    border-left: 4px solid var(--primary);
}
.gmcw-detail-title {
    font-weight: 700;
    font-size: 0.88rem;
    margin-bottom: 0.4rem;
}
.gmcw-detail-pros {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin-top: 0.4rem;
}
.gmcw-detail-pro  { color: var(--ok); font-size: 0.8rem; }
.gmcw-detail-con  { color: var(--critique); font-size: 0.8rem; }
.gmcw-cmd {
    font-family: var(--font-mono);
    font-size: 0.77rem;
    background: var(--production);
    color: var(--surface);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.7rem;
    margin-top: 0.5rem;
    white-space: pre;
    overflow-x: auto;
    display: block;
}

/* -------------------------------------------------------------------
   .gcew-*  -  GitConflictEditorWidget (resolution de conflit)
   source : git/GitConflictEditorWidget.js
   ------------------------------------------------------------------- */
.gcew-root {
    font-family: var(--font);
    color: var(--text);
}
.gcew-top-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.gcew-top-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}
.gcew-select {
    font-family: var(--font);
    font-size: 0.82rem;
    padding: 0.35rem 0.6rem;
    border: 1.5px solid var(--control-border);
    border-radius: var(--radius-sm);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
}
.gcew-filename {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--muted);
    margin-left: auto;
}

/* 3-column view */
.gcew-columns {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
@media (max-width: 700px) {
    .gcew-columns { grid-template-columns: 1fr; }
}
.gcew-col {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.gcew-col-header {
    padding: 0.4rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gcew-col.ours .gcew-col-header   { background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); color: var(--widget-info-fg, var(--production)); border-bottom: 1.5px solid var(--widget-info-border, color-mix(in srgb, var(--production) 45%, var(--surface))); }
.gcew-col.base .gcew-col-header   { background: var(--widget-surface, var(--surface-sunken)); color: var(--widget-fg-muted, var(--ink-muted)); border-bottom: 1.5px solid var(--border); }
.gcew-col.theirs .gcew-col-header { background: var(--widget-success-bg, var(--ok-fond)); color: var(--widget-success-fg, var(--ok)); border-bottom: 1.5px solid var(--widget-success-border, var(--ok)); }

.gcew-col-body {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    padding: 0.5rem 0.6rem;
    flex: 1;
    background: var(--bg);
    overflow-x: auto;
    white-space: pre;
}

/* Conflict blocks */
.gcew-conflict-block {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}
.gcew-conflict-header {
    background: var(--widget-warn-bg, var(--attention-fond));
    border-bottom: 1px solid var(--widget-warn-border, var(--attention));
    padding: 0.4rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--widget-warn-fg, var(--consommation));
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.gcew-conflict-header.resolved {
    background: var(--widget-success-bg, var(--ok-fond));
    border-bottom-color: var(--widget-success-border, var(--ok));
    color: var(--widget-success-fg, var(--ok));
}
.gcew-conflict-id {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 400;
    color: inherit;
    opacity: 0.7;
}
.gcew-raw-view {
    background: var(--production);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    line-height: 1.55;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}
.gcew-raw-line { display: flex; gap: 0.5rem; }
.gcew-raw-ln   { color: var(--production); min-width: 1.5rem; text-align: right; user-select: none; flex-shrink: 0; }
.gcew-raw-text { color: var(--production); white-space: pre; }
.gcew-raw-text.marker-ours    { color: var(--production); font-weight: 700; }
.gcew-raw-text.marker-sep     { color: var(--ink-muted); }
.gcew-raw-text.marker-theirs  { color: var(--ok); font-weight: 700; }
.gcew-raw-text.ours-line      { color: var(--surface); background: color-mix(in srgb, var(--production) 25%, transparent); }
.gcew-raw-text.theirs-line    { color: var(--surface); background: color-mix(in srgb, var(--ok) 25%, transparent); }

.gcew-actions {
    display: flex;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    background: var(--card);
    flex-wrap: wrap;
    align-items: center;
}
.gcew-btn-action {
    font-family: var(--font);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border);
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-standard);
}
.gcew-btn-action:hover { border-color: var(--primary); color: var(--primary); background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); }
.gcew-btn-action.active-ours   { border-color: var(--production); background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); color: var(--widget-info-fg, var(--production)); }
.gcew-btn-action.active-theirs { border-color: var(--ok); background: var(--widget-success-bg, var(--ok-fond)); color: var(--widget-success-fg, var(--ok)); }
.gcew-btn-action.active-both   { border-color: var(--attention); background: var(--widget-warn-bg, var(--attention-fond)); color: var(--widget-warn-fg, var(--consommation)); }

/* Result area */
.gcew-result-section {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
}
.gcew-result-header {
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 0.45rem 0.75rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gcew-result-body {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.6;
    padding: 0.6rem 0.75rem;
    background: var(--bg);
    white-space: pre;
    overflow-x: auto;
    min-height: 3rem;
}
.gcew-result-chunk {
    display: block;
    padding: 0.1rem 0.25rem;
    border-radius: 2px;
    transition: background 0.3s;
}
.gcew-result-chunk.pending   { color: var(--widget-fg-muted, var(--ink-muted)); font-style: italic; }
.gcew-result-chunk.resolved  { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--text); }
.gcew-result-chunk.context   { color: var(--muted); }
.gcew-result-chunk.flash     { animation: gcewFlash 0.5s ease-out; }

@keyframes gcewFlash {
    0%   { background: color-mix(in srgb, var(--ok) 38%, transparent); }
    100% { background: color-mix(in srgb, var(--ok) 13%, transparent); }
}

/* Validate button + feedback */
.gcew-validate-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.gcew-btn-validate {
    font-family: var(--font);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.55rem 1.2rem;
    border-radius: var(--radius-sm);
    border: 2px solid var(--primary);
    background: var(--primary);
    color: var(--surface);
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-standard);
}
.gcew-btn-validate:hover { background: var(--accent); border-color: var(--accent); }
.gcew-feedback {
    font-size: 0.82rem;
    padding: 0.4rem 0.75rem;
    border-radius: var(--radius-sm);
    flex: 1;
}
.gcew-feedback.ok  { background: var(--widget-success-bg, var(--ok-fond)); color: var(--widget-success-fg, var(--ok)); }
.gcew-feedback.bad { background: var(--widget-warn-bg, var(--attention-fond)); color: var(--widget-warn-fg, var(--consommation)); }

/* -------------------------------------------------------------------
   .gflow-*  -  GitflowSimulatorWidget
   source : git/GitflowSimulatorWidget.js
   ------------------------------------------------------------------- */
.gflow-root { font-family: var(--font); }
.gflow-step-card {
    background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); border: 1.5px solid var(--widget-info-border, color-mix(in srgb, var(--production) 45%, var(--surface)));
    border-radius: var(--radius); padding: 0.75rem 1rem;
    margin-bottom: 0.75rem; font-size: 0.88rem; color: var(--widget-info-fg, var(--accent));
}
.gflow-step-num { font-weight: 700; margin-bottom: 0.2rem; font-size: 0.75rem; text-transform: uppercase; }
.gflow-step-desc { font-size: 0.9rem; color: var(--text); font-weight: 500; }
.gflow-step-detail { font-size: 0.8rem; color: var(--muted); margin-top: 0.3rem; }
.gflow-svg-wrap {
    overflow-x: auto; border: 1px solid var(--border);
    border-radius: var(--radius); background: var(--bg); padding: 1rem;
    margin-bottom: 0.75rem;
}
.gflow-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
}
.gflow-nav-center { font-size: 0.82rem; color: var(--muted); font-weight: 600; }
.gflow-legend {
    display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
    margin-top: 0.5rem; font-size: 0.75rem;
}
.gflow-legend-item { display: flex; align-items: center; gap: 0.3rem; }
.gflow-legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* -------------------------------------------------------------------
   .grbi-*  -  GitRebaseInteractiveWidget (pick / squash / fixup)
   source : git/GitRebaseInteractiveWidget.js
   ------------------------------------------------------------------- */
.grbi-root { font-family: var(--font); }
.grbi-info {
    background: var(--widget-warn-bg, var(--attention-fond)); border: 1.5px solid var(--widget-warn-border, var(--attention));
    border-radius: var(--radius); padding: 0.65rem 0.85rem;
    font-size: 0.78rem; color: var(--widget-warn-fg, var(--consommation)); margin-bottom: 0.75rem;
}
.grbi-info code { background: var(--widget-warn-bg, var(--attention-fond)); padding: 0.1rem 0.3rem; border-radius: var(--radius-sm); }
.grbi-list { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.75rem; }
.grbi-row {
    display: grid; grid-template-columns: auto 1fr auto;
    align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.65rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--card);
    transition: all var(--dur-base) var(--ease-standard);
}
.grbi-row.action-drop    { opacity: 0.4; border-style: dashed; }
.grbi-row.action-squash  { border-color: var(--widget-info-border, color-mix(in srgb, var(--production) 45%, var(--surface))); background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); }
.grbi-row.action-fixup   { border-color: var(--widget-info-border, color-mix(in srgb, var(--production) 45%, var(--surface))); background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); }
.grbi-row.action-reword  { border-color: var(--widget-success-border, var(--ok)); background: var(--widget-success-bg, var(--ok-fond)); }
.grbi-move { display: flex; flex-direction: column; gap: 0.1rem; }
.grbi-move button {
    background: none; border: none; cursor: pointer; padding: 0 0.2rem;
    font-size: var(--text-xs); color: var(--muted); line-height: 1;
}
.grbi-move button:hover { color: var(--primary); }
.grbi-commit-info { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.grbi-hash { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); flex-shrink: 0; }
.grbi-msg  { font-size: 0.82rem; font-weight: 500; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grbi-msg-input {
    font-size: 0.82rem; font-family: var(--font); border: 1px solid var(--control-border);
    border-radius: var(--radius-sm); padding: 0.2rem 0.4rem; width: 100%; max-width: 280px;
    background: var(--surface); color: var(--text);
}
.grbi-action-select {
    font-size: var(--text-xs); font-family: var(--font-mono); padding: 0.25rem 0.4rem;
    border: 1.5px solid var(--control-border); border-radius: var(--radius-sm);
    background: var(--card); color: var(--text); cursor: pointer;
    min-width: 78px;
}
.grbi-controls { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.grbi-result {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 0.5rem;
}
@media (max-width: 640px) { .grbi-result { grid-template-columns: 1fr; } }
.grbi-result-col h4 {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.4rem;
}
.grbi-commit-item {
    padding: 0.4rem 0.6rem; border-radius: var(--radius-sm);
    font-size: 0.8rem; margin-bottom: 0.3rem; border: 1.5px solid;
    display: flex; align-items: center; gap: 0.4rem;
}
.grbi-commit-item.kept    { border-color: var(--ok); background: var(--widget-success-bg, var(--ok-fond)); color: var(--widget-success-fg, var(--ok)); }
.grbi-commit-item.squashed { border-color: var(--widget-info-border, color-mix(in srgb, var(--production) 45%, var(--surface))); background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); color: var(--widget-info-fg, var(--accent)); }
.grbi-commit-item.dropped { border-color: var(--widget-danger-border, color-mix(in srgb, var(--critique) 45%, var(--surface))); background: var(--widget-danger-bg, var(--surface)); color: var(--widget-danger-fg, var(--critique)); text-decoration: line-through; opacity: 0.6; }
.grbi-legend {
    display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem;
    font-size: var(--text-xs); color: var(--muted); margin-top: 0.5rem;
}

/* -------------------------------------------------------------------
   .gbw-*  -  GitBisectWidget (recherche dichotomique de commit)
   source : git/GitBisectWidget.js
   ------------------------------------------------------------------- */
.gbw-root { font-family: var(--font); }
.gbw-info {
    font-size: 0.82rem; padding: 0.65rem 0.85rem;
    border-radius: var(--radius); margin-bottom: 0.75rem;
    border: 1.5px solid; line-height: 1.5;
}
.gbw-info.neutral { background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); border-color: var(--widget-info-border, color-mix(in srgb, var(--production) 45%, var(--surface))); color: var(--widget-info-fg, var(--accent)); }
.gbw-info.found   { background: var(--widget-danger-bg, var(--surface)); border-color: var(--widget-danger-border, color-mix(in srgb, var(--critique) 45%, var(--surface))); color: var(--widget-danger-fg, var(--critique)); }
.gbw-timeline {
    display: flex; align-items: center; gap: 0;
    overflow-x: auto; padding: 1rem 0.5rem;
    background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 0.75rem;
}
.gbw-commit {
    display: flex; flex-direction: column; align-items: center;
    cursor: default; flex-shrink: 0; width: 40px;
}
.gbw-circle {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2.5px solid var(--widget-neutral-border, var(--line-subtle)); background: var(--surface);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-2xs); font-weight: 700; color: var(--widget-fg-muted, var(--ink-muted));
    transition: all var(--dur-base) var(--ease-standard); position: relative; z-index: 1;
}
.gbw-commit.excluded .gbw-circle { opacity: 0.25; }
.gbw-commit.good .gbw-circle     { border-color: var(--ok); background: var(--widget-success-bg, var(--ok-fond)); color: var(--widget-success-fg, var(--ok)); }
.gbw-commit.bad  .gbw-circle     { border-color: var(--critique); background: var(--widget-danger-bg, var(--surface)); color: var(--widget-danger-fg, var(--critique)); }
.gbw-commit.current .gbw-circle  { border-color: var(--attention); background: var(--widget-warn-bg, var(--attention-fond)); color: var(--widget-warn-fg, var(--consommation)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 25%, transparent); width: 34px; height: 34px; font-size: 0.75rem; }
.gbw-commit.culprit .gbw-circle  { border-color: var(--critique); background: var(--critique); color: var(--surface); width: 34px; height: 34px; font-size: 0.85rem; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ink) 30%, transparent); }
.gbw-label {
    font-size: var(--text-2xs); color: var(--muted); margin-top: 0.2rem;
    white-space: nowrap; text-align: center; max-width: 40px;
    overflow: hidden; text-overflow: ellipsis;
}
.gbw-connector {
    flex: 0 0 8px; height: 2px; background: var(--widget-neutral-border, var(--surface-sunken));
    margin-top: -8px; flex-shrink: 0;
}
.gbw-connector.active { background: var(--accent); }
.gbw-actions {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.75rem;
    align-items: center;
}
.gbw-step-info { font-size: 0.8rem; color: var(--muted); flex: 1; }
.gbw-log {
    font-size: 0.75rem; font-family: var(--font-mono); color: var(--muted);
    background: var(--production); color: var(--production); padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm); max-height: 120px; overflow-y: auto;
    line-height: 1.6; margin-bottom: 0.5rem;
}
.gbw-log .good-line  { color: var(--ok); }
.gbw-log .bad-line   { color: var(--critique); }
.gbw-log .found-line { color: var(--attention); font-weight: 700; }
.gbw-scenario {
    font-size: 0.82rem; padding: 0.65rem 0.85rem;
    background: var(--widget-warn-bg, var(--attention-fond)); border: 1.5px solid var(--attention);
    border-radius: var(--radius); margin-bottom: 0.75rem;
    line-height: 1.5; color: var(--widget-warn-fg, var(--consommation));
}
.gbw-scenario code {
    background: color-mix(in srgb, var(--ink) 7%, transparent); padding: 0.1rem 0.3rem;
    border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 0.85em;
}
.gbw-test-output {
    font-family: var(--font-mono); font-size: 0.78rem;
    padding: 0.5rem 0.75rem; border-radius: var(--radius-sm);
    border: 1.5px solid; margin-bottom: 0.6rem; line-height: 1.6;
}
.gbw-test-output.good { background: var(--widget-success-bg, var(--ok-fond)); border-color: var(--widget-success-border, color-mix(in srgb, var(--ok) 45%, var(--surface))); color: var(--widget-success-fg, var(--ok)); }
.gbw-test-output.bad  { background: var(--widget-danger-bg, var(--surface)); border-color: var(--widget-danger-border, color-mix(in srgb, var(--critique) 45%, var(--surface))); color: var(--widget-danger-fg, var(--critique)); }
.gbw-test-cmd  { color: var(--widget-fg-muted, var(--ink-muted)); margin-bottom: 0.2rem; }
.gbw-test-result-line { font-weight: 700; }
.gbw-caption {
    font-size: 0.75rem; color: var(--muted); text-align: center;
    padding-top: 0.5rem; border-top: 1px solid var(--border);
}

/* -------------------------------------------------------------------
   .grv-*  -  GitResetVisualizerWidget (--soft / --mixed / --hard)
   source : git/GitResetVisualizerWidget.js
   ------------------------------------------------------------------- */
.grv-root {
    font-family: var(--font);
    color: var(--text);
    user-select: none;
}

/* Timeline commits */
.grv-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 1.25rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
}
.grv-commit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}
.grv-commit-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2.5px solid var(--border);
    background: var(--card);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--text);
    transition: all var(--dur-base) var(--ease-standard);
    position: relative;
    z-index: 1;
}
.grv-commit-dot.head {
    border-color: var(--primary);
    background: var(--primary);
    color: var(--surface);
    box-shadow: 0 0 0 3px var(--widget-info-border, color-mix(in srgb, var(--ink) 35%, transparent));
}
.grv-commit-dot.new-commit {
    border-color: var(--ok);
    background: var(--widget-success-bg, var(--ok-fond));
    color: var(--widget-success-fg, var(--ok));
    box-shadow: 0 0 0 3px var(--widget-success-border, color-mix(in srgb, var(--ink) 35%, transparent));
}
.grv-commit-dot.faded {
    opacity: 0.3;
    border-style: dashed;
}
.grv-commit-hash {
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    color: var(--muted);
}
.grv-commit-msg {
    font-size: var(--text-2xs);
    color: var(--text-secondary, var(--muted));
    max-width: 68px;
    text-align: center;
    line-height: 1.2;
}
.grv-commit-label {
    font-size: var(--text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.1rem 0.35rem;
    border-radius: 99px;
    background: var(--widget-info-bg, var(--accent-fond));
    color: var(--primary);
}
.grv-arrow {
    width: 30px;
    height: 2px;
    background: var(--border);
    flex-shrink: 0;
    position: relative;
    top: -18px;
}
.grv-arrow::after {
    content: '';
    position: absolute;
    right: -1px;
    top: -4px;
    border-left: 7px solid var(--border);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* Zones */
.grv-zones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (max-width: 600px) {
    .grv-zones { grid-template-columns: 1fr; }
}
.grv-zone {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 0.75rem;
    transition: all var(--dur-base) var(--ease-standard);
    min-height: 110px;
}
.grv-zone-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
    font-size: 0.78rem;
    font-weight: 700;
}
.grv-zone-icon {
    font-size: 1rem;
}
.grv-zone-title { color: var(--text); }
.grv-zone-items {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-height: 50px;
}
.grv-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid;
    transition: all var(--dur-base) var(--ease-standard);
}
.grv-file-chip.modified {
    background: var(--widget-warn-bg, var(--attention-fond));
    border-color: var(--attention);
    color: var(--widget-warn-fg, var(--consommation));
}
.grv-file-chip.staged {
    background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface)));
    border-color: var(--production);
    color: var(--widget-info-fg, var(--production));
}
.grv-file-chip.committed {
    background: var(--widget-success-bg, var(--ok-fond));
    border-color: var(--ok);
    color: var(--widget-success-fg, var(--ok));
}
.grv-zone-empty {
    font-size: var(--text-xs);
    color: var(--muted);
    font-style: italic;
    padding: 0.25rem 0;
}

/* Zone highlights */
.grv-zone.highlight-kept {
    border-color: var(--ok);
    background: var(--widget-success-bg, var(--ok-fond));
}
.grv-zone.highlight-lost {
    border-color: color-mix(in srgb, var(--critique) 45%, var(--surface));
    background: var(--widget-danger-bg, var(--surface));
}
.grv-zone.highlight-neutral {
    border-color: var(--primary);
    background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface)));
}

/* Boutons d'action */
.grv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.grv-btn {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 2px solid;
    cursor: pointer;
    transition: all var(--dur-base) var(--ease-standard);
}
.grv-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.grv-btn-soft {
    background: var(--widget-info-bg, var(--accent-fond));
    border-color: var(--primary);
    color: var(--primary);
}
.grv-btn-soft:hover:not(:disabled) {
    background: var(--primary);
    color: var(--surface);
}
.grv-btn-mixed {
    background: var(--widget-warn-bg, var(--attention-fond));
    border-color: var(--attention);
    color: var(--widget-warn-fg, var(--consommation));
}
.grv-btn-mixed:hover:not(:disabled) {
    background: var(--attention);
    color: var(--surface);
}
.grv-btn-hard {
    background: var(--widget-danger-bg, var(--surface));
    border-color: var(--critique);
    color: var(--critique);
}
.grv-btn-hard:hover:not(:disabled) {
    background: var(--critique);
    color: var(--surface);
}
.grv-btn-revert {
    background: var(--widget-success-bg, var(--ok-fond));
    border-color: var(--ok);
    color: var(--ok);
}
.grv-btn-revert:hover:not(:disabled) {
    background: var(--ok);
    color: var(--surface);
}
.grv-btn-reset-ui {
    background: var(--card);
    border-color: var(--border);
    color: var(--muted);
    font-family: var(--font);
    font-size: 0.78rem;
}
.grv-btn-reset-ui:hover {
    border-color: var(--text);
    color: var(--text);
}

/* Panel d'explication */
.grv-explain {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
}
.grv-explain-title {
    font-weight: 700;
    font-family: var(--font-mono);
    margin-bottom: 0.35rem;
    font-size: 0.85rem;
}
.grv-explain.soft  { border-left-color: var(--primary); }
.grv-explain.mixed { border-left-color: var(--attention); }
.grv-explain.hard  { border-left-color: var(--critique); }
.grv-explain.revert { border-left-color: var(--ok); }
.grv-explain.initial { border-left-color: var(--border); }

@keyframes grv-pop {
    0%   { transform: scale(0.8); opacity: 0; }
    60%  { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
.grv-pop { animation: grv-pop 0.3s ease-out; }

/* -------------------------------------------------------------------
   .gcsw-*  -  GitCommitSigningWidget (signature GPG / SSH)
   source : git/GitCommitSigningWidget.js
   ------------------------------------------------------------------- */
.gcsw-root { font-family: var(--font); color: var(--text); }

/* Comparaison non signé / signé */
.gcsw-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 560px) { .gcsw-compare { grid-template-columns: 1fr; } }

.gcsw-commit-card {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.gcsw-commit-card.unsigned { border-color: var(--widget-neutral-border, var(--line-subtle)); }
.gcsw-commit-card.signed   { border-color: var(--ok); }

.gcsw-card-header {
    padding: 0.5rem 0.85rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.gcsw-commit-card.unsigned .gcsw-card-header { background: var(--widget-surface, var(--surface)); color: var(--muted); }
.gcsw-commit-card.signed   .gcsw-card-header { background: var(--widget-success-bg, var(--ok-fond)); color: var(--ok); }

.gcsw-card-body { padding: 0.75rem 0.85rem; background: var(--card); }

/* Ligne de commit style GitHub */
.gcsw-commit-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-size: 0.82rem;
    margin-bottom: 0.6rem;
}
.gcsw-avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: 700;
    flex-shrink: 0;
}
.gcsw-commit-info { flex: 1; min-width: 0; }
.gcsw-commit-msg {
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gcsw-commit-meta {
    font-size: var(--text-xs);
    color: var(--muted);
    margin-top: 0.15rem;
}

/* Badge Verified */
.gcsw-badge-row { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; }
.gcsw-badge-verified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1.5px solid var(--ok);
    background: var(--widget-success-bg, var(--ok-fond));
    color: var(--widget-success-fg, var(--ok));
    cursor: pointer;
    position: relative;
}
.gcsw-badge-unverified {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: var(--text-xs);
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    border: 1.5px solid var(--border);
    background: var(--widget-hover, transparent);
    color: var(--muted);
}
.gcsw-badge-tooltip {
    position: absolute;
    left: 50%; top: calc(100% + 6px);
    transform: translateX(-50%);
    background: var(--production);
    color: var(--surface);
    font-size: var(--text-xs);
    font-weight: 400;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    width: 220px;
    white-space: normal;
    z-index: 10;
    pointer-events: none;
    line-height: 1.4;
    display: none;
}
.gcsw-badge-verified:hover .gcsw-badge-tooltip { display: block; }

.gcsw-hash {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--accent);
    background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface)));
    padding: 0.1rem 0.3rem;
    border-radius: var(--radius-md);
}

/* Étapes de configuration */
.gcsw-steps-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}
.gcsw-steps { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }

.gcsw-step {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    transition: all var(--dur-base) var(--ease-standard);
}
.gcsw-step.done    { border-color: var(--ok); background: var(--widget-success-bg, var(--ok-fond)); }
.gcsw-step.active  { border-color: var(--primary); background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); }
.gcsw-step.pending { opacity: 0.55; }

.gcsw-step-num {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700;
    background: var(--border); color: var(--muted);
    flex-shrink: 0;
    transition: all var(--dur-base) var(--ease-standard);
}
.gcsw-step.done  .gcsw-step-num  { background: var(--ok); color: var(--surface); }
.gcsw-step.active .gcsw-step-num { background: var(--primary); color: var(--surface); }

.gcsw-step-body { min-width: 0; }
.gcsw-step-name { font-size: 0.82rem; font-weight: 600; }
.gcsw-step-cmd  {
    font-family: var(--font-mono); font-size: var(--text-xs);
    color: var(--muted); margin-top: 0.15rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gcsw-step.done .gcsw-step-cmd { color: var(--ok); }

.gcsw-step-btn {
    font-family: var(--font); font-size: 0.75rem; font-weight: 600;
    padding: 0.3rem 0.65rem;
    border: 2px solid var(--primary); border-radius: var(--radius-sm);
    background: var(--card); color: var(--primary); cursor: pointer;
    white-space: nowrap; transition: all var(--dur-fast) var(--ease-standard); flex-shrink: 0;
}
.gcsw-step-btn:hover { background: var(--primary); color: var(--surface); }

.gcsw-result-box {
    background: var(--widget-success-bg, var(--ok-fond));
    border: 2px solid var(--ok);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    display: none;
}
.gcsw-result-box.visible { display: block; }
.gcsw-result-title { font-weight: 700; color: var(--widget-success-fg, var(--ok)); margin-bottom: 0.35rem; font-size: 0.88rem; }

.gcsw-restart-btn {
    font-family: var(--font); font-size: 0.78rem; font-weight: 600;
    padding: 0.35rem 0.75rem;
    border: 2px solid var(--border); border-radius: var(--radius-sm);
    background: var(--card); color: var(--muted); cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard); margin-top: 0.6rem;
}
.gcsw-restart-btn:hover { border-color: var(--text); color: var(--text); }

/* -------------------------------------------------------------------
   .gssw-*  -  GitSecretScanningWidget
   source : git/GitSecretScanningWidget.js
   ------------------------------------------------------------------- */
.gssw-root { font-family: var(--font); color: var(--text); }

/* Terminal */
.gssw-terminal {
    background: var(--production);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid var(--production);
}
.gssw-terminal-bar {
    background: var(--production);
    padding: 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.gssw-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.gssw-dot-r { background: var(--critique); }
.gssw-dot-y { background: var(--attention); }
.gssw-dot-g { background: var(--ok); }
.gssw-term-title { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ink-muted); margin-left: 0.25rem; }

.gssw-term-body {
    padding: 0.85rem 1rem;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    line-height: 1.7;
    min-height: 120px;
}
.gssw-line { display: block; }
.gssw-line.prompt  { color: var(--ok); }
.gssw-line.output  { color: var(--production); }
.gssw-line.error   { color: var(--critique); }
.gssw-line.warning { color: var(--attention); }
.gssw-line.success { color: var(--ok); }
.gssw-line.url     { color: var(--production); text-decoration: underline; }
.gssw-line.blank   { color: transparent; user-select: none; }

/* Secret dans le diff */
.gssw-secret-highlight {
    background: var(--critique);
    color: var(--critique);
    border-radius: 2px;
    padding: 0 2px;
}

/* Phase badge */
.gssw-phase {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}
.gssw-phase.blocked  { background: var(--widget-danger-bg, var(--surface)); color: var(--critique); border: 1.5px solid var(--widget-danger-border, color-mix(in srgb, var(--critique) 45%, var(--surface))); }
.gssw-phase.resolved { background: var(--widget-success-bg, var(--ok-fond)); color: var(--ok); border: 1.5px solid var(--widget-success-border, color-mix(in srgb, var(--ok) 45%, var(--surface))); }
.gssw-phase.warning  { background: var(--widget-warn-bg, var(--attention-fond)); color: var(--consommation); border: 1.5px solid var(--widget-warn-border, var(--attention)); }
.gssw-phase.initial  { background: var(--widget-surface, var(--surface)); color: var(--muted); border: 1.5px solid var(--border); }

/* Choix de résolution */
.gssw-choices {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
}
.gssw-choice-btn {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    cursor: pointer;
    text-align: left;
    font-family: var(--font);
    transition: all var(--dur-base) var(--ease-standard);
    width: 100%;
}
.gssw-choice-btn:hover { border-color: var(--primary); background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); }
.gssw-choice-btn.danger:hover { border-color: var(--critique); background: var(--widget-danger-bg, var(--surface)); }
.gssw-choice-icon { font-size: 1.3rem; flex-shrink: 0; margin-top: 0.05rem; }
.gssw-choice-body {}
.gssw-choice-title { font-size: 0.83rem; font-weight: 700; color: var(--text); }
.gssw-choice-desc  { font-size: 0.75rem; color: var(--muted); margin-top: 0.15rem; line-height: 1.4; }

/* Résultat */
.gssw-result {
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    border: 2px solid;
}
.gssw-result.good    { background: var(--widget-success-bg, var(--ok-fond)); border-color: var(--ok); }
.gssw-result.bad     { background: var(--widget-danger-bg, var(--surface)); border-color: var(--critique); }
.gssw-result.warning { background: var(--widget-warn-bg, var(--attention-fond)); border-color: var(--attention); }
.gssw-result-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 0.35rem; }
.gssw-result.good    .gssw-result-title { color: var(--widget-success-fg, var(--ok)); }
.gssw-result.bad     .gssw-result-title { color: var(--critique); }
.gssw-result.warning .gssw-result-title { color: var(--widget-warn-fg, var(--consommation)); }

.gssw-restart-btn {
    font-family: var(--font); font-size: 0.78rem; font-weight: 600;
    padding: 0.35rem 0.75rem; margin-top: 0.7rem;
    border: 2px solid var(--border); border-radius: var(--radius-sm);
    background: var(--card); color: var(--muted); cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
}
.gssw-restart-btn:hover { border-color: var(--text); color: var(--text); }

@keyframes gssw-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.gssw-cursor { animation: gssw-blink 1s infinite; color: var(--ok); }

/* -------------------------------------------------------------------
   .gfr-*  -  GitFilterRepoWidget (reecriture d'historique)
   source : git/GitFilterRepoWidget.js
   ------------------------------------------------------------------- */
        .gfr-widget { font-family: var(--font-sans, sans-serif); display: flex; flex-direction: column; gap: 0.9rem; }
        .gfr-progress { display: flex; align-items: center; gap: 0; margin-bottom: 0.25rem; }
        .gfr-progress-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); border: 2px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); flex-shrink: 0; transition: all var(--dur-base) var(--ease-standard); }
        .gfr-progress-dot.active { background: var(--primary, var(--accent)); border-color: var(--primary, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ink) 20%, transparent); }
        .gfr-progress-dot.done { background: var(--ok); border-color: var(--ok); }
        .gfr-progress-line { flex: 1; height: 2px; background: var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); }
        .gfr-progress-line.done { background: var(--ok); }
        .gfr-step-header { display: flex; flex-direction: column; gap: 0.15rem; }
        .gfr-step-num { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, var(--production)); }
        .gfr-step-title { font-size: 0.95rem; font-weight: 700; color: var(--widget-heading, var(--production)); }
        .gfr-terminal { border-radius: var(--radius-lg); overflow: hidden; background: var(--accent); }
        .gfr-terminal-bar { display: flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.7rem; background: var(--accent); }
        .gfr-td { width: 10px; height: 10px; border-radius: 50%; }
        .gfr-td-red { background: var(--critique); }
        .gfr-td-yellow { background: var(--attention); }
        .gfr-td-green { background: var(--ok); }
        .gfr-terminal-label { margin-left: auto; font-size: var(--text-2xs); color: var(--ink-muted); font-family: var(--font-mono); }
        .gfr-terminal-body { padding: 0.7rem 1rem; }
        .gfr-cmd { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ok); white-space: pre-wrap; line-height: 1.6; }
        .gfr-cmd-prompt { color: var(--production); }
        .gfr-output { font-family: var(--font-mono); font-size: 0.77rem; color: var(--surface); margin-top: 0.5rem; white-space: pre-wrap; line-height: 1.65; border-top: 1px solid var(--line); padding-top: 0.5rem; }
        .gfr-note { padding: 0.6rem 0.8rem; background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); border: 1px solid var(--widget-info-border, color-mix(in srgb, var(--production) 14%, var(--surface))); border-left: 3px solid var(--production); border-radius: var(--radius-lg); font-size: 0.81rem; color: var(--widget-info-fg, var(--production)); line-height: 1.55; }
        .gfr-warning { padding: 0.75rem 0.9rem; background: var(--widget-danger-bg, var(--surface)); border: 1px solid var(--widget-danger-border, color-mix(in srgb, var(--critique) 45%, var(--surface))); border-left: 3px solid var(--critique); border-radius: var(--radius-lg); font-size: 0.82rem; line-height: 1.55; }
        .gfr-warning-title { font-weight: 700; color: var(--critique); margin-bottom: 0.5rem; font-size: 0.88rem; }
        .gfr-checklist { display: flex; flex-direction: column; gap: 0.35rem; }
        .gfr-check-item { display: flex; gap: 0.6rem; font-size: 0.82rem; color: var(--production); padding: 0.2rem 0; }
        .gfr-check-item span:first-child { flex-shrink: 0; }
        .gfr-force-warn { padding: 0.65rem 0.8rem; background: var(--widget-warn-bg, color-mix(in srgb, var(--consommation) 14%, var(--surface))); border: 1px solid var(--widget-warn-border, color-mix(in srgb, var(--consommation) 45%, var(--surface))); border-left: 3px solid var(--consommation); border-radius: var(--radius-lg); font-size: 0.81rem; color: var(--widget-warn-fg, var(--consommation)); line-height: 1.55; }
        .gfr-nav { display: flex; gap: 0.6rem; margin-top: 0.25rem; }
        .gfr-btn { padding: 0.4rem 1rem; border-radius: var(--radius-lg); border: 1.5px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); background: var(--bg, var(--surface)); cursor: pointer; font-size: 0.82rem; font-weight: 500; transition: all var(--dur-fast) var(--ease-standard); color: var(--text, var(--production)); }
        .gfr-btn:not([disabled]):hover { background: var(--primary, var(--accent)); color: var(--surface); border-color: var(--primary, var(--accent)); }
        .gfr-btn[disabled] { opacity: 0.35; cursor: not-allowed; }

/* -------------------------------------------------------------------
   .slt-*  -  SecretLeakTimelineWidget
   source : git/SecretLeakTimelineWidget.js
   ------------------------------------------------------------------- */
        .slt-widget { font-family: var(--font-sans, sans-serif); }
        .slt-controls { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
        .slt-btn { padding: 0.45rem 1.1rem; border-radius: var(--radius-lg); border: none; cursor: pointer; font-weight: 600; font-size: 0.85rem; transition: opacity 0.15s, transform 0.1s; }
        .slt-btn:active { transform: scale(0.97); }
        .slt-btn-play { background: var(--primary, var(--accent)); color: var(--surface); }
        .slt-btn-reset { background: var(--widget-surface, color-mix(in srgb, var(--production) 14%, var(--surface))); color: var(--text, var(--production)); border: 1px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); }
        .slt-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
        .slt-timer { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted, var(--production)); }
        .slt-timeline { position: relative; padding-left: 2.25rem; display: flex; flex-direction: column; gap: 0; }
        .slt-step { position: relative; padding-bottom: 1.1rem; opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; }
        .slt-step.visible { opacity: 1; transform: translateY(0); }
        .slt-step:last-child { padding-bottom: 0; }
        .slt-dot { position: absolute; left: -2.1rem; top: 0.55rem; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-subtle); flex-shrink: 0; box-shadow: 0 0 0 2px; }
        .slt-connector { position: absolute; left: -1.65rem; top: 1.3rem; width: 2px; bottom: 0; }
        .slt-step:last-child .slt-connector { display: none; }
        .slt-step-inner { background: var(--card, var(--surface)); border: 1px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); border-left: 3px solid; border-radius: var(--radius-lg); padding: 0.65rem 0.9rem; }
        .slt-step-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; flex-wrap: wrap; }
        .slt-step-icon { font-size: 1rem; flex-shrink: 0; }
        .slt-step-time { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 700; padding: 0.1rem 0.4rem; border-radius: var(--radius-md); color: var(--surface); white-space: nowrap; }
        .slt-step-label { font-weight: 600; font-size: 0.85rem; color: var(--widget-heading, var(--production)); }
        .slt-step-desc { font-size: 0.8rem; color: var(--muted, var(--ink-muted)); line-height: 1.55; }
        .slt-moral { margin-top: 1rem; padding: 0.8rem 1rem; background: var(--widget-warn-bg, var(--attention-fond)); border: 1px solid var(--attention); border-radius: var(--radius-lg); font-size: 0.83rem; line-height: 1.55; opacity: 0; transition: opacity 0.4s; }
        .slt-moral.visible { opacity: 1; }
        .slt-moral strong { color: var(--widget-warn-fg, var(--consommation)); }

/* -------------------------------------------------------------------
   .cicd-*  -  CICDPipelineWidget
   source : git/CICDPipelineWidget.js
   ------------------------------------------------------------------- */
.cicd-root { font-family: var(--font); }
.cicd-trigger {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    padding: 0.75rem 1rem; background: var(--bg); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 1rem;
}
.cicd-trigger label { font-size: 0.82rem; font-weight: 600; color: var(--text); }
.cicd-trigger select {
    font-family: var(--font); font-size: 0.82rem; padding: 0.35rem 0.6rem;
    border: 1.5px solid var(--control-border); border-radius: var(--radius-sm);
    background: var(--card); color: var(--text);
}
.cicd-pipeline {
    display: flex; align-items: center; gap: 0; margin-bottom: 1rem;
    overflow-x: auto; padding: 0.5rem 0;
}
@media (max-width: 640px) {
    .cicd-pipeline { flex-direction: column; align-items: stretch; gap: 0.25rem; }
    .cicd-arrow { transform: rotate(90deg); }
}
.cicd-stage {
    flex: 1; min-width: 100px; text-align: center;
    padding: 0.75rem 0.5rem; border-radius: var(--radius);
    border: 2px solid var(--border); background: var(--card);
    transition: all var(--dur-base) var(--ease-standard);
}
.cicd-stage.running { border-color: var(--attention); background: var(--widget-warn-bg, var(--attention-fond)); }
.cicd-stage.success { border-color: var(--ok); background: var(--widget-success-bg, var(--ok-fond)); }
.cicd-stage.failure { border-color: var(--critique); background: var(--widget-danger-bg, var(--surface)); }
.cicd-stage.blocked { border-color: var(--border); background: var(--bg); opacity: 0.5; }
.cicd-stage-icon { font-size: 1.3rem; margin-bottom: 0.25rem; }
.cicd-stage-name { font-size: 0.78rem; font-weight: 700; color: var(--text); }
.cicd-stage-status {
    font-size: var(--text-xs); margin-top: 0.2rem; min-height: 1.2em;
    color: var(--muted); font-family: var(--font-mono);
}
.cicd-arrow { color: var(--border); font-size: 1.2rem; padding: 0 0.25rem; flex-shrink: 0; }
.cicd-result {
    padding: 0.75rem 1rem; border-radius: var(--radius);
    font-size: 0.85rem; font-weight: 600; text-align: center; min-height: 2.5rem;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    transition: all var(--dur-base) var(--ease-standard);
}
.cicd-result.idle { background: var(--bg); border: 1px solid var(--border); color: var(--muted); }
.cicd-result.running { background: var(--widget-warn-bg, var(--attention-fond)); border: 1px solid var(--attention); color: var(--widget-warn-fg, var(--consommation)); }
.cicd-result.success { background: var(--widget-success-bg, var(--ok-fond)); border: 1px solid var(--ok); color: var(--widget-success-fg, var(--ok)); }
.cicd-result.failure { background: var(--widget-danger-bg, var(--surface)); border: 1px solid var(--critique); color: var(--widget-danger-fg, var(--critique)); }
.cicd-stage-subdesc {
    font-size: var(--text-2xs); color: var(--muted); margin-top: 0.15rem;
    font-family: var(--font); line-height: 1.2;
}
.cicd-stage.running .cicd-stage-subdesc,
.cicd-stage.success .cicd-stage-subdesc { color: inherit; opacity: 0.7; }
.cicd-detail {
    margin-bottom: 0.75rem; border-radius: var(--radius);
    border: 1.5px solid var(--border); overflow: hidden;
}
.cicd-detail-head {
    padding: 0.5rem 0.85rem; font-size: 0.82rem; font-weight: 600;
    background: var(--card); border-bottom: 1px solid var(--border);
    color: var(--text);
}
.cicd-detail-head.running { background: var(--widget-warn-bg, var(--attention-fond)); border-color: var(--widget-warn-border, var(--attention)); color: var(--widget-warn-fg, var(--consommation)); }
.cicd-detail-head.failure { background: var(--widget-danger-bg, var(--surface)); border-color: var(--widget-danger-border, color-mix(in srgb, var(--critique) 45%, var(--surface))); color: var(--widget-danger-fg, var(--critique)); }
.cicd-detail-desc {
    padding: 0.5rem 0.85rem; font-size: 0.8rem; color: var(--muted);
    background: var(--bg); line-height: 1.5;
}
.cicd-error-term {
    margin: 0; padding: 0.6rem 0.85rem;
    background: var(--production); font-family: var(--font-mono);
    font-size: var(--text-xs); line-height: 1.7; color: var(--production);
    max-height: 160px; overflow-y: auto;
}
.cicd-error-term .t-cmd  { color: var(--surface); }
.cicd-error-term .t-err  { color: var(--critique); }
.cicd-error-term .t-warn { color: var(--attention); }
.cicd-info {
    margin-top: 0.75rem; font-size: 0.75rem; color: var(--muted);
    padding: 0.5rem 0.75rem; background: var(--bg); border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary);
}
            /* (keyframe cicdSpin retiree : jamais referencee) */

/* -------------------------------------------------------------------
   .gaw-*  -  GitHubActionsWidget (anatomie YAML)
   source : git/GitHubActionsWidget.js
   ------------------------------------------------------------------- */
.gaw-root {
    font-family: var(--font);
    color: var(--text);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: stretch;
    height: 100%;
    min-height: 0;
    box-sizing: border-box;
}
@media (max-width: 700px) {
    .gaw-root { grid-template-columns: 1fr; }
}

/* Panneau YAML */
.gaw-yaml-panel {
    background: var(--production);
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--production);
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.gaw-yaml-bar {
    background: var(--production);
    padding: 0.4rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-xs);
    color: var(--production);
    font-family: var(--font-mono);
    flex: 0 0 auto;
}
.gaw-dot {
    width: 9px; height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.gaw-dot-r { background: var(--critique); }
.gaw-dot-y { background: var(--attention); }
.gaw-dot-g { background: var(--ok); }
.gaw-yaml-body {
    padding: 0.75rem 0.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.gaw-line {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.7;
    padding: 0 0.5rem;
    border-radius: var(--radius-sm);
    cursor: default;
    white-space: pre;
    color: var(--production);
    transition: background 0.15s;
}
.gaw-line.clickable {
    cursor: pointer;
}
.gaw-line.clickable:hover {
    filter: brightness(1.2);
}
.gaw-line.highlighted {
    font-weight: 600;
}

/* Panneau d'explication */
.gaw-explain-panel {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
}
.gaw-legend {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 0 0 auto;
}
.gaw-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border-radius: var(--radius-sm);
    border: 2px solid;
    cursor: pointer;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all var(--dur-fast) var(--ease-standard);
    background: var(--card);
}
.gaw-legend-item:hover { filter: brightness(0.97); }
.gaw-legend-item.active { color: var(--surface); }
.gaw-legend-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.gaw-explain-box {
    background: var(--card);
    border: 1.5px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1rem;
    font-size: 0.82rem;
    line-height: 1.55;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}
.gaw-explain-title {
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}
.gaw-hint {
    font-size: 0.75rem;
    color: var(--muted);
    font-style: italic;
}

/* -------------------------------------------------------------------
   .wts-*  -  WorkflowTriggerSimulatorWidget
   source : git/WorkflowTriggerSimulatorWidget.js
   ------------------------------------------------------------------- */
.wts { font-family: var(--font); }
.wts-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 1rem; }
@media (max-width: 640px) { .wts-grid { grid-template-columns: 1fr; } }
.wts-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.wts-panel-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.75rem; }
.wts-event-btns { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.85rem; }
.wts-event-btn { padding: 0.28rem 0.65rem; border: 1.5px solid var(--border); border-radius: 20px; background: transparent; cursor: pointer; font-size: 0.76rem; font-family: var(--font); color: var(--text); transition: all var(--dur-fast) var(--ease-standard); white-space: nowrap; }
.wts-event-btn:hover { border-color: var(--primary); color: var(--primary); }
.wts-event-btn.active { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.wts-field { margin-bottom: 0.6rem; }
.wts-field label { display: block; font-size: var(--text-xs); color: var(--muted); margin-bottom: 0.2rem; }
.wts-field input { width: 100%; padding: 0.35rem 0.5rem; border: 1px solid var(--control-border); border-radius: var(--radius-lg); background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 0.82rem; box-sizing: border-box; outline: none; }
.wts-field input:focus { border-color: var(--primary); }
.wts-note { font-size: 0.75rem; color: var(--muted); font-style: italic; margin: 0; }
.wts-wf { border: 1.5px solid var(--border); border-radius: var(--radius-lg); padding: 0.6rem 0.8rem; margin-bottom: 0.5rem; transition: all var(--dur-base) var(--ease-standard); }
.wts-wf:last-child { margin-bottom: 0; }
.wts-wf.triggered { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 7%, var(--card)); }
.wts-wf.blocked { opacity: 0.45; }
.wts-wf-top { display: flex; align-items: center; gap: 0.5rem; }
.wts-wf-name { font-family: var(--font-mono); font-size: 0.83rem; font-weight: 600; color: var(--widget-heading, var(--production)); flex: 1; }
.wts-badge { font-size: var(--text-2xs); font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 20px; }
.wts-badge.yes { background: var(--ok); color: var(--surface); }
.wts-badge.no { background: var(--widget-hover, transparent); color: var(--muted); border: 1px solid var(--border); }
.wts-wf-on { margin-top: 0.35rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); line-height: 1.7; }
.wts-wf-match { color: var(--ok); font-weight: 700; }
.wts-wf-reason { font-size: var(--text-xs); color: var(--ok); margin-top: 0.2rem; }

/* -------------------------------------------------------------------
   .jdg-*  -  JobDependencyGraphWidget
   source : git/JobDependencyGraphWidget.js
   ------------------------------------------------------------------- */
.jdg { font-family: var(--font); }
.jdg-toolbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.jdg-toolbar-label { font-size: 0.75rem; color: var(--muted); }
.jdg-select { padding: 0.3rem 0.6rem; border: 1px solid var(--control-border); border-radius: var(--radius-lg); background: var(--bg); color: var(--text); font-family: var(--font); font-size: 0.82rem; cursor: pointer; outline: none; }
.jdg-select:focus { border-color: var(--primary); }
.jdg-btn { padding: 0.3rem 0.8rem; border-radius: var(--radius-lg); border: 1px solid transparent; cursor: pointer; font-family: var(--font); font-size: 0.82rem; font-weight: 600; transition: all var(--dur-fast) var(--ease-standard); }
.jdg-btn-play { background: var(--primary); color: var(--surface); border-color: var(--primary); }
.jdg-btn-play:hover:not(:disabled) { opacity: 0.85; }
.jdg-btn-play:disabled { opacity: 0.5; cursor: default; }
.jdg-btn-reset { background: var(--widget-hover, transparent); color: var(--text); border-color: var(--border); }
.jdg-btn-reset:hover { border-color: var(--primary); }
.jdg-canvas { position: relative; padding: 1.5rem 0.5rem 1.5rem 0; display: flex; align-items: stretch; gap: 0; min-height: 140px; overflow-x: auto; }
.jdg-col { display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; padding: 0 2.5rem; position: relative; flex-shrink: 0; }
.jdg-col:first-child { padding-left: 0; }
.jdg-col:last-child { padding-right: 0; }
.jdg-job { border: 2px solid var(--border); border-radius: var(--radius-lg); padding: 0.55rem 0.85rem; background: var(--card); cursor: pointer; transition: border-color 0.2s, background 0.2s, opacity 0.2s, transform 0.15s; min-width: 120px; text-align: center; user-select: none; }
.jdg-job:hover { border-color: var(--primary); transform: translateY(-1px); }
.jdg-job.will-fail { border-color: var(--critique); border-style: dashed; }
.jdg-job.state-waiting { opacity: 0.7; }
.jdg-job.state-running { border-color: var(--attention) !important; border-style: solid !important; background: color-mix(in srgb, var(--attention) 10%, var(--card)) !important; animation: jdg-pulse 0.8s ease-in-out infinite; }
.jdg-job.state-success { border-color: var(--ok) !important; border-style: solid !important; background: color-mix(in srgb, var(--ok) 10%, var(--card)) !important; opacity: 1; }
.jdg-job.state-failed  { border-color: var(--critique) !important; border-style: solid !important; background: color-mix(in srgb, var(--critique) 10%, var(--card)) !important; opacity: 1; }
.jdg-job.state-blocked { border-color: var(--border) !important; border-style: solid !important; opacity: 0.35; cursor: default; }
@keyframes jdg-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.jdg-job-name { font-size: 0.8rem; font-weight: 700; color: var(--widget-heading, var(--production)); }
.jdg-job-runner { font-size: var(--text-2xs); color: var(--muted); margin-top: 0.15rem; }
.jdg-job-cond { font-size: var(--text-2xs); color: var(--attention); margin-top: 0.2rem; }
.jdg-job-status { font-size: var(--text-xs); color: var(--muted); margin-top: 0.25rem; min-height: 1rem; }
.jdg-svg-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.jdg-log { margin-top: 0.75rem; background: var(--production); border-radius: var(--radius-lg); padding: 0.65rem 1rem; font-family: var(--font-mono); font-size: var(--text-xs); min-height: 2.2rem; max-height: 100px; overflow-y: auto; }
.jdg-log-line { line-height: 1.75; color: var(--production); }
.jdg-log-line.run  { color: var(--attention); }
.jdg-log-line.ok   { color: var(--ok); }
.jdg-log-line.fail { color: var(--critique); }
.jdg-log-line.skip { color: var(--production); }
.jdg-hint { font-size: var(--text-xs); color: var(--muted); margin-top: 0.5rem; }

/* -------------------------------------------------------------------
   .mbw-*  -  MatrixBuilderWidget
   source : git/MatrixBuilderWidget.js
   ------------------------------------------------------------------- */
.mbw { font-family: var(--font); }
.mbw-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 660px) { .mbw-layout { grid-template-columns: 1fr; } }
.mbw-panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.mbw-panel-title { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.85rem; }
.mbw-dim { margin-bottom: 0.85rem; padding-bottom: 0.85rem; border-bottom: 1px solid var(--border); }
.mbw-dim:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.mbw-dim-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.45rem; }
.mbw-dim-key { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--widget-heading, var(--production)); flex: 1; background: transparent; border: none; outline: none; padding: 0; }
.mbw-dim-key:focus { border-bottom: 1px dashed var(--primary); }
.mbw-dim-remove { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 0.9rem; padding: 0 0.1rem; line-height: 1; }
.mbw-dim-remove:hover { color: var(--critique); }
.mbw-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.mbw-tag { display: inline-flex; align-items: center; gap: 0.25rem; background: color-mix(in srgb, var(--primary) 12%, var(--widget-hover, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); border-radius: 20px; padding: 0.15rem 0.55rem; font-size: var(--text-xs); font-family: var(--font-mono); color: var(--widget-heading, var(--production)); }
.mbw-tag-remove { background: none; border: none; cursor: pointer; padding: 0; line-height: 1; color: var(--muted); font-size: 0.75rem; }
.mbw-tag-remove:hover { color: var(--critique); }
.mbw-tag-input { border: 1px dashed var(--control-border); border-radius: 20px; padding: 0.15rem 0.5rem; font-size: var(--text-xs); font-family: var(--font-mono); background: transparent; color: var(--text); outline: none; width: 80px; }
.mbw-tag-input:focus { border-color: var(--primary); width: 110px; }
.mbw-add-dim { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.85rem; }
.mbw-btn-add { padding: 0.28rem 0.7rem; border: 1.5px dashed var(--border); border-radius: var(--radius-lg); background: transparent; color: var(--muted); cursor: pointer; font-size: 0.75rem; font-family: var(--font); transition: all var(--dur-fast) var(--ease-standard); }
.mbw-btn-add:hover { border-color: var(--primary); color: var(--primary); }
.mbw-count { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--primary); color: var(--surface); border-radius: 20px; padding: 0.2rem 0.75rem; font-size: 0.8rem; font-weight: 700; margin-bottom: 0.75rem; }
.mbw-count-sub { font-weight: 400; font-size: var(--text-xs); opacity: 0.85; }
.mbw-table-wrap { overflow-x: auto; margin-bottom: 0.85rem; }
.mbw-table { border-collapse: collapse; width: 100%; font-size: var(--text-xs); }
.mbw-table th { background: var(--widget-hover, transparent); padding: 0.35rem 0.6rem; text-align: center; border: 1px solid var(--border); font-family: var(--font-mono); font-weight: 600; color: var(--widget-heading, var(--production)); }
.mbw-table td { padding: 0.3rem 0.6rem; text-align: center; border: 1px solid var(--border); font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted); }
.mbw-table td.job-cell { background: color-mix(in srgb, var(--primary) 6%, var(--card)); color: var(--widget-heading, var(--production)); font-weight: 500; }
.mbw-yaml { background: var(--production); border-radius: var(--radius-lg); padding: 0.75rem 1rem; font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.7; overflow-x: auto; }
.mbw-yaml .y-key  { color: var(--cote); }
.mbw-yaml .y-val  { color: var(--ok); }
.mbw-yaml .y-str  { color: var(--attention); }
.mbw-yaml .y-cmmt { color: var(--ink-muted); }
.mbw-empty { color: var(--muted); font-size: 0.8rem; font-style: italic; padding: 1rem 0; }
.mbw-flat-list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.85rem; }
.mbw-job-chip { background: color-mix(in srgb, var(--primary) 10%, var(--widget-hover, transparent)); border: 1px solid color-mix(in srgb, var(--primary) 20%, var(--border)); border-radius: var(--radius-lg); padding: 0.2rem 0.55rem; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--widget-heading, var(--production)); }

/* -------------------------------------------------------------------
   .prlw-*  -  GitHubPRLifecycleWidget
   source : git/GitHubPRLifecycleWidget.js
   ------------------------------------------------------------------- */
.prlw-root {
    font-family: var(--font);
    color: var(--text);
}
.prlw-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 1.25rem;
    align-items: start;
}
@media (max-width: 720px) {
    .prlw-layout { grid-template-columns: 1fr; }
}
.prlw-state-card {
    border-radius: var(--radius);
    padding: 1.25rem 1.5rem;
    text-align: center;
    margin-bottom: 1rem;
    border: 2px solid transparent;
    transition: background 0.3s, border-color 0.3s;
}
.prlw-state-badge {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 800;
    padding: 0.35rem 1.1rem;
    border-radius: 2rem;
    color: var(--surface);
    letter-spacing: 0.03em;
    margin-bottom: 0.65rem;
}
.prlw-state-desc {
    font-size: 0.87rem;
    color: var(--muted);
    line-height: 1.5;
}
.prlw-actions { margin-bottom: 1rem; }
.prlw-actions-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.55rem;
}
.prlw-actions-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.prlw-btn {
    padding: 0.42rem 0.95rem;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--primary, var(--accent));
    color: var(--surface);
    transition: opacity 0.15s, transform 0.1s;
}
.prlw-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.prlw-btn-danger { background: var(--critique); }
.prlw-btn-reset {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: 0.78rem;
    padding: 0.32rem 0.75rem;
    margin-top: 0.5rem;
}
.prlw-success-msg {
    background: var(--widget-success-bg, var(--ok-fond));
    border: 1.5px solid var(--ok);
    border-radius: var(--radius-sm);
    padding: 0.85rem 1.1rem;
    color: var(--widget-success-fg, var(--ok));
    font-size: 0.87rem;
    font-weight: 600;
    text-align: center;
}
.prlw-timeline {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 0.7rem 0.9rem;
    max-height: 175px;
    overflow-y: auto;
}
.prlw-timeline-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.45rem;
}
.prlw-tl-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.28rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}
.prlw-tl-item:last-child { border-bottom: none; }
.prlw-tl-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.prlw-tl-time { font-size: var(--text-xs); color: var(--muted); font-family: var(--font-mono); white-space: nowrap; }
.prlw-graph-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 0.75rem 0.5rem 0.5rem;
}
.prlw-graph-title {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.5rem;
    text-align: center;
}
.prlw-graph-svg { display: block; margin: 0 auto; overflow: visible; }

/* -------------------------------------------------------------------
   .gitw-*  -  GitHubIssueTrackerWidget
   source : git/GitHubIssueTrackerWidget.js
   ------------------------------------------------------------------- */
.gitw-root {
    font-family: var(--font);
    color: var(--text);
}
.gitw-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.gitw-title {
    font-size: 1rem;
    font-weight: 700;
}
.gitw-btn {
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-sm);
    border: none;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--ok, var(--ok));
    color: var(--surface);
    transition: opacity 0.15s;
}
.gitw-btn:hover { opacity: 0.85; }
.gitw-btn-secondary {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
}
.gitw-btn-danger {
    background: var(--critique);
}
.gitw-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.gitw-select {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
}
.gitw-issue-list {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 0.75rem;
}
.gitw-issue-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    transition: background 0.15s;
}
.gitw-issue-row:last-child { border-bottom: none; }
.gitw-issue-row:hover { background: var(--bg); }
.gitw-issue-row.closed {
    opacity: 0.55;
}
.gitw-issue-row.closed .gitw-issue-title {
    text-decoration: line-through;
}
.gitw-cb {
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
    accent-color: var(--primary, var(--accent));
}
.gitw-issue-num {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--muted);
    flex-shrink: 0;
    min-width: 28px;
}
.gitw-label-badge {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 2rem;
    color: var(--surface);
    white-space: nowrap;
    flex-shrink: 0;
}
.gitw-issue-title {
    flex: 1;
    font-size: 0.85rem;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gitw-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary, var(--accent));
    color: var(--surface);
    font-size: var(--text-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gitw-avatar.empty { background: var(--border); }
.gitw-milestone-tag {
    font-size: var(--text-xs);
    font-family: var(--font-mono);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 2rem;
    padding: 0.1rem 0.45rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.gitw-empty {
    text-align: center;
    padding: 1.5rem;
    color: var(--muted);
    font-size: 0.85rem;
}
.gitw-bulk-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.85rem;
    background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface)));
    border: 1px solid var(--widget-info-border, color-mix(in srgb, var(--production) 14%, var(--surface)));
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    font-size: 0.82rem;
}
.gitw-milestones {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}
.gitw-ms-title {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
    margin-bottom: 0.6rem;
}
.gitw-ms-row {
    margin-bottom: 0.55rem;
}
.gitw-ms-row:last-child { margin-bottom: 0; }
.gitw-ms-header {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    margin-bottom: 0.2rem;
}
.gitw-ms-name { font-weight: 600; }
.gitw-ms-count { color: var(--muted); }
.gitw-ms-bar-bg {
    background: var(--border);
    border-radius: 2rem;
    height: 8px;
    overflow: hidden;
}
.gitw-ms-bar-fill {
    height: 100%;
    border-radius: 2rem;
    background: var(--ok, var(--ok));
    transition: width 0.3s;
}
.gitw-create-form {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 0.85rem 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.gitw-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.gitw-form-label {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gitw-input {
    padding: 0.38rem 0.65rem;
    border: 1px solid var(--control-border);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    background: var(--card);
    color: var(--text);
    min-width: 180px;
}
.gitw-input:focus {
    outline: 2px solid var(--primary, var(--accent));
    outline-offset: 1px;
    border-color: transparent;
}

/* -------------------------------------------------------------------
   .gkw-*  -  GitHubKanbanWidget
   source : git/GitHubKanbanWidget.js
   ------------------------------------------------------------------- */
.gkw-root {
    font-family: var(--font);
    color: var(--text);
}
.gkw-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}
.gkw-btn {
    padding: 0.38rem 0.85rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--card);
    color: var(--text);
    transition: background 0.15s;
}
.gkw-btn:hover { background: var(--bg); }
.gkw-board {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    overflow-x: auto;
}
@media (max-width: 720px) {
    .gkw-board {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .gkw-board {
        grid-template-columns: 1fr;
    }
}
.gkw-col {
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.gkw-col-header {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    flex: 0 0 auto;
}
.gkw-col-name {
    font-size: 0.82rem;
    font-weight: 700;
    white-space: nowrap;
}
.gkw-col-count {
    background: var(--border);
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: 700;
    border-radius: 2rem;
    padding: 0.1rem 0.5rem;
}
.gkw-cards {
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 60px;
    flex: 1 1 auto;
    overflow-y: auto;
}
.gkw-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.7rem;
    transition: box-shadow 0.2s, transform 0.15s;
    position: relative;
}
.gkw-card:hover {
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ink) 8%, transparent);
}
.gkw-card.moving {
    opacity: 0.4;
    transform: scale(0.97);
}
.gkw-card-num {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--muted);
    margin-bottom: 0.2rem;
}
.gkw-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 0.45rem;
    line-height: 1.3;
}
.gkw-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gkw-label-badge {
    display: inline-block;
    font-size: var(--text-2xs);
    font-weight: 700;
    padding: 0.12rem 0.45rem;
    border-radius: 2rem;
    color: var(--surface);
    white-space: nowrap;
}
.gkw-avatar {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary, var(--accent));
    color: var(--surface);
    font-size: var(--text-2xs);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gkw-avatar.empty { background: var(--border); }
.gkw-move-btns {
    display: flex;
    gap: 0.2rem;
    margin-top: 0.4rem;
}
.gkw-move-btn {
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--bg);
    font-size: var(--text-xs);
    cursor: pointer;
    color: var(--muted);
    transition: background 0.1s, color 0.1s;
}
.gkw-move-btn:hover { background: var(--primary, var(--accent)); color: var(--surface); border-color: transparent; }
.gkw-move-btn:disabled { opacity: 0.3; cursor: default; }
.gkw-move-btn:disabled:hover { background: var(--bg); color: var(--muted); border-color: var(--border); }

/* -------------------------------------------------------------------
   .grw-*  -  GitHubRoadmapWidget
   source : git/GitHubRoadmapWidget.js
   ------------------------------------------------------------------- */
.grw-root {
    font-family: var(--font);
    color: var(--text);
}
.grw-timeline-wrap {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    padding: 1rem 1.25rem;
    overflow-x: auto;
    margin-bottom: 1rem;
    position: relative;
}
.grw-svg {
    display: block;
}
.grw-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
    margin-bottom: 0.75rem;
    align-items: center;
}
.grw-legend-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.grw-legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.grw-tooltip {
    position: fixed;
    background: var(--card, var(--surface));
    border: 1px solid var(--border, var(--line-subtle));
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--ink) 12%, transparent);
    pointer-events: none;
    z-index: 9999;
    max-width: 220px;
    display: none;
}
.grw-tooltip.visible { display: block; }
.grw-tooltip-name {
    font-weight: 700;
    margin-bottom: 0.25rem;
}
.grw-tooltip-row { color: var(--muted); margin-bottom: 0.15rem; }
.grw-tooltip-pct {
    font-weight: 700;
    margin-top: 0.2rem;
}
.grw-detail {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    padding: 0.85rem 1rem;
}
.grw-detail-hidden { display: none; }
.grw-detail-title {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.grw-detail-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
.grw-issue-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.grw-issue-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
}
.grw-issue-icon { font-size: 0.75rem; }
.grw-issue-closed { text-decoration: line-through; color: var(--muted); }

/* -------------------------------------------------------------------
   .bpw-*  -  BranchProtectionWidget
   source : git/BranchProtectionWidget.js
   ------------------------------------------------------------------- */
.bpw-root { font-family: var(--font); }
.bpw-pr-header {
    background: var(--card); border: 1.5px solid var(--border);
    border-radius: var(--radius); padding: 0.75rem 1rem; margin-bottom: 0.75rem;
    display: flex; align-items: center; gap: 0.75rem;
}
.bpw-pr-badge {
    background: var(--accent); color: var(--surface); font-size: var(--text-xs); font-weight: 700;
    padding: 0.2rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.bpw-pr-title { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.bpw-rules { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.bpw-rule {
    display: grid; grid-template-columns: 1.5rem 1fr auto;
    align-items: center; gap: 0.75rem;
    padding: 0.65rem 0.85rem; border-radius: var(--radius);
    border: 1.5px solid var(--border); background: var(--card);
    transition: all var(--dur-base) var(--ease-standard);
}
.bpw-rule.ok    { border-color: var(--ok); background: var(--widget-success-bg, var(--ok-fond)); }
.bpw-rule.fail  { border-color: var(--critique); background: var(--widget-danger-bg, var(--surface)); }
.bpw-rule.running { border-color: var(--attention); background: var(--widget-warn-bg, var(--attention-fond)); }
.bpw-rule-icon  { font-size: 1rem; text-align: center; }
.bpw-rule-body  {}
.bpw-rule-name  { font-size: 0.82rem; font-weight: 700; color: var(--text); }
.bpw-rule-detail { font-size: var(--text-xs); color: var(--muted); margin-top: 0.1rem; }
.bpw-rule-action {}
.bpw-merge-btn {
    width: 100%; padding: 0.75rem; border-radius: var(--radius);
    font-size: 0.9rem; font-weight: 700; border: none; cursor: pointer;
    transition: all var(--dur-base) var(--ease-standard); margin-bottom: 0.75rem;
}
.bpw-merge-btn.locked   { background: var(--widget-surface, var(--surface-sunken)); color: var(--widget-fg-muted, var(--ink-muted)); cursor: not-allowed; }
.bpw-merge-btn.unlocked { background: var(--ok); color: var(--surface); cursor: pointer; }
.bpw-info {
    font-size: 0.78rem; color: var(--muted); padding: 0.6rem 0.85rem;
    background: var(--bg); border-radius: var(--radius-sm);
    border-left: 3px solid var(--primary); line-height: 1.5;
}

/* -------------------------------------------------------------------
   .codeow-*  -  CODEOWNERSSimulatorWidget
   source : git/CODEOWNERSSimulatorWidget.js
   ------------------------------------------------------------------- */
        .codeow-widget { display: flex; flex-direction: column; gap: 1rem; font-family: var(--font-sans, sans-serif); }
        .codeow-main { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
        @media (max-width: 680px) { .codeow-main { grid-template-columns: 1fr; } }
        .codeow-editor { display: flex; flex-direction: column; }
        .codeow-file-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.75rem; background: var(--accent); border: 1px solid var(--accent); border-bottom: none; border-radius: 6px 6px 0 0; font-family: var(--font-mono); font-size: 0.78rem; color: var(--production); }
        .codeow-textarea { width: 100%; min-height: 200px; padding: 0.75rem; font-family: var(--font-mono); font-size: 0.78rem; border: 1px solid var(--accent); border-radius: 0 0 6px 6px; background: var(--accent); color: var(--surface); resize: vertical; line-height: 1.7; outline: none; box-sizing: border-box; tab-size: 4; }
        .codeow-textarea:focus { border-color: var(--primary, var(--accent)); }
        .codeow-tester { display: flex; flex-direction: column; gap: 0.75rem; }
        .codeow-tester h4 { margin: 0; font-size: 0.9rem; color: var(--widget-heading, var(--production)); }
        .codeow-input-row { display: flex; align-items: stretch; border: 1.5px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg, var(--surface)); transition: border-color 0.15s; }
        .codeow-input-row:focus-within { border-color: var(--primary, var(--accent)); }
        .codeow-slash { display: flex; align-items: center; padding: 0 0.5rem 0 0.75rem; color: var(--muted, var(--production)); font-family: var(--font-mono); background: var(--widget-surface, var(--surface)); border-right: 1px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); font-size: 0.9rem; }
        .codeow-path-input { flex: 1; border: none; padding: 0.5rem 0.75rem; font-family: var(--font-mono); font-size: 0.83rem; outline: none; background: transparent; color: var(--text, var(--production)); }
        .codeow-result { min-height: 90px; }
        .codeow-empty { color: var(--muted, var(--production)); font-size: 0.83rem; padding: 0.5rem 0; }
        .codeow-no-match { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; background: var(--widget-danger-bg, var(--surface)); border: 1px solid var(--widget-danger-border, var(--critique-fond)); border-radius: var(--radius-lg); font-size: 0.83rem; }
        .codeow-match { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem; background: var(--widget-success-bg, var(--ok-fond)); border: 1px solid var(--widget-success-border, color-mix(in srgb, var(--ok) 45%, var(--surface))); border-radius: var(--radius-lg); }
        .codeow-match-header { display: flex; align-items: center; gap: 0.5rem; font-size: 0.83rem; }
        .codeow-reviewers { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.83rem; color: var(--widget-success-fg, var(--ok)); }
        .codeow-owner-badge { background: var(--primary, var(--accent)); color: var(--surface); padding: 0.1rem 0.5rem; border-radius: 999px; font-size: var(--text-xs); font-family: var(--font-mono); white-space: nowrap; }
        .codeow-all-matches { margin-top: 0.4rem; padding-top: 0.4rem; border-top: 1px solid var(--widget-success-border, color-mix(in srgb, var(--ok) 45%, var(--surface))); display: flex; flex-direction: column; gap: 0.2rem; }
        .codeow-all-matches small { color: var(--widget-fg-strong, var(--ink)); font-size: 0.75rem; }
        .codeow-match-row { display: flex; align-items: center; gap: 0.5rem; padding: 0.2rem 0.4rem; border-radius: var(--radius-md); opacity: 0.55; font-size: 0.78rem; }
        .codeow-match-row.winner { opacity: 1; background: color-mix(in srgb, var(--ok) 12%, transparent); font-weight: 600; }
        .codeow-match-owners { color: var(--widget-fg-strong, var(--ink)); font-family: var(--font-mono); flex: 1; }
        .codeow-winner-badge { color: var(--widget-success-fg, var(--ok)); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
        .codeow-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; font-size: 0.78rem; padding-top: 0.25rem; }
        .codeow-examples-label { color: var(--muted, var(--production)); }
        .codeow-example-btn { padding: 0.2rem 0.5rem; border: 1px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); border-radius: var(--radius-md); background: var(--bg, var(--surface)); cursor: pointer; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text, var(--production)); transition: all var(--dur-fast) var(--ease-standard); }
        .codeow-example-btn:hover { background: var(--primary, var(--accent)); color: var(--surface); border-color: var(--primary, var(--accent)); }

/* -------------------------------------------------------------------
   .dep-*  -  DependabotAlertWidget
   source : git/DependabotAlertWidget.js
   ------------------------------------------------------------------- */
        .dep-widget { font-family: var(--font-sans, sans-serif); display: flex; flex-direction: column; gap: 1rem; }
        .dep-selector { display: flex; gap: 0.4rem; flex-wrap: wrap; }
        .dep-sel-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.75rem; border: 1.5px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); border-radius: var(--radius-lg); background: var(--bg, var(--surface)); cursor: pointer; font-size: 0.8rem; font-weight: 500; transition: all var(--dur-fast) var(--ease-standard); color: var(--text, var(--production)); }
        .dep-sel-btn:hover { border-color: var(--sel-color, var(--accent)); color: var(--sel-color, var(--accent)); }
        .dep-sel-btn.active { border-color: var(--sel-color, var(--accent)); background: color-mix(in srgb, var(--sel-color, var(--accent)) 10%, var(--surface)); color: var(--sel-color, var(--accent)); font-weight: 700; }
        .dep-sel-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
        .dep-card { border: 1px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); border-radius: var(--radius-lg); overflow: hidden; }
        /* .widget-fit-body impose overflow-y:auto (defilement interne) : la specificite
           a deux classes garantit qu'elle l'emporte sur l'overflow:hidden ci-dessus. */
        .dep-card.widget-fit-body { overflow-y: auto; overflow-x: hidden; }
        .dep-card-header { padding: 0.9rem 1rem; background: var(--widget-surface, var(--surface)); border-bottom: 1px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); display: flex; flex-direction: column; gap: 0.3rem; }
        .dep-severity-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: var(--text-xs); font-weight: 700; width: fit-content; }
        .dep-card-title { font-weight: 700; font-size: 0.95rem; color: var(--widget-heading, var(--production)); }
        .dep-card-sub { font-size: 0.78rem; color: var(--muted, var(--ink-muted)); }
        .dep-card-body { padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }
        .dep-meta { display: flex; gap: 1rem; flex-wrap: wrap; }
        .dep-meta-item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; }
        .dep-meta-label { color: var(--muted, var(--ink-muted)); }
        .dep-cvss { color: var(--surface); padding: 0.1rem 0.45rem; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; }
        .dep-desc { font-size: 0.82rem; color: var(--muted, var(--production)); line-height: 1.55; margin: 0; }
        .dep-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
        .dep-action-btn { padding: 0.4rem 0.85rem; border-radius: var(--radius-lg); border: 1.5px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); background: var(--bg, var(--surface)); cursor: pointer; font-size: 0.8rem; font-weight: 500; transition: all var(--dur-fast) var(--ease-standard); color: var(--text, var(--production)); }
        .dep-action-btn:hover { background: var(--widget-surface, color-mix(in srgb, var(--production) 14%, var(--surface))); }
        .dep-action-btn.active { border-color: var(--primary, var(--accent)); background: var(--widget-info-bg, color-mix(in srgb, var(--production) 14%, var(--surface))); color: var(--primary, var(--accent)); font-weight: 700; }
        .dep-panel { padding: 0.75rem; border-radius: var(--radius-lg); border: 1px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); font-size: 0.82rem; display: flex; flex-direction: column; gap: 0.5rem; }
        .dep-panel-title { font-weight: 700; font-size: 0.85rem; }
        .dep-panel-merge { background: var(--widget-success-bg, var(--ok-fond)); border-color: var(--widget-success-border, color-mix(in srgb, var(--ok) 45%, var(--surface))); }
        .dep-panel-dismiss { background: var(--widget-danger-bg, var(--surface)); border-color: var(--widget-danger-border, color-mix(in srgb, var(--critique) 45%, var(--surface))); }
        .dep-panel-cve { background: var(--widget-surface, var(--surface)); }
        .dep-pr-card { background: var(--surface); border: 1px solid var(--widget-success-border, color-mix(in srgb, var(--ok) 45%, var(--surface))); border-radius: var(--radius-lg); padding: 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
        .dep-pr-header { display: flex; gap: 0.6rem; align-items: flex-start; }
        .dep-pr-icon { font-size: 1rem; flex-shrink: 0; }
        .dep-pr-title { font-weight: 600; font-size: 0.82rem; color: var(--widget-success-fg, var(--ok)); }
        .dep-pr-sub { font-size: var(--text-xs); color: var(--widget-fg-strong, var(--ink)); }
        .dep-pr-checks { display: flex; flex-direction: column; gap: 0.15rem; padding-left: 1.6rem; }
        .dep-pr-check { font-size: 0.75rem; color: var(--widget-fg-strong, var(--production)); }
        .dep-panel-tip { background: var(--widget-success-bg, var(--ok-fond)); border-radius: var(--radius-md); padding: 0.4rem 0.6rem; font-size: 0.77rem; color: var(--widget-success-fg, var(--ok)); }
        .dep-dismiss-options { display: flex; flex-direction: column; gap: 0.4rem; }
        .dep-dismiss-opt { display: flex; gap: 0.6rem; padding: 0.5rem 0.6rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); align-items: flex-start; }
        .dep-dismiss-opt-warn { border-color: var(--widget-warn-border, color-mix(in srgb, var(--attention) 45%, var(--surface))); background: var(--widget-warn-bg, var(--attention-fond)); }
        .dep-dismiss-opt-danger { border-color: var(--widget-danger-border, color-mix(in srgb, var(--critique) 45%, var(--surface))); background: var(--widget-danger-bg, var(--surface)); }
        .dep-dismiss-opt span { font-size: 1rem; flex-shrink: 0; }
        .dep-dismiss-opt div { font-size: 0.78rem; line-height: 1.45; color: var(--widget-fg-strong, var(--production)); }
        .dep-cve-table { width: 100%; border-collapse: collapse; }
        .dep-cve-table td { padding: 0.3rem 0.4rem; border-bottom: 1px solid var(--border, color-mix(in srgb, var(--production) 14%, var(--surface))); vertical-align: top; }
        .dep-cve-table td:first-child { color: var(--muted, var(--ink-muted)); width: 38%; font-size: 0.77rem; }
        .dep-cve-table td:last-child { font-size: 0.8rem; }

/* #################################################################### */
/* #  STATISTIQUES                                                 # */
/* #################################################################### */

/* -------------------------------------------------------------------
   .cltw-*  -  CLTWidget (loi normale / theoreme central limite)
   source : CLTPage.js
   ------------------------------------------------------------------- */
.cltw-container { display: flex; flex-direction: column; gap: 8px; font-family: inherit; color: var(--text, var(--ink)); height: 100%; box-sizing: border-box; }
.cltw-controls-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cltw-inline-label { font-size: 0.78rem; color: var(--muted, var(--ink-muted)); display: flex; align-items: center; gap: 4px; }
.cltw-inline-label span { font-weight: 700; color: var(--text, var(--ink)); min-width: 2.4em; }
.cltw-select { font-size: 0.8rem; padding: 3px 6px; border-radius: var(--radius-lg); border: 1px solid var(--border, var(--line-subtle)); background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); }
.cltw-range { width: 100px; }
.cltw-btn { font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-lg); border: 1px solid var(--primary, var(--accent)); background: var(--primary, var(--accent)); color: var(--surface); cursor: pointer; }
.cltw-btn-secondary { background: transparent; color: var(--text, var(--ink)); border-color: var(--border, var(--line-subtle)); }
.cltw-charts { display: flex; flex-wrap: wrap; gap: 10px; }
.cltw-chart-box { flex: 1; min-width: 200px; }
.cltw-chart-label { font-size: 0.75rem; color: var(--muted, var(--ink-muted)); font-weight: 600; margin-bottom: 3px; }
.cltw-svg { width: 100%; height: auto; aspect-ratio: 400 / 140; border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); background: var(--surface, var(--widget-surface, var(--surface))); display: block; }
.cltw-chart-box:nth-child(2) .cltw-svg { aspect-ratio: 400 / 190; }
.cltw-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.cltw-metric { flex: 1; min-width: 110px; border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); padding: 4px 6px; font-size: 0.78rem; background: var(--surface, var(--widget-surface, var(--surface))); }
.cltw-metric-label { display: block; font-size: var(--text-2xs); color: var(--muted, var(--ink-muted)); }
.cltw-feedback { font-size: 0.78rem; color: var(--muted, var(--ink-muted)); min-height: 1.2em; }

/* -------------------------------------------------------------------
   .ciw-*  -  ConfidenceIntervalWidget (intervalles de confiance)
   source : ConfidenceIntervalPage.js
   ------------------------------------------------------------------- */
.ciw-container { display: flex; flex-direction: column; gap: 8px; font-family: inherit; color: var(--text, var(--ink)); height: 100%; box-sizing: border-box; }
.ciw-controls-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ciw-inline-label { font-size: 0.78rem; color: var(--muted, var(--ink-muted)); display: flex; align-items: center; gap: 4px; }
.ciw-inline-label span { font-weight: 700; color: var(--text, var(--ink)); min-width: 2.4em; }
.ciw-select { font-size: 0.8rem; padding: 3px 6px; border-radius: var(--radius-lg); border: 1px solid var(--border, var(--line-subtle)); background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); }
.ciw-range { width: 100px; }
.ciw-btn { font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-lg); border: 1px solid var(--primary, var(--accent)); background: var(--primary, var(--accent)); color: var(--surface); cursor: pointer; }
.ciw-btn-secondary { background: transparent; color: var(--text, var(--ink)); border-color: var(--border, var(--line-subtle)); }
.ciw-svg { width: 100%; height: auto; aspect-ratio: 400 / 220; border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); background: var(--surface, var(--widget-surface, var(--surface))); display: block; }
.ciw-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.ciw-metric { flex: 1; min-width: 100px; border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); padding: 4px 6px; font-size: 0.78rem; background: var(--surface, var(--widget-surface, var(--surface))); }
.ciw-metric-label { display: block; font-size: var(--text-2xs); color: var(--muted, var(--ink-muted)); }
.ciw-feedback { font-size: 0.78rem; color: var(--muted, var(--ink-muted)); min-height: 1.2em; }

/* -------------------------------------------------------------------
   .bayw-*  -  ConditionalBayesWidget (probabilite conditionnelle / Bayes)
   source : ConditionalBayesPage.js
   ------------------------------------------------------------------- */
.bayw-container { display: flex; flex-direction: column; gap: 8px; font-family: inherit; color: var(--text, var(--ink)); height: 100%; box-sizing: border-box; }
.bayw-controls-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bayw-inline-label { font-size: 0.78rem; color: var(--muted, var(--ink-muted)); display: flex; align-items: center; gap: 4px; flex: 1; min-width: 180px; }
.bayw-inline-label span { font-weight: 700; color: var(--text, var(--ink)); min-width: 3.4em; }
.bayw-range { flex: 1; }
.bayw-btn { font-size: 0.8rem; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-lg); border: 1px solid var(--primary, var(--accent)); background: var(--primary, var(--accent)); color: var(--surface); cursor: pointer; }
.bayw-btn-secondary { background: transparent; color: var(--text, var(--ink)); border-color: var(--border, var(--line-subtle)); }
.bayw-svg { width: 100%; height: auto; aspect-ratio: 400 / 190; border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); background: var(--surface, var(--widget-surface, var(--surface))); display: block; }
.bayw-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
.bayw-metric { flex: 1; min-width: 90px; border: 1px solid var(--border, var(--line-subtle)); border-radius: var(--radius-lg); padding: 4px 6px; font-size: 0.78rem; background: var(--surface, var(--widget-surface, var(--surface))); }
.bayw-metric-label { display: block; font-size: var(--text-2xs); color: var(--muted, var(--ink-muted)); }
.bayw-table { width: 100%; border-collapse: collapse; font-size: 0.76rem; background: var(--surface, var(--widget-surface, var(--surface))); }
.bayw-table th, .bayw-table td { padding: 3px 6px; border: 1px solid var(--border, var(--line-subtle)); text-align: center; }
.bayw-table th { background: var(--surface2, var(--widget-surface-2, var(--surface-sunken))); font-weight: 700; }
.bayw-feedback { font-size: 0.78rem; color: var(--muted, var(--ink-muted)); min-height: 1.2em; }

/* #################################################################### */
/* #  BDD                                                          # */
/* #################################################################### */

/* -------------------------------------------------------------------
   .sqlw-*  -  SqlPlaygroundWidget (mini-SGBD en memoire)
   source : SqlPlaygroundPage.js (moteur partage createSqlEngine())
   ------------------------------------------------------------------- */
.sqlw-container { display: flex; flex-direction: column; gap: 8px; font-family: inherit; color: var(--text, var(--ink)); height: 100%; box-sizing: border-box; }
.sqlw-editor { width: 100%; min-height: 70px; resize: vertical; font-family: var(--font-mono, monospace); font-size: 0.82rem; padding: 8px; border-radius: var(--radius-lg); border: 1px solid var(--border, var(--line-subtle)); background: var(--surface, var(--widget-surface, var(--surface))); color: var(--text, var(--ink)); box-sizing: border-box; }
.sqlw-controls { display: flex; flex-wrap: wrap; gap: 8px; }
.sqlw-btn { font-size: 0.8rem; font-weight: 600; padding: 4px 12px; border-radius: var(--radius-lg); border: 1px solid var(--primary, var(--accent)); background: var(--primary, var(--accent)); color: var(--surface); cursor: pointer; }
.sqlw-btn-secondary { background: transparent; color: var(--text, var(--ink)); border-color: var(--border, var(--line-subtle)); }
.sqlw-result { font-size: 0.82rem; }
.sqlw-result-info { color: var(--muted, var(--ink-muted)); font-size: 0.76rem; margin-bottom: 4px; }
.sqlw-table-wrap { overflow-x: auto; }
.sqlw-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; background: var(--surface, var(--widget-surface, var(--surface))); }
.sqlw-table th, .sqlw-table td { padding: 4px 8px; border: 1px solid var(--border, var(--line-subtle)); text-align: left; }
.sqlw-table th { background: var(--surface2, var(--widget-surface-2, var(--surface-sunken))); font-weight: 700; }
.sqlw-empty { text-align: center; color: var(--muted, var(--ink-muted)); padding: 1rem; }
.sqlw-null { color: var(--muted, var(--ink-muted)); font-style: italic; }
.sqlw-message { padding: 6px 10px; border-radius: var(--radius-lg); font-size: 0.82rem; }
.sqlw-message-success { background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); }
.sqlw-message-error { background: color-mix(in srgb, var(--critique) 12%, transparent); color: var(--critique); }

/* #################################################################### */
/* #  DIVERS                                                      # */
/* #################################################################### */

/* -------------------------------------------------------------------
   .sl-embed-*  -  SlidesEmbed (viewer de slides integre dans une page de cours)
   source : base/SlidesEmbed.js
   ------------------------------------------------------------------- */
.sl-embed-wrap {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 2px 20px color-mix(in srgb, var(--ink) 22%, transparent);
    background: var(--ink);
}
.sl-embed-wrap iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}
.sl-embed-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--surface) 45%, transparent);
    font-size: 0.85rem;
    pointer-events: none;
    font-family: system-ui, sans-serif;
    background: var(--ink);
    transition: opacity 0.3s;
}
.sl-embed-loading.loaded { opacity: 0; pointer-events: none; }


/* =====================================================================
   PRIMITIVES PARTAGEES  .oei-*
   Un bouton, un champ, une puce, des onglets, un statut : les widgets les composent au lieu de
   redefinir les leurs. Tout passe par les jetons Signature (couleur, rayon, cible tactile 40px, focus).
   ===================================================================== */
.oei-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-h-md);
    padding: 0 var(--space-4);
    font: var(--weight-medium) var(--text-sm)/var(--leading-tight) var(--font-ui);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.oei-btn:hover:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, var(--ink) 6%, var(--surface)); }
.oei-btn:active:not(:disabled, [aria-disabled="true"]) { box-shadow: var(--shadow-inset); }
.oei-btn:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.oei-btn:disabled, .oei-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.oei-btn--primary { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }
.oei-btn--primary:hover:not(:disabled, [aria-disabled="true"]) { background: var(--accent-strong); }
.oei-btn--danger { color: var(--critique); border-color: var(--critique); }
.oei-btn--danger:hover:not(:disabled, [aria-disabled="true"]) { background: var(--critique-fond); }
.oei-btn--ghost { background: transparent; border-color: transparent; }
.oei-btn--sm { min-height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-xs); }
.oei-btn--lg { min-height: var(--control-h-lg); padding: 0 var(--space-5); font-size: var(--text-base); }
.oei-btn--icon { min-width: var(--control-h-md); padding: 0; }
.oei-btn--icon.oei-btn--sm { min-width: var(--control-h-sm); }
.oei-btn[aria-pressed="true"] { background: var(--accent-fond); border-color: var(--accent); color: var(--accent-strong); }

.oei-field {
    box-sizing: border-box;
    min-height: var(--control-h-md);
    padding: var(--space-2) var(--space-3);
    font: var(--weight-regular) var(--text-sm)/var(--leading-base) var(--font-ui);
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--control-border);
    border-radius: var(--radius-md);
}
.oei-field--mono { font-family: var(--font-mono); }
.oei-field:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.oei-field:disabled { opacity: 0.55; cursor: not-allowed; }
.oei-field[aria-invalid="true"] { border-color: var(--critique); }

.oei-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 24px;
    padding: 0 var(--space-2);
    font: var(--weight-medium) var(--text-xs)/var(--leading-tight) var(--font-ui);
    color: var(--ink);
    background: var(--surface-sunken);
    border: 1px solid var(--line-subtle);
    border-radius: var(--radius-pill);
}
button.oei-chip { cursor: pointer; }
button.oei-chip:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-ring-offset); }
.oei-chip[aria-pressed="true"], .oei-chip.is-active { color: var(--accent-strong); background: var(--accent-fond); border-color: var(--accent); }

.oei-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); border-bottom: 1px solid var(--line-subtle); }
.oei-tab {
    min-height: var(--control-h-md);
    padding: 0 var(--space-4);
    font: var(--weight-medium) var(--text-sm)/var(--leading-tight) var(--font-ui);
    color: var(--ink-muted);
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.oei-tab:hover { color: var(--ink); }
.oei-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.oei-tab:focus-visible { outline: var(--focus-ring); outline-offset: calc(var(--focus-ring-offset) * -1); }

.oei-stepper { display: inline-flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }

/* Statut : couleur + icone de forme propre + libelle (jamais la couleur seule). */
.oei-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px var(--space-2);
    font: var(--weight-medium) var(--text-xs)/var(--leading-tight) var(--font-ui);
    color: var(--inactif);
    background: var(--inactif-fond);
    border-radius: var(--radius-sm);
}
.oei-status--ok { color: var(--ok); background: var(--ok-fond); }
.oei-status--attention { color: var(--attention); background: var(--attention-fond); }
.oei-status--critique { color: var(--critique); background: var(--critique-fond); }
.oei-status--info { color: var(--cote); background: color-mix(in srgb, var(--cote) 12%, var(--surface)); }

@media (prefers-reduced-motion: reduce) {
    .oei-btn { transition: none; }
}