/* ══════════════════════════════════════════════════════════════════════════════
   Compétences par volet — éditeur TP STI2D (13/09/2026)

   PORTÉE : .tpc-zone, classe posée par le JS sur chaque point d'ancrage
   (un par onglet de l'éditeur, plus la ligne de récapitulation). Elle a
   remplacé l'ancienne portée par #tpProCompetencesVolets, devenue impossible
   quand les outils ont migré dans les onglets, qui sont des parents distincts.
   Accompagne apps/teacher/tp/competences-volets.js.
   Palette alignée sur la barre de filtres de la bibliothèque (gris 50 / bleu 500).

   Les boutons de ce composant portent data-couleurs dans le JS : sans cet
   attribut, la règle balai de apps/teacher/core/dashboard.css leur imposerait
   « color: #ffffff !important » (blanc sur blanc). Les couleurs ci-dessous
   gardent !important par prudence, mais c'est data-couleurs qui les rend
   effectives.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Zones et récapitulatif ─────────────────────────────────────────────────── */
.tpc-zone { margin-top: 14px; }

.tpc-zone.tpc-recap {
    padding: 8px 4px 0 4px;
    border-top: 1px solid #e2e8f0;
}

/* ── Un volet ───────────────────────────────────────────────────────────────── */
.tpc-zone .tpc-volet {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    padding: 12px 14px;
}

.tpc-zone .tpc-tete {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.tpc-zone .tpc-titre {
    font-weight: 700;
    font-size: 14px;
    color: #1f2937;
}

.tpc-zone .tpc-icone { font-size: 17px; }

/* Périmètre du volet : quels domaines il couvre (le cloisonnement est strict) */
.tpc-zone .tpc-perimetre {
    margin: 6px 0 0 0;
    font-size: 11px;
    font-weight: 600;
    color: #64748b;
    cursor: help;
}

.tpc-zone .tpc-compte {
    font-size: 11px;
    font-weight: 700;
    color: #475569;
    background: #e2e8f0;
    border-radius: 9999px;
    padding: 2px 9px;
}

.tpc-zone .tpc-ajouter {
    margin-left: auto;
    background: #ffffff !important;
    border: 2px solid #3b82f6 !important;
    color: #1d4ed8 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
}

.tpc-zone .tpc-ajouter:hover {
    background: #eff6ff !important;
    transform: translateY(-1px) !important;
}

/* ── Sélecteur déployé ──────────────────────────────────────────────────────── */
.tpc-zone .tpc-choix {
    margin-top: 10px;
    padding: 10px;
    background: #ffffff;
    border: 1px dashed #94a3b8;
    border-radius: 10px;
}

.tpc-zone .tpc-ligne {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.tpc-zone .tpc-select {
    flex: 1 1 320px;
    min-width: 0;
    max-width: 100%;
    padding: 7px 9px;
    font-size: 13px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: #ffffff;
    color: #1f2937;
}

.tpc-zone .tpc-select:focus {
    outline: none;
    border-color: #3b82f6;
}

/* Dégradé volontairement assombri : blanc sur #3b82f6 ne donne que 3,68:1,
   sous le minimum lisible de 4,5:1. Départ à #2563eb → 5,17:1. */
.tpc-zone .tpc-valider {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
}

.tpc-zone .tpc-valider:hover { filter: brightness(1.08); }

/* ── Pastilles ──────────────────────────────────────────────────────────────── */
.tpc-zone .tpc-pastilles {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tpc-zone .tpc-pastille {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: 100%;
    background: #ffffff;
    border: 2px solid #bfdbfe;
    border-radius: 9999px;
    padding: 4px 6px 4px 10px;
}

.tpc-zone .tpc-pastille--hors {
    border-color: #fcd34d;
    background: #fffbeb;
}

.tpc-zone .tpc-code {
    font-size: 12px;
    font-weight: 800;
    color: #1d4ed8;
    white-space: nowrap;
}

.tpc-zone .tpc-pastille--hors .tpc-code { color: #92400e; }

.tpc-zone .tpc-lib {
    font-size: 12px;
    color: #334155;
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpc-zone .tpc-retirer {
    background: #eff6ff !important;
    border: none !important;
    color: #1e40af !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 4px 7px !important;
    border-radius: 9999px !important;
    cursor: pointer !important;
}

.tpc-zone .tpc-retirer:hover {
    background: #fee2e2 !important;
    color: #b91c1c !important;
}

/* ── Divers ─────────────────────────────────────────────────────────────────── */
.tpc-zone .tpc-vide,
.tpc-zone .tpc-attente {
    margin: 8px 0 0 0;
    font-size: 12px;
    font-style: italic;
    color: #94a3b8;
}

.tpc-zone .tpc-pied {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    padding-top: 4px;
}

.tpc-zone .tpc-total {
    font-size: 12px;
    font-weight: 700;
    color: #1d4ed8;
}

.tpc-zone .tpc-source {
    font-size: 11px;
    color: #94a3b8;
    max-width: 62ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .tpc-zone .tpc-ajouter { margin-left: 0; width: 100%; }
    .tpc-zone .tpc-lib { max-width: 22ch; }
    .tpc-zone .tpc-source { max-width: 100%; white-space: normal; }
}