/* ============================================================================
   BREVETS.CSS — Styles du module Brevets + Suivi intégré à BrevetManager
   ============================================================================ */

/* ── Conteneurs des modules (brevets, suivi, plans) ── */
#brevets-content, #suivi-content, #plans-content {
    padding: 20px 28px;
}
@media (min-width: 1600px) {
    #brevets-content, #suivi-content, #plans-content, #pidapi-content { padding: 24px 40px; }
}
@media (max-width: 700px) {
    #brevets-content, #suivi-content, #plans-content, #pidapi-content { padding: 12px; }
}

/* ── Sous-onglets Brevets ── */
.brevet-subtabs { display:flex; gap:8px; margin-bottom:20px; }
.brevet-subtab { padding:10px 20px; border:1.5px solid #e2e8f0; border-radius:50px; background:#f1f5f9; font-size:14px; font-weight:600; cursor:pointer; color:#475569; transition:all 0.15s; flex:1; text-align:center; display:flex; align-items:center; justify-content:center; gap:8px; }
.brevet-subtab:hover { border-color:#93c5fd; background:#eff6ff; color:#1e40af; }
.brevet-subtab.active { color:#fff; background:#1e40af; border-color:#1e40af; box-shadow:0 2px 8px rgba(30,64,175,0.3); }
.brevet-subtab-count { padding:2px 9px; border-radius:10px; font-size:12px; font-weight:700; background:#e2e8f0; color:#475569; }
.brevet-subtab.active .brevet-subtab-count { background:rgba(255,255,255,0.25); color:#fff; }
.brevet-subtab-help { padding:8px 12px; border:none; border-radius:50px; background:transparent; font-size:16px; cursor:pointer; transition:all 0.15s; opacity:0.5; }
.brevet-subtab-help:hover { opacity:1; background:#f1f5f9; }

/* ── Parcours View ── */
.parcours-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.parcours-header h2 { font-size:20px; font-weight:700; color:#1a365d; margin:0; }

.parcours-summary { display:flex; align-items:center; gap:12px; padding:12px 16px; background:#fff; border:1px solid #d1d5db; border-radius:10px; margin-bottom:18px; flex-wrap:wrap; }
.parcours-summary-badge { padding:4px 12px; border-radius:12px; font-size:12px; font-weight:600; background:#d1d5db; color:#1e40af; }
.parcours-badge-active { background:#e6fffa; color:#234e52; }

/* ── Grille de cartes parcours ── */
.parcours-cards-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:16px; }

/* ── Filtres parcours ── */
.parcours-filters { display:flex; gap:10px; align-items:center; margin-bottom:14px; flex-wrap:wrap; }
.parcours-search-input { flex:1; min-width:180px; padding:9px 14px; border:1.5px solid #d1d5db; border-radius:10px; font-size:14px; font-family:inherit; background:#fff; transition:border-color 0.15s; }
.parcours-search-input:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.1); }
.parcours-filter-select { padding:9px 12px; border:1.5px solid #d1d5db; border-radius:10px; font-size:13px; font-family:inherit; background:#fff; cursor:pointer; }
.parcours-filter-select:focus { outline:none; border-color:#3b82f6; }
.parcours-filter-count { font-size:12px; color:#6b7280; font-weight:600; white-space:nowrap; }
.parcours-card { display:flex; flex-direction:column; padding:18px 20px; background:#fff; border:1.5px solid #e5e7eb; border-radius:10px; cursor:pointer; transition:all 0.2s; position:relative; }
.parcours-card:hover { box-shadow:0 8px 24px rgba(0,0,0,0.08); transform:translateY(-3px); border-color:#93c5fd; }
.parcours-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.parcours-card-icon { font-size:32px; }
.parcours-card-titre { font-size:17px; font-weight:800; color:#111827; margin-bottom:2px; line-height:1.3; }
.parcours-card-domaine { font-size:12px; color:#6b7280; margin-bottom:10px; }
.parcours-card-stats { display:flex; gap:8px; margin-bottom:10px; }
.parcours-stat { font-size:11px; font-weight:600; padding:3px 8px; border-radius:10px; background:#edf2f7; color:#4a5568; }
.parcours-stat-test { background:#fff5f5; color:#c53030; }
.parcours-card-ceintures { display:flex; gap:4px; flex-wrap:wrap; }
.parcours-card-ceint { font-size:9px; font-weight:700; padding:2px 7px; border-radius:8px; border:1px solid rgba(0,0,0,0.08); letter-spacing:0.2px; }
.parcours-card-actions { display:flex; gap:3px; opacity:0; transition:opacity 0.15s; }
.parcours-card:hover .parcours-card-actions { opacity:1; }
.parcours-card-arrow { font-size:12px; font-weight:600; color:#93c5fd; margin-top:10px; text-align:right; opacity:0; transition:all 0.15s; }
.parcours-card:hover .parcours-card-arrow { opacity:1; color:#3b82f6; }

/* ── Grille de ceintures — responsive, tout visible sans scroll ── */
.parcours-ceintures-grid { display:flex; flex-wrap:wrap; gap:10px; padding:4px 0 16px; justify-content:center; }
.parcours-col { display:flex; flex-direction:column; background:#fff; border:1px solid #d1d5db; border-radius:10px; overflow:hidden; transition:all 0.15s; }
.parcours-col-inactive { opacity:0.5; }
.parcours-col:hover { box-shadow:0 4px 12px rgba(0,0,0,0.06); }

.parcours-col-header { padding:10px 10px; display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:12px; gap:4px; }
.parcours-toggle { display:flex; align-items:center; gap:4px; cursor:pointer; font-weight:700; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.parcours-toggle input { accent-color:currentColor; width:auto; }
.parcours-col-count { font-size:10px; opacity:0.8; background:rgba(255,255,255,0.3); padding:1px 6px; border-radius:10px; flex-shrink:0; }

.parcours-col-config { padding:6px 8px; border-bottom:1px solid #f5f5f5; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.parcours-mode-select { padding:3px 5px; border:1px solid #ddd; border-radius:6px; font-size:11px; background:#fff; }
.parcours-comp-btn { margin-left:auto; padding:4px 8px; border:1px solid #c4b5fd; border-radius:6px; background:#f5f3ff; color:#5b21b6; font-size:11px; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; }
.parcours-comp-btn:hover { background:#ede9fe; border-color:#a78bfa; }
.parcours-nb-input { width:38px; padding:3px 4px; border:1px solid #ddd; border-radius:6px; font-size:11px; text-align:center; min-width:38px; }

.parcours-col-brevets { padding:6px; display:flex; flex-direction:column; gap:4px; min-height:40px; }
.parcours-col-empty { text-align:center; color:#6b7280; font-size:10px; padding:12px 4px; }
.parcours-col-disabled { padding:12px 8px; text-align:center; font-size:10px; color:#6b7280; font-style:italic; }

.parcours-brevet-chip { padding:5px 7px; background:#f3f4f6; border:1px solid #d1d5db; border-radius:6px; cursor:pointer; transition:all 0.15s; display:flex; align-items:center; gap:4px; }
.parcours-brevet-chip:hover { border-color:#4299e1; background:#ebf8ff; }
.parcours-brevet-chip[draggable] { cursor:grab; }
.parcours-brevet-chip[draggable]:active { cursor:grabbing; }
.parcours-chip-drag { font-size:12px; color:#9ca3af; cursor:grab; flex-shrink:0; line-height:1; user-select:none; }
.parcours-chip-drag:hover { color:#4b5563; }
.parcours-brevet-chip.drag-over-chip { border-color:#3b82f6; border-style:dashed; background:#dbeafe; box-shadow:0 0 0 2px rgba(59,130,246,0.3); }
.parcours-col-brevets.drag-over-col { background:rgba(59,130,246,0.08); border:2px dashed #3b82f6; border-radius:8px; min-height:60px; }
.parcours-chip-title { font-size:11px; font-weight:600; color:#1f2937; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.parcours-chip-meta { display:flex; gap:4px; font-size:9px; color:#6b7280; margin-top:2px; }

.parcours-add-btn { width:100%; padding:5px; background:transparent; border:1.5px dashed #cbd5e0; border-radius:6px; cursor:pointer; font-size:10px; font-weight:600; color:#4299e1; transition:all 0.15s; margin-top:2px; }
.parcours-add-btn:hover { border-color:#4299e1; background:#ebf8ff; }
.parcours-print-btn { width:100%; padding:4px; background:#f3f4f6; border:1px solid #d1d5db; border-radius:6px; cursor:pointer; font-size:10px; font-weight:500; color:#4b5563; transition:all 0.15s; margin-top:2px; }
.parcours-print-btn:hover { background:#ebf8ff; color:#1e40af; border-color:#bee3f8; }

/* ── Toolbar ── */
.brevet-toolbar, .suivi-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.brevet-toolbar h2, .suivi-toolbar h2 { font-size:22px; font-weight:700; color:#1a365d; margin:0; }
.brevet-toolbar-actions, .suivi-toolbar-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Boutons — refonte ── */
.btn-brevet { display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border:1.5px solid #9ca3af; border-radius:10px; background:#fff; font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s; color:#374151; font-family:inherit; box-shadow:0 1px 3px rgba(0,0,0,0.06); }
.btn-brevet:hover { border-color:#6b7280; color:#111827; background:#f3f4f6; box-shadow:0 2px 6px rgba(0,0,0,0.1); transform:translateY(-1px); }
.btn-brevet:active { transform:scale(0.97); }
.btn-primary-brevet { background:linear-gradient(135deg,#1e40af,#2563eb); color:#fff; border-color:#1e40af; box-shadow:0 2px 6px rgba(30,64,175,0.3); }
.btn-primary-brevet:hover { background:linear-gradient(135deg,#1e3a8a,#1d4ed8); box-shadow:0 4px 12px rgba(30,64,175,0.35); }
.btn-secondary-brevet { background:#eff6ff; color:#1e40af; border-color:#93c5fd; }
.btn-secondary-brevet:hover { background:#dbeafe; border-color:#60a5fa; }
.btn-danger-brevet { color:#dc2626; border-color:#fca5a5; }
.btn-danger-brevet:hover { background:#fff5f5; border-color:#fc8181; }
.btn-sm { padding:6px 12px; font-size:12px; border-radius:8px; }

/* ── Filtres ── */
.brevet-filtres, .suivi-filtres { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; align-items:center; }
.brevet-filtres select, .suivi-filtres select { padding:9px 14px; border:1.5px solid #d1d5db; border-radius:10px; font-size:13px; background:#fff; color:#374151; font-weight:500; box-shadow:0 1px 3px rgba(0,0,0,0.06); transition:all 0.15s; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; padding-right:32px; }
.brevet-filtres select:hover, .suivi-filtres select:hover { border-color:#6b7280; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.brevet-filtres select:focus, .suivi-filtres select:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.15); }

/* ── Grille de brevets (refonte ergo v5.8 : carte 320px, dot 20px, tags 13px) ── */
.brevets-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.brevet-card { background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; padding:16px; cursor:pointer; transition:all 0.18s; position:relative; }
.brevet-card:hover { box-shadow:0 6px 20px rgba(0,0,0,0.07); transform:translateY(-2px); border-color:#bee3f8; }
.brevet-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; border-radius:6px 0 0 6px; background:#1e40af; opacity:0; transition:opacity 0.15s; }
.brevet-card:hover::before { opacity:1; }
.brevet-card-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.brevet-ceinture-dot { width:20px; height:20px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,0,0,0.1); }
.brevet-card-titre { font-size:15px; font-weight:700; line-height:1.3; color:#111827; flex:1; min-width:0; }
.brevet-card-meta { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.brevet-tag { display:inline-block; padding:4px 10px; border-radius:8px; font-size:13px; font-weight:500; background:#e5e7eb; color:#1e40af; }
.brevet-tag-dom { background:#d1fae5; color:#065f46; }
.brevet-tag-count { background:#f3f4f6; color:#4b5563; }
.niveau-CE1 { background:#dbeafe; color:#1e40af; }
.niveau-CE2 { background:#d1fae5; color:#065f46; }
.niveau-CM1 { background:#fef3c7; color:#92400e; }
/* Actions de la carte : 3 boutons visibles + menu ⋯ (refonte ergo v5.8) — tokens v5.9 */
.brevet-card-actions { display:flex; gap:var(--espace-sm); justify-content:flex-end; align-items:center; position:relative; }
.brevet-card-actions .btn-card-action { padding:var(--espace-md) var(--espace-2xl); border:1.5px solid var(--couleur-bordure-hover); border-radius:var(--radius-md); background:var(--couleur-surface); font-size:var(--texte-sm); font-weight:500; color:var(--couleur-texte-clair); cursor:pointer; font-family:inherit; transition:all 0.15s; min-height:var(--cible-md); }
.brevet-card-actions .btn-card-action:hover { border-color:var(--couleur-texte-secondaire); background:var(--couleur-surface-douce); }
.brevet-card-actions .btn-card-menu { width:var(--cible-md); height:var(--cible-md); padding:0; display:inline-flex; align-items:center; justify-content:center; font-size:var(--texte-xl); color:var(--couleur-texte-secondaire); }
.brevet-card-actions .btn-card-menu:hover { color:var(--couleur-texte); }
/* Menu déroulant pour actions secondaires */
.card-menu-dropdown { position:absolute; top:calc(100% + 4px); right:0; background:var(--couleur-surface); border:1px solid var(--couleur-bordure-douce); border-radius:var(--radius-lg); box-shadow:0 8px 24px rgba(0,0,0,0.12); padding:var(--espace-xs); z-index:50; min-width:180px; display:none; }
.card-menu-dropdown.open { display:block; }
.card-menu-item { display:flex; align-items:center; gap:var(--espace-lg); width:100%; padding:var(--espace-lg) var(--espace-xl); border:none; background:transparent; font-size:var(--texte-sm); font-family:inherit; color:var(--couleur-texte-clair); cursor:pointer; border-radius:var(--radius-sm); text-align:left; min-height:40px; }
.card-menu-item:hover { background:var(--couleur-surface-grise); color:var(--couleur-texte); }
.card-menu-item.danger { color:var(--couleur-danger); }
.card-menu-item.danger:hover { background:#fef2f2; color:#b91c1c; }
.card-menu-icon { font-size:var(--texte-md); flex-shrink:0; width:18px; text-align:center; }

.brevet-empty { text-align:center; padding:60px 20px; color:#6b7280; font-size:14px; }

/* ── Brevet de test : distinction visuelle ── */
.brevet-card-test { border-color:#fed7d7; background:#fffbfb; }
.brevet-card-test::before { background:#e53e3e; opacity:1; }
.brevet-card-test:hover { border-color:#fc8181; }
.brevet-test-badge { display:inline-block; padding:3px 10px; border-radius:6px; font-size:12px; font-weight:700; background:#e53e3e; color:#fff; letter-spacing:0.5px; flex-shrink:0; }

.parcours-chip-test { border-color:#fed7d7; background:#fffbfb; }
.parcours-chip-test-badge { display:inline-block; background:#e53e3e; color:#fff; font-size:9px; font-weight:700; padding:0 4px; border-radius:6px; vertical-align:middle; }

/* ── Éditeur de brevet ── */
.brevet-editor { display:flex; flex-direction:column; gap:0; }

/* Banner coloré sticky (refonte v6.2) : 3 zones — gauche (Retour+tags+✏️), centre (titre), droite (actions) */
.brevet-editor-banner { display:flex; align-items:center; gap:var(--espace-2xl); padding:var(--espace-xl) var(--espace-3xl); border-radius:var(--radius-lg) var(--radius-xl) 0 0; margin-bottom:0; transition:background 0.3s; flex-wrap:wrap; position:sticky; top:0; z-index:10; }
/* Zone gauche : Retour + tags + crayon — ne rétrécit pas en priorité */
.brevet-banner-left { display:flex; align-items:center; gap:var(--espace-md); flex-shrink:0; }
.brevet-banner-meta { display:flex; gap:var(--espace-sm); flex-wrap:wrap; align-items:center; }
.brevet-banner-tag { padding:3px var(--espace-lg); border-radius:var(--radius-sm); font-size:var(--texte-xs); font-weight:700; background:rgba(255,255,255,0.25); backdrop-filter:blur(4px); }
.brevet-banner-test { background:rgba(220,38,38,0.85); }
/* Bouton crayon pour déplier les paramètres avancés */
.brevet-banner-edit-btn { width:var(--cible-md); height:var(--cible-md); padding:0; border:1.5px solid rgba(255,255,255,0.4); border-radius:var(--radius-md); background:rgba(255,255,255,0.15); color:inherit; font-size:var(--texte-base); cursor:pointer; transition:all 0.15s; backdrop-filter:blur(4px); display:inline-flex; align-items:center; justify-content:center; }
.brevet-banner-edit-btn:hover { background:rgba(255,255,255,0.35); }
.brevet-banner-edit-btn.is-open { background:rgba(255,255,255,0.9); border-color:transparent; }
/* Zone centre : titre, prend l'espace disponible mais limité — c'est elle qui rétrécit en premier sur écran étroit */
.brevet-banner-center { flex:1 1 auto; display:flex; justify-content:center; align-items:center; gap:var(--espace-md); min-width:0; }
.brevet-banner-num { font-size:var(--texte-lg); font-weight:800; opacity:0.75; flex-shrink:0; padding:0 2px; }
/* Input titre : fond blanc semi-opaque, lisible sur n'importe quelle couleur de banner, largeur limitée à 420px */
.brevet-banner-input { width:100%; max-width:420px; padding:var(--espace-md) var(--espace-2xl); border:1.5px solid rgba(255,255,255,0.4); border-radius:var(--radius-md); background:rgba(255,255,255,0.95); color:#111827; font-size:var(--texte-lg); font-weight:700; font-family:inherit; min-height:var(--cible-md); transition:all 0.15s; }
.brevet-banner-input:focus { outline:none; border-color:rgba(255,255,255,0.9); background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,0.3); }
.brevet-banner-input::placeholder { color:#9ca3af; font-weight:400; }
/* Zone droite : actions principales — ne rétrécit pas */
.brevet-banner-actions { display:flex; gap:var(--espace-sm); flex-shrink:0; }
.brevet-banner-btn { padding:var(--espace-md) var(--espace-3xl); border:1.5px solid rgba(255,255,255,0.4); border-radius:var(--radius-lg); background:rgba(255,255,255,0.15); color:inherit; font-size:var(--texte-sm); font-weight:600; cursor:pointer; transition:all 0.15s; font-family:inherit; backdrop-filter:blur(4px); min-height:var(--cible-md); }
.brevet-banner-btn:hover { background:rgba(255,255,255,0.3); }
.brevet-banner-btn-back { font-weight:500; }
.brevet-banner-save { background:rgba(255,255,255,0.9); color:#111827; border-color:transparent; }
.brevet-banner-save:hover { background:#fff; }

/* Split layout - 2 colonnes (exercices + aperçu) */
.brevet-editor-split { padding:0 16px 16px; }
.brevet-editor-2col { display:grid; grid-template-columns:1fr minmax(0, 320px); gap:12px; align-items:start; margin-top:12px; }
@media (max-width:1000px) { .brevet-editor-2col { grid-template-columns:1fr; } .brevet-col-preview { display:none; } }

.brevet-editor-left { display:flex; flex-direction:column; gap:12px; padding:16px; }

/* Aperçu sticky — style PDF */
.brevet-preview-sticky { position:sticky; top:70px; }
.brevet-preview-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:#6b7280; margin-bottom:8px; text-align:center; }
.brevet-live-preview { background:#6b7280; border:1.5px solid #d1d5db; border-radius:10px; box-shadow:inset 0 2px 8px rgba(0,0,0,0.15); overflow:hidden; min-height:300px; max-height:calc(100vh - 140px); overflow-y:auto; padding:16px 12px; }

/* Pages d'aperçu — style feuille A4 */
.preview-measure { background:#fff; padding:0; }
.preview-page { background:#fff; border-radius:6px; box-shadow:0 2px 12px rgba(0,0,0,0.2), 0 0 0 1px rgba(0,0,0,0.08); margin-bottom:16px; overflow:hidden; position:relative; }
.preview-page:last-child { margin-bottom:0; }
.preview-page-num { position:absolute; top:6px; right:8px; font-size:8px; color:#9ca3af; font-weight:600; z-index:1; background:rgba(255,255,255,0.8); padding:1px 5px; border-radius:6px; }

/* Barre de métadonnées */

.brevet-panel-exos { background:#fff; border:1.5px solid #e5e7eb; border-radius:10px; display:flex; flex-direction:column; overflow:hidden; }
.brevet-panel-header { padding:12px 16px 10px; border-bottom:1px solid #e5e7eb; display:flex; align-items:center; justify-content:space-between; }
.brevet-panel-header h3 { font-size:14px; font-weight:700; color:#1e40af; margin:0; }
.brevet-comp-count { font-weight:500; font-size:12px; color:#1e40af; background:#ebf8ff; padding:2px 10px; border-radius:10px; margin-left:8px; }
.brevet-exo-count { font-weight:400; color:#6b7280; font-size:13px; }

/* Filtres compétences */
.brevet-comp-filters { padding:10px 16px; border-bottom:1px solid #e5e7eb; }
.brevet-comp-filters input { width:100%; padding:10px 14px; border:1.5px solid #d2d6dc; border-radius:8px; font-size:14px; font-family:inherit; }
.brevet-comp-filters input:focus { outline:none; border-color:#3182ce; box-shadow:0 0 0 3px rgba(49,130,206,0.12); }
.brevet-comp-filters input::placeholder { color:#6b7280; }

/* Tags de compétences sélectionnées */
.brevet-comp-selected { padding:8px 16px 4px; display:flex; flex-wrap:wrap; gap:4px; }
.comp-selected-tag { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; background:#ebf8ff; border:1px solid #bee3f8; border-radius:6px; font-size:11px; color:#1e40af; max-width:100%; }
.comp-selected-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.comp-selected-remove { background:none; border:none; cursor:pointer; font-size:14px; color:#63b3ed; padding:0 2px; line-height:1; }
.comp-selected-remove:hover { color:#c53030; }

/* Liste de compétences (grande) */
.brevet-competences-list { flex:1; overflow-y:auto; max-height:45vh; min-height:150px; padding:8px 12px; display:flex; flex-direction:column; gap:2px; }
.brevet-comp-empty { padding:24px; text-align:center; color:#6b7280; font-size:13px; }
.brevet-comp-item { display:flex; align-items:flex-start; gap:8px; padding:8px 8px; font-size:13px; line-height:1.45; color:#4a5568; cursor:pointer; border-radius:6px; transition:background 0.1s; border:1px solid transparent; }
.brevet-comp-item:hover { background:#f0f7ff; }
.brevet-comp-item.comp-checked { background:#ebf8ff; border-color:#bee3f8; }
/* Compétences orphelines (intitulé hérité d'une version précédente du référentiel, ajout v0.10.0) */
.brevet-comp-item.comp-orphan { background:#fef9c3; border-left:3px solid #f59e0b; }
.brevet-comp-item.comp-orphan.comp-checked { background:#fde68a; border-left:3px solid #d97706; }
.comp-orphan-badge { font-size:10px; font-weight:700; padding:2px 7px; border-radius:10px; background:#fbbf24; color:#78350f; flex-shrink:0; margin-top:1px; white-space:nowrap; }
.brevet-comp-item input { margin-top:3px; accent-color:#1e40af; width:auto; flex-shrink:0; }
.comp-text { flex:1; }
.comp-niveau-badge { font-size:10px; font-weight:600; padding:1px 5px; border-radius:6px; flex-shrink:0; margin-top:1px; }

/* Panneau exercices */
.brevet-panel-exos { min-height:200px; }
.brevet-panel-exos .brevet-exercices-list { padding:12px; max-height:60vh; overflow-y:auto; }
.brevet-panel-exos .brevet-add-exo-bar { margin:0; }

/* ── Champs de formulaire — plus grands, plus lisibles ── */
.brevet-field { display:flex; flex-direction:column; gap:4px; }
.brevet-field label { font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; color:#475569; }
.brevet-field input, .brevet-field select { padding:10px 14px; border:1.5px solid #d2d6dc; border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:#111827; transition:border-color 0.15s; }
.brevet-field input:focus, .brevet-field select:focus { outline:none; border-color:#3182ce; box-shadow:0 0 0 3px rgba(49,130,206,0.12); }
.brevet-field input::placeholder { color:#6b7280; }
@media (max-width:500px) { .brevet-field-row { grid-template-columns:1fr; } }

/* ── Suggestions (dans le panneau compétences) ── */
.brevet-suggestions { display:flex; flex-wrap:wrap; gap:6px; }
.brevet-suggestion-chip { padding:5px 12px; background:#ebf8ff; border:1px solid #bee3f8; border-radius:8px; font-size:12px; cursor:pointer; transition:all 0.15s; display:flex; align-items:center; gap:4px; }
.brevet-suggestion-chip:hover { background:#bee3f8; }

/* ── Exercices du brevet ── */
.brevet-exercices-list { display:flex; flex-direction:column; gap:0; min-height:100px; padding:12px; }
.brevet-exo-item { display:flex; align-items:flex-start; gap:10px; padding:14px; background:#fff; border:1.5px solid #e5e7eb; border-radius:10px; transition:all 0.2s; margin-bottom:8px; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.brevet-exo-item:hover { border-color:#93c5fd; box-shadow:0 4px 12px rgba(37,99,235,0.08); }
.brevet-exo-item.dragging { opacity:0.4; transform:rotate(1deg); }
.brevet-exo-item.drag-over { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,0.15); border-style:dashed; }
.brevet-exo-handle { font-size:18px; color:#9ca3af; cursor:grab; user-select:none; line-height:1; padding-top:2px; transition:color 0.15s; }
.brevet-exo-handle:hover { color:#3b82f6; }
.brevet-exo-content { flex:1; min-width:0; }

/* Numéro d'exercice */
.ed-exo-num { display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; border-radius:50%; background:#1e40af; color:#fff; font-size:11px; font-weight:800; flex-shrink:0; }

/* État vide exercices */
.ed-empty-exos { padding:32px 16px; text-align:center; }
.brevet-exo-consigne { font-size:13px; font-weight:600; color:#1f2937; margin-bottom:4px; }
.brevet-exo-preview { max-width:100%; max-height:200px; height:auto; object-fit:contain; border-radius:8px; border:1.5px solid #e5e7eb; box-shadow:0 2px 6px rgba(0,0,0,0.06); transition:all 0.2s; cursor:pointer; }
.brevet-exo-preview:hover { box-shadow:0 4px 12px rgba(0,0,0,0.1); transform:scale(1.02); }
.brevet-exo-preview-placeholder { padding:20px; background:#f3f4f6; border-radius:8px; font-size:12px; color:#6b7280; text-align:center; border:2px dashed #d1d5db; }
.brevet-exo-actions { display:flex; flex-direction:column; gap:2px; }
.brevet-exo-actions button { background:none; border:none; cursor:pointer; padding:4px 8px; border-radius:6px; font-size:12px; color:#4b5563; transition:background 0.1s; }
.brevet-exo-actions button:hover { background:#e5e7eb; }

/* ── Bloc libre ── */
.brevet-exo-libre { border-color:#e9d8fd; background:#faf5ff; }
.brevet-bloc-type-badge { display:inline-block; padding:3px 10px; border-radius:6px; font-size:11px; font-weight:700; flex-shrink:0; }

/* ── Preview astuce / leçon ── */
.brevet-preview-astuce { padding:12px 16px; background:#fffbeb; border:1.5px solid #f59e0b; border-radius:8px; }
.brevet-preview-astuce .brevet-preview-consigne { color:#92400e; border-left-color:#f59e0b; }
.brevet-preview-lecon { padding:12px 16px; background:#eff6ff; border:1.5px solid #3b82f6; border-radius:8px; }
.brevet-preview-lecon .brevet-preview-consigne { color:#1e3a5f; border-left-color:#3b82f6; }
.brevet-libre-form { display:flex; flex-direction:column; gap:10px; }
.brevet-libre-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; }
.brevet-libre-form .brevet-field { display:flex; flex-direction:column; gap:3px; }
.brevet-libre-form .brevet-field label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:#805ad5; }
.brevet-libre-form input[type="text"],
.brevet-libre-form textarea,
.brevet-libre-form select { padding:8px 10px; border:1.5px solid #e2e8f0; border-radius:6px; font-size:13px; font-family:inherit; }
.brevet-libre-form textarea { resize:vertical; min-height:40px; }
.brevet-libre-form input:focus, .brevet-libre-form textarea:focus, .brevet-libre-form select:focus { outline:none; border-color:#805ad5; box-shadow:0 0 0 2px rgba(128,90,213,0.1); }
.brevet-libre-form input[type="number"] { width:60px; }

/* ── Exercice capturé : consigne éditable ── */
.brevet-exo-consigne-row { display:flex; align-items:center; gap:6px; margin-bottom:4px; }
.brevet-exo-consigne-input { flex:1; padding:6px 10px; border:1.5px solid transparent; border-radius:6px; font-size:13px; font-weight:600; color:#1f2937; background:transparent; font-family:inherit; transition:border-color 0.15s; }
.brevet-exo-consigne-input:hover { border-color:#e2e8f0; }
.brevet-exo-consigne-input:focus { outline:none; border-color:#3182ce; background:#fff; }
.brevet-exo-source-badge { font-size:10px; color:#6b7280; white-space:nowrap; }

/* ── Champ correction (exercice capturé) ── */
.brevet-correction-field { margin-top:8px; }
.brevet-correction-field label { display:block; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:#c53030; margin-bottom:3px; }
.brevet-correction-field textarea { width:100%; padding:6px 10px; border:1.5px solid #fed7d7; border-radius:6px; font-size:12px; font-family:inherit; resize:vertical; min-height:32px; background:#fffbfb; color:#1f2937; }
.brevet-correction-field textarea:focus { outline:none; border-color:#fc8181; box-shadow:0 0 0 2px rgba(229,62,62,0.1); }

/* ── Éditeur — Paramètres avancés (refonte v6.1 : déplié depuis le bouton crayon du banner) ── */
/* Les anciennes règles .ed-meta, .ed-meta-summary*, .ed-meta-tag*, .ed-meta-toggle, .ed-input-title
   ont été supprimées avec la fusion banner/meta-summary. Seul .ed-meta-details subsiste comme
   conteneur de la zone repliable des paramètres avancés du brevet. */
.ed-meta-details { background:#fff; border:1.5px solid var(--couleur-bordure-douce); border-radius:var(--radius-lg); padding:var(--espace-xl) var(--espace-3xl); margin-bottom:var(--espace-xl); animation:edMetaSlide 0.2s ease-out; }
.ed-meta-details.ed-meta-hidden { display:none; }
@keyframes edMetaSlide { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.ed-meta-row { display:flex; gap:var(--espace-lg); align-items:flex-end; flex-wrap:wrap; }
.ed-field { display:flex; flex-direction:column; gap:3px; }
.ed-field label { font-size:var(--texte-xs); font-weight:600; color:var(--couleur-texte-secondaire); }
.ed-field select { padding:var(--espace-md) var(--espace-lg); border:1.5px solid var(--couleur-bordure-hover); border-radius:var(--radius-md); font-size:var(--texte-sm); font-family:inherit; background:#fff; min-height:var(--cible-md); }
.ed-field select:focus { outline:none; border-color:#3182ce; box-shadow:0 0 0 3px rgba(49,130,206,0.12); }
.ed-field-grow { flex:1; min-width:120px; }
.ed-test-btn { padding:var(--espace-md) var(--espace-3xl); border:2px solid #3b82f6; border-radius:var(--radius-md); background:#eff6ff; color:#1e40af; font-size:var(--texte-sm); font-weight:700; cursor:pointer; transition:all 0.15s; font-family:inherit; white-space:nowrap; min-height:var(--cible-md); }
.ed-test-btn:hover { background:#dbeafe; }
.ed-test-btn.is-test { background:#fef2f2; border-color:#e53e3e; color:#c53030; }

/* ── Éditeur — Barre d'ajout exercices ── */
/* ── Barre d'ajout exercices (refonte v6.0 : boutons 36px, Compétences en évidence, séparateurs verticaux) ── */
.ed-add-bar { display:flex; gap:var(--espace-xl); padding:var(--espace-xl) var(--espace-2xl); background:#f8fafc; border-bottom:1px solid var(--couleur-bordure-douce); flex-wrap:wrap; align-items:center; }
.ed-add-group { display:flex; gap:var(--espace-sm); align-items:center; }
.ed-add-label { font-size:var(--texte-sm); font-weight:500; color:var(--couleur-texte-secondaire); margin-right:2px; }
.ed-add-sep { width:1px; align-self:stretch; background:var(--couleur-bordure-douce); margin:0 2px; }
.ed-add-btn { padding:var(--espace-md) var(--espace-2xl); border:1.5px solid var(--couleur-bordure-hover); border-radius:var(--radius-md); background:var(--couleur-surface); font-size:var(--texte-sm); font-weight:500; cursor:pointer; transition:all 0.15s; font-family:inherit; color:var(--couleur-texte-clair); min-height:var(--cible-md); display:inline-flex; align-items:center; gap:var(--espace-sm); }
.ed-add-btn:hover { border-color:#3b82f6; background:#eff6ff; color:#2563eb; }
.ed-add-fr:hover { background:#fef2f2; border-color:#ef4444; color:#dc2626; }
.ed-add-ma:hover { background:#f0fdf4; border-color:#16a34a; color:#15803d; }
.ed-add-astuce:hover { background:#fffbeb; border-color:#f59e0b; color:#d97706; }
.ed-add-lecon:hover { background:#f5f3ff; border-color:#8b5cf6; color:#7c3aed; }
/* Bouton Compétences mis en évidence (action structurante) */
.ed-add-btn-comp { background:#ede9fe; border-color:#c4b5fd; color:#5b21b6; font-weight:600; }
.ed-add-btn-comp:hover { background:#ddd6fe; border-color:#a78bfa; color:#5b21b6; }
.ed-comp-badge { display:inline-flex; align-items:center; justify-content:center; min-width:24px; height:20px; padding:0 var(--espace-sm); border-radius:var(--radius-lg); background:#7c3aed; color:#fff; font-size:var(--texte-xs); font-weight:700; margin-left:2px; }
.ed-comp-badge:empty, .ed-comp-badge[style*="display: none"] { display:none; }

/* ── Bandeau capture ── */
/* Bandeau capture exerciz (refonte v6.2) : hiérarchie visuelle claire entre primaire et secondaire */
.brevet-capture-banner { position:fixed; bottom:0; left:0; right:0; z-index:9999; background:linear-gradient(135deg, #1e40af, #4299e1); color:#fff; padding:var(--espace-2xl) var(--espace-4xl); display:flex; align-items:center; gap:var(--espace-2xl); justify-content:center; box-shadow:0 -4px 24px rgba(0,0,0,0.15); }
.brevet-capture-banner .brevet-capture-msg { font-size:var(--texte-sm); font-weight:500; }
/* Bouton primaire — bien identifié comme action principale (vert sur fond bleu) */
.brevet-capture-banner .brevet-capture-primary { background:#38a169; border-color:#38a169; color:#fff; font-weight:600; padding:var(--espace-md) var(--espace-3xl); border-radius:var(--radius-md); cursor:pointer; min-height:var(--cible-md); border:1.5px solid #38a169; transition:all 0.15s; }
.brevet-capture-banner .brevet-capture-primary:hover { background:#2f855a; border-color:#2f855a; }
/* Séparateur vertical entre les deux actions */
.brevet-capture-sep { width:1px; height:22px; background:rgba(255,255,255,0.3); }
/* Bouton secondaire — style transparent pour ne pas concurrencer visuellement le primaire */
.brevet-capture-secondary { background:transparent; color:rgba(255,255,255,0.9); font-size:var(--texte-sm); padding:var(--espace-md) var(--espace-2xl); border:1.5px solid rgba(255,255,255,0.4); border-radius:var(--radius-md); cursor:pointer; font-family:inherit; min-height:var(--cible-md); transition:all 0.15s; }
.brevet-capture-secondary:hover { background:rgba(255,255,255,0.15); color:#fff; }

/* ── Modal ── */
.brevet-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0); display:none; align-items:center; justify-content:center; z-index:10000; padding:16px; backdrop-filter:blur(0px); transition:background 0.2s, backdrop-filter 0.2s; }
.brevet-modal-overlay.show { display:flex; background:rgba(0,0,0,0.45); backdrop-filter:blur(4px); }
.brevet-modal { background:#fff; border-radius:12px; max-width:900px; width:95vw; max-height:92vh; display:flex; flex-direction:column; box-shadow:0 24px 80px rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.05); animation:modalIn 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); }
/* Variante bilan élève (v0.11.5) : plus grande et hauteur STABLE (pas seulement plafonnée),
   pour que passer d'un onglet à l'autre (Ceintures/PIDAPI/Historique) ne fasse plus varier
   la taille de la fenêtre — seul le contenu défile désormais à l'intérieur si besoin. */
.brevet-modal.brevet-modal-bilan { max-width:1100px; width:96vw; height:88vh; max-height:88vh; }
@keyframes modalIn { from { opacity:0; transform:translateY(16px) scale(0.95); } to { opacity:1; transform:translateY(0) scale(1); } }
.brevet-modal-header { display:flex; align-items:center; padding:16px 22px; border-bottom:1px solid #e5e7eb; gap:12px; flex-shrink:0; background:#f9fafb; border-radius:12px 16px 0 0; }
.brevet-modal-header h3 { margin:0; font-size:17px; font-weight:700; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; flex:1; }
.btn-modal-close { background:#e5e7eb; border:none; cursor:pointer; font-size:18px; color:#6b7280; width:36px; height:36px; border-radius:8px; flex-shrink:0; line-height:1; transition:all 0.15s; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.btn-modal-close:hover { background:#d1d5db; color:#dc2626; }
.brevet-modal-body { flex:1; overflow-y:auto; padding:24px; transition:opacity 0.15s ease; }
.brevet-modal-body.fade-out { opacity:0; }
/* ── Paramètres ceintures ── */
.brevet-ceintures-settings { display:flex; flex-direction:column; gap:4px; }
.brevet-ceintures-settings h3 { margin:0 0 4px; font-size:16px; color:#1e40af; }
.brevet-ceinture-row { display:flex; align-items:center; gap:8px; padding:8px 12px; background:#fff; border:1.5px solid #e5e7eb; border-radius:10px; margin-bottom:4px; transition:all 0.12s; }
.brevet-ceinture-row:hover { border-color:#93c5fd; box-shadow:0 2px 6px rgba(0,0,0,0.05); }
.brevet-ceinture-dot { width:22px; height:22px; border-radius:50%; flex-shrink:0; border:2px solid rgba(0,0,0,0.1); }
.brevet-ceinture-name { flex:1; font-weight:600; font-size:13px; color:#1f2937; }
.brevet-ceinture-name-input { flex:1; max-width:140px; padding:5px 10px; border:1.5px solid #d1d5db; border-radius:8px; font-size:13px; font-weight:600; font-family:inherit; }
.brevet-ceinture-name-input:focus { outline:none; border-color:#3b82f6; }
.brevet-ceinture-color-input { width:34px; height:30px; border:1.5px solid #d1d5db; border-radius:6px; cursor:pointer; padding:2px; flex-shrink:0; }
.brevet-ceinture-arrows { display:flex; flex-direction:column; gap:1px; flex-shrink:0; }
.btn-ceinture-move { background:#f3f4f6; border:1px solid #d1d5db; border-radius:6px; cursor:pointer; font-size:10px; padding:2px 6px; line-height:1; color:#374151; transition:all 0.12s; }
.btn-ceinture-move:hover:not(:disabled) { background:#dbeafe; border-color:#3b82f6; color:#1e40af; }
.btn-ceinture-move:disabled { opacity:0.3; cursor:default; }

/* ── Preview (fiche brevet) ── */
.brevet-preview { max-width:700px; margin:0 auto; }
.brevet-preview-cartouche { display:flex; gap:16px; padding:8px 12px; border:1.5px solid #333; border-radius:6px; margin-bottom:12px; font-size:13px; }
.brevet-preview-comps { font-size:11px; color:#444; padding:8px; background:#f3f4f6; border-radius:6px; border-left:3px solid #1e40af; margin-bottom:12px; }
.brevet-preview-exo { margin-bottom:16px; }
.brevet-preview-consigne { font-weight:700; font-size:14px; margin-bottom:6px; padding-left:10px; border-left:3px solid #1e40af; }
.brevet-preview-img { max-width:100%; height:auto; border-radius:6px; object-fit:contain; }
.brevet-preview-line { border-bottom:1px solid #ccc; height:24px; }
.brevet-preview-correction-text { position:relative; color:#c53030; font-weight:600; padding:10px 14px; margin-top:8px; border:2px solid #e53e3e; border-radius:8px; background:#fff5f5; }
.brevet-preview-correction-text::after { content:'✅'; position:absolute; top:-10px; right:8px; background:#fff; padding:0 4px; font-size:16px; }

/* ── Suivi ── */
.suivi-tabs { display:flex; gap:4px; margin-bottom:16px; }
.suivi-tab { padding:9px 18px; border:none; border-radius:8px; background:#e5e7eb; font-size:13px; font-weight:600; cursor:pointer; color:#4b5563; transition:all 0.15s; }
.suivi-tab:hover { color:#1e40af; background:#e2ecf5; }
.suivi-tab.active { background:#1e40af; color:#fff; box-shadow:0 2px 6px rgba(43,108,176,0.25); }

/* ── Cartes élèves v2 (refonte ergo v5.6 : largeur 320px, fonts agrandies, action toujours visible) ── */
.suivi-eleves-grid-v2 { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
/* Carte cliquable pour ouvrir le bilan de l'élève */
.eleve-card-v2 { background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; padding:0; cursor:pointer; transition:all 0.2s; overflow:hidden; position:relative; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.eleve-card-v2:hover { box-shadow:0 6px 20px rgba(0,0,0,0.08); transform:translateY(-2px); border-color:#bee3f8; }
/* La flèche d'ouverture en hover n'est plus nécessaire (bouton Mod. visible permanent) */

/* En-tête : avatar 48px + nom 16px + niveau + actions visibles */
.eleve-card-header { display:flex; align-items:center; gap:12px; padding:14px 14px 10px; }
.eleve-card-avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; color:#fff; flex-shrink:0; letter-spacing:-0.5px; }
.eleve-card-identity { flex:1; min-width:0; }
/* Prénom en grand et gras — plus visible (refonte v0.10.11) */
.eleve-card-prenom { font-weight:800; font-size:17px; color:#111827; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
/* Nom de famille discret en dessous */
.eleve-card-nom { font-size:12px; color:#6b7280; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; display:flex; align-items:center; gap:5px; }
/* Boutons éditer/supprimer : toujours visibles, plus de hover-to-reveal */
.eleve-card-edit { display:flex; gap:4px; opacity:1; flex-shrink:0; }
.eleve-card-edit .btn-brevet { padding:6px 10px; font-size:12px; }

/* Stats : pills agrandies pour lisibilité */
.eleve-card-stats { display:flex; align-items:center; gap:8px; padding:0 14px 10px; flex-wrap:wrap; }
.eleve-stat { font-size:13px; font-weight:600; padding:4px 10px; border-radius:12px; }
.eleve-stat-ok { background:#d1fae5; color:#065f46; }
.eleve-stat-wip { background:#fef3c7; color:#78350f; }
/* Badge ceintures PIDAPI validées, distinct des ceintures Brevets (v0.10.15) */
.eleve-stat-pidapi { background:#ede9fe; color:#5b21b6; }
.eleve-stat-progress { margin-left:auto; font-size:16px; font-weight:700; color:#1e40af; }

/* Bloc "dernier brevet validé" : nouvelle info clé ajoutée v5.6 */
.eleve-card-last { padding:6px 14px 10px; display:flex; align-items:center; gap:8px; font-size:12px; color:#6b7280; border-top:1px dashed #f3f4f6; padding-top:8px; margin-top:2px; }
.eleve-card-last-icon { font-size:14px; flex-shrink:0; }
.eleve-card-last-text { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.eleve-card-last-date { font-size:11px; color:#9ca3af; flex-shrink:0; }
.eleve-card-last-empty { font-style:italic; color:#9ca3af; }

/* Dots ceinture agrandis 14 → 20 pour identification rapide */
/* En cours : quelques brevets faits */
/* Prêt pour le test : tous les brevets faits */
/* Validée : test réussi */

/* ── Ancien (conservé pour compatibilité showBilan) ── */
.suivi-eleve-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:#fff; flex-shrink:0; }

/* ── Tableau de suivi (refonte ergo v5.6 : cellules plus grandes pour la souris) ── */
.suivi-table-wrap { overflow-x:auto; margin-top:14px; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 1px 4px rgba(0,0,0,0.05); }
.suivi-table { width:100%; border-collapse:separate; border-spacing:0; font-size:14px; }
.suivi-table th, .suivi-table td { padding:10px 10px; border:1px solid #e5e7eb; text-align:center; white-space:nowrap; }
.suivi-table th { background:#f3f4f6; font-weight:700; position:sticky; top:0; z-index:2; font-size:12px; color:#374151; text-transform:uppercase; letter-spacing:0.3px; }
.suivi-th-eleve { text-align:left; min-width:160px; }
.suivi-td-eleve { text-align:left; position:sticky; left:0; z-index:1; background:#fff; font-weight:600; min-width:160px; font-size:14px; }

/* ── Bilan sélecteur + nom cliquable ── */
.suivi-bilan-item { display:flex; align-items:center; gap:10px; padding:10px 14px; border:1.5px solid #e5e7eb; border-radius:10px; cursor:pointer; transition:all 0.2s; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.suivi-bilan-item:hover { border-color:#60a5fa; background:#eff6ff; box-shadow:0 3px 10px rgba(37,99,235,0.1); transform:translateY(-1px); }
.suivi-td-name { cursor:pointer; border-bottom:1px dashed transparent; transition:all 0.15s; }
.suivi-td-name:hover { color:#1e40af; border-bottom-color:#1e40af; }

/* ── Bilan interactif — blocs ceintures ── */

/* ── Bilan — lignes de brevets (toggle fait/pas fait) ── */

/* ── Tableau : cellule brevet (toggle) ── */

/* ── Tableau : cellule test ceinture (cycle) — refonte ergo v5.6 : 44x36 + font 14 ── */
.suivi-cell-test { width:44px; height:36px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; font-size:14px; font-weight:700; transition:all 0.15s; letter-spacing:0.3px; box-shadow:0 1px 2px rgba(0,0,0,0.08); }
.suivi-cell-test:hover { transform:scale(1.08); opacity:0.9; }

/* ── Tableau compact (1 col par ceinture) ── */
.suivi-table-compact { table-layout:auto; }
.suivi-table-compact th, .suivi-table-compact td { white-space:normal; padding:6px 4px; }
.suivi-table-compact .suivi-th-eleve { min-width:130px; }

/* ══════════════════════════════════════════════
   PLANS DE TRAVAIL
   ══════════════════════════════════════════════ */
.plans-toolbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; flex-wrap:wrap; gap:10px; padding:12px 16px; background:#fff; border-radius:10px; border:1.5px solid #e5e7eb; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.plans-toolbar h2 { font-size:20px; font-weight:800; color:#1e40af; margin:0; }

/* ── Grille de cartes élèves (plans) — refonte ergo v5.8 : carte 320px, avatar 48, barre 10px, flèche permanente ── */
.plans-eleves-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:14px; }
.plan-eleve-card { background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; padding:0; cursor:pointer; transition:all 0.2s; overflow:hidden; position:relative; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.plan-eleve-card:hover { box-shadow:0 6px 20px rgba(37,99,235,0.12); transform:translateY(-2px); border-color:#93c5fd; }
.plan-eleve-header { display:flex; align-items:center; gap:12px; padding:14px 14px 10px; }
.plan-eleve-avatar { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:17px; color:#fff; flex-shrink:0; letter-spacing:-0.5px; }
.plan-eleve-identity { flex:1; min-width:0; }
/* plan-eleve-name / plan-eleve-niveau retirées en v0.10.17 : la carte réutilise
   désormais .eleve-card-prenom / .eleve-card-nom, communes avec la carte Suivi. */
.plan-eleve-active { padding:0 14px 14px; }
.plan-eleve-active-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
/* Autonomie : passe en pill colorée (au lieu de simple texte) */
.plan-eleve-auto { font-size:13px; font-weight:500; padding:4px 10px; border-radius:8px; flex-shrink:0; }
.plan-eleve-plan-titre { font-size:14px; font-weight:500; color:#1f2937; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.plan-eleve-bar-wrap { height:10px; background:#e5e7eb; border-radius:5px; overflow:hidden; margin-bottom:6px; }
.plan-eleve-bar { height:100%; border-radius:5px; transition:width 0.3s; }
.plan-eleve-bar-label { font-size:13px; color:#6b7280; display:flex; justify-content:space-between; }
.plan-eleve-bar-label strong { color:#1f2937; font-weight:600; }
.plan-eleve-empty { padding:12px 14px 14px; font-size:13px; color:#9ca3af; font-style:italic; }
/* Flèche : maintenant permanente (refonte ergo v5.8) */
.plan-eleve-arrow { font-size:18px; color:#9ca3af; flex-shrink:0; transition:color 0.15s; }
.plan-eleve-card:hover .plan-eleve-arrow { color:#3b82f6; }

/* ── Liste des plans ── */
.plans-list { display:flex; flex-direction:column; gap:8px; }
.plan-card:hover { box-shadow:0 6px 20px rgba(37,99,235,0.1); transform:translateY(-2px); border-color:#93c5fd; }


/* ── Éditeur de plan — refonte PIDAPIManager ── */
.plan-editor { display:flex; flex-direction:column; gap:0; }
.plan-editor-header { display:flex; align-items:center; gap:12px; margin-bottom:16px; flex-wrap:wrap; }
.plan-editor-header h2 { flex:1; font-size:18px; font-weight:700; color:#1e40af; margin:0; }

/* Section ajout rapide — passée en <details> repliable (v0.11.4) : moins de place prise
   quand on édite déjà un plan existant, ouverte par défaut seulement pour un plan vide. */
.plan-quick-add { border:1.5px solid #86efac; border-radius:10px; padding:0; margin-bottom:14px; background:#f0fdf4; overflow:hidden; }
.plan-quick-add summary { display:flex; align-items:center; gap:8px; cursor:pointer; font-size:14px; font-weight:700; color:#16a34a; padding:12px 14px; list-style:none; user-select:none; }
.plan-quick-add summary::-webkit-details-marker { display:none; }
.plan-quick-add-caret { display:inline-block; font-size:11px; transition:transform 0.15s; }
.plan-quick-add[open] .plan-quick-add-caret { transform:rotate(90deg); }
.plan-quick-add > .plan-quick-grid { padding:0 14px 14px; }
.plan-quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:700px) { .plan-quick-grid { grid-template-columns:1fr; } }
.plan-quick-section label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.3px; color:#4b5563; display:block; margin-bottom:6px; }
.plan-quick-items { max-height:200px; overflow-y:auto; }
.plan-quick-parcours { margin-bottom:8px; }
.plan-quick-chip { display:inline-flex; align-items:center; gap:4px; padding:4px 10px; border:1px solid #d1d5db; border-radius:6px; background:#fff; font-size:11px; cursor:pointer; transition:all 0.12s; font-family:inherit; color:#374151; }
.plan-quick-chip:hover { border-color:#16a34a; background:#f0fdf4; }
.plan-quick-chip.added { background:#dcfce7; border-color:#4ade80; color:#166534; }
.plan-quick-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,0,0,0.1); }

/* Autonomie (réutilisé) */
.plan-autonomie-btns { display:flex; gap:8px; }
.plan-auto-btn { display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 18px; border:2px solid #d1d5db; border-radius:10px; background:#fff; cursor:pointer; transition:all 0.15s; flex:1; font-family:inherit; }
.plan-auto-btn:hover { border-color:var(--auto-color); }
.plan-auto-btn.active { border-color:var(--auto-color); background:color-mix(in srgb, var(--auto-color) 8%, #fff); box-shadow:0 0 0 3px color-mix(in srgb, var(--auto-color) 15%, transparent); }
.plan-auto-btn span:first-child { font-size:20px; }
.plan-auto-name { font-size:11px; font-weight:600; color:#4b5563; }
.plan-auto-btn.active .plan-auto-name { color:var(--auto-color); }

/* Section activités — zone principale mise en avant (v0.11.4) : bordure plus marquée,
   c'est l'élément dominant de l'écran d'édition. */
.plan-activities-section { border:2px solid #34d399; border-radius:10px; padding:14px; margin-bottom:14px; background:#ecfdf5; }
.plan-activities-section-main { box-shadow:0 1px 3px rgba(5,150,105,0.08); }
.plan-activities-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; flex-wrap:wrap; gap:6px; }
.plan-activities-header h3 { font-size:15px; font-weight:700; color:#059669; margin:0; }

/* Config avancée */
.plan-config-details { border:1px solid #d1d5db; border-radius:10px; padding:14px; margin-bottom:14px; }
.plan-config-details summary { cursor:pointer; font-weight:600; color:#4b5563; font-size:13px; }
.plan-config-details summary:hover { color:#1f2937; }
.plan-config-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }

/* ── Items (brevets et activités dans le plan) ── */
.plan-items-list { display:flex; flex-direction:column; gap:4px; min-height:50px; max-height:300px; overflow-y:auto; padding:8px; background:#fff; border:1px solid #d1d5db; border-radius:6px; }
/* Zone principale agrandie (v0.11.4) : nettement plus de hauteur visible avant scroll,
   puisque c'est l'endroit où l'enseignant passe le plus de temps (ajuster, grouper, réordonner). */
.plan-items-list-main { max-height:min(60vh, 640px); padding:10px; gap:6px; }
.plan-empty { text-align:center; padding:20px; color:#6b7280; font-size:12px; border:2px dashed #d1d5db; border-radius:8px; }
.plan-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid #d1d5db; border-radius:6px; transition:all 0.12s; background:#fff; }
.plan-items-list-main .plan-item { padding:8px 10px; }
.plan-item:hover { border-color:#93c5fd; box-shadow:0 2px 6px rgba(0,0,0,0.04); }
.plan-drag-handle { cursor:grab; color:#9ca3af; font-size:14px; padding:0 4px; user-select:none; }
.plan-drag-handle:active { cursor:grabbing; }
.plan-draggable.drag-over-chip { border-color:#3b82f6; border-style:dashed; background:#dbeafe; }
.plan-item:hover { border-color:#93c5fd; }
.plan-item-ceinture { width:10px; height:10px; border-radius:50%; flex-shrink:0; border:1px solid rgba(0,0,0,0.1); }
.plan-item-content { flex:1; min-width:0; }
.plan-item-titre { font-size:13px; font-weight:600; color:#1f2937; }
.plan-item-meta { font-size:10px; color:#6b7280; }
.plan-item-input { width:100%; padding:4px 6px; border:1px solid transparent; border-radius:6px; font-size:13px; font-family:inherit; background:transparent; }
.plan-item-input:hover { border-color:#d1d5db; }
.plan-item-input:focus { outline:none; border-color:#3b82f6; background:#fff; }
/* Champ groupe (v0.10.26) : discret par défaut, ne prend de la place visuelle que si rempli */
.plan-item-groupe-input { width:100%; padding:2px 6px; margin-top:2px; border:1px solid transparent; border-radius:5px; font-size:11px; font-family:inherit; background:transparent; color:#6b7280; }
.plan-item-groupe-input:hover { border-color:#e5e7eb; }
.plan-item-groupe-input:focus { outline:none; border-color:#8b5cf6; background:#fff; color:#111827; }
.plan-item-groupe-input:not(:placeholder-shown) { color:#7c3aed; font-weight:600; }
/* Champ compétence visée (v0.11.29) : note pédagogique réservée à l'enseignant,
   jamais imprimée sur le plan de l'élève. Style distinct du groupe (vert sobre). */
.plan-item-competence-input { width:100%; padding:2px 6px; margin-top:2px; border:1px solid transparent; border-radius:5px; font-size:11px; font-family:inherit; background:transparent; color:#6b7280; font-style:italic; }
.plan-item-competence-input:hover { border-color:#e5e7eb; }
.plan-item-competence-input:focus { outline:none; border-color:#059669; background:#fff; color:#111827; font-style:normal; }
.plan-item-competence-input:not(:placeholder-shown) { color:#047857; font-style:normal; }
.plan-item-remove { background:none; border:none; cursor:pointer; font-size:12px; color:#9ca3af; padding:2px 4px; border-radius:6px; }
.plan-item-remove:hover { color:#dc2626; background:#fef2f2; }
.plan-item-icone-btn { background:none; border:1px solid transparent; cursor:pointer; font-size:14px; padding:2px 4px; border-radius:6px; }
.plan-item-icone-btn:hover { border-color:#d1d5db; background:#f3f4f6; }

/* ── Picker de brevets (modale) ── */

/* ══════════════════════════════════════════
   MOBILE — Responsive < 600px
   ══════════════════════════════════════════ */
@media (max-width: 600px) {
  /* Parcours : colonnes empilées verticalement */
  .parcours-ceintures-grid { flex-direction:column; gap:6px; }
  .parcours-col { width:100%; }

  /* Cards parcours : grille 1 colonne */
  .parcours-cards-grid { grid-template-columns:1fr !important; }

  /* Sous-onglets : scrollables */
  .brevet-subtabs { overflow-x:auto; -webkit-overflow-scrolling:touch; gap:4px; }
  .brevet-subtab { flex:none; padding:8px 14px; font-size:13px; white-space:nowrap; }

  /* Éditeur brevets : 1 colonne */
  .brevet-editor-2col { grid-template-columns:1fr; }
  .brevet-col-preview { display:none; }

  /* Plan editor : ajout rapide compact */
  .plan-quick-grid { grid-template-columns:1fr; }
  .plan-config-grid { grid-template-columns:1fr; }
  .plan-editor-header { flex-wrap:wrap; gap:8px; }
  .plan-editor-header h2 { font-size:14px; flex:1 1 100%; order:-1; }

  /* Plan list actions : empilés */
  .plan-list-actions { flex-direction:column; gap:4px; }

  /* Élèves grille : 2 colonnes */
  .plans-eleves-grid { grid-template-columns:1fr 1fr !important; gap:8px; }
  .eleve-cards-grid { grid-template-columns:1fr 1fr !important; gap:8px; }

  /* Boutons : plus petits */
  .btn-brevet { padding:7px 12px; font-size:12px; }
  .btn-brevet.btn-sm { padding:4px 8px; font-size:11px; }

  /* Modale : plein écran */
  .brevet-modal-overlay { padding:0; }
  .brevet-modal { max-width:100%; width:100%; max-height:100vh; border-radius:0; }
  .brevet-modal-body { padding:14px; }
  .brevet-modal-header { padding:10px 14px; flex-wrap:wrap; gap:6px; }
  .brevet-modal-header h3 { font-size:15px; flex:1 1 100%; }

  /* FAB plus petit sur mobile */
  .fab-plans { width:48px; height:48px; font-size:20px; bottom:16px; right:16px; }

  /* Sidebar cachée sur mobile par défaut, révélée en overlay via mobile-open */
  .sidebar:not(.mobile-open) { width:0; min-width:0; overflow:hidden; }
  .sidebar.mobile-open { width:220px; min-width:220px; position:fixed; top:0; left:0; height:100vh; z-index:300; }
  /* Sur mobile, on ignore l'état compact desktop */
  .sidebar.compact.mobile-open { width:220px; min-width:220px; }
  .sidebar.compact .sidebar-label, .sidebar.compact .sidebar-title, .sidebar.compact .sidebar-section-label { opacity:1; }
}

/* Tablettes 601-900px */
@media (min-width:601px) and (max-width:900px) {
  .parcours-ceintures-grid { gap:6px; }
  .parcours-col { min-width:120px; flex:1 1 calc(33% - 6px); }
  .plans-eleves-grid { grid-template-columns:repeat(3, 1fr) !important; }
  .eleve-cards-grid { grid-template-columns:repeat(3, 1fr) !important; }
}

/* ── Print ── */
@media print {
  .brevet-capture-banner, .brevet-modal-header, .app-header, .fab-francais, .fab-maths { display:none !important; }
  .brevet-modal-overlay { position:static; background:none; display:block !important; padding:0; }
  .brevet-modal { max-width:100%; width:100%; box-shadow:none; max-height:none; }
}

/* ── Barre modèles plans ── */

/* ── Badges TEST / Entr. dans les plans ── */
.plan-badge-test { display:inline-flex; align-items:center; justify-content:center; background:#dc2626; color:#fff; font-size:9px; font-weight:700; padding:2px 6px; border-radius:6px; letter-spacing:0.3px; flex-shrink:0; }
.plan-badge-entr { display:inline-flex; align-items:center; justify-content:center; background:#6b7280; color:#fff; font-size:9px; font-weight:700; padding:2px 6px; border-radius:6px; letter-spacing:0.3px; flex-shrink:0; }
.plan-item-test { background:#fef2f2; border-color:#fca5a5; }

/* ============================================
   BILAN ÉLÈVE — refonte ergo v5.6
   Filtres rapides + accordéon ceintures exclusif
   Lignes brevet 48px, cases à cocher 28px, grille 2 colonnes
   ============================================ */

/* Barre de filtres en haut du bilan (À valider / Tests / Tous) */
.bilan-filter-bar { display:flex; align-items:center; gap:var(--espace-md); padding:var(--espace-xl) 0; border-bottom:1px solid var(--couleur-surface-grise); flex-wrap:wrap; margin-bottom:var(--espace-xl); }
.bilan-filter-chip { padding:var(--espace-md) var(--espace-2xl); border-radius:var(--radius-md); border:1.5px solid var(--couleur-bordure-hover); background:var(--couleur-surface); font-size:var(--texte-base); font-weight:600; color:#4b5563; cursor:pointer; font-family:inherit; transition:all 0.15s; min-height:var(--cible-sm); }
.bilan-filter-chip:hover { border-color:var(--couleur-texte-secondaire); }
.bilan-filter-chip.active { background:#1e40af; color:#fff; border-color:#1e40af; box-shadow:0 2px 6px rgba(30,64,175,0.25); }
.bilan-filter-count { opacity:0.7; margin-left:2px; }

/* Carte parcours dans le bilan (s'ouvre pour afficher les ceintures) */
.bilan-parcours-card { padding:14px 16px; margin-bottom:10px; background:#f8fafc; border-radius:10px; cursor:pointer; transition:background 0.15s; border-left:4px solid #9ca3af; }
.bilan-parcours-card:hover { background:#f1f5f9; }
.bilan-parcours-head { display:flex; align-items:center; gap:12px; }
.bilan-parcours-title { font-size:15px; font-weight:700; color:#111827; flex:1; min-width:0; }

/* Liste des ceintures à l'intérieur d'un parcours déplié (accordéon) */
.bilan-ceintures-list { display:flex; flex-direction:column; gap:6px; margin-top:14px; padding-top:14px; border-top:1px solid #e5e7eb; }

/* En-tête de ceinture (cliquable pour déplier/replier) — cible 56px */
.bilan-ceint-row { background:#fff; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
.bilan-ceint-head { display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; min-height:56px; transition:background 0.15s; }
.bilan-ceint-head:hover { background:#f9fafb; }
.bilan-ceint-row.is-open .bilan-ceint-head { background:#fefce8; }
.bilan-ceint-circle { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; color:#fff; font-size:14px; flex-shrink:0; border:1px solid rgba(0,0,0,0.1); }
.bilan-ceint-info { flex:1; min-width:0; }
.bilan-ceint-name { font-size:15px; font-weight:600; color:#111827; }
.bilan-ceint-progress { font-size:13px; color:#6b7280; margin-top:2px; }
.bilan-ceint-bar { width:80px; height:6px; border-radius:3px; background:#e5e7eb; overflow:hidden; flex-shrink:0; }
.bilan-ceint-bar-fill { height:100%; border-radius:3px; transition:width 0.3s; }
.bilan-ceint-chevron { color:#9ca3af; font-size:18px; flex-shrink:0; transition:transform 0.15s; }
.bilan-ceint-row.is-open .bilan-ceint-chevron { transform:rotate(90deg); }
/* Pill d'état de la ceinture (test réussi / raté / entraînement) — cible 32px */
.bilan-ceint-state { font-size:13px; font-weight:600; padding:6px 12px; border-radius:8px; flex-shrink:0; cursor:pointer; border:none; font-family:inherit; min-height:32px; display:inline-flex; align-items:center; transition:all 0.15s; }
.bilan-ceint-state:hover { transform:scale(1.04); }

/* Grille 2 colonnes des brevets dans la ceinture dépliée */
/* 3 colonnes (v0.11.5) : la modale de bilan est désormais plus large (1100px), profite mieux
   de l'espace pour rendre chaque carte de brevet plus visible sans scroller autant. */
.bilan-brevets-grid { display:none; grid-template-columns:1fr 1fr 1fr; gap:6px; padding:4px 12px 12px; }
.bilan-ceint-row.is-open .bilan-brevets-grid { display:grid; }
@media (max-width:900px) { .bilan-brevets-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:640px) { .bilan-brevets-grid { grid-template-columns:1fr; } }

/* Ligne brevet cliquable — cible 48px de haut (token --cible-xl) */
.bilan-brevet-line { display:flex; align-items:center; gap:var(--espace-lg); padding:var(--espace-lg) var(--espace-xl); border-radius:var(--radius-md); background:var(--couleur-surface); border:1px solid var(--couleur-surface-grise); min-height:var(--cible-xl); cursor:pointer; transition:all 0.12s; }
.bilan-brevet-line:hover { background:var(--couleur-surface-douce); border-color:var(--couleur-bordure-douce); }
.bilan-brevet-line.is-test { background:#fef2f2; border-color:#fecaca; }
.bilan-brevet-line.is-test:hover { background:#fee2e2; }

/* Case à cocher 28px (token --icone-lg) */
.bilan-brevet-check { width:var(--icone-lg); height:var(--icone-lg); border-radius:var(--radius-md); border:2px solid var(--couleur-bordure-hover); background:var(--couleur-surface); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:var(--texte-lg); font-weight:700; color:#fff; transition:all 0.15s; }
.bilan-brevet-check.is-done { border-color:var(--couleur-succes); background:var(--couleur-succes); }

/* Titre du brevet : taille lisible 14px (--texte-base) */
.bilan-brevet-title { font-size:var(--texte-base); color:var(--couleur-texte); flex:1; min-width:0; line-height:1.3; }
.bilan-brevet-date { font-size:var(--texte-sm); color:var(--couleur-texte-secondaire); flex-shrink:0; }
.bilan-brevet-tag-test { background:var(--couleur-danger); color:#fff; font-size:var(--texte-xs); font-weight:700; padding:2px var(--espace-sm); border-radius:var(--radius-sm); margin-right:var(--espace-sm); letter-spacing:0.3px; flex-shrink:0; }

/* État vide (filtre actif qui ne renvoie aucun brevet) */
.bilan-empty-msg { padding:18px; text-align:center; color:#9ca3af; font-size:13px; font-style:italic; }

/* ════════════════════════════════════════════════
   MODALE COMPÉTENCES À 2 TABS — refonte v6.0
   Tab Ceinture : pré-sélection des compétences pour toute la ceinture
   Tab Brevet : sélection parmi les compétences ceinture pour ce brevet
   ════════════════════════════════════════════════ */
.comp-modal-tabs { display:flex; gap:var(--espace-sm); border-bottom:2px solid var(--couleur-bordure-douce); margin-bottom:var(--espace-2xl); padding:0 var(--espace-xs); }
.comp-modal-tab { padding:var(--espace-lg) var(--espace-2xl); border:none; background:transparent; font-size:var(--texte-base); font-weight:600; color:var(--couleur-texte-tertiaire); cursor:pointer; font-family:inherit; border-bottom:3px solid transparent; margin-bottom:-2px; transition:all 0.15s; display:inline-flex; align-items:center; gap:var(--espace-md); min-height:var(--cible-md); }
.comp-modal-tab:hover { color:var(--couleur-texte-secondaire); }
.comp-modal-tab.active { color:#5b21b6; border-bottom-color:#7c3aed; }
.comp-modal-tab.disabled { color:#cbd5e0; cursor:not-allowed; }
.comp-modal-tab.disabled:hover { color:#cbd5e0; }
.comp-tab-badge { font-size:var(--texte-xs); padding:2px var(--espace-sm); border-radius:var(--radius-pill); background:var(--couleur-surface-grise); color:var(--couleur-texte-secondaire); font-weight:700; }
.comp-modal-tab.active .comp-tab-badge { background:#ede9fe; color:#5b21b6; }

/* Message contextuel quand la ceinture n'a pas encore de compétences */
.comp-empty-state { padding:var(--espace-4xl) var(--espace-2xl); text-align:center; background:#fffbeb; border:1.5px dashed #fcd34d; border-radius:var(--radius-xl); margin:var(--espace-xl) 0; }
.comp-empty-state-icon { font-size:36px; margin-bottom:var(--espace-md); }
.comp-empty-state-title { font-size:var(--texte-lg); font-weight:600; color:#92400e; margin-bottom:var(--espace-md); }
.comp-empty-state-text { font-size:var(--texte-base); color:#78350f; line-height:1.5; max-width:480px; margin:0 auto var(--espace-xl); }
.comp-empty-state-btn { padding:var(--espace-lg) var(--espace-4xl); background:#7c3aed; color:#fff; border:none; border-radius:var(--radius-md); font-size:var(--texte-base); font-weight:600; cursor:pointer; font-family:inherit; min-height:var(--cible-lg); }
.comp-empty-state-btn:hover { background:#6d28d9; }

/* Conteneur d'une vue de tab (Ceinture ou Brevet) */
.comp-tab-content { display:none; }
.comp-tab-content.active { display:block; }

/* Info de tab Ceinture : explique le contexte */
.comp-tab-header { background:#f5f3ff; border:1px solid #ddd6fe; border-radius:var(--radius-lg); padding:var(--espace-xl) var(--espace-2xl); margin-bottom:var(--espace-xl); font-size:var(--texte-sm); color:#5b21b6; line-height:1.5; }
.comp-tab-header strong { color:#4c1d95; font-weight:600; }