/* ===========================================================================
   Modales — refonte premium institutional
   Override massif des styles hérités de styles.css
   ========================================================================= */

/* ----- OVERLAY (commun à toutes les modales) ----- */
[class*="-modal-overlay"] {
  position: fixed !important;
  inset: 0 !important;
  z-index: 1000 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  background: color-mix(in oklch, oklch(15% 0.02 263) 65%, transparent) !important;
  backdrop-filter: blur(10px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(140%) !important;
  padding: var(--space-4) !important;
  animation: modal-overlay-in var(--dur-slow) var(--ease-out);
}
[class*="-modal-overlay"].active,
[class*="-modal-overlay"][style*="display: flex"] {
  display: flex !important;
}

@keyframes modal-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ----- MODAL CARD (container) ----- */
[class*="-modal-overlay"] > [class*="-modal"]:not([class*="overlay"]):not([class*="header"]):not([class*="content"]):not([class*="close"]):not([class*="filter"]):not([class*="actions"]),
.niveau-modal,
.radar-modal,
.historique-modal,
.compare-modal,
.apprenants-modal,
.tableau-bord-modal,
.pdf-config-modal,
.evolution-modal,
.dashboard-individuel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: 980px !important;
  width: 100% !important;
  max-height: 92vh !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  animation: modal-card-in var(--dur-slow) var(--ease-out);
  font-family: var(--font-body);
}
.dashboard-individuel { max-width: 1100px !important; }
.radar-modal { max-width: 1100px !important; }
.compare-modal { max-width: 1100px !important; }
.apprenants-modal,
.tableau-bord-modal { max-width: 1100px !important; }

/* ----- HEADER ----- */
[class*="-modal-header"] {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-4) !important;
  padding: var(--space-5) var(--space-6) !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-raised) !important;
  flex-shrink: 0 !important;
}
[class*="-modal-header"] h2,
[class*="-modal-header"] h3 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-lg) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
  color: var(--text-strong) !important;
  margin: 0 !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-strong) !important;
}

/* Bouton de fermeture */
[class*="-modal-close"],
.modal-close,
button[onclick*="close"][aria-label*="Fermer"],
button[onclick*="close"][aria-label*="ermer"] {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  font-size: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--dur-fast) var(--ease-out) !important;
  padding: 0 !important;
  flex-shrink: 0;
}
[class*="-modal-close"]:hover,
.modal-close:hover {
  background: var(--surface-2) !important;
  color: var(--danger) !important;
  border-color: var(--danger) !important;
}

/* ----- CONTENT (scrollable body) ----- */
[class*="-modal-content"],
.niveau-modal-content,
.radar-modal-content,
.historique-modal-content,
.apprenants-modal-content,
.tableau-bord-modal-content,
.pdf-config-modal-content,
.evolution-modal-content,
.dashboard-individuel-content {
  padding: var(--space-6) !important;
  overflow-y: auto !important;
  flex: 1 !important;
  background: var(--surface) !important;
  color: var(--text);
}

/* ----- TYPOGRAPHIE INTERNE ----- */
[class*="-modal"] h3,
[class*="-modal"] h4 {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  color: var(--text-strong) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-strong) !important;
}
[class*="-modal"] p {
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}
[class*="-modal"] label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

/* ----- FORMS ----- */
[class*="-modal"] input[type="text"],
[class*="-modal"] input[type="email"],
[class*="-modal"] input[type="date"],
[class*="-modal"] input[type="number"],
[class*="-modal"] input[type="search"],
[class*="-modal"] input[type="url"],
[class*="-modal"] textarea,
[class*="-modal"] select {
  width: 100%;
  padding: 0.7rem 0.9rem !important;
  font-family: var(--font-body) !important;
  font-size: var(--fs-sm) !important;
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  transition: border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out) !important;
}
[class*="-modal"] input:focus,
[class*="-modal"] textarea:focus,
[class*="-modal"] select:focus {
  outline: none !important;
  border-color: var(--accent) !important;
  box-shadow: var(--shadow-focus) !important;
}
[class*="-modal"] textarea {
  min-height: 80px;
  resize: vertical;
  line-height: var(--lh-relaxed);
}

/* Buttons dans les modales — réutiliser les classes .btn */
[class*="-modal"] button.btn,
[class*="-modal"] .btn {
  font-family: var(--font-body);
  letter-spacing: 0.01em;
}

/* Buttons héritage (sans .btn) — minimum décent */
[class*="-modal"] button:not(.btn):not([class*="close"]):not([class*="niveau-btn"]):not([class*="mode-rapide-btn"]):not([class*="-tab"]) {
  padding: 0.5rem 1rem;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
[class*="-modal"] button:not(.btn):not([class*="close"]):hover {
  background: var(--surface-2);
  border-color: var(--border-hover);
}

/* ----- RADAR MODAL — chart + legend ----- */
.radar-chart-container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: var(--space-4) !important;
  padding: var(--space-5) !important;
  background: var(--bg-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: var(--space-5);
}

.radar-svg {
  max-width: 100% !important;
  height: auto !important;
  filter: drop-shadow(0 1px 0 oklch(100% 0 0 / 0.5));
}

/* SVG : neutraliser les couleurs vives, utiliser les tokens */
.radar-svg circle,
.radar-svg line {
  stroke: var(--border-strong) !important;
}
.radar-svg .grid-line { stroke: var(--border) !important; opacity: 0.6; }
.radar-svg .axis-line { stroke: var(--border-strong) !important; }
.radar-svg .axis-label,
.radar-svg text {
  fill: var(--text) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.radar-svg .level-label {
  fill: var(--text-subtle) !important;
  font-size: 10px !important;
}
/* Polygone "niveau requis" : accent UE, contour seul */
.radar-svg .polygon-required,
.radar-svg .required-polygon,
.radar-svg polygon[fill*="rgba(102"],
.radar-svg polygon[stroke="#3182ce"] {
  fill: oklch(36% 0.18 263 / 0.12) !important;
  stroke: var(--accent) !important;
  stroke-width: 2 !important;
}
[data-theme='dark'] .radar-svg .polygon-required,
[data-theme='dark'] .radar-svg polygon[stroke="#3182ce"] {
  fill: oklch(78% 0.12 263 / 0.18) !important;
  stroke: var(--accent) !important;
}
/* Polygone "niveau acquis" : highlight UE jaune */
.radar-svg .polygon-acquired,
.radar-svg .acquired-polygon,
.radar-svg polygon[fill*="rgba(72,187"],
.radar-svg polygon[stroke="#48bb78"] {
  fill: oklch(85% 0.16 90 / 0.28) !important;
  stroke: oklch(72% 0.16 90) !important;
  stroke-width: 2 !important;
}
/* Polygone "auto-évaluation" : accent secondaire turquoise discret */
.radar-svg .polygon-autoeval,
.radar-svg polygon[stroke="#9f7aea"] {
  fill: oklch(72% 0.12 200 / 0.18) !important;
  stroke: oklch(60% 0.12 200) !important;
  stroke-width: 2 !important;
  stroke-dasharray: 4 3 !important;
}

/* Légende du radar */
.radar-legend {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-4) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-pill) !important;
}
.radar-legend-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.02em !important;
  color: var(--text-muted) !important;
  font-weight: 500;
}
.radar-legend-line {
  width: 24px;
  height: 3px;
  border-radius: 2px;
}
.radar-legend-line.requis { background: var(--accent) !important; }
.radar-legend-line.acquis { background: oklch(72% 0.16 90) !important; }
.radar-legend-line.autoeval { background: oklch(60% 0.12 200) !important; }

/* Sélection bar (radar mode) */
.radar-selection-bar {
  position: fixed !important;
  bottom: 16px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: var(--space-3) var(--space-4) !important;
  z-index: 500 !important;
  min-width: min(640px, 95vw) !important;
  display: none;
}
.radar-selection-bar.active { display: block !important; }
.radar-bar-row {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-3) !important;
  flex-wrap: wrap;
}
.radar-bar-row + .radar-bar-row {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* Mode rapide buttons (1-2-3-4 par SFC) */
.mode-rapide-btn,
.niveau-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-muted) !important;
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all var(--dur-fast) var(--ease-out) !important;
  padding: 0 !important;
}
.mode-rapide-btn:hover,
.niveau-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
  background: var(--accent-soft) !important;
}
.mode-rapide-btn.selected,
.mode-rapide-btn.active,
.niveau-btn.selected,
.niveau-btn.active {
  background: var(--accent) !important;
  color: var(--accent-fg) !important;
  border-color: var(--accent) !important;
}

/* Priority summary / indicators */
.priority-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-3) !important;
  padding: var(--space-4) !important;
  background: var(--bg-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--space-4) !important;
}
.priority-indicator {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-2) !important;
  padding: 0.4rem 0.8rem !important;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--radius-pill) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}
.priority-indicator.priority-high {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: oklch(70% 0.1 25) !important;
}
.priority-indicator.priority-warn,
.priority-indicator.priority-medium {
  background: var(--warning-soft) !important;
  color: oklch(50% 0.14 70) !important;
  border-color: oklch(75% 0.1 70) !important;
}
.priority-indicator.priority-ok,
.priority-indicator.priority-reached {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border-color: oklch(70% 0.1 145) !important;
}
.priority-indicator.priority-over,
.priority-indicator.priority-exceed {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: var(--accent-line) !important;
}

/* Plan d'actions */
.radar-plan-actions {
  background: var(--bg-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-5) !important;
  margin-top: var(--space-5) !important;
}
.plan-action-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  margin-bottom: var(--space-3) !important;
}
.plan-action-item .sfc-name {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--text-strong) !important;
  font-size: var(--fs-md);
  margin-bottom: var(--space-2) !important;
  background: none !important;
}

/* Signatures */
.radar-signatures {
  margin-top: var(--space-5) !important;
  padding: var(--space-5) !important;
  background: var(--bg-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}
.signatures-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
  gap: var(--space-4) !important;
}
.signature-block {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  transition: border-color var(--dur) var(--ease-out);
}
.signature-block.signed {
  border-color: var(--success) !important;
  background: var(--success-soft) !important;
}
.signature-info {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
  letter-spacing: 0.02em;
}

/* Toggle switch (mode rapide / détaillé) */
.toggle-switch {
  position: relative !important;
  display: inline-block !important;
  width: 44px !important;
  height: 24px !important;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.toggle-slider {
  position: absolute !important;
  inset: 0 !important;
  background: var(--surface-3) !important;
  border-radius: 24px !important;
  cursor: pointer !important;
  transition: background var(--dur) var(--ease-out) !important;
  border: 1px solid var(--border);
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: var(--surface);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease-out);
  box-shadow: var(--shadow-sm);
}
.toggle-switch input:checked + .toggle-slider {
  background: var(--accent) !important;
  border-color: var(--accent);
}
.toggle-switch input:checked + .toggle-slider::before {
  transform: translateX(20px);
}

/* ----- HISTORIQUE / FILTERS ----- */
.historique-filters,
.tableau-bord-filters,
.evolution-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-3) !important;
  padding: var(--space-4) var(--space-6) !important;
  border-bottom: 1px solid var(--border) !important;
  background: var(--bg-raised) !important;
  align-items: center;
}
.historique-filter,
.tableau-bord-filter {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-1) !important;
  min-width: 160px !important;
}
.historique-filter label,
.tableau-bord-filter label {
  margin-bottom: 0 !important;
}

/* Listes / cards */
.historique-list,
.evaluation-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.historique-item,
.evaluation-item {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  transition: border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out) !important;
}
.historique-item:hover,
.evaluation-item:hover {
  border-color: var(--border-hover) !important;
  box-shadow: var(--shadow) !important;
}

/* ----- TABLES (tableau de bord, niveau-modal) ----- */
.niveau-table,
.tableau-bord-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: var(--fs-sm) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
}
.niveau-table th,
.tableau-bord-table th {
  background: var(--bg-raised) !important;
  color: var(--text-muted) !important;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase !important;
  padding: var(--space-3) var(--space-4) !important;
  text-align: left !important;
  border-bottom: 1px solid var(--border) !important;
}
.niveau-table td,
.tableau-bord-table td {
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1px solid var(--border) !important;
  vertical-align: top !important;
  color: var(--text) !important;
  background: transparent !important;
}
.niveau-table tr:last-child td,
.tableau-bord-table tr:last-child td {
  border-bottom: 0 !important;
}
.niveau-table tr.niveau-row,
.niveau-table tbody tr {
  background: transparent !important;
}
.niveau-table .niveau-1, .niveau-table .niveau-2,
.niveau-table .niveau-3, .niveau-table .niveau-4 {
  background: transparent !important;
  border-left: 0 !important;
}
.niveau-table .niveau-badge,
.niveau-table .niveau-badge-1,
.niveau-table .niveau-badge-2,
.niveau-table .niveau-badge-3,
.niveau-table .niveau-badge-4 {
  font-family: var(--font-display) !important;
  font-style: italic !important;
  font-weight: 500 !important;
  font-size: var(--fs-lg) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  display: inline !important;
  margin-right: var(--space-2);
}
.niveau-table .niveau-badge-1 { color: var(--lvl-1) !important; }
.niveau-table .niveau-badge-2 { color: var(--lvl-2) !important; }
.niveau-table .niveau-badge-3 { color: var(--lvl-3) !important; }
.niveau-table .niveau-badge-4 { color: var(--lvl-4) !important; }
.niveau-table strong { color: var(--text-strong); font-weight: 500; }
.niveau-table ul { margin: 0; padding-left: 1.2em; }
.niveau-table li + li { margin-top: 2px; }

/* Status badges (tableau de bord) */
.status-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--space-1) !important;
  padding: 0.3rem 0.7rem !important;
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  border-radius: var(--radius-pill) !important;
  background: var(--surface-2) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border) !important;
}
.status-badge.status-success { background: var(--success-soft) !important; color: var(--success) !important; border-color: oklch(70% 0.1 145) !important; }
.status-badge.status-on-track { background: var(--success-soft) !important; color: var(--success) !important; }
.status-badge.status-warning { background: var(--warning-soft) !important; color: oklch(50% 0.14 70) !important; border-color: oklch(75% 0.1 70) !important; }
.status-badge.status-critical { background: var(--danger-soft) !important; color: var(--danger) !important; border-color: oklch(70% 0.1 25) !important; }

/* Lignes du tableau colorées selon statut — ne pas utiliser de fond entièrement coloré ; subtle */
.tableau-bord-table tr.row-critical { background: oklch(95% 0.03 25 / 0.6) !important; }
.tableau-bord-table tr.row-warning { background: oklch(96% 0.03 70 / 0.5) !important; }
.tableau-bord-table tr.row-success,
.tableau-bord-table tr.row-on-track { background: oklch(96% 0.025 145 / 0.5) !important; }
[data-theme='dark'] .tableau-bord-table tr.row-critical { background: oklch(28% 0.04 25 / 0.4) !important; }
[data-theme='dark'] .tableau-bord-table tr.row-warning { background: oklch(28% 0.04 70 / 0.4) !important; }
[data-theme='dark'] .tableau-bord-table tr.row-success,
[data-theme='dark'] .tableau-bord-table tr.row-on-track { background: oklch(28% 0.04 145 / 0.4) !important; }

/* Stat KPIs (tableau de bord, dashboard individuel) */
.tableau-bord-stats,
.di-kpis {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
  gap: var(--space-3) !important;
  margin-bottom: var(--space-5) !important;
}
.stat-card,
.di-kpi {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stat-card .stat-value,
.stat-card .num,
.di-kpi .num,
.di-kpi-value {
  font-family: var(--font-display) !important;
  font-size: var(--fs-xl) !important;
  font-weight: 500 !important;
  color: var(--text-strong) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  background: none !important;
}
.stat-card .stat-label,
.stat-card .label,
.di-kpi .label,
.di-kpi-label {
  font-size: var(--fs-xs) !important;
  font-weight: 600 !important;
  letter-spacing: var(--tracking-eyebrow) !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
}

/* Apprenants list */
.apprenant-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  margin-bottom: var(--space-2) !important;
  transition: border-color var(--dur) var(--ease-out);
}
.apprenant-item:hover {
  border-color: var(--border-hover) !important;
}
.apprenant-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.apprenant-name {
  font-weight: 500;
  color: var(--text-strong);
}
.apprenant-meta {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

/* Actions footer (radar, autres) */
.radar-actions,
.modal-actions,
.dashboard-individuel-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--space-3) !important;
  padding: var(--space-5) var(--space-6) !important;
  border-top: 1px solid var(--border) !important;
  background: var(--bg-raised) !important;
  flex-shrink: 0;
}

/* Dashboard Individuel — sections */
.di-identity {
  display: flex !important;
  align-items: center !important;
  gap: var(--space-4) !important;
  padding: var(--space-5) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  margin-bottom: var(--space-4);
}
.di-identity-avatar {
  width: 64px !important;
  height: 64px !important;
  border-radius: 50% !important;
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  font-size: var(--fs-lg) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0;
}
.di-section {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) var(--space-5) !important;
  margin-bottom: var(--space-3) !important;
}
.di-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  margin-bottom: var(--space-3) !important;
}
.di-section-header h4 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-md) !important;
  margin: 0;
}
.di-progress-bar {
  height: 6px !important;
  background: var(--surface-3) !important;
  border-radius: var(--radius-pill) !important;
  overflow: hidden !important;
  margin-top: var(--space-2);
}
.di-progress-bar > div,
.di-progress-fill {
  height: 100% !important;
  background: var(--accent) !important;
  transition: width var(--dur) var(--ease-out);
}

/* Suggestions dropdown dans formulaires */
.metierSuggestionsApprenant,
#metierSuggestionsApprenant,
#groupeSuggestionsApprenant {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-md) !important;
  max-height: 240px;
  overflow-y: auto;
}
.metierSuggestionsApprenant > div,
#metierSuggestionsApprenant > div,
#groupeSuggestionsApprenant > div {
  padding: var(--space-2) var(--space-3);
  cursor: pointer;
  border-radius: var(--radius);
}
.metierSuggestionsApprenant > div:hover,
#metierSuggestionsApprenant > div:hover,
#groupeSuggestionsApprenant > div:hover {
  background: var(--surface-2);
}

/* Mode rapide list — pour le radar */
.mode-rapide-list { display: flex; flex-direction: column; gap: var(--space-3); }
.mode-rapide-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--space-3) !important;
  padding: var(--space-3) var(--space-4) !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
}
.mode-rapide-item .sfc-name {
  font-family: var(--font-display) !important;
  font-weight: 500 !important;
  color: var(--text-strong) !important;
  background: none !important;
  -webkit-text-fill-color: var(--text-strong) !important;
}
.mode-rapide-buttons {
  display: flex;
  gap: var(--space-2);
}

/* Compare radar */
.compare-radar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5);
  background: var(--bg-raised) !important;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

/* PDF config form */
.pdf-config-section {
  background: var(--bg-raised) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  padding: var(--space-4) !important;
  margin-bottom: var(--space-3) !important;
}
.pdf-config-section h4 {
  font-family: var(--font-display) !important;
  font-size: var(--fs-md) !important;
  margin: 0 0 var(--space-3) 0 !important;
}

/* ----- Override des styles "fluo" hérités sur les zones génériques ----- */
[class*="-modal"] [class*="badge"] {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0;
}

/* Ensure la radar bar pour le mode sélection */
.radar-bar-details > div { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 140px; }