/* ============================================================
   Careers / Carrière — page dédiée (V3)
   Réutilise base.css + what-we-do.css (xp-text, crop, m-* mobile).
   ============================================================ */

/* Canvas desktop : sections en absolu (comme create-d / wwd-d) */
.careers-d { height: 4739px; background: #fff; }
.careers-d section { position: absolute; left: 0; width: 1440px; }

/* Intro (bandeau bleu) : texte centré clair */
.careers-intro { font-family: var(--f-alb); font-size: 24px; line-height: 1.3; letter-spacing: -0.01em; text-align: center; color: var(--cloud); }

/* Pastille-titre pleine largeur des blocs (Everyone matters, Learning company…) */
.careers-cap { display: flex; align-items: center; justify-content: center; background: var(--cloud); border: 2px solid var(--black); border-radius: 50px; padding: 11px 33px; }
.careers-cap h1, .careers-cap h2 { font-family: var(--f-unb); font-weight: 700; font-size: 36px; line-height: 1.2; letter-spacing: -0.01em; text-transform: uppercase; color: var(--black); text-align: center; }
.careers-d .careers-cap h1, .careers-d .careers-cap h2 { white-space: nowrap; }
.careers-cap .l { font-family: var(--f-unb); font-weight: 400; }

/* Colonne texte d'un bloc : pastille + paragraphe, centrés verticalement */
.careers-col { display: flex; flex-direction: column; justify-content: center; gap: 50px; }
.careers-col .xp-text { white-space: normal; }

/* ---------- Mobile ---------- */
.careers-m .m-careers-cap { width: 100%; }
.careers-m .m-careers-intro { font-family: var(--f-alb); font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; text-align: center; color: var(--cloud); }
.careers-m .m-xp-block .careers-cap { width: 100%; padding: 11px 20px; }
.careers-m .careers-cap h1, .careers-m .careers-cap h2 { font-size: 22px; }