/* ============================================================
   MESURE PROCESS — PAGE D'UNE OFFRE D'EMPLOI
   wp-content/themes/rs1-mesure-process/assets/css/mp-offre.css

   Gabarit views/single-job.twig, chargé uniquement sur les offres
   (inc/mp-offres.php). Mise en page .mp-offre__* ; bandeau, boutons,
   chips, cartes, coches : composants partagés de mp-tokens.css.
   Formulaire : bloc rs1/form (présentation « carte ») et
   mp-global.css § 10 (champs, champs fichier, bouton).

   Points de rupture : 960 px (colonnes), 600 px (mobile étroit).
   ============================================================ */

/* ── 1. Bandeau ─────────────────────────────────────────────── */
.mp-offre__titre{ max-width: 26ch }

.mp-offre__meta{
  display: flex; flex-wrap: wrap; gap: .35rem .75rem;
  margin: 1.15rem 0 0;
  font-size: var(--mp-t-lg);
  font-weight: 600;
  color: var(--mp-blanc);
}
.mp-offre__meta [aria-hidden]{ color: var(--mp-texte-sombre) }

.mp-offre__chips{ margin: 1rem 0 0 }

/* ── 2. Corps : repères et description ──────────────────────── */
.mp-offre__corps{
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--mp-blanc);
}
.mp-offre__grille{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

/* Repères : lus avant la description sur mobile, à droite dès 961 px */
.mp-offre__reperes{
  display: flex; flex-direction: column; gap: 1.25rem;
  background: var(--mp-bleu-brume);
}
.mp-offre__reperes-titre{
  margin: 0;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-h3);
  font-weight: 800;
  color: var(--mp-encre);
}
.mp-offre__liste{
  display: grid; gap: .9rem;
  margin: 0; padding: 0;
  list-style: none;
}
.mp-offre__liste li{
  font-size: var(--mp-t-base);
  font-weight: 600;
  line-height: 1.45;
  color: var(--mp-encre);
}
.mp-offre__coche{
  flex: none;
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  margin-top: -.1rem;
  border-radius: var(--mp-r-pill);
  background: var(--mp-turquoise-voile);
  color: var(--mp-turquoise-fonce);
}
.mp-offre__coche svg{ width: 1rem; height: 1rem }
.mp-offre__postuler{ width: 100% }
.mp-offre__partager{ align-self: center }

/* Description */
.mp-offre__description{ max-width: 68ch }
.mp-offre__section + .mp-offre__section{ margin-top: 2rem }
.mp-offre__section-titre{
  margin: 0 0 1rem;
  font-family: var(--mp-font-titre);
  font-size: var(--mp-t-h2-sm);
  font-weight: 800;
  color: var(--mp-encre);
}
.mp-offre__texte{
  font-size: var(--mp-t-base);
  line-height: var(--mp-lh-texte);
  color: var(--mp-texte);
}
.mp-offre__texte > * + *{ margin-top: 1rem }
.mp-offre__texte p{ margin-bottom: 0 }
.mp-offre__texte strong{ color: var(--mp-encre) }
.mp-offre__texte ul{
  display: grid; gap: .6rem;
  margin: 1rem 0 0; padding: 0;
  list-style: none;
}
.mp-offre__texte li{
  position: relative;
  padding-left: 1.5rem;
}
.mp-offre__texte li::before{
  content: "";
  position: absolute; left: .2rem; top: .7em;
  width: .5rem; height: .5rem;
  border-radius: var(--mp-r-pill);
  background: var(--mp-turquoise);
}
.mp-offre__retour{ margin: 2.5rem 0 0 }

/* ── 3. Candidature ─────────────────────────────────────────── */
.mp-offre__candidature{
  padding-block: clamp(3rem, 7vw, 5.5rem);
  background: var(--mp-bleu-brume);
  border-top: 1px solid var(--mp-trait);
}
.mp-offre__candidature-in{ max-width: 46rem }
.mp-offre__question{
  margin: 1.5rem 0 0;
  text-align: center;
  font-size: var(--mp-t-sm);
  color: var(--mp-texte);
}
.mp-offre__question a{ color: var(--mp-bleu); font-weight: 600; overflow-wrap: anywhere }

/* Champs fichier (CV, lettre) : mp-global.css § 10 */

/* Une seule colonne dans le formulaire, quelle que soit la largeur :
   la carte est étroite, les champs gagnent en lisibilité. */
.mp-offre__candidature .ff-t-container{ display: block }

@media (min-width: 961px){
  .mp-offre__grille{ grid-template-columns: minmax(0, 1fr) 22rem }
  .mp-offre__aside{ order: 2; position: sticky; top: calc(var(--header-height, 76px) + 1.5rem) }
  .mp-offre__description{ order: 1 }
}

@media (max-width: 600px){
  .mp-offre__meta{ font-size: var(--mp-t-base) }
}