/* Visually-hidden */
.msd-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:circle(0%);white-space:nowrap;border:0}
/* Conteneur */
.msd-container{position:relative;display:block;width:100%;box-sizing:border-box}
.msd-container *,.msd-container *::before,.msd-container *::after{box-sizing:border-box}
/* Trigger — réinitialisé en tant que <button> neutre */
.msd-trigger{display:flex;align-items:center;width:100%;cursor:pointer;user-select:none;-webkit-user-select:none;background:none;border:0;padding:0;text-align:left;font:inherit;color:inherit}
.msd-trigger-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* Flèche */
.msd-arrow{flex-shrink:0;display:flex;align-items:center;justify-content:center}
/* Flèche par défaut : SVG chevron bas encodé en data URI, surchargeable par les thèmes.
   Pour supprimer la flèche : .msd-arrow::before { content: none }
   Pour la remplacer       : .msd-arrow::before { content: url("…votre SVG…") }
   La rotation à l'ouverture porte sur ::before (pas sur .msd-arrow lui-même)
   afin de ne pas interférer si un thème positionne autrement le pseudo-élément. */
.msd-arrow::before{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='11' viewBox='0 0 54 29'%3E%3Cpolyline fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='4' points='52 2 27 27 2 2'/%3E%3C/svg%3E");display:block;transition:transform .2s ease}
.msd-container.is-open .msd-arrow::before{transform:rotate(180deg)}
/* Panneau */
.msd-dropdown{position:absolute;top:100%;left:0;right:0;z-index:9000;transform:scaleY(0);transform-origin:top center;transition:transform .15s ease-in-out .1s;pointer-events:none}
.msd-container.is-open .msd-dropdown{transform:scaleY(1);transition-delay:0s;pointer-events:auto}
/* Liste */
.msd-list{overflow-y:auto;max-height:calc(66vh - 50px);overscroll-behavior:contain}
/* Groupe optgroup */
.msd-group-label{display:block;font-weight:bold;padding:6px 10px 2px;cursor:default;font-size:.85em;letter-spacing:.05em;text-transform:uppercase;opacity:.7}
/* Option */
.msd-option{display:flex;align-items:center;cursor:pointer}
.msd-option.msd-option-disabled{cursor:not-allowed;opacity:.5}
.msd-option input[type="checkbox"]{cursor:pointer;flex-shrink:0}
.msd-option.msd-option-disabled input[type="checkbox"]{cursor:not-allowed}
.msd-opt-label{cursor:pointer;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msd-option.msd-option-disabled .msd-opt-label{cursor:not-allowed}
/* Footer */
.msd-footer{display:flex;align-items:stretch}
.msd-btn{cursor:pointer;border:0;background:transparent;flex:1;text-align:center;line-height:normal;font:inherit}
/* Focus visible — pilotés par la charte via outline-color */
/*.msd-trigger:focus{outline:none}
.msd-trigger:focus-visible{outline:3px solid currentColor;outline-offset:2px;border-radius:inherit}
.msd-option input[type="checkbox"]:focus-visible{outline:3px solid currentColor;outline-offset:1px}
.msd-btn:focus-visible{outline:3px solid currentColor;outline-offset:-2px}
*/
/* Responsive */
@media screen and (max-width:768px){
  .msd-list{max-height:calc(60vh - 50px)}
  .msd-footer{display:block}
  .msd-btn{display:block;width:100%}
}