/*
 * Fil d'Ariane : Bootstrap 5 met .breadcrumb en flex tout en gardant float:left sur le ::before
 * du séparateur — ce mélange décale souvent la boîte cliquable des liens par rapport au texte
 * (curseur en dessous pour voir le survol bleu). On repasse chaque item en flex et on annule le float.
 */
nav.zenline-breadcrumb {
  position: relative;
  z-index: 5;
}

nav.zenline-breadcrumb .breadcrumb-item {
  display: flex;
  align-items: center;
}

nav.zenline-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  float: none;
  pointer-events: none;
}

nav.zenline-breadcrumb .breadcrumb-item a {
  display: inline-block;
  position: relative;
  z-index: 1;
  line-height: 1.35;
  padding: 0.4rem 0.15rem;
  -webkit-tap-highlight-color: rgba(65, 139, 173, 0.2);
}

/* Par défaut (desktop), on garde le fil complet : pas de "…" */
nav.zenline-breadcrumb .zenline-breadcrumb-ellipsis {
  display: none;
}

/* Évite un séparateur "/" en tête quand "…" est caché (reste dans le DOM) */
nav.zenline-breadcrumb .zenline-breadcrumb-ellipsis + .breadcrumb-item::before {
  content: none;
}

/* Mobile : afficher "… / Catégorie / Métier" ou "… / Standard IA / Catégorie" */
@media (max-width: 991.98px) {
  nav.zenline-breadcrumb .zenline-breadcrumb-ellipsis {
    display: flex;
  }

  /* Page métier: items = […, Accueil, Standard IA, Catégorie, Métier] */
  nav.zenline-breadcrumb.zenline-breadcrumb--job .breadcrumb-item:nth-child(2),
  nav.zenline-breadcrumb.zenline-breadcrumb--job .breadcrumb-item:nth-child(3) {
    display: none;
  }

  /* Page catégorie: items = […, Accueil, Standard IA, Catégorie] */
  nav.zenline-breadcrumb.zenline-breadcrumb--category .breadcrumb-item:nth-child(2) {
    display: none;
  }
}

/* Masquer le robot sur mobile (3ème élément de la row hero) */
@media (max-width: 991.98px) {
  .hero-content-row>*:nth-child(3) {
    display: none !important;
  }
}

/* Sur desktop : réduire et aligner le robot en haut pour faire de la place au bouton dessous sans conflit */
@media (min-width: 992px) {
  .hero-content-row>*:nth-child(3) {
    align-self: flex-start !important;
    margin-top: 15px;
    /* Décolle un tout petit peu du haut si besoin */
  }

  .hero-content-row>*:nth-child(3) img {
    max-height: 360px !important;
    width: auto !important;
    margin: 0 auto;
    display: block;
  }
}