.real-instrument-photo{position:relative;display:block;box-sizing:border-box;overflow:hidden;background:#fbf8f2;border:1px solid #dce4e2;border-radius:14px}
.real-instrument-photo>img{display:block;width:100%;height:100%;object-fit:contain}
.real-photo-marker{position:absolute;display:grid;place-items:center;box-sizing:border-box;border:2px solid transparent;background:transparent;color:transparent;border-radius:999px;box-shadow:none;transform:translate(-50%,-50%);font-style:normal;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s}
.real-photo-marker b{font:800 9px/1 system-ui,sans-serif}
.real-photo-marker.is-active{z-index:3;border-color:#fff;background:#168077;color:#fff;box-shadow:0 0 0 3px rgba(22,128,119,.28),0 2px 7px rgba(5,42,39,.32);transform:translate(-50%,-50%) scale(1.12)}
.horn-photo-fingering{width:min(620px,100%);height:auto;aspect-ratio:2/1}
.horn-photo-fingering>img{position:absolute;left:-18%;top:-30%;width:180%;height:auto;max-width:none;object-fit:initial}
.horn-photo-lever{top:23%;width:6.3%;height:20%;border-radius:48% 48% 38% 38%}
.horn-photo-lever-1{left:42.2%}.horn-photo-lever-2{left:49.3%}.horn-photo-lever-3{left:56%}
.flute-photo-fingering{width:min(900px,100%);min-height:0;height:auto;aspect-ratio:3/1;padding:0}
.flute-photo-key{width:clamp(18px,3.2%,28px);aspect-ratio:1}
.flute-photo-leftThumb{left:43%;top:64%}.flute-photo-leftIndex{left:48%;top:49%}.flute-photo-leftMiddle{left:53%;top:49%}.flute-photo-leftRing{left:58%;top:49%}.flute-photo-leftPinkyGSharp{left:63%;top:48%}
.flute-photo-rightIndex{left:68%;top:49%}.flute-photo-rightMiddle{left:73%;top:49%}.flute-photo-rightRing{left:78%;top:49%}.flute-photo-rightPinkyEb{left:83%;top:52%}.flute-photo-footCSharp{left:89%;top:51%}.flute-photo-footC{left:94%;top:51%}
.fingering-answer:has(.real-instrument-photo){width:100%}
@media(max-width:600px){.real-photo-marker b{font-size:7px}.horn-photo-fingering{width:100%}.flute-photo-fingering{width:100%}}

/* Bois : la photo reste prioritaire ; les commandes secondaires forment une
   réglette lisible dessous au lieu d'une colonne étroite de formulaire. */
.fingering-answer .wind-photo-fingering:not(.is-flute){
  grid-template-columns:minmax(0,1fr);
  width:min(560px,100%);
  gap:8px;
}
.fingering-answer .wind-photo-fingering:not(.is-flute) .wind-photo-main{
  width:min(330px,100%);
  margin-inline:auto;
}
.fingering-answer .wind-photo-fingering:not(.is-flute) .wind-photo-extra{
  display:block;
  width:100%;
}
.wind-contact-number{fill:#244c42;stroke:#fff;stroke-width:3px;paint-order:stroke fill;text-anchor:middle;font:800 13px system-ui,sans-serif}
.wind-photo-control.closed .wind-contact-number,.wind-photo-control.half .wind-contact-number{fill:#fff;stroke:#087064;stroke-width:2px}
.wind-aux-summary{display:flex;align-items:center;justify-content:center;gap:7px;box-sizing:border-box;width:100%;margin:0;padding:9px 12px;border:1px solid #d7e1dd;border-radius:10px;background:#fbfdfc;color:#536b65;font-size:11px;text-align:center}
.wind-aux-summary>span{color:#80958f;font-size:16px}
.wind-aux-summary.is-active{border-color:#79b6a8;background:#edf8f4;color:#174e46}
.wind-aux-summary.is-active>span{color:#168477}
.wind-aux-state-data{display:none!important}
.fingering-answer .wind-photo-fingering:not(.is-flute) .wind-photo-legend{
  margin-top:0;
}