/* Anatomie de l'avion — écorché interactif (variables héritées de app.css) */

.an-page .page-hero{padding-block:64px 42px}
.an__stage{padding-bottom:84px}

/* ---------- barre de contrôle ---------- */
.an__toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;margin:26px 0 18px;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(13,32,48,.78),rgba(5,16,27,.7))}
.an__group{display:grid;gap:7px}
.an__group>span{color:#66869b;font:.6rem Bahnschrift,sans-serif;letter-spacing:.13em;text-transform:uppercase}
.an__btns{display:flex;flex-wrap:wrap;gap:6px}
.an__btns .button{min-height:36px;padding:0 13px;font-size:.68rem}
.an__btns .button.is-active{border-color:var(--cyan);background:linear-gradient(135deg,#76e7ff,#2fc8ed);color:#03121c;box-shadow:0 12px 30px rgba(38,194,231,.22)}

/* ---------- disposition écorché + panneau ---------- */
.an__layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
.an__viewport{position:relative;padding:14px;border:1px solid var(--line);border-radius:18px;background:radial-gradient(circle at 50% 38%,rgba(85,220,255,.06),transparent 68%),linear-gradient(160deg,rgba(11,28,44,.9),rgba(4,13,22,.82));box-shadow:var(--shadow);overflow:hidden}
.an__view{display:none}
.an__view.is-active{display:block}
.an__view svg{display:block;width:100%;height:auto;overflow:visible;touch-action:manipulation}
.an__viewcap{margin:8px 0 0;color:#5f798b;font:.58rem Bahnschrift,sans-serif;letter-spacing:.09em;text-transform:uppercase;text-align:center}

/* ---------- couche artistique ---------- */
.an-art{pointer-events:none}
.an-body{fill:#12283d;stroke:#8fb9cc;stroke-width:1.6;stroke-linejoin:round}
.an-body2{fill:#0d2033;stroke:#7fa6bb;stroke-width:1.4;stroke-linejoin:round}
.an-glass{fill:rgba(85,220,255,.16);stroke:#a2efff;stroke-width:1.3}
.an-surf{fill:#173751;stroke:#8fb9cc;stroke-width:1.4;stroke-linejoin:round}
.an-move{fill:#1d4a68;stroke:#a2efff;stroke-width:1.3;stroke-linejoin:round}
.an-metal{fill:#0a1b2b;stroke:#5c88a0;stroke-width:1.4}
.an-tyre{fill:#08151f;stroke:#7fa6bb;stroke-width:2}
.an-hub{fill:#173751;stroke:#8fb9cc;stroke-width:1.2}
.an-line{fill:none;stroke:rgba(143,196,222,.42);stroke-width:1}
.an-line-strong{fill:none;stroke:#8fb9cc;stroke-width:1.6;stroke-linecap:round}
.an-ground{stroke:rgba(143,196,222,.26);stroke-width:1;stroke-dasharray:4 4}
.an-lamp{fill:#ffe9b0;stroke:#c9a961;stroke-width:1}
.an-nav-red{fill:#ff6b6b;stroke:#ffb3b3;stroke-width:1}
.an-nav-green{fill:#5ce6a2;stroke:#b6f5d6;stroke-width:1}
.an-axis-txt{fill:#4d6a7c;font:.52rem Bahnschrift,sans-serif;letter-spacing:.09em}

/* ---------- couche interactive ---------- */
.an-zone{fill:rgba(85,220,255,0);stroke:transparent;stroke-width:2;cursor:pointer;transition:fill .18s,stroke .18s,filter .18s}
.an-zone:focus{outline:none}
.an-zones.is-locked .an-zone{cursor:default;pointer-events:none}
.an-zone.is-hot,.an-zone:hover{fill:rgba(85,220,255,.22);stroke:var(--cyan);filter:drop-shadow(0 0 6px rgba(85,220,255,.5))}
.an-zone.is-on{fill:rgba(85,220,255,.3);stroke:#a2efff;stroke-width:2.4;filter:drop-shadow(0 0 9px rgba(85,220,255,.6))}
.an-zone.is-target{fill:rgba(255,189,105,.3);stroke:var(--amber);stroke-width:2.6;filter:drop-shadow(0 0 10px rgba(255,189,105,.6));animation:an-pulse 1.5s ease-in-out infinite}
.an-zone.is-good{fill:rgba(92,230,162,.3);stroke:#5ce6a2;stroke-width:2.4;filter:drop-shadow(0 0 9px rgba(92,230,162,.55))}
.an-zone.is-bad{fill:rgba(255,107,107,.28);stroke:#ff6b6b;stroke-width:2.4}
.an-zone.is-done{fill:rgba(92,230,162,.1);stroke:rgba(92,230,162,.45);stroke-width:1.4}
.an-zone.is-muted{pointer-events:none;opacity:.25}
@keyframes an-pulse{0%,100%{opacity:1}50%{opacity:.5}}
/* zones linéaires (bords d'attaque / de fuite) */
.an-zone--edge{fill:none;stroke:transparent;stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
.an-zone--edge:hover,.an-zone--edge.is-hot{stroke:var(--cyan);stroke-width:9}
.an-zone--edge.is-on{stroke:#a2efff;stroke-width:10}
.an-zone--edge.is-target{stroke:var(--amber);stroke-width:10}
.an-zone--edge.is-good{stroke:#5ce6a2;stroke-width:10}
.an-zone--edge.is-bad{stroke:#ff6b6b;stroke-width:10}
.an-zone--edge.is-done{stroke:rgba(92,230,162,.4);stroke-width:5}

/* étiquette flottante */
/* position calculée en JS : l'étiquette bascule et se recale pour rester dans le cadre */
.an__tip{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;padding:7px 11px;border:1px solid var(--line2);border-radius:9px;background:rgba(3,12,20,.94);box-shadow:0 12px 30px rgba(0,0,0,.5);white-space:nowrap;transition:opacity .15s;max-width:calc(100% - 16px);overflow:hidden;text-overflow:ellipsis}
.an__tip.is-on{opacity:1}
.an__tip b{display:block;font:500 .82rem Bahnschrift,sans-serif;color:var(--text)}
.an__tip i{display:block;margin-top:1px;font-style:normal;color:var(--cyan);font-size:.66rem;letter-spacing:.03em}

/* ---------- panneau latéral ---------- */
.an__panel{display:grid;gap:14px;align-content:start;padding:20px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(150deg,rgba(13,32,48,.72),rgba(5,16,27,.62));position:sticky;top:18px}
.an__panel-kicker{color:#5f798b;font:.58rem Bahnschrift,sans-serif;letter-spacing:.11em;text-transform:uppercase}
.an__panel h2{margin:0;font:500 1.35rem Bahnschrift,sans-serif;line-height:1.25}
.an__panel-en{margin:-8px 0 0;color:var(--cyan);font-size:.78rem;letter-spacing:.02em}
.an__panel-def{margin:0;color:#c3d6df;font-size:.83rem;line-height:1.68}
.an__panel-more{margin:0;padding-top:12px;border-top:1px dashed var(--line);color:#9eb4c1;font-size:.75rem;line-height:1.62}
.an__panel-empty{color:#6f8a9c;font-size:.8rem;line-height:1.6}
.an__scores{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.an__score{padding:11px 12px;border:1px solid var(--line);border-radius:9px;background:rgba(3,12,20,.42)}
.an__score span{display:block;margin-bottom:3px;color:#5f798b;font-size:.56rem;letter-spacing:.09em;text-transform:uppercase}
.an__score strong{display:block;font:500 1rem Bahnschrift,sans-serif;color:var(--text)}
.an__prompt{padding:14px 15px;border:1px solid var(--line2);border-radius:11px;background:rgba(85,220,255,.06)}
.an__prompt small{display:block;margin-bottom:5px;color:#5f798b;font-size:.56rem;letter-spacing:.09em;text-transform:uppercase}
.an__prompt strong{font:500 1.05rem Bahnschrift,sans-serif;color:var(--text);line-height:1.35}
.an__prompt em{display:block;margin-top:4px;font-style:normal;color:#9eb4c1;font-size:.78rem;line-height:1.55}
.an__feedback{padding:12px 14px;border-radius:10px;font-size:.8rem;line-height:1.6}
.an__feedback--ok{border:1px solid rgba(92,230,162,.4);background:rgba(92,230,162,.1);color:#b6f5d6}
.an__feedback--ko{border:1px solid rgba(255,107,107,.4);background:rgba(255,107,107,.09);color:#ffc9c9}
.an__answer{display:grid;gap:9px}
.an__answer label{color:#5f798b;font:.58rem Bahnschrift,sans-serif;letter-spacing:.1em;text-transform:uppercase}
.an__answer input{width:100%;padding:11px 13px;border:1px solid var(--line2);border-radius:9px;background:rgba(3,12,20,.55);color:var(--text);font-size:.9rem}
.an__answer input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(85,220,255,.14)}
.an__answer-row{display:flex;gap:8px}
.an__answer-row .button{flex:1;font-size:.7rem}
.an__panel-actions{display:flex;gap:8px;flex-wrap:wrap}
.an__panel-actions .button{flex:1;min-width:120px;font-size:.7rem}

/* ---------- liste des pièces ---------- */
.an__index{margin-top:26px}
.an__index-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:7px;margin-top:14px}
.an__chip{display:grid;gap:1px;padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:rgba(3,12,20,.42);color:var(--text);text-align:left;cursor:pointer;transition:.18s}
.an__chip:hover{border-color:var(--line2);background:rgba(85,220,255,.07)}
.an__chip.is-active{border-color:var(--cyan);background:rgba(85,220,255,.12)}
.an__chip.is-found{border-color:rgba(92,230,162,.45)}
.an__chip b{font:500 .8rem Bahnschrift,sans-serif}
.an__chip small{color:var(--cyan);font-size:.62rem}

/* ---------- panneau trains ---------- */
.an__gear{margin-top:34px}
.an__gear-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:16px}
.an__gear-card{padding:18px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(150deg,rgba(13,32,48,.72),rgba(5,16,27,.62))}
.an__gear-card svg{display:block;width:100%;height:auto;margin-bottom:12px;overflow:visible}
.an__gear-card img{display:block;width:100%;height:auto;margin-bottom:14px;border:1px solid var(--line);border-radius:10px;background:rgba(3,12,20,.4)}
.an__gear-card h3{margin:0 0 3px;font:500 .95rem Bahnschrift,sans-serif}
.an__gear-card p.an__gear-en{margin:0 0 8px;color:var(--cyan);font-size:.7rem}
.an__gear-card p{margin:0;color:#a9bdc9;font-size:.75rem;line-height:1.62}
.an__gear-note{margin-top:16px;padding:14px 16px;border:1px solid rgba(255,189,105,.35);border-radius:11px;background:rgba(255,189,105,.07);color:#ffdfae;font-size:.79rem;line-height:1.65}

/* ---------- récapitulatif ---------- */
.an__recap{margin-top:34px}

@media (max-width:1080px){
    .an__layout{grid-template-columns:1fr}
    .an__panel{position:static}
}
@media (max-width:640px){
    .an__toolbar{flex-direction:column;align-items:stretch}
    .an__index-list{grid-template-columns:1fr 1fr}
}