/* lot 57 : raccourcis toujours visibles (bleu nuit, bleu, argent) */
.sd57-bar{display:flex;gap:6px;align-items:center;margin-right:8px}
.sd57-b{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.08);color:#fff;font:600 13px/1 Manrope,system-ui,sans-serif;text-decoration:none;cursor:pointer;white-space:nowrap}
.sd57-b:hover,.sd57-b:focus-visible{background:rgba(255,255,255,.18);outline:none}
.sd57-fort{background:#1E5AA8;border-color:#1E5AA8}
.sd57-fort:hover{background:#174a8c}
.sd57-b em{font-style:normal;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#C9CED6;color:#0B1F3A;display:inline-grid;place-items:center;font-size:11px;font-weight:800}
.sd57-b em[hidden]{display:none}
.sd57-rouge em{background:#E0313A;color:#fff}
.sd57-c{display:none}
body.cx-ouvert .sd57-bar{visibility:hidden}
.sd-lc-p.sd57-haut{border-top:0;border-bottom:1px solid #E1E5EA;padding:8px 10px}
.sd-lc-p.sd57-haut .sd-lc-ret{font-weight:800;color:#0B1F3A;border:1px solid #0B1F3A;border-radius:10px;min-height:36px;padding:0 12px;background:#fff}
/* revue 6 : la barre du haut est déjà pleine (météo, Carte des chauffeurs, recherche). Libellé long seulement sur très grand écran,
   libellé court sur écran moyen, icône seule en dessous (titre et aria-label gardés). */
/* revue 7 (lots 57 + 59 + 60 ensemble) : 7 boutons dans la barre. Une seule rangée d'icônes avec pastilles jusqu’à 2099 px (la recherche garde sa place),
   libellés courts de 2100 à 2499 px, libellés longs au-delà. Les chiffres deviennent des pastilles (rouge = à faire, argent = info). */
@media (max-width:2499px){.sd57-l{display:none}.sd57-c{display:inline}}
@media (min-width:761px) and (max-width:2099px){
  .sd57-bar{gap:10px}
  .sd57-b{position:relative;width:40px;padding:0;justify-content:center}
  .sd57-b .sd57-c{display:none}
  .sd57-b em{position:absolute;top:-7px;right:-7px;height:20px;box-shadow:0 0 0 2px #0B1F3A;pointer-events:none}
}
/* 1280 à 1599 px : la météo garde l'icône et la température (comme le lot 25 en dessous de 1250 px), sinon la cloche sortait de l'écran */
@media (min-width:761px) and (max-width:1599px){
  header.v2-haut:has(.sd57-bar,.sd59-grp) .sd25-hb .sd25-mtx small,header.v2-haut:has(.sd57-bar,.sd59-grp) .sd25-hb .sd25-mtx em{display:none}
}
/* téléphone : pas la place dans la ligne du haut (logo, heure, icônes) : les 3 boutons passent sur une 2e ligne de la barre du haut, en pleine largeur */
@media (max-width:760px){
  html:root:has(#sd57-bar){--haut:calc(112px + env(safe-area-inset-top))} /* revue 7 : seulement quand la barre existe (espace collègue : 60 px comme avant) */
  header.v2-haut{flex-wrap:wrap;align-content:space-around;row-gap:0}
  /* revue 7 : v2-mobile2.css fixait l'en-tête à 60 px (!important) : les rangées de boutons dépassaient sans fond. L'en-tête suit --haut. */
  html:root header.v2-haut{height:var(--haut)!important}
  html:root #v2-retour{top:calc(var(--haut) + 12px)!important}
  .sd57-bar{order:99;flex:1 0 100%;gap:6px;margin:0;padding-bottom:4px}
  .sd57-b{flex:1 1 0;min-width:0;height:44px;justify-content:center;padding:0 8px;font-size:12.5px}
  .sd57-b .sd57-c{display:inline-block;overflow:hidden;text-overflow:ellipsis;line-height:1.35} /* 1.35 : l’accent de « À » n’est pas coupé */
  .sd57-b:not(.sd57-fort) svg{display:none} /* le texte et le compteur tiennent sans couper le mot */
  .sd-lc-p.sd57-haut .sd-lc-ret,.sd-lc-p.sd57-haut .sd-lc-plus{min-height:44px}
}