/* F4IOZ — « Gère ton CubeSat »: the workshop, the flight's canvas and dials, the album's cards, the drawings.
   Only .cs-… and .d-… classes here; the page's frame is jeux.css's (.dx-app, .jeu-panneau…). */

.cs-page { --cs-or: #FFC94D; --cs-rose: #FF6FAE; --cs-ciel: #5EC8FF; --cs-violet: #9B7BFF; --cs-vert: #4FE08A; --cs-bleu: #2F6BFF; }

/* ------------------------------------------------------------ the hub's picture and the welcome */
.cs-il-soleil { fill: var(--cs-or, #FFC94D); filter: drop-shadow(0 0 6px #FFB020); }
.cs-il-terre { fill: #1F6FD6; }
.cs-il-orbite { fill: none; stroke: rgba(160, 200, 255, .5); stroke-width: 1.5; stroke-dasharray: 4 5; }
.cs-il-haut { fill: #c9d1dd; } .cs-il-gauche { fill: #1f4fd1; } .cs-il-droite { fill: #2f6bff; }
.cs-il-cellules { fill: #0b2a7a; opacity: .7; }
.cs-il-antennes { stroke: #f2f2f2; stroke-width: 2; stroke-linecap: round; }
.cs-il-sat { animation: cs-flotte 4s ease-in-out infinite; transform-origin: center; }
.cs-il-sat2 { animation-duration: 6s; animation-delay: -2s; }
.cs-il-batterie rect { fill: none; stroke: var(--cs-vert, #4FE08A); stroke-width: 2; }
.cs-il-batterie .cs-il-niveau { fill: var(--cs-vert, #4FE08A); stroke: none; animation: cs-charge 3s ease-in-out infinite; }
@keyframes cs-flotte { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(2deg); } }
@keyframes cs-charge { 0%, 100% { width: 8px; } 60% { width: 30px; } }

.cs-arene { overflow: hidden; }
.cs-accueil { text-align: center; }
.cs-illus { max-width: 520px; width: 100%; height: auto; margin: 0 auto 6px; display: block; }
.cs-carte-niveaux { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; text-align: left; }
.cs-niv { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: var(--r-l); cursor: pointer; color: var(--text);
  border: 1px solid var(--border-strong); background: linear-gradient(135deg, color-mix(in srgb, var(--cs-violet) 18%, var(--panel-2)), color-mix(in srgb, var(--cs-ciel) 12%, var(--panel-2)));
  transition: transform var(--anim), box-shadow var(--anim), border-color var(--anim); font: inherit; text-align: left; }
.cs-carte-niveaux li:nth-child(2) .cs-niv { background: linear-gradient(135deg, color-mix(in srgb, var(--cs-or) 20%, var(--panel-2)), color-mix(in srgb, var(--cs-vert) 10%, var(--panel-2))); }
.cs-carte-niveaux li:nth-child(3) .cs-niv { background: linear-gradient(135deg, color-mix(in srgb, var(--cs-ciel) 22%, var(--panel-2)), color-mix(in srgb, var(--cs-bleu) 12%, var(--panel-2))); }
.cs-carte-niveaux li:nth-child(4) .cs-niv { background: linear-gradient(135deg, color-mix(in srgb, var(--cs-rose) 20%, var(--panel-2)), color-mix(in srgb, var(--cs-or) 10%, var(--panel-2))); }
.cs-carte-niveaux li:nth-child(5) .cs-niv { background: linear-gradient(135deg, color-mix(in srgb, #FF7A3D 22%, var(--panel-2)), color-mix(in srgb, var(--cs-violet) 14%, var(--panel-2))); }
.cs-niv:hover, .cs-niv:focus-visible { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-pop); outline: none; }
.cs-niv b { font-size: 15px; }
.cs-niv small { font-size: 12.5px; color: var(--text-dim); line-height: 1.35; }
.cs-etoiles { color: var(--text-muted); letter-spacing: 2px; font-style: normal; font-size: 15px; }

.jeu-option .cs-etoiles { font-size: 12px; margin-left: 4px; }
.cs-astuce-sat { font-size: 12.5px; margin: 6px 0 0; }

/* ------------------------------------------------------------ a level's frame */
.cs-tete { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.cs-tete > div:first-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 260px; }
.cs-n { font-size: 18px; background: linear-gradient(90deg, var(--cs-or), var(--cs-rose)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-obj { font-size: 13.5px; color: var(--text-dim); }
.cs-tete-d { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cs-temps { font-size: 14px; color: var(--cs-or); margin-right: 4px; }
.cs-scene { position: relative; border-radius: var(--r-l); overflow: hidden; background: #060b1e; box-shadow: 0 0 0 1px var(--border), 0 10px 30px rgba(20, 0, 60, .35); }
.cs-toile { display: block; width: 100%; touch-action: manipulation; }
.cs-graphe { position: absolute; left: 8px; bottom: 8px; width: min(44%, 260px); height: 64px; border-radius: 8px; }
.cs-alerte { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 20px); padding: 5px 12px; border-radius: 999px; font: 700 12.5px var(--font-sans);
  letter-spacing: .5px; color: #fff; background: rgba(229, 72, 77, .88); box-shadow: 0 4px 14px rgba(0, 0, 0, .4); text-align: center; animation: cs-clignote 1.2s ease-in-out infinite; }
.cs-alerte.ok { background: rgba(30, 150, 90, .9); animation: none; }
.cs-alerte.info { background: rgba(80, 90, 230, .9); animation: none; }
@keyframes cs-clignote { 50% { opacity: .65; } }

.cs-cadrans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 128px), 1fr)); gap: 6px; margin-top: 10px; }
.cs-cadran { display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-radius: var(--r-m); background: var(--panel-2); border: 1px solid var(--border); min-width: 0; }
.cs-cadran span { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .6px; }
.cs-cadran b { font-size: 15px; overflow-wrap: anywhere; }
.cs-cadran .cs-vert, .cs-cadran.cs-vert b { color: var(--green); }
.cs-cadran .cs-ambre { color: var(--amber); }
.cs-cadran.cs-bas { border-color: var(--red); background: color-mix(in srgb, var(--red) 12%, var(--panel-2)); }
.cs-cadran.cs-froid { border-color: var(--cs-ciel); background: color-mix(in srgb, var(--cs-ciel) 15%, var(--panel-2)); }
.cs-mode-survie { border-color: var(--amber); } .cs-mode-coupe { border-color: var(--red); }
.cs-jauge { position: relative; display: block; height: 7px; border-radius: 4px; background: var(--well); overflow: hidden; margin-top: 2px; }
.cs-jauge > i:first-child { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--red), var(--amber) 35%, var(--green) 60%); border-radius: 4px; transition: width .3s; }
.cs-jauge .cs-seuil { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; opacity: .8; }

.cs-commandes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cs-cmd { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: 600 13.5px var(--font-sans); cursor: pointer;
  transition: background var(--anim), border-color var(--anim), transform var(--anim); }
.cs-cmd:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.cs-cmd[aria-pressed="true"] { background: linear-gradient(135deg, var(--cs-vert), var(--accent)); color: #04201C; border-color: transparent; }
.cs-cmd:disabled { opacity: .45; cursor: not-allowed; }
.cs-journal { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.cs-journal li { padding: 4px 9px; border-left: 3px solid var(--info); background: var(--panel-2); border-radius: 0 var(--r-s) var(--r-s) 0; animation: cs-entre .35s ease-out; }
.cs-journal li.ok { border-left-color: var(--green); } .cs-journal li.ko { border-left-color: var(--red); } .cs-journal li.info { border-left-color: var(--cs-violet); }
.cs-journal li:not(:first-child) { opacity: .72; }
@keyframes cs-entre { from { transform: translateX(-10px); opacity: 0; } }

/* ------------------------------------------------------------ the workshop */
.cs-atelier { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.cs-montage { display: flex; flex-direction: column; gap: 8px; }
.cs-formats { display: flex; gap: 6px; }
.cs-format { flex: 1; min-height: 44px; border-radius: var(--r-m); border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text); font: 800 18px var(--font-mono); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cs-format small { font: 500 11px var(--font-sans); color: var(--text-dim); }
.cs-format[aria-checked="true"] { background: linear-gradient(135deg, var(--cs-violet), var(--cs-bleu)); color: #fff; border-color: transparent; }
.cs-format[aria-checked="true"] small { color: #e6e9ff; }
.cs-banc { border-radius: var(--r-l); background: radial-gradient(circle at 50% 30%, #1d2550, #0b0f24); padding: 10px; display: flex; justify-content: center; }
.cs-cube-svg { width: 100%; max-width: 300px; max-height: 420px; }
.cs-rail { stroke: #6e7a90; stroke-width: 3; }
.cs-cadre-iso { fill: none; stroke: #c9d1dd; stroke-width: 2; stroke-linejoin: round; }
.cs-c .f-haut { fill: var(--c1); } .cs-c .f-gauche { fill: var(--c2); } .cs-c .f-droite { fill: var(--c3); }
.cs-couche { --c1: #8fd3ff; --c2: #3b8fd6; --c3: #2a6fb0; }
.cs-couche.sys-eps { --c1: #ffe082; --c2: #f0b429; --c3: #c98a0a; }
.cs-couche.sys-bat { --c1: #a5f3b5; --c2: #2fbf63; --c3: #1d8a45; }
.cs-couche.sys-obc { --c1: #c7b6ff; --c2: #8b6cf0; --c3: #6a4cd0; }
.cs-couche.sys-com { --c1: #9ee7ff; --c2: #26a9e0; --c3: #1883b3; }
.cs-couche.sys-ant { --c1: #f5f5f5; --c2: #b9c2cf; --c3: #8c96a6; }
.cs-couche.sys-adcs { --c1: #ffb3d1; --c2: #ff5f9e; --c3: #d23f7c; }
.cs-couche.sys-charge { --c1: #ffc7a1; --c2: #ff8a3d; --c3: #d9661c; }
.cs-banc { flex-direction: column; align-items: center; gap: 8px; }
.cs-legende { list-style: none; margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: #e8ecff; }
.cs-legende li { display: flex; align-items: center; gap: 6px; }
.cs-legende li i { width: 12px; height: 12px; border-radius: 3px; background: var(--c2); flex: none; }
.cs-legende small { margin-left: auto; color: #aeb6d8; }
.cs-legende .sys-eps { --c2: #f0b429; } .cs-legende .sys-bat { --c2: #2fbf63; } .cs-legende .sys-obc { --c2: #8b6cf0; } .cs-legende .sys-com { --c2: #26a9e0; }
.cs-legende .sys-ant { --c2: #b9c2cf; } .cs-legende .sys-adcs { --c2: #ff5f9e; } .cs-legende .sys-charge { --c2: #ff8a3d; }
.cs-etoiles .on { color: var(--cs-or); font-style: normal; text-shadow: 0 0 6px color-mix(in srgb, var(--cs-or) 60%, transparent); }
.cs-etoiles.cs-gagne { color: var(--text-muted); text-shadow: none; }
.cs-arrive { animation: cs-pose .5s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes cs-pose { from { transform: translateY(-60px); opacity: 0; } }
.cs-aile { fill: #2f5bd8; stroke: #9fb6ff; stroke-width: 1; opacity: .9; }
.cs-ant-iso { stroke: #f2f2f2; stroke-width: 2; stroke-linecap: round; }
.cs-bilan { display: flex; flex-direction: column; gap: 9px; }
.cs-barre span { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; flex-wrap: wrap; }
.cs-barre > i { display: block; height: 12px; border-radius: 6px; background: var(--well); overflow: hidden; margin-top: 3px; border: 1px solid var(--border); }
.cs-barre > i > i { display: block; height: 100%; background: linear-gradient(90deg, var(--cs-vert), var(--cs-ciel)); transition: width .35s cubic-bezier(.2, .8, .3, 1); border-radius: 6px; }
.cs-barre.cs-trop > i > i { background: linear-gradient(90deg, var(--amber), var(--red)); }
.cs-barre.cs-trop b { color: var(--red); }
.cs-check { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; }
.cs-check li { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong); }
.cs-check li.ok { border-color: var(--green); color: var(--green); } .cs-check li.ok::before { content: '✓ '; }
.cs-check li.non { border-color: var(--red); color: var(--red); } .cs-check li.non::before { content: '✗ '; }
.cs-check li.facultatif { color: var(--text-dim); border-style: dashed; }
.cs-note { font-size: 11.5px; margin: 0; }
.cs-bac { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.cs-groupe h3 { margin: 0 0 5px; font: 700 11px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.cs-pieces { display: flex; flex-direction: column; gap: 5px; }
.cs-piece { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 7px 10px; border-radius: var(--r-m); border: 1px solid var(--border-strong); background: var(--panel-2);
  color: var(--text); font: inherit; cursor: pointer; border-left: 5px solid var(--c2, var(--accent)); transition: transform var(--anim), background var(--anim); }
.cs-piece.sys-eps { --c2: #f0b429; } .cs-piece.sys-bat { --c2: #2fbf63; } .cs-piece.sys-obc { --c2: #8b6cf0; } .cs-piece.sys-com { --c2: #26a9e0; }
.cs-piece.sys-ant { --c2: #b9c2cf; } .cs-piece.sys-adcs { --c2: #ff5f9e; } .cs-piece.sys-charge { --c2: #ff8a3d; }
.cs-piece b { font-size: 13.5px; } .cs-piece small { font-size: 11.5px; color: var(--text-dim); line-height: 1.3; }
.cs-piece-ch { font-size: 11.5px; color: var(--accent); }
.cs-piece:hover { transform: translateX(2px); }
.cs-piece[aria-pressed="true"] { background: color-mix(in srgb, var(--c2) 22%, var(--panel-2)); border-color: var(--c2); }
.cs-piece[aria-pressed="true"] b::before { content: '✓ '; color: var(--green); }
.cs-piece[data-plein]:not([aria-pressed="true"]) { opacity: .5; }
.cs-refus { animation: cs-non .4s; }
@keyframes cs-non { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.cs-essais { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.cs-etape { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: var(--r-l); background: var(--panel-2); border: 1px solid var(--border); text-align: center; font-size: 13px; }
.cs-etape .cs-dessin { width: 100%; max-width: 140px; height: auto; }
.cs-etape [data-r] { font-weight: 700; }
.cs-etape.cs-ok { border-color: var(--green); } .cs-etape.cs-ok [data-r] { color: var(--green); }
.cs-etape.cs-ko { border-color: var(--red); } .cs-etape.cs-ko [data-r] { color: var(--red); }
.cs-etape.cs-encours .cs-pot-sat { animation: cs-vibre .07s linear infinite; }
.cs-etape.cs-encours .cs-tvac .d-chambre { animation: cs-chaudfroid 1.4s ease-in-out infinite alternate; }
.cs-etape.cs-encours .d-glisse { animation: cs-glisse 1.4s ease-in-out infinite; }
.cs-pot-table { height: 10px; margin: 0 auto; width: 70%; border-radius: 3px; background: #6e7a90; }
@keyframes cs-vibre { 25% { transform: translate(1px, -2px); } 50% { transform: translate(-2px, 1px); } 75% { transform: translate(2px, 2px); } }
@keyframes cs-chaudfroid { from { fill: #2e5bff; } to { fill: #ff5a2e; } }
@keyframes cs-glisse { from { transform: translateX(-40px); } to { transform: translateX(0); } }

/* ------------------------------------------------------------ the summary */
.jeu-resume .cs-res-etoiles { font-size: 44px; line-height: 1.1; margin: 0; letter-spacing: 6px; }
.cs-res-etoiles span { color: var(--border-strong); display: inline-block; }
.cs-res-etoiles span.on { color: var(--cs-or); text-shadow: 0 0 14px color-mix(in srgb, var(--cs-or) 70%, transparent); animation: cs-etoile .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes cs-etoile { from { transform: scale(0) rotate(-90deg); } }
.cs-res-lignes { margin: 8px 0; padding-left: 20px; font-size: 14px; }

/* ------------------------------------------------------------ the album */
.cs-album h3 { margin: 12px 0 6px; font: 700 11px var(--font-sans); letter-spacing: 1px; text-transform: uppercase; color: var(--text-dim); }
.cs-album-aide { font-size: 12.5px; margin: 0 0 6px; }
.cs-cartes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.cs-cartes-neuves { grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); margin-bottom: 10px; }
.cs-carte { position: relative; display: block; aspect-ratio: 5 / 7; perspective: 800px; cursor: pointer; border-radius: 12px; --r: #9aa7b4; }
.cs-carte.rar-2 { --r: #5EC8FF; } .cs-carte.rar-3 { --r: #FFC94D; }
.cs-face { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 4px; padding: 7px; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .6s cubic-bezier(.3, .8, .3, 1); overflow: hidden; border: 2px solid var(--r);
  background: linear-gradient(160deg, color-mix(in srgb, var(--r) 30%, #141a3a), #0d1128 60%); color: #f2f4ff; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.cs-verso { transform: rotateY(180deg); font-size: 11px; overflow-y: auto; }
.cs-retournee .cs-recto { transform: rotateY(-180deg); }
.cs-retournee .cs-verso { transform: rotateY(0); }
.cs-carte:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.cs-image { flex: 1; min-height: 0; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 50% 40%, #233070, #0a0e24); display: flex; align-items: center; justify-content: center; }
.cs-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-dessin { width: 100%; height: 100%; }
.cs-titre { font-size: 13px; line-height: 1.15; }
.cs-gemmes { position: absolute; top: 10px; right: 11px; color: var(--r); font-size: 11px; text-shadow: 0 0 4px #000; }
.cs-fam { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: color-mix(in srgb, var(--r) 70%, #fff); }
.cs-double { position: absolute; top: 9px; left: 11px; font: 700 11px var(--font-mono); background: rgba(0, 0, 0, .55); padding: 1px 5px; border-radius: 6px; }
.cs-carte .cs-verso p { margin: 0; line-height: 1.35; font-size: 11px; }
.cs-carte .cs-verso .cs-titre { font-size: 12.5px; }
.cs-verso dl { margin: 2px 0; display: grid; grid-template-columns: auto; gap: 0; }
.cs-verso dt { color: color-mix(in srgb, var(--r) 70%, #fff); font-size: 10px; text-transform: uppercase; letter-spacing: .4px; }
.cs-verso dd { margin: 0 0 3px; }
.cs-verso a { color: #9fe6ff; }
.cs-credit { font-size: 10px; color: #c8cde8; }
.cs-src { font-size: 10px; }
/* Rare and epic cards shine. */
.cs-carte.rar-2 .cs-recto::after, .cs-carte.rar-3 .cs-recto::after { content: ''; position: absolute; inset: -50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .28) 48%, rgba(255, 120, 220, .18) 52%, transparent 60%); animation: cs-brille 4.5s linear infinite; }
.cs-carte.rar-3 .cs-recto { box-shadow: 0 0 18px color-mix(in srgb, #FFC94D 45%, transparent), 0 6px 16px rgba(0, 0, 0, .35); }
@keyframes cs-brille { from { transform: translateX(-40%); } to { transform: translateX(40%); } }
.cs-neuve { animation: cs-tire .8s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes cs-tire { from { transform: translateY(30px) rotate(-8deg) scale(.6); opacity: 0; } }
.cs-verrou { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; text-align: center; cursor: default;
  border: 2px dashed var(--border-strong); background: repeating-linear-gradient(45deg, var(--panel-2), var(--panel-2) 8px, var(--well) 8px, var(--well) 16px); color: var(--text-dim); }
.cs-verrou b { font-size: 12px; } .cs-verrou small { font-size: 11px; }
.cs-carte-q { font: 800 34px var(--font-mono); color: var(--border-strong); }

/* ------------------------------------------------------------ « Apprendre » */
.cs-figure { margin: 8px 0 12px; }
.cs-figure img { width: 100%; height: auto; border-radius: var(--r-m); display: block; }
.cs-figure figcaption { font-size: 12.5px; margin-top: 4px; }
.cs-liste, .cs-sources, .cs-credits { padding-left: 18px; font-size: 13.5px; }
.cs-sources li, .cs-credits li { margin-bottom: 4px; }

/* ------------------------------------------------------------ the drawings */
.d-corps .f-haut { fill: #d4dae4; } .d-corps .f-gauche { fill: #1f4fd1; } .d-corps .f-droite { fill: #2f6bff; }
.d-cell { fill: #0b2a7a; opacity: .75; } .d-cell2 { fill: #133a9e; }
.d-ant { stroke: #f2f2f2; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.d-ant-sort { stroke-dasharray: 60; animation: cs-sort 2.5s ease-in-out infinite alternate; }
@keyframes cs-sort { from { stroke-dashoffset: 60; } to { stroke-dashoffset: 0; } }
.d-onde { fill: none; stroke: #4FE08A; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: cs-onde 2s ease-out infinite; }
.d-onde2 { animation-delay: 1s; }
@keyframes cs-onde { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.2); opacity: 0; } }
.d-cadre path { fill: none; stroke: #c9d1dd; stroke-width: 3; stroke-linejoin: round; }
.d-cadre .d-rail { stroke: #FFC94D; stroke-width: 4; }
.d-carte { fill: #1d7a4a; stroke: #4FE08A; stroke-width: 2; }
.d-piste { fill: none; stroke: #FFC94D; stroke-width: 2; }
.d-eclair { fill: #FFC94D; animation: cs-pulse 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cs-pulse { 50% { transform: scale(1.15); opacity: .8; } }
.d-pile rect { fill: #2a2f4a; stroke: #9aa7b4; stroke-width: 2; }
.d-niveau { fill: #4FE08A; transform-box: fill-box; transform-origin: bottom; animation: cs-monte 2.6s ease-in-out infinite; }
@keyframes cs-monte { 0% { transform: scaleY(.15); fill: #E5484D; } 50% { fill: #FFC94D; } 100% { transform: scaleY(1); fill: #4FE08A; } }
.d-plus { stroke: #fff; stroke-width: 2.5; }
.d-ecran { fill: #062b2a; } .d-txt { font: 700 13px var(--font-mono); fill: #3FE0C8; }
.d-tourne { transform-box: fill-box; transform-origin: center; animation: cs-tourne 6s linear infinite; }
@keyframes cs-tourne { to { transform: rotate(360deg); } }
.d-bobine { stroke: #FF8A3D; stroke-width: 3; }
.d-fleche { fill: none; stroke: #FF6FAE; stroke-width: 3; stroke-dasharray: 6 6; }
.d-objectif { fill: #10142a; stroke: #9aa7b4; stroke-width: 3; } .d-objectif2 { fill: #5EC8FF; }
.d-flash { fill: #fff; animation: cs-flash 2.4s steps(1) infinite; }
@keyframes cs-flash { 0%, 85% { opacity: .2; } 90% { opacity: 1; } }
.d-terre { fill: #1F6FD6; } .d-sat { fill: #FFC94D; } .d-faisceau { stroke: #4FE08A; stroke-width: 2; stroke-dasharray: 5 5; fill: none; animation: cs-defile 1s linear infinite; }
@keyframes cs-defile { to { stroke-dashoffset: -20; } }
.d-pi { fill: #1d7a4a; }
.d-etoile { fill: #2F6BFF; } .d-txt-fond { stroke: #fff; stroke-width: 0; }
.d-fusee { fill: #e8ecf5; } .d-hublot { fill: #5EC8FF; }
.d-flamme { fill: #FF8A3D; transform-box: fill-box; transform-origin: top; animation: cs-flamme .25s ease-in-out infinite alternate; }
@keyframes cs-flamme { to { transform: scaleY(1.35); fill: #FFC94D; } }
.d-petit .f-gauche { fill: #ff5f9e; } .d-petit .f-droite { fill: #ff8ab8; }
.d-chambre { fill: #2e5bff; opacity: .35; stroke: #9aa7b4; stroke-width: 3; }
.d-tremble { animation: cs-vibre .12s linear infinite; }
.d-chaud { stroke: #FF5A2E; stroke-width: 4; stroke-linecap: round; }
.d-ppod { fill: #3a4256; stroke: #9aa7b4; stroke-width: 2; } .d-ressort { fill: none; stroke: #FFC94D; stroke-width: 2.5; }
.d-cube2 { fill: #2f6bff; stroke: #d4dae4; } .d-porte { stroke: #FF6FAE; stroke-width: 4; }
.d-glisse { animation: cs-glisse 3s ease-in-out infinite alternate; }
.d-bras { fill: none; stroke: #d4dae4; stroke-width: 5; stroke-linecap: round; }
.d-file { animation: cs-file 4s linear infinite; }
@keyframes cs-file { from { transform: translate(-10px, 6px); } to { transform: translate(10px, -6px); } }
.d-trainee { stroke: #FF8A3D; stroke-width: 8; stroke-linecap: round; opacity: .7; }
.d-boule { fill: #FF5A2E; animation: cs-pulse .5s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } .d-boule2 { fill: #FFF3B0; }

@media (prefers-reduced-motion: reduce) {
  .cs-il-sat, .cs-il-batterie .cs-il-niveau, .cs-alerte, .cs-journal li, .cs-arrive, .cs-neuve, .cs-res-etoiles span.on, .cs-carte .cs-recto::after,
  .cs-pot-sat, .d-ant-sort, .d-onde, .d-eclair, .d-niveau, .d-tourne, .d-flash, .d-faisceau, .d-flamme, .d-tremble, .d-glisse, .d-file, .d-boule { animation: none !important; }
  .cs-face { transition: none; }
}
@media (max-width: 760px) {
  .cs-atelier { grid-template-columns: minmax(0, 1fr); }
  .cs-essais { grid-template-columns: minmax(0, 1fr); }
  .cs-essais .cs-etape { flex-direction: row; justify-content: space-between; }
  .cs-essais .cs-dessin { max-width: 70px; }
}
@media (max-width: 480px) {
  .cs-cadrans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-cmd { flex: 1 1 auto; }
  .cs-res-etoiles { font-size: 34px; }
}