/* =========================================================================
   apprentissage-automatique.css — /projets/apprentissage-automatique.
   Complète demo.css. Couleurs des graphiques : deux séries validées pour
   le daltonisme et le contraste (clair et sombre), une rampe d'une seule
   teinte pour la carte de l'erreur. Le canvas relit ces variables.
   ========================================================================= */

.demo-ml {
    --ml-serie1: #0E9C9C;
    --ml-serie2: #9333EA;
    --ml-encre: #2A2145;
    --ml-encre2: #746C99;
    --ml-grille-trait: rgba(90, 70, 160, 0.12);
    --ml-surface: #F7F6FC;
    /* Erreur faible près de la surface, forte en teinte dense. */
    --ml-rampe-faible: #E4F4F2;
    --ml-rampe-forte: #0B5C5C;
}
html.dark-mode .demo-ml {
    --ml-serie1: #17A597;
    --ml-serie2: #C74BE6;
    --ml-encre: #F4ECFF;
    --ml-encre2: #9C8AC2;
    --ml-grille-trait: rgba(168, 133, 255, 0.14);
    --ml-surface: #0E081C;
    /* En sombre, l'ancre s'inverse : l'erreur forte ressort en clair. */
    --ml-rampe-faible: #0F1E26;
    --ml-rampe-forte: #3D8F88;
}

.ml-etape {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.4rem;
}
.ml-texte { font-size: 0.93rem; color: var(--text-secondary); line-height: 1.65; }
.ml-statut { font-size: 0.9rem; line-height: 1.55; color: var(--text-color); min-height: 1.5em; }
.ml-sous-titre { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-secondary); margin-bottom: 0.4rem; }
.ml-sources { font-size: 0.84rem; }

/* --- 1. La droite ----------------------------------------------------------- */
.ml-droite {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px 28px;
    align-items: start;
}
.ml-figure { margin: 0; display: grid; gap: 8px; min-width: 0; }
.ml-figure__titre { font-size: 0.86rem; font-weight: 700; }
.ml-figure svg { width: 100%; height: auto; display: block; }
.ml-reglages { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; }
.ml-reglages .demo-champ select { min-width: 150px; }
.ml-droite .ml-mesures,
.ml-droite .ml-statut { grid-column: 1 / -1; }
.ml-mesures { margin-bottom: 0; }
.ml-lecons { margin-top: 1rem; }

.ml-paysage { position: relative; }
.ml-paysage canvas { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; cursor: crosshair; touch-action: pan-y; }
.ml-infobulle {
    position: absolute;
    left: var(--x, 0);
    top: var(--y, 0);
    transform: translate(12px, -130%);
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-card);
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

/* SVG : axes récessifs, marques fines. */
.ml-grille { stroke: var(--ml-grille-trait); stroke-width: 1; }
.ml-tick { fill: var(--ml-encre2); font-size: 11px; font-variant-numeric: tabular-nums; }
.ml-tick--x { text-anchor: middle; dominant-baseline: hanging; }
.ml-tick--y { text-anchor: end; dominant-baseline: central; }
.ml-axe-nom { fill: var(--ml-encre2); font-size: 12px; font-weight: 700; dominant-baseline: hanging; }
.ml-axe-nom--x { text-anchor: end; dominant-baseline: auto; }
.ml-point { fill: var(--ml-serie1); stroke: var(--ml-surface); stroke-width: 2; }
.ml-cible { fill: transparent; }
.ml-points g:hover .ml-point { fill: var(--ml-serie2); }
.ml-trait0 { stroke: var(--ml-encre2); stroke-width: 1.5; }
.ml-trait2 { stroke: var(--ml-serie2); stroke-width: 2; stroke-linecap: round; }

/* Clés de légende : chaque marque dessinée comme sur le graphique. */
.ml-cles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.8rem; color: var(--text-secondary); }
.ml-cle { display: inline-block; margin-right: -8px; vertical-align: middle; }
.ml-cle--trait2,
.ml-cle--trait0 { width: 18px; height: 2px; border-radius: 2px; background: var(--ml-serie2); }
.ml-cle--trait0 { height: 1.5px; background: var(--ml-encre2); }
.ml-cle--depart { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ml-encre); background: var(--ml-surface); }
.ml-cle--arrivee,
.ml-cle--point2 { width: 11px; height: 11px; border-radius: 50%; background: var(--ml-serie2); }
.ml-cle--point1 { width: 11px; height: 11px; border-radius: 50%; background: var(--ml-serie1); }
.ml-cle--optimum { width: 12px; height: 12px; background: linear-gradient(var(--ml-encre), var(--ml-encre)) center / 2px 100% no-repeat, linear-gradient(var(--ml-encre), var(--ml-encre)) center / 100% 2px no-repeat; }
.ml-cle--brute { width: 9px; height: 9px; background: var(--ml-serie1); transform: rotate(45deg); margin-left: 2px; }
.ml-cle--reference { width: 2px; height: 14px; background: var(--ml-encre2); }
.ml-echelle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.ml-echelle i { width: 70px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--ml-rampe-faible), var(--ml-rampe-forte)); border: 1px solid var(--border-color); }

/* --- 2. Le projet ----------------------------------------------------------- */
.ml-projet { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.demo-ml .demo-texte code { font-size: 0.84em; }
.ml-etapes { margin: 0.9rem 0 0; padding-left: 1.3rem; display: grid; gap: 0.5rem; }
.ml-etapes li { color: var(--text-secondary); line-height: 1.6; font-size: 0.93rem; }
.ml-etapes strong { color: var(--text-color); }
.ml-scores { display: grid; gap: 12px; }
.ml-scores h3 { font-size: 1rem; font-weight: 700; }

.ml-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.ml-table th,
.ml-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); text-align: right; vertical-align: top; font-variant-numeric: tabular-nums; }
.ml-table th:first-child { text-align: left; }
.ml-table thead th { font-size: 0.76rem; color: var(--text-secondary); font-weight: 600; }
.ml-table tbody th { font-weight: 700; }
.ml-table tbody th small { display: block; font-weight: 500; font-size: 0.76rem; color: var(--text-secondary); }
.ml-table td { color: var(--text-secondary); }
.ml-table td strong { color: var(--text-color); }

/* --- 3. KNN ----------------------------------------------------------------- */
.ml-knn { display: grid; gap: 16px; }
.ml-knn__resultats { display: grid; gap: 18px; }
.ml-knn__grille { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ml-knn__grille > div { display: grid; gap: 8px; align-content: start; min-width: 0; }
.ml-knn__grille .demo-btn-petit { width: fit-content; }

.ml-confusion { overflow-x: auto; }
.ml-confusion__table td {
    text-align: center;
    color: var(--text-color);
    /* Même teinte que la série 1, plus dense quand la part de la ligne grandit. */
    background: color-mix(in srgb, var(--ml-serie1) calc(var(--part, 0) * 55%), transparent);
}
.ml-confusion__table td.est-diagonale { font-weight: 800; box-shadow: inset 0 0 0 1.5px var(--ml-serie1); }
.ml-confusion__table thead th { text-align: center; }
.ml-confusion__coin { font-weight: 500 !important; white-space: nowrap; }
.ml-voisins { margin-top: 4px; }
.ml-voisins td:nth-child(2),
.ml-voisins td:nth-child(3),
.ml-voisins th:nth-child(2),
.ml-voisins th:nth-child(3) { text-align: left; }
.ml-voisins tr.est-meme td { color: var(--text-color); }
.ml-voisins tr.est-meme td:nth-child(2) { font-weight: 700; }

/* Haltères */
.ml-halteres { display: grid; gap: 10px; margin-top: 1rem; }
.ml-halteres svg { width: 100%; height: auto; display: block; }
.ml-rangee-nom { fill: var(--ml-encre); font-size: 13.5px; font-weight: 600; text-anchor: end; dominant-baseline: central; }
.ml-haltere { stroke: var(--ml-encre2); stroke-width: 2; opacity: 0.55; }
.ml-reference { stroke: var(--ml-encre2); stroke-width: 2; }
.ml-point1 { fill: var(--ml-serie1); stroke: var(--ml-surface); stroke-width: 2; }
.ml-point2 { fill: var(--ml-serie2); stroke: var(--ml-surface); stroke-width: 2; }
.ml-marque:hover circle:first-child { stroke: var(--ml-encre); }
.ml-etiquette { fill: var(--ml-encre); font-size: 11.5px; font-weight: 700; text-anchor: middle; }
.ml-tableau summary { cursor: pointer; font-size: 0.84rem; font-weight: 600; color: var(--text-secondary); width: fit-content; }
.ml-tableau summary:hover { color: var(--text-color); }
.ml-tableau table { margin-top: 8px; }

/* --- 4. Importances --------------------------------------------------------- */
.ml-importances { margin: 0; display: grid; gap: 10px; }
.ml-barres { list-style: none; display: grid; gap: 9px; }
.ml-barre { display: grid; gap: 3px; }
.ml-barre__nom { font-size: 0.84rem; color: var(--text-color); }
.ml-barre__piste { display: flex; align-items: center; gap: 8px; }
.ml-barre__remplissage {
    height: 14px;
    width: calc(var(--part, 0) * (100% - 56px));
    min-width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--ml-serie1);
}
.ml-barre__valeur { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
    .ml-droite,
    .ml-projet,
    .ml-knn__grille { grid-template-columns: 1fr; }
    .ml-echelle { margin-left: 0; }
}
@media (max-width: 560px) {
    .ml-figure .ml-tick { font-size: 14px; }
    .ml-confusion__table th,
    .ml-confusion__table td { padding: 7px 5px; font-size: 0.8rem; }
    .ml-confusion__coin { white-space: normal; }
}