/* =========================================================
   Chapitre II · Premières machines — compléments
   (à charger après chapitre.css et vide.css)
   ========================================================= */

/* la machine occupe toute la page de droite */
.experience.machine { padding: calc(6 * var(--u)); background: #fbf6ea; }
.experience.machine > svg { flex: 1 1 0; min-height: 0; width: 100%; }

/* panneau de commandes sur la page de gauche */
.panneau { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
.panneau .message {
  margin: 0; min-height: 8.6em;
  padding: calc(8 * var(--u)) calc(12 * var(--u));
  background: rgba(251, 246, 234, .8); border: 1px solid #c8b48a; border-radius: calc(4 * var(--u));
  font-style: italic; font-size: calc(16 * var(--u)); line-height: 1.32; color: var(--encre);
}
.panneau .commandes { justify-content: flex-start; }
.bouton.petit.attendu { box-shadow: 0 0 0 2px #c9a14a, 0 0 10px rgba(201, 161, 74, .8); }

/* robinets cliquables */
.nc-robinet { cursor: pointer; outline: none; }
.nc-robinet .halo { fill: rgba(201, 161, 74, 0); stroke: none; }
.nc-robinet:hover .halo, .nc-robinet:focus-visible .halo { fill: rgba(201, 161, 74, .45); }
.nc-robinet.attendu .halo { animation: nc-appel 1.2s ease-in-out infinite; }
@keyframes nc-appel { 50% { fill: rgba(232, 190, 90, .75); } }
.nc-robinet.refus { animation: nc-refus .35s; }
@keyframes nc-refus { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
.nc-robinet.ouvert rect:first-of-type { fill: #b08a48; }

/* textes du dessin */
.nc-numero { font-family: var(--serif); font-weight: 700; font-size: 17px; fill: #2b2116; }
.nc-etiquette { font-family: var(--serif); font-style: italic; font-size: 15px; fill: #2b2116; }
.nc-etiquette.rouge { fill: #b8312f; font-weight: 600; }
.nc-vide-texte { font-family: var(--capitales); font-weight: 600; letter-spacing: .2em; font-size: 15px; fill: #7a5a1c; }
.nc-legendes text { font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 15px; fill: #2b2116;
  paint-order: stroke; stroke: rgba(251, 246, 234, .85); stroke-width: 3px; }
.nc-legendes .trait { stroke: #5a4630; stroke-width: .8; }
.sans-legendes .nc-legendes { display: none; }
.nc-chaine { stroke: #2b2f33; stroke-width: 3; stroke-dasharray: 4 2; }

/* flamme du foyer (reprise pour la canette) */
.flamme .langue { transform-box: fill-box; transform-origin: 50% 100%; animation: langue 0.9s ease-in-out infinite alternate; }
.flamme .langue.b { animation-duration: .7s; animation-delay: -.3s; }
.flamme .langue.c { animation-duration: .5s; animation-delay: -.1s; }
@keyframes langue {
  0%   { transform: scale(1, 1) skewX(0deg); }
  35%  { transform: scale(.92, 1.12) skewX(3deg); }
  70%  { transform: scale(1.05, .9) skewX(-4deg); }
  100% { transform: scale(.97, 1.06) skewX(2deg); }
}

/* fumée de la cheminée, vapeur de la soupape */
.nc-fumee .bouffee { opacity: 0; transform-box: fill-box; transform-origin: center; animation: nc-fumee 7.7s cubic-bezier(.2, .6, .4, 1) infinite; }
.nc-fumee .v1 { animation-name: nc-fumee1; animation-duration: 8.4s; }
.nc-fumee .v2 { animation-name: nc-fumee2; animation-duration: 7.1s; }
/* la fumée monte, gonfle, se couche dans le vent et se dissipe */
@keyframes nc-fumee  { 0% { opacity: .7; transform: translate(0, 0) scale(.6); } 30% { opacity: .5; transform: translate(10px, -40px) scale(1.6); } 100% { opacity: 0; transform: translate(80px, -95px) scale(4); } }
@keyframes nc-fumee1 { 0% { opacity: .6; transform: translate(0, 0) scale(.5); } 35% { opacity: .45; transform: translate(6px, -46px) scale(1.8); } 100% { opacity: 0; transform: translate(95px, -110px) scale(4.4); } }
@keyframes nc-fumee2 { 0% { opacity: .65; transform: translate(0, 0) scale(.7); } 25% { opacity: .5; transform: translate(12px, -32px) scale(1.4); } 100% { opacity: 0; transform: translate(70px, -85px) scale(3.6); } }
.nc-jet-s .bouffee { fill: #fff; transform-box: fill-box; transform-origin: center; animation: nc-jet 1.3s ease-out infinite; }
@keyframes nc-jet { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: translate(4px, -26px) scale(2.2); } }

@media (prefers-reduced-motion: reduce) {
  .flamme .langue, .nc-fumee .bouffee, .nc-jet-s .bouffee, .nc-robinet.attendu .halo { animation: none; }
}

/* ---------- la canette (glisser-déposer) ---------- */
.ca-canette { cursor: grab; outline: none; }
.ca-canette.prise { cursor: grabbing; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.ca-canette:focus-visible path { stroke: #c9a14a; stroke-width: 3; }
.ca-mot { font-family: var(--capitales); font-weight: 700; font-size: 15px; letter-spacing: .1em; fill: #5a6066; }
.ca-mot.vapeur { fill: #c0281c; }
.ca-mot.vide { fill: #7a5a1c; }
.ca-puff { transform-box: fill-box; transform-origin: center; animation: ca-puff 1.5s ease-out infinite; }
@keyframes ca-puff { 0% { opacity: .9; transform: translate(0, 0) scale(.5); } 100% { opacity: 0; transform: translate(8px, -40px) scale(2.6); } }

/* ---------- le cylindre de Papin ---------- */
.pa-bulle { animation: pa-bulle .9s linear infinite; }
@keyframes pa-bulle { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-12px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ca-puff, .pa-bulle { animation: none; } }

.nc-pastille { cursor: pointer; }
.pa-piston.actif { cursor: pointer; }
.pa-piston.actif .pa-tete { animation: nc-appel-p 1.2s ease-in-out infinite; }
@keyframes nc-appel-p { 50% { fill: #b8862f; } }
.pa-piston:focus-visible .pa-tete { stroke: #c9a14a; stroke-width: 2; }
.pa-piston, .nc-pastille { outline: none; }

/* contour clair autour des textes des expériences (comme les légendes de Newcomen) */
.nc-etiquette, .ca-mot, .nc-numero.halo {
  paint-order: stroke; stroke: rgba(251, 246, 234, .9); stroke-width: 3px; stroke-linejoin: round;
}
/* flèches des forces pressantes : elles « poussent » */
.force { animation: force 1s ease-in-out infinite; }
@keyframes force { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--dx), var(--dy)); } }
@media (prefers-reduced-motion: reduce) { .force { animation: none; } }
.nc-etiquette.sur-bois { fill: #fbf6ea; stroke: rgba(43, 33, 22, .85); }
/* chiffres des pastilles : chiffres alignés (pas de chiffres elzéviriens), bien centrés */
.nc-numero.chiffre { font-family: Georgia, "Times New Roman", serif; font-variant-numeric: lining-nums; font-size: 15px; font-weight: 700; }
.pa-piston.actif rect { animation: nc-appel-p 1.2s ease-in-out infinite; }
.nc-legendes text.petit { font-size: 12px; }