/* =========================================================================
   bases-de-donnees.css — /projets/bases-de-donnees. Complète demo.css.
   Séries des graphiques : mêmes teintes validées que la page
   d'apprentissage automatique. Rouge réservé à ce qui est dangereux
   (saisie devenue du code, erreur), toujours accompagné d'un libellé.
   ========================================================================= */

.demo-bdd {
    --bd-serie1: #0E9C9C;
    --bd-serie2: #9333EA;
    --bd-grise: #9C95B8;
    --bd-surface: #F7F6FC;
    --bd-danger: #C62F2F;
    --bd-danger-fond: rgba(198, 47, 47, 0.12);
    --bd-donnee-fond: rgba(14, 156, 156, 0.14);
    --bd-attention: #A15C00;
}
html.dark-mode .demo-bdd {
    --bd-serie1: #17A597;
    --bd-serie2: #C74BE6;
    --bd-grise: #5E5677;
    --bd-surface: #0E081C;
    --bd-danger: #F07474;
    --bd-danger-fond: rgba(240, 116, 116, 0.16);
    --bd-donnee-fond: rgba(23, 165, 151, 0.20);
    --bd-attention: #F0B45A;
}

.bd-etape {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent-color);
    margin-bottom: 0.4rem;
}
.bd-texte { font-size: 0.93rem; color: var(--text-secondary); line-height: 1.65; }
.bd-lecons { margin-top: 1rem; }
.bd-sources { font-size: 0.84rem; }

/* SQL affiché : même police que le code du site. */
.bd-sql {
    margin: 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--accent-soft);
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-color);
    white-space: pre;
    overflow-x: auto;
}
.bd-sql--analyse,
.bd-sql--parametres { white-space: pre-wrap; overflow-wrap: anywhere; }

/* Tableaux de résultats, à la manière d'une console SQL. */
.bd-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.bd-table caption { text-align: left; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); padding-bottom: 6px; }
.bd-table th,
.bd-table td { padding: 7px 10px; border-bottom: 1px solid var(--border-color); text-align: right; }
.bd-table th:first-child { text-align: left; }
.bd-table thead th { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; color: var(--text-secondary); }
.bd-table tbody th { font-weight: 700; }
.bd-table tr.est-alterne { background: var(--submenu-hover); }
.bd-table tr.est-hors td,
.bd-table tr.est-hors th { color: var(--text-secondary); }
.bd-table input[type="number"] {
    width: 6.5em;
    font: inherit;
    text-align: right;
    color: var(--text-color);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 5px 8px;
}
.bd-table input:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 1px; }

/* --- 1. Fonctions analytiques ------------------------------------------------ */
.bd-analytique { display: grid; gap: 4px; }
.bd-panneau { display: grid; gap: 14px; }
.bd-panneau__reglages { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; }
.bd-panneau__reglages select { min-width: 280px; }
.bd-fenetre { min-width: 260px; }
.bd-fenetre input[type="range"] { width: 100%; accent-color: var(--accent-color); }
.bd-fenetre output { color: var(--accent-color); font-weight: 800; margin-left: 4px; }
/* Tableaux larges : ils défilent dans leur cadre, jamais la page. */
.bd-resultat { display: grid; gap: 12px; min-width: 0; overflow-x: auto; }
.bd-defilement { max-height: 360px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 10px; scrollbar-width: thin; }
.bd-defilement thead th { position: sticky; top: 0; background: var(--bg-elevated); }
.bd-table--glissante tbody tr { cursor: default; outline: none; }
.bd-table--glissante tbody tr.est-fenetre { background: var(--bd-donnee-fond); }
.bd-table--glissante tbody tr.est-courante { box-shadow: inset 3px 0 0 var(--bd-serie1); }
.bd-table--glissante tbody tr:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-color); }
.bd-alerte { font-size: 0.9rem; line-height: 1.6; color: var(--text-color); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bd-donnee-fond); }
.bd-alerte.est-grave { background: var(--bd-danger-fond); border-color: var(--bd-danger); }

/* Graphe de la moyenne glissante */
.bd-graphe { margin: 0; display: grid; gap: 6px; }
.bd-graphe svg { width: 100%; height: auto; display: block; }
.bd-graphe__grille { stroke: var(--border-color); stroke-width: 1; }
.bd-graphe__tick { fill: var(--text-secondary); font-size: 11px; text-anchor: end; dominant-baseline: central; font-variant-numeric: tabular-nums; }
.bd-graphe__tick--x { dominant-baseline: auto; }
.bd-graphe__point { fill: var(--bd-serie1); stroke: var(--bd-surface); stroke-width: 1.5; }
.bd-graphe__ligne { fill: none; stroke: var(--bd-serie2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bd-graphe__fenetre { fill: var(--bd-donnee-fond); }

.bd-cles { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 0.8rem; color: var(--text-secondary); }
.bd-cle { display: inline-block; vertical-align: middle; margin-right: -8px; }
.bd-cle--points { width: 9px; height: 9px; border-radius: 50%; background: var(--bd-serie1); }
.bd-cle--ligne { width: 18px; height: 2px; border-radius: 2px; background: var(--bd-serie2); }
.bd-cle--avant,
.bd-cle--apres { width: 14px; height: 10px; border-radius: 0 3px 3px 0; background: var(--bd-grise); }
.bd-cle--apres { background: var(--bd-serie1); }

/* --- 2. Coûts des plans ------------------------------------------------------ */
.bd-plans { display: grid; gap: 14px; }
.bd-couts { list-style: none; display: grid; gap: 16px; }
.bd-cout { display: grid; gap: 6px; }
.bd-cout__question { font-size: 0.9rem; }
.bd-cout__piste { display: grid; gap: 3px; }
/* Barre puis valeur, collée à son extrémité. */
.bd-cout__rangee { display: flex; align-items: center; gap: 8px; }
.bd-cout__barre { height: 14px; border-radius: 0 4px 4px 0; min-width: 3px; flex: none; }
.bd-cout__barre--avant { width: calc(var(--part-avant, 1) * (100% - 3em)); background: var(--bd-grise); }
.bd-cout__barre--apres { width: calc(var(--part-apres, 1) * (100% - 3em)); background: var(--bd-serie1); }
.bd-cout__valeur { font-size: 0.82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.bd-plan summary { cursor: pointer; font-size: 0.82rem; font-weight: 600; color: var(--text-secondary); width: fit-content; }
.bd-plan summary:hover { color: var(--text-color); }
.bd-plan__paire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.bd-plan__paire pre {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--accent-soft);
    border: 1px solid var(--border-color);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    line-height: 1.55;
    overflow-x: auto;
}

/* --- 3. Déclencheurs --------------------------------------------------------- */
.bd-declencheurs { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.bd-declencheurs__commande,
.bd-declencheurs__console { display: grid; gap: 14px; align-content: start; min-width: 0; overflow-x: auto; }
.bd-declencheurs__commande > .demo-btn-petit { width: fit-content; }
.bd-interrupteur { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 0.92rem; cursor: pointer; width: fit-content; }
.bd-interrupteur input { width: 18px; height: 18px; accent-color: var(--accent-color); }
.bd-entete { display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-elevated); }
.bd-entete__titre { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.bd-entete strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.bd-entete__calcul { font-size: 0.84rem; color: var(--text-secondary); }
.bd-entete__modif { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.86rem; }
.bd-entete__modif input {
    width: 8em;
    font: inherit;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 9px;
}
.bd-console__titre { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.bd-console { list-style: none; display: grid; gap: 8px; min-height: 120px; max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
.bd-console li {
    display: grid;
    gap: 4px;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--bd-serie1);
    background: var(--bg-elevated);
    font-size: 0.8rem;
}
.bd-console li.est-erreur { border-left-color: var(--bd-danger); background: var(--bd-danger-fond); }
.bd-console__requete { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-secondary); overflow-wrap: anywhere; }
.bd-console__reponse { font-family: var(--font-mono); font-size: 0.76rem; color: var(--text-color); overflow-wrap: anywhere; }
.bd-historique td[colspan] { text-align: left; color: var(--text-secondary); }

/* --- 4. Fleuriste ------------------------------------------------------------ */
.bd-fleuriste { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1rem; align-items: start; }
.bd-injection { display: grid; gap: 14px; }
.bd-formulaire { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 12px; }
.bd-formulaire input { font-family: var(--font-mono); font-size: 0.85rem; }
.bd-requetes { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 24px; margin-top: 1rem; align-items: start; }
.bd-requetes > div { display: grid; gap: 10px; min-width: 0; }
.bd-requetes__titre { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.bd-marque { border-radius: 4px; padding: 0 2px; }
.bd-marque--donnee { background: var(--bd-donnee-fond); }
.bd-marque--injecte { background: var(--bd-danger-fond); box-shadow: inset 0 -2px 0 var(--bd-danger); font-weight: 700; }
.bd-marque--neutralise { color: var(--text-secondary); text-decoration: line-through; text-decoration-color: var(--text-secondary); opacity: 0.8; }
.bd-cles .bd-marque { font-size: 0.8rem; }
.bd-verdict { font-size: 0.9rem; line-height: 1.6; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bd-donnee-fond); }
.bd-verdict.est-attention { border-color: var(--bd-attention); background: transparent; }
.bd-verdict.est-grave { border-color: var(--bd-danger); background: var(--bd-danger-fond); }

@media (max-width: 860px) {
    .bd-declencheurs,
    .bd-fleuriste,
    .bd-requetes,
    .bd-plan__paire { grid-template-columns: 1fr; }
    .bd-formulaire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
    .bd-formulaire { grid-template-columns: 1fr; }
    .bd-panneau__reglages select { min-width: 0; width: 100%; }
    .bd-table th,
    .bd-table td { padding: 6px 6px; }
    .bd-table input[type="number"] { width: 4.6em; }
}