/* MSS Respire — styles globaux */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', sans-serif; background: #f8fafc; }

.topbar{
  background:linear-gradient(135deg,#ffffff,#f1f5f9);
  padding:0 32px;
  min-height:86px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  box-shadow:0 2px 20px rgba(0,0,0,0.12);
  border-bottom:2px solid #e2e8f0;
  position:sticky;
  top:0;
  z-index:100;
}

@media (max-width: 768px){
  .topbar{
    flex-direction:column;
    padding:10px;
    height:auto;
    gap:10px;
  }

  .topbar-left{
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    gap:2px;
  }

  .topbar-left > *{
    width:100%;
    display:flex;
    justify-content:center;
  }
  
  .topbar-left span{
    display:block;
    text-align:center;
  }

  .topbar-actions{
    flex-wrap:wrap;
    justify-content:center;
  }

  .topbar-actions button{
    font-size:12px;
    padding:6px 10px;
  }
}

@media (min-width:768px) and (max-width:1175px){

  .topbar{
    flex-direction:column;
    padding:12px 16px;
    gap:12px;
  }

  .topbar-left{
    display:flex;
    flex-direction:row;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:12px;
  }

  .topbar-actions{
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
  }

}