/* =========================================================================
   camera-thermique.css — /projets/camera-thermique. Complète demo.css.

   Les couleurs des trois courbes sont des variables relues par le script :
   légende et tracé restent d'accord, dans les deux thèmes.
   ========================================================================= */

.demo-thermique {
    --th-max: #C2410C;
    --th-moy: #6B6390;
    --th-min: #0E7C9C;
    --th-grille: rgba(90, 70, 160, 0.14);
    --th-texte: #746C99;
    --th-curseur: #2A2145;
}
html.dark-mode .demo-thermique {
    --th-max: #FB923C;
    --th-moy: #B7A9DA;
    --th-min: #4CE0D2;
    --th-grille: rgba(168, 133, 255, 0.18);
    --th-texte: #9C8AC2;
    --th-curseur: #F4ECFF;
}

.demo-thermique code {
    font-family: var(--font-mono);
    font-size: 0.86em;
    padding: 1px 6px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--text-color);
}

/* --- Lecteur -------------------------------------------------------------- */
.th-lecteur {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 24px 32px;
    align-items: start;
}
.th-image { margin: 0; display: grid; gap: 10px; justify-items: center; }
.th-cadre { position: relative; width: 100%; max-width: 384px; }
.th-cadre canvas {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    border-radius: 14px;
    background: #000;
    image-rendering: pixelated;
}
.th-chargement {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #FFF;
    font-size: 0.9rem;
}
.th-echelle { width: 100%; max-width: 384px; display: grid; gap: 4px; }
.th-echelle canvas { width: 100%; height: 12px; border-radius: 6px; }
.th-echelle p {
    display: flex;
    justify-content: space-between;
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.th-panneau { display: grid; gap: 16px; align-content: start; }
.th-heure { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.th-heure small { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); }
.th-mesures { margin-bottom: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.th-vitesse select {
    font: inherit;
    font-size: 0.88rem;
    color: var(--text-color);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 7px 10px;
    cursor: pointer;
}
.th-panneau input[type="range"] { width: 100%; accent-color: var(--accent-color); }
.th-reglages { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--border-color); }
.th-case { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; cursor: pointer; }
.th-case input { accent-color: var(--accent-color); width: 1.05em; height: 1.05em; }

/* --- Courbe de la nuit ---------------------------------------------------- */
.th-courbe { grid-column: 1 / -1; margin: 0; display: grid; gap: 8px; }
.th-courbe figcaption { font-size: 0.85rem; color: var(--text-secondary); }
.th-legende { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.8rem; color: var(--text-secondary); }
.th-legende li { display: inline-flex; align-items: center; gap: 6px; }
.th-pastille { width: 14px; height: 3px; border-radius: 2px; }
.th-pastille--max { background: var(--th-max); }
.th-pastille--moy { background: var(--th-moy); }
.th-pastille--min { background: var(--th-min); }
.th-courbe__zone { position: relative; }
.th-courbe canvas { display: block; width: 100%; height: 190px; cursor: pointer; touch-action: none; }
.th-infobulle {
    position: absolute;
    top: 4px;
    transform: translateX(-50%);
    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;
    line-height: 1.5;
    white-space: pre;
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    z-index: 2;
}
.th-note { margin-top: 0.8rem; max-width: 60em; }

/* --- Chaîne d'acquisition ------------------------------------------------- */
.th-chaine {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    counter-reset: etape;
}
.th-chaine li { position: relative; padding: 18px 18px 20px; }
/* Flèche entre deux étapes, dessinée en CSS. */
.th-chaine li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    width: 8px;
    height: 8px;
    border: solid var(--accent-color);
    border-width: 2px 2px 0 0;
    transform: translateY(-50%) rotate(45deg);
    z-index: 1;
}
.th-chaine__num {
    width: 1.8em;
    height: 1.8em;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent-color);
    font-weight: 800;
    font-size: 0.85rem;
    margin-bottom: 0.7rem;
}
.th-chaine h3 { font-size: 0.98rem; font-weight: 700; margin-bottom: 0.4rem; }
.th-chaine p:not(.th-chaine__num) { font-size: 0.9rem; color: var(--text-secondary); line-height: 1.6; }

.th-trame { margin-top: 12px; }
.th-trame pre {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 12px 14px;
    max-height: 220px;
    overflow: auto;
    white-space: pre;
}

/* --- Augmentation météo ---------------------------------------------------- */
.th-meteo {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 20px 28px;
    align-items: start;
}
.th-meteo__image { margin: 0; display: grid; gap: 10px; }
.th-meteo__image canvas { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border-color); }
.th-meteo__image figcaption { font-size: 0.84rem; color: var(--text-secondary); line-height: 1.6; }
.th-meteo__panneau { display: grid; gap: 14px; align-content: start; }

@media (max-width: 860px) {
    .th-lecteur,
    .th-meteo { grid-template-columns: 1fr; }
    .th-chaine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .th-chaine li:nth-child(2)::after { display: none; }
}
@media (max-width: 560px) {
    .th-chaine { grid-template-columns: 1fr; }
    .th-chaine li::after { display: none; }
}