/*
 * Styles de la frise v3 (gantt frappe-gantt 1.2.2 en vendor local).
 * Contrat : encrage racine présent dans les DEUX palettes — base light ici,
 * dark dans le @media (prefers-color-scheme: dark) plus bas — pour rester
 * lisible standalone dans n'importe quel contexte d'affichage.
 * Tout est scopé sous .frise-viz ; les variables --g-* du vendor sont
 * redéfinies dans ce scope (son thème dark passe par html[data-theme],
 * jamais actif ici).
 */
.frise-viz {
  background: #fafafa;
  color: #18181b;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.45;
  color-scheme: light dark;
  border-radius: 12px;
  padding: 2px 6px 10px;

  --g-arrow-color: #52525b;
  --g-bar-color: #fff;
  --g-bar-border: #fff;
  --g-tick-color: #e4e4e7;
  --g-tick-color-thick: #a1a1aa;
  --g-actions-background: #f4f4f5;
  --g-border-color: #e4e4e7;
  --g-text-muted: #52525b;
  --g-text-light: #fff;
  --g-text-dark: #18181b;
  --g-progress-color: #d4d4d8;
  --g-handle-color: #3f3f46;
  --g-expected-progress: #d4d4d8;
  --g-header-background: #fafafa;
  --g-row-color: #fafafa;
  --g-row-border-color: #d4d4d8;
  --g-today-highlight: #18181b;
  --g-popup-actions: #f4f4f5;
  --g-weekend-highlight-color: #f4f4f5;
}
.frise-viz h2 { margin: 8px 0; font-size: 20px; }
.frise-viz .fz-sub { margin: 0 0 10px; font-size: 13px; color: #52525b; max-width: 1100px; }

.frise-viz .fz-read {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  background: #ffffff; border: 1px solid #e4e4e7; border-radius: 10px;
  padding: 8px 12px; margin: 0 0 10px;
  font-size: 12.5px; color: #3f3f46;
}

.frise-viz .fz-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px;
  padding: 8px 2px; border-top: 1px solid #e4e4e7; border-bottom: 1px solid #e4e4e7;
  font-size: 12px; color: #52525b;
}
.frise-viz .fz-li { display: inline-flex; align-items: center; gap: 5px; }
.frise-viz .fz-li-sep { width: 1px; height: 16px; background: #e4e4e7; }
.frise-viz .fz-sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.frise-viz .fz-calnote { margin: 8px 0 4px; font-size: 12px; color: #71717a; }

/* cartes de contexte semestre (kanban : le contenu des bandeaux v2 hors des murs) */
.frise-viz .fz-sems { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.frise-viz .fz-sem {
  flex: 1 1 300px; min-width: 260px;
  border-radius: 10px; padding: 7px 10px; color: #ffffff; font-size: 12px;
}
.frise-viz .fz-sem h4 { margin: 0 0 3px; font-size: 13px; display: flex; align-items: baseline; gap: 8px; }
.frise-viz .fz-sem .fz-st { background: #ffffff; border-radius: 5px; padding: 0 7px; font-weight: 700; font-size: 13px; }
.frise-viz .fz-sem .fz-smeta { opacity: 0.9; font-weight: 400; }
.frise-viz .fz-sem .fz-sfil { display: block; }
.frise-viz .fz-sem .fz-srythme { display: inline-block; margin-top: 3px; background: rgba(255, 255, 255, 0.16); border-radius: 6px; padding: 1px 7px; }
.frise-viz .S1c { background: #0f766e; }
.frise-viz .S2c { background: #be185d; }
.frise-viz .S3c { background: #4338ca; }
.frise-viz .S4c { background: #155e75; }
.frise-viz .S1c .fz-st { color: #0f766e; }
.frise-viz .S2c .fz-st { color: #be185d; }
.frise-viz .S3c .fz-st { color: #4338ca; }
.frise-viz .S4c .fz-st { color: #155e75; }

.frise-viz .fz-chartwrap { margin: 6px 0 2px; }
/* coussin intérieur : l'air demandé est DANS le conteneur, entre la grille et
   ses bords — le padding décale d'un bloc grille + entêtes sticky + highlights
   (même containing block), l'alignement labels↔colonnes est préservé ;
   le calcul du pas de colonnes soustrait ces 30px (frise-viz-init.js).
   border-box obligatoire : le vendor pose width:100% sur ce conteneur —
   en content-box, le padding le ferait déborder de 32px hors .fz-chartwrap */
.frise-viz .gantt-container { border: 1px solid #e4e4e7; border-radius: 10px; background: #fafafa; padding: 0 15px; box-sizing: border-box; }

/* en-têtes de grille : semaines 1→60 en bas, mois+semestre(+année) en haut */
.frise-viz .lower-text { font-size: 9.5px; font-weight: 600; fill: #71717a; color: #71717a; }
.frise-viz .upper-text { font-size: 11.5px; font-weight: 600; fill: #3f3f46; color: #3f3f46; }
.frise-viz .lower-text.fz-wk-sem { fill: #18181b; color: #18181b; font-weight: 800; }
.frise-viz .lower-text.fz-wk-sem.s1t { fill: #0f766e; color: #0f766e; }
.frise-viz .lower-text.fz-wk-sem.s2t { fill: #be185d; color: #be185d; }
.frise-viz .lower-text.fz-wk-sem.s3t { fill: #4338ca; color: #4338ca; }
.frise-viz .lower-text.fz-wk-sem.s4t { fill: #155e75; color: #155e75; }
.frise-viz .lower-text.fz-wk-stage { fill: #a1a1aa; color: #a1a1aa; text-decoration: underline; }
.frise-viz .upper-text.fz-up-yr { fill: #18181b; color: #18181b; font-weight: 800; }

/* barres notions : teinte pleine de l'axe, texte blanc (couloirs kanban).
   custom_class = UN seul token (fz-n-<axe>[-hot]) — classList.add rejette les
   espaces — donc sélecteurs d'attribut : [class*="fz-n-<axe>"] couvre les
   variantes plain et -hot. */
.frise-viz [class*="fz-n-"] .bar { rx: 6; stroke-width: 0; }
.frise-viz [class*="fz-n-"] .bar-label { fill: #ffffff; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 10px; font-weight: 600; }
.frise-viz [class*="fz-n-"] .bar-label.big { fill: #3f3f46; }
/* M15 — seconde ligne de bulle : codes compétences (fz-lbl-comp), plus petits
   et atténués pour se distinguer du titre (hérite 10px/600 blanc du
   .bar-label). Règle posée APRÈS .big : même spécificité, la dernière gagne,
   la couleur reste blanche si la lib re-jouait sa classe. Ces codes ne sont
   JAMAIS tronqués (côté init : priorité sur le titre). */
.frise-viz [class*="fz-n-"] .bar-label .fz-lbl-comp { font-size: 8.5px; font-weight: 700; opacity: 0.8; letter-spacing: 0.02em; }
.frise-viz [class*="fz-n-prog"] .bar { fill: #f97316; }
.frise-viz [class*="fz-n-web"] .bar { fill: #3b82f6; }
.frise-viz [class*="fz-n-cyber"] .bar { fill: #ef4444; }
.frise-viz [class*="fz-n-proj"] .bar { fill: #22c55e; }
.frise-viz [class*="fz-n-infra"] .bar { fill: #a855f7; }
.frise-viz [class*="-hot"] .bar { stroke: #dc2626; stroke-width: 2; }

/* barres événements : pastilles grises à liseré type (palette fw-* du source),
   token unique fz-e-<type> */
.frise-viz [class*="fz-e-"] .bar { fill: #e4e4e7; rx: 7; stroke-width: 1.5; }
/* l'ancrage du label de barre reste l'attribut start posé par decorerBarres
   (init) : sa formule de centrage suppose start, un text-anchor CSS ici
   décalerait le texte de la moitié de sa largeur */
.frise-viz [class*="fz-e-"] .bar-label { fill: #3f3f46; font-family: ui-sans-serif, system-ui, -apple-system, sans-serif; font-size: 9.5px; font-weight: 700; }
.frise-viz .fz-e-DS .bar { stroke: #f97316; }
.frise-viz .fz-e-partiel .bar { stroke: #71717a; }
.frise-viz .fz-e-E5 .bar { stroke: #0d9488; }
.frise-viz .fz-e-E3 .bar, .frise-viz .fz-e-E2 .bar { stroke: #2563eb; }
.frise-viz .fz-e-conseil .bar { stroke: #a1a1aa; }
.frise-viz .fz-e-E6 .bar { stroke: #16a34a; }
.frise-viz .fz-e-depStage .bar, .frise-viz .fz-e-examen .bar { stroke: #a1a1aa; }
.frise-viz .fz-e-stage .bar { fill: #f4f4f5; stroke: #71717a; stroke-dasharray: 4 3; }

/* flèches « requiert » (lecture séquence : message du prérequis vers le dépendant) */
.frise-viz .gantt .arrow { stroke: #52525b; stroke-width: 1.4; }

/* bande bonus (backlog optionnel) */
.frise-viz .fz-bonus { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 10px 0 0; }
.frise-viz .fz-bonus-l { font-size: 11px; color: #a1a1aa; font-weight: 700; letter-spacing: 0.03em; }
.frise-viz .fz-bn {
  font-size: 11px; color: #854d0e; background: #fefce8;
  border: 1px dashed #eab308; border-radius: 999px; padding: 2px 9px; cursor: pointer;
}
.frise-viz .fz-bn-off { background: #f4f4f5; border-color: #d4d4d8; color: #71717a; }

.frise-viz .fz-note { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #e4e4e7; font-size: 12px; color: #71717a; }

/* M16 — bloc pied de page « compétences visées » : grille fluide (auto-fill,
   aucune largeur fixe — rien ne déborde hors du conteneur) ; chips notions
   = mécanique data-fz-open du montage → modal. Les .fz-chip sont déjà
   encrées aux deux palettes plus bas. */
.frise-viz .fz-comps { margin: 14px 0 0; padding-top: 10px; border-top: 1px solid #e4e4e7; }
.frise-viz .fz-comps h4 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #a1a1aa; }
.frise-viz .fz-comps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; }
.frise-viz .fz-comp { min-width: 0; background: #ffffff; border: 1px solid #e4e4e7; border-radius: 10px; padding: 7px 10px 8px; }
.frise-viz .fz-comp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin-bottom: 4px; }
.frise-viz .fz-comp-code { font-weight: 800; font-size: 12.5px; color: #18181b; }
.frise-viz .fz-comp-lbl { flex: 1 1 auto; font-weight: 600; font-size: 12px; color: #3f3f46; }
.frise-viz .fz-comp-n { font-size: 10.5px; color: #a1a1aa; white-space: nowrap; }
/* compétences de la modal : libellés officiels longs → ligne pleine largeur */
.frise-viz .fz-meta .fz-wide { grid-column: 1 / -1; }

/* tooltip au survol (popup frappe, réencré) */
.frise-viz .gantt-container .popup-wrapper {
  background: #ffffff; border: 1px solid #d4d4d8; border-radius: 10px;
  box-shadow: 0 10px 24px -6px rgba(24, 24, 27, 0.25); padding: 10px 12px; max-width: 380px;
}
.frise-viz .popup-wrapper .title { color: #18181b; font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.frise-viz .popup-wrapper .subtitle { color: #3f3f46; font-size: 11.5px; margin-bottom: 4px; }
.frise-viz .popup-wrapper .details { color: #52525b; font-size: 11px; line-height: 1.4; }

/* modal fiche activité : ouvre au clic sur toute activité, ferme par ✕ / clic extérieur / Échap */
.frise-viz .fz-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(24, 24, 27, 0.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 4vh 16px;
}
.frise-viz .fz-modal {
  background: #ffffff; color: #18181b; border: 1px solid #d4d4d8; border-radius: 14px;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.45);
  width: 640px; max-width: 94vw; max-height: 86vh; overflow: auto; padding: 18px 20px 16px;
}
.frise-viz .fz-modal-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.frise-viz .fz-modal-head h3 { margin: 0; font-size: 16.5px; line-height: 1.3; flex: 1; }
.frise-viz .fz-modal-close {
  flex: none; border: 1px solid #d4d4d8; background: #f4f4f5; color: #3f3f46;
  border-radius: 8px; width: 28px; height: 28px; font-size: 14px; line-height: 1; cursor: pointer;
}
.frise-viz .fz-modal-close:hover { background: #e4e4e7; }
.frise-viz .fz-badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 2px 0 10px; }
.frise-viz .fz-badge {
  font-size: 10.5px; font-weight: 700; border-radius: 5px; padding: 1px 8px;
  background: #f4f4f5; color: #3f3f46; border: 1px solid #e4e4e7;
}
.frise-viz .fz-badge.ax-prog { background: #fff7ed; color: #c2410c; border-color: #f9731659; }
.frise-viz .fz-badge.ax-web { background: #eff6ff; color: #1d4ed8; border-color: #3b82f659; }
.frise-viz .fz-badge.ax-cyber { background: #fef2f2; color: #b91c1c; border-color: #ef444459; }
.frise-viz .fz-badge.ax-proj { background: #f0fdf4; color: #15803d; border-color: #22c55e59; }
.frise-viz .fz-badge.ax-infra { background: #faf5ff; color: #7e22ce; border-color: #a855f759; }
.frise-viz .fz-badge.niv4 { background: #fff7ed; color: #9a3412; border-color: #f9731659; }
.frise-viz .fz-badge.blk { background: #fef2f2; color: #dc2626; border-color: #dc262680; font-weight: 800; }
.frise-viz .fz-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; margin: 0 0 10px; padding: 8px 10px; background: #fafafa; border: 1px solid #e4e4e7; border-radius: 8px; font-size: 12px; }
.frise-viz .fz-meta div { min-width: 0; }
.frise-viz .fz-meta dt { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #a1a1aa; margin: 0; }
.frise-viz .fz-meta dd { margin: 0; color: #3f3f46; font-weight: 600; }
.frise-viz .fz-sec { margin: 10px 0 0; font-size: 12.5px; }
.frise-viz .fz-sec h5 { margin: 0 0 3px; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #a1a1aa; }
.frise-viz .fz-sec p { margin: 0; color: #3f3f46; }
.frise-viz .fz-sec .fz-refsdet { color: #52525b; font-size: 11.5px; }
.frise-viz .fz-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.frise-viz .fz-chip {
  border: 1px solid #d4d4d8; background: #f4f4f5; color: #3f3f46;
  border-radius: 999px; padding: 1px 9px; font-size: 11px; cursor: pointer; text-align: left;
}
.frise-viz .fz-chip:hover { border-color: #a1a1aa; background: #e4e4e7; }
.frise-viz .fz-chip-entry { border-style: dashed; color: #15803d; background: #f0fdf4; border-color: #22c55e80; cursor: default; }
.frise-viz .fz-chip-ext { border-style: dashed; color: #52525b; cursor: default; }

/* pastilles de légende (échantillons exacts du rail corrigé) */
.frise-viz .fz-w {
  display: inline-flex; flex-direction: column; align-items: center;
  min-width: 26px; padding: 2px 4px 1px;
  background: #f4f4f5; color: #3f3f46;
  border: 1px solid #e4e4e7; border-radius: 6px;
  font-size: 11px; font-weight: 600; line-height: 1.1;
}
.frise-viz .fz-w em { font-style: normal; font-weight: 500; font-size: 8.5px; color: #71717a; }
.frise-viz .fz-pil-DS { border-color: #f97316; background: #fff7ed; }
.frise-viz .fz-pil-DS em { color: #c2410c; }
.frise-viz .fz-pil-E5 { border-color: #0d9488; background: #f0fdfa; }
.frise-viz .fz-pil-E5 em { color: #0f766e; }
.frise-viz .fz-pil-nat { border-color: #2563eb; background: #eff6ff; }
.frise-viz .fz-pil-nat em { color: #1d4ed8; }
.frise-viz .fz-pil-E6 { border-color: #16a34a; background: #f0fdf4; }
.frise-viz .fz-pil-E6 em { color: #15803d; }
.frise-viz .fz-pil-blk { border-color: #dc2626; background: #fef2f2; }
.frise-viz .fz-pil-blk em { color: #dc2626; font-weight: 700; }
.frise-viz .sw-s1 { background: #0f766e; }
.frise-viz .sw-s2 { background: #be185d; }
.frise-viz .sw-s3 { background: #4338ca; }
.frise-viz .sw-s4 { background: #155e75; }
.frise-viz .sw-ax-prog { background: #f97316; }
.frise-viz .sw-ax-web { background: #3b82f6; }
.frise-viz .sw-ax-cyber { background: #ef4444; }
.frise-viz .sw-ax-proj { background: #22c55e; }
.frise-viz .sw-ax-infra { background: #a855f7; }
.frise-viz .sw-evt { background: #e4e4e7; border: 1px solid #a1a1aa; }

/* ==================== THÈME SOMBRE (préférence système, aucun JS) ==================== */
@media (prefers-color-scheme: dark) {
  .frise-viz { background: #18181b; color: #e4e4e7; }
  /* les 19 variables --g-* du vendor réencrées en dark, au même titre que la
     base light — le mécanisme html[data-theme] du vendor est inopérant ici
     (jamais posé par la page) ; sans ce bloc, grid-rows/header/ticks restent clairs */
  .frise-viz {
    --g-arrow-color: #a1a1aa;
    --g-bar-color: #27272a;
    --g-bar-border: #3f3f46;
    --g-tick-color: #27272a;
    --g-tick-color-thick: #52525b;
    --g-actions-background: #27272a;
    --g-border-color: #3f3f46;
    --g-text-muted: #a1a1aa;
    --g-text-light: #18181b;
    --g-text-dark: #f4f4f5;
    --g-progress-color: #3f3f46;
    --g-handle-color: #d4d4d8;
    --g-expected-progress: #52525b;
    --g-header-background: #18181b;
    --g-row-color: #18181b;
    --g-row-border-color: #3f3f46;
    --g-today-highlight: #e4e4e7;
    --g-popup-actions: #27272a;
    --g-weekend-highlight-color: #27272a;
  }
  .frise-viz .fz-sub { color: #a1a1aa; }
  .frise-viz .fz-read { background: #1c1c1f; border-color: #3f3f46; color: #d4d4d8; }
  .frise-viz .fz-legend { color: #a1a1aa; border-top-color: #3f3f46; border-bottom-color: #3f3f46; }
  .frise-viz .fz-li-sep { background: #3f3f46; }
  .frise-viz .fz-calnote { color: #a1a1aa; }

  .frise-viz .gantt-container { border-color: #3f3f46; background: #18181b; }
  .frise-viz .lower-text { fill: #71717a; color: #71717a; }
  .frise-viz .upper-text { fill: #d4d4d8; color: #d4d4d8; }
  .frise-viz .lower-text.fz-wk-sem { fill: #e4e4e7; color: #e4e4e7; }
  .frise-viz .lower-text.fz-wk-sem.s1t { fill: #2dd4bf; color: #2dd4bf; }
  .frise-viz .lower-text.fz-wk-sem.s2t { fill: #f472b6; color: #f472b6; }
  .frise-viz .lower-text.fz-wk-sem.s3t { fill: #a5b4fc; color: #a5b4fc; }
  .frise-viz .lower-text.fz-wk-sem.s4t { fill: #67e8f9; color: #67e8f9; }
  .frise-viz .lower-text.fz-wk-stage { fill: #71717a; color: #71717a; }
  .frise-viz .upper-text.fz-up-yr { fill: #ffffff; color: #ffffff; }

  .frise-viz [class*="fz-n-"] .bar-label.big { fill: #d4d4d8; }
  .frise-viz [class*="fz-e-"] .bar { fill: #27272a; }
  .frise-viz [class*="fz-e-"] .bar-label { fill: #d4d4d8; }
  .frise-viz .fz-e-DS .bar { stroke: #f97316; }
  .frise-viz .fz-e-stage .bar { fill: #27272a; stroke: #a1a1aa; }
  .frise-viz .gantt .arrow { stroke: #a1a1aa; }

  .frise-viz .fz-bonus-l { color: #71717a; }
  .frise-viz .fz-bn { color: #facc15; background: #eab3081a; border-color: #eab30880; }
  .frise-viz .fz-bn-off { background: #27272a; border-color: #52525b; color: #a1a1aa; }

  .frise-viz .fz-note { color: #a1a1aa; border-top-color: #3f3f46; }

  .frise-viz .fz-comps { border-top-color: #3f3f46; }
  .frise-viz .fz-comp { background: #1c1c1f; border-color: #3f3f46; }
  .frise-viz .fz-comp-code { color: #f4f4f5; }
  .frise-viz .fz-comp-lbl { color: #d4d4d8; }
  .frise-viz .fz-comp-n { color: #71717a; }

  .frise-viz .gantt-container .popup-wrapper { background: #1c1c1f; border-color: #52525b; box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.7); }
  .frise-viz .popup-wrapper .title { color: #f4f4f5; }
  .frise-viz .popup-wrapper .subtitle { color: #d4d4d8; }
  .frise-viz .popup-wrapper .details { color: #a1a1aa; }

  .frise-viz .fz-modal { background: #1c1c1f; color: #e4e4e7; border-color: #52525b; }
  .frise-viz .fz-modal-close { background: #27272a; color: #d4d4d8; border-color: #52525b; }
  .frise-viz .fz-modal-close:hover { background: #3f3f46; }
  .frise-viz .fz-badge { background: #27272a; color: #d4d4d8; border-color: #3f3f46; }
  .frise-viz .fz-badge.ax-prog { background: #f973161f; color: #fdba74; border-color: #f9731666; }
  .frise-viz .fz-badge.ax-web { background: #3b82f61f; color: #93c5fd; border-color: #3b82f666; }
  .frise-viz .fz-badge.ax-cyber { background: #ef44441f; color: #f87171; border-color: #ef444466; }
  .frise-viz .fz-badge.ax-proj { background: #22c55e1f; color: #4ade80; border-color: #22c55e66; }
  .frise-viz .fz-badge.ax-infra { background: #a855f71f; color: #c084fc; border-color: #a855f766; }
  .frise-viz .fz-badge.niv4 { background: #f973161f; color: #fdba74; border-color: #f9731666; }
  .frise-viz .fz-badge.blk { background: #dc262633; color: #f87171; border-color: #dc262680; }
  .frise-viz .fz-meta { background: #18181b; border-color: #3f3f46; }
  .frise-viz .fz-meta dd { color: #d4d4d8; }
  .frise-viz .fz-sec p { color: #d4d4d8; }
  .frise-viz .fz-sec .fz-refsdet { color: #a1a1aa; }
  .frise-viz .fz-chip { background: #27272a; color: #d4d4d8; border-color: #52525b; }
  .frise-viz .fz-chip:hover { background: #3f3f46; border-color: #71717a; }
  .frise-viz .fz-chip-entry { background: #22c55e1f; color: #4ade80; border-color: #22c55e66; }
  .frise-viz .fz-chip-ext { color: #a1a1aa; }

  .frise-viz .fz-w { background: #27272a; color: #d4d4d8; border-color: #52525b; }
  .frise-viz .fz-w em { color: #a1a1aa; }
  .frise-viz .fz-pil-DS { border-color: #f97316; background: #f973161f; }
  .frise-viz .fz-pil-DS em { color: #fdba74; }
  .frise-viz .fz-pil-E5 { border-color: #2dd4bf; background: #2dd4bf1f; }
  .frise-viz .fz-pil-E5 em { color: #5eead4; }
  .frise-viz .fz-pil-nat { border-color: #60a5fa; background: #3b82f61f; }
  .frise-viz .fz-pil-nat em { color: #93c5fd; }
  .frise-viz .fz-pil-E6 { border-color: #4ade80; background: #22c55e1f; }
  .frise-viz .fz-pil-E6 em { color: #86efac; }
  .frise-viz .fz-pil-blk { border-color: #f87171; background: #dc262626; }
  .frise-viz .fz-pil-blk em { color: #f87171; }
}

/* ==================== APERÇUS — radar de compétences + graphe de parcours (style 42) ==================== */
/*
 * Sections sœurs HORS du scope .frise-viz (posées après le conteneur de la
 * frise) : encrage racine propre dans les DEUX palettes — base light ici,
 * dark dans le bloc media query en fin de fichier (append, existant intouché).
 * Le canvas ne suit pas la cascade (couleurs figées au tracé) : radar-viz.js
 * et graphe-viz.js relisent --apx-probe et se re-tracent quand le thème bascule
 * (mutation du style #fk-theme-style posé par frise-theme.js, ou préférence
 * système) — tout le reste (cartes, anneaux SVG, tooltip vis) est du DOM stylé
 * ici, re-thémé automatiquement par la cascade.
 */
.apx-viz {
  margin: 26px 2px 0;
  padding: 0 4px 8px;
  --apx-probe: light;
  --apx-card-bg: #ffffff;
  --apx-border: #e4e4e7;
  --apx-text: #18181b;
  --apx-muted: #71717a;
  --apx-fond: #3f3f46;
  --apx-accent: #2bbfb3;
}
.apx-viz h2 { margin: 8px 0 4px; font-size: 19px; color: var(--apx-text); }
.apx-viz .apx-note { margin: 0 0 10px; font-size: 13px; color: var(--apx-muted); max-width: 1100px; }
.apx-viz .apx-card { background: var(--apx-card-bg); border: 1px solid var(--apx-border); border-radius: 12px; padding: 12px 14px 10px; }
.apx-viz .apx-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 2px 0 8px; }
.apx-viz .apx-viewtitle { font-size: 12.5px; font-weight: 600; color: var(--apx-muted); }
.apx-viz .apx-back {
  border: 1px solid var(--apx-border); background: transparent; color: var(--apx-muted);
  border-radius: 8px; padding: 3px 10px; font-size: 12px; cursor: pointer;
}
.apx-viz .apx-back:hover { background: var(--apx-fond); color: #ffffff; }

.apx-viz .apx-canvas-wrap { position: relative; height: 380px; max-width: 640px; margin: 0 auto; }
.apx-viz .apx-canvas-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.apx-viz .apx-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px;
  margin-top: 10px; font-size: 11.5px; color: var(--apx-muted);
}

@media (prefers-color-scheme: dark) {
  .apx-viz {
    --apx-probe: dark;
    --apx-card-bg: #1c1c1f;
    --apx-border: #3f3f46;
    --apx-text: #e4e4e7;
    --apx-muted: #a1a1aa;
    --apx-fond: #27272a;
    --apx-accent: #2dd4bf;
  }
}