/* Accueil et écrans du téléphone : bouton « En ligne » de l'accueil, tuile fixe « Parrainage », « – » des tuiles en
   modification, boutons du bas de la page de mission, vue Lignes en portrait, logo de l'en-tête. Chargé en dernier. */

/* Bouton « Passer en ligne » sous « Prochaine course » (home-driver.js). */
.home-online {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--theme-border);
  border-radius: 14px;
  background: var(--theme-surface);
  color: var(--theme-text);
}
.home-online .home-online-btn {
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 12px;
  border: 0;
  background: var(--theme-accent);
  color: var(--theme-on-accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* Mode « organiser les tuiles » : le « – » sur le coin de la tuile, sans cacher son nom ; tuile fixe immobile. */
.service-grid.is-editing .service-link {
  position: relative;
  overflow: visible;
}
.service-grid .service-link > span.home-x,
html[data-skin] .service-grid.is-editing .service-link > span.home-x {
  top: -10px;
  left: -10px;
  margin: 0;
  /* Dans la grille du modèle 2, une position de ligne ferait de cette ligne le repère du « – ». */
  grid-row: auto;
  grid-column: auto;
  z-index: 2;
  font-size: 20px;
}
.service-grid.is-editing .service-link.home-fixed {
  animation: none;
  opacity: 0.85;
}

/* Page de mission : boutons du bas lisibles (texte sur deux lignes au besoin) et non cachés par le micro. */
.mine-detail .mission-secondary {
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}
.mine-detail .mission-secondary button {
  height: auto;
  min-height: 56px !important;
  white-space: normal;
  line-height: 1.2;
}
#mine-detail-body {
  padding-bottom: 88px;
}

/* Réservations, vue Lignes en portrait : même bloc que la page Trafic (téléphone qui pivote). */
@media (max-width: 760px) and (orientation: portrait) {
  .rr-mode .rr-portrait {
    border: 2px dashed var(--theme-border);
  }
}

/* En-tête : le logo (ou le nom) tient toujours dans la largeur. */
.app > header > .brand img.company-logo {
  max-width: min(160px, 100%);
  height: auto;
  max-height: 40px;
}
@media (max-width: 430px) {
  .app > header > .brand strong {
    font-size: 13px;
  }
  .app > header > .brand span {
    font-size: 8px;
    letter-spacing: 0.08em;
  }
}