/* ============================================================
   rs1/careers-hero — bandeau de la page Carrière
   Fond, voile, titre, texte, boutons : .mp-bandeau, .mp-btn,
   .mp-eyebrow (assets/css/mp-tokens.css)
   ============================================================ */

.mp-crh__grille{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: center;
}

/* Le fragment /mot/ du titre peut être long : il passe à la ligne */
.mp-crh__titre .mp-exergue{ white-space: normal }

/* Compteur d'offres dans le bouton principal */
.mp-crh__compteur{
  display: inline-grid;
  place-items: center;
  min-width: 1.6rem;
  padding: .1rem .5rem;
  border-radius: var(--mp-r-pill);
  background: var(--mp-trait-sombre);
  font-size: var(--mp-t-xs);
  font-weight: 700;
  line-height: 1.4;
}

/* Visuel : photo cadrée ou panneau d'attente */
.mp-crh__visuel{
  position: relative;
  margin: 0;
  border-radius: var(--mp-r);
  overflow: hidden;
}
.mp-crh__photo{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.mp-crh__photo--droite{ object-position: 85% 30% }
.mp-crh__photo--gauche{ object-position: 15% 30% }
.mp-crh__attente{
  display: grid;
  place-content: center;
  gap: .5rem;
  padding: 2rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--mp-trait-sombre);
  border-radius: var(--mp-r);
  background: var(--mp-voile-sombre);
}
.mp-crh__attente-titre{
  font-size: var(--mp-t-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mp-turquoise-pale);
}
.mp-crh__attente-texte{
  font-size: var(--mp-t-sm);
  color: var(--mp-texte-sombre);
}
.mp-crh__legende{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2.5rem 1.1rem .9rem;
  font-size: var(--mp-t-xs);
  color: var(--mp-blanc);
  background: linear-gradient(0deg, var(--mp-bleu-nuit) 0%, transparent 100%);
}
.mp-crh__attente + .mp-crh__legende{
  position: static;
  padding: .75rem 0 0;
  background: none;
  color: var(--mp-texte-sombre);
}

/* Métiers recherchés : liste statique (ancien ticker défilant) */
.mp-crh__metiers{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 1.5rem 0 0;
  border-top: 1px solid var(--mp-trait-sombre);
}
.mp-crh__metier{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .85rem;
  border-radius: var(--mp-r-pill);
  background: var(--mp-voile-sombre);
  font-size: var(--mp-t-xs);
  font-weight: 600;
  color: var(--mp-blanc);
}
.mp-crh__metier::before{
  content: "";
  width: .4rem;
  height: .4rem;
  border-radius: var(--mp-r-pill);
  background: var(--mp-turquoise-vif);
}

@media (min-width: 961px){
  .mp-crh__grille{
    grid-template-columns: minmax(0, 1.35fr) minmax(0, .9fr);
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
  .mp-crh__photo{ aspect-ratio: 4 / 5 }
  .mp-crh__attente{ aspect-ratio: 4 / 5 }
}

/* ── Présentation « fond » : photo pleine largeur sous voile ───
   Même traitement que les bandeaux des pages solution (rs1/mnt-hero) :
   contenu calé en bas, voile --mp-voile-carriere (mp-tokens.css).
   Point focal : « cadrage » = côté du sujet ; en hauteur, la bande des
   visages (≈ 30–45 % de la photo) reste dans le champ à toutes les largeurs. */
.mp-crh--fond{
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(82vh, 50rem);
  background: var(--mp-bleu-nuit);
}
.mp-crh--fond .mp-crh__in{ width: 100% }
.mp-crh--fond .mp-crh__grille{ grid-template-columns: minmax(0, 1fr) }
/* Colonne de texte sur la moitié gauche : le groupe reste lisible à droite.
   --mp-crh-bord = bord droit de la colonne (marge du conteneur + largeur),
   repris par le voile --mp-voile-carriere : dense sous tout le texte. */
.mp-crh--fond{
  --mp-crh-col: 36rem;
  --mp-crh-bord: calc(max(0px, (100% - var(--mp-max)) / 2) + var(--mp-gouttiere) + var(--mp-crh-col));
}
.mp-crh--fond .mp-crh__texte{ max-width: var(--mp-crh-col) }

.mp-crh__media img{ object-position: 50% 35% }
.mp-crh--sujet-droite .mp-crh__media img{ object-position: 100% 35% }
.mp-crh--sujet-gauche .mp-crh__media img{ object-position: 0% 35% }

/* Éditeur : bandeau compact */
.mp-crh--fond.editor-block{ min-height: 0 }

@media (max-width: 960px){
  .mp-crh--fond{ min-height: min(70vh, 44rem) }
}

/* Mobile étroit : le texte occupe toute la hauteur. Une photo carrée étirée
   sur tout le bandeau serait recadrée à moins de la moitié de sa largeur et
   couperait les visages des côtés ; la zone photo est donc limitée en
   hauteur (le groupe tient en largeur), le voile se fond ensuite dans le
   fond bleu nuit du bandeau. */
@media (max-width: 600px){
  .mp-crh--fond{ min-height: 0 }
  .mp-crh--fond .mp-crh__media{ bottom: auto; height: min(100%, 170vw) }
  /* Hauteur fractionnaire : le voile déborde de 2 px pour couvrir la
     dernière demi-ligne de photo (sinon, filet clair au raccord). */
  .mp-crh--fond .mp-crh__media::after{ bottom: -2px }
}