/* P2AI — « De l’eau à la vapeur, sous contrôle » : compléments à parcours.css */
:root { --red: #ff5a4f; --steam: #c9d4e3; }

/* Les étapes « simulation » laissent plus de scroll pour rejouer la séquence */
.ch-step-long { height: 360vh; }

/* Carte un peu plus large pour les courbes */
.ch-card-sim { --card-w: min(440px, 37vw); width: var(--card-w); padding-top: 1rem; padding-bottom: .9rem; top: calc(50% + 32px); max-height: calc(100vh - 92px); }
.ch-card-sim h2 { font-size: 1.4rem; margin-bottom: .5rem; }
.ch-card-sim p { font-size: .9rem; margin-bottom: .5rem; line-height: 1.45; }
.ch-card-sim .pc-num { margin-bottom: .35rem; }

.ch-loop { padding: .45rem .65rem; border-radius: 8px; background: rgba(0,174,239,.08); border: 1px dashed rgba(0,174,239,.45); line-height: 1.5; }
.ch-loop b { color: var(--blue); font-family: Manrope, Inter, sans-serif; }
.ch-loop span { color: var(--green); font-weight: 700; }
.ch-hint { color: #c4d0e0 !important; font-size: .88rem !important; }
.ch-hint b { color: #fff; }

/* Légende étape 1 */
.ch-legend { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1rem; padding: 0; margin: .3rem 0 .2rem; font-size: .82rem; color: var(--muted); }
.ch-legend li { display: flex; align-items: center; gap: .45rem; }
.ch-legend .dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ch-legend .dot.water { background: #2fa8ff; box-shadow: 0 0 8px rgba(47,168,255,.8); }
.ch-legend .dot.bubble { border: 2px solid #f2f7ff; background: rgba(255,255,255,.15); }
.ch-legend .dot.flame { background: radial-gradient(circle, #fff3c4, #ff8a1f 60%, #c7300b); box-shadow: 0 0 8px rgba(255,138,31,.9); }

/* Courbes */
.ch-chartbox { margin: .35rem 0 .45rem; padding: .45rem .5rem .35rem; border-radius: 9px; background: rgba(3, 8, 16, .62); border: 1px solid rgba(255,255,255,.08); }
.ch-chart { display: block; width: 100%; height: 124px; }
.ch-keys { list-style: none; display: flex; flex-wrap: wrap; gap: .15rem .8rem; margin: 0 0 .25rem; padding: 0; font-size: .7rem; color: var(--muted); font-weight: 600; }
.ch-keys li { display: flex; align-items: center; gap: .35rem; }
.ch-keys i { width: 14px; height: 3px; border-radius: 2px; background: var(--c); display: inline-block; }
.ch-keys i.dash { background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px); }
.ch-keys i.thin { height: 1.5px; opacity: .8; }

/* Décomposition P / I / D */
.ch-pid { display: grid; gap: .28rem; margin: .2rem 0 .45rem; }
.ch-pid-row { display: grid; grid-template-columns: 20px 1fr 92px 42px; align-items: center; gap: .45rem; font-size: .76rem; }
.ch-pid-row .k { font: 800 .9rem/1 Manrope, Inter, sans-serif; color: var(--green); text-align: center; }
.ch-pid-row .l { color: #c4d0e0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-pid-row .bar { position: relative; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08); overflow: hidden; }
.ch-pid-row .bar.c::before { content: ''; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: rgba(255,255,255,.35); }
.ch-pid-row .bar i { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--blue), var(--green)); }
.ch-pid-row b { font: 700 .8rem/1 Manrope, Inter, sans-serif; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.ch-pid-sum { margin: .15rem 0 0 !important; font-size: .8rem !important; color: var(--muted) !important; }
.ch-pid-sum b { color: var(--amber); font-family: Manrope, Inter, sans-serif; font-size: .95rem; }
.ch-sat { margin-left: .5rem; font-size: .68rem; font-weight: 700; color: var(--amber); padding: .05rem .4rem; border-radius: 999px; border: 1px solid rgba(255,176,32,.5); opacity: 0; transition: opacity .2s; }
.ch-sat.on { opacity: 1; }

.ch-note { font-size: .8rem !important; color: #c4d0e0 !important; padding: .4rem .6rem; border-left: 2px solid var(--amber); background: rgba(255,176,32,.07); border-radius: 0 6px 6px 0; transition: opacity .3s; }
.ch-note b { color: var(--amber); }

/* Réglages */
.ch-tune { margin: .2rem 0 .55rem; border-radius: 9px; border: 1px solid rgba(255,255,255,.1); background: rgba(3,8,16,.45); padding: .1rem .6rem; }
.ch-tune summary { cursor: pointer; font-size: .82rem; font-weight: 700; color: var(--blue); padding: .4rem 0; list-style-position: inside; }
.ch-tune[open] { padding-bottom: .55rem; }
.ch-tune label, .ch-slider { display: grid; grid-template-columns: 92px 1fr 52px; align-items: center; gap: .5rem; font-size: .78rem; color: #c4d0e0; margin: .2rem 0; }
.ch-tune label small { color: var(--muted); font-size: .68rem; margin-left: .2rem; }
.ch-tune output, .ch-slider output { font: 700 .8rem Manrope, Inter, sans-serif; color: #fff; text-align: right; font-variant-numeric: tabular-nums; }
.ch-tune .ch-check { grid-template-columns: 18px 1fr; margin-top: .35rem; }
.ch-slider { grid-template-columns: 1fr 120px 58px; margin: .45rem 0 .2rem; padding: .45rem .6rem; border-radius: 9px; background: rgba(3,8,16,.45); border: 1px solid rgba(255,255,255,.1); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--green); border: 2px solid #0b1220; box-shadow: 0 0 0 1px var(--green); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--green); border: 2px solid #0b1220; cursor: pointer; }
input[type="range"]:focus-visible { box-shadow: 0 0 0 2px rgba(0,174,239,.6); }
input[type="checkbox"] { accent-color: var(--green); width: 15px; height: 15px; }

.ch-btn { display: inline-block; margin: .25rem 0 .35rem; padding: .55rem 1rem; border-radius: 999px; font: 700 .85rem Inter, sans-serif; cursor: pointer; color: #0b1220; background: var(--amber); border: 0; box-shadow: 0 6px 20px rgba(255,176,32,.25); transition: transform .15s, opacity .2s; }
.ch-btn:hover { transform: translateY(-1px); }
.ch-btn:disabled { opacity: .5; cursor: default; transform: none; }
.ch-btn-ghost { background: transparent; color: var(--text); border: 1px solid rgba(255,255,255,.25); box-shadow: none; margin-top: .45rem; padding: .35rem .8rem; font-size: .76rem; }
.ch-trip-msg { min-height: 1.2em; font-size: .82rem !important; color: var(--amber) !important; margin-bottom: .3rem !important; }
.ch-more2 { display: inline-block; margin-left: 1rem; }
.ch-next { display: inline-block; margin-top: .9rem; }

.ch-readout { grid-template-columns: 1fr 1fr 1fr; }
.ch-readout4 { grid-template-columns: repeat(4, 1fr); padding: .55rem .6rem; }
.ch-readout4 b { font-size: 1.2rem; }

/* Étiquettes : variantes */
.pc-label.red { border-color: rgba(255, 90, 79, .75); background: rgba(48, 10, 12, .88); }
.pc-label.red::before { background: var(--red); box-shadow: 0 0 8px var(--red); animation: pcBlink .7s ease-in-out infinite; }
.pc-label.red::after { background: linear-gradient(rgba(255,90,79,.8), rgba(255,90,79,0)); }
.pc-label.white { border-color: rgba(220, 230, 245, .55); }
.pc-label.white::before { background: #e8eef7; box-shadow: 0 0 8px #fff; }
.pc-label.white::after { background: linear-gradient(rgba(220,230,245,.8), rgba(220,230,245,0)); }
.pc-label.flat { transform: translate(-50%, -50%); }
.pc-label.flat::after { display: none; }
.pc-label b { color: var(--blue); font-weight: 800; margin-right: .3rem; }
.pc-label.green b { color: var(--green); }
.pc-label.amber b { color: var(--amber); }

@media (max-width: 820px) {
  .pc-kicker { letter-spacing: .06em; font-size: .7rem; }
  .ch-step-long { height: 320vh; }
  .ch-card-sim { --card-w: auto; width: auto; top: auto; max-height: 50vh; }
  .ch-card-sim h2 { font-size: 1.15rem; }
  .ch-chart { height: 120px; }
  .ch-pid-row { grid-template-columns: 18px 1fr 70px 38px; }
  .ch-readout4 b { font-size: 1rem; }
  .ch-more2 { margin-left: 0; display: block; margin-top: .3rem; }
  .ch-slider { grid-template-columns: 1fr 100px 54px; }
}