.formation-container {
  width: min(100% - 48px, 1200px);
  margin-inline: auto;
}

.formation-hero {
  position: relative;
  isolation: isolate;
  min-height: 570px;
  overflow: hidden;
  background: #12243a;
  color: #fff;
}

.formation-hero-photo {
  position: absolute;
  inset: 0 0 0 32%;
  z-index: -2;
  background: url("assets/hero-laboratoire-etalonnage.webp") center / cover no-repeat;
}

.formation-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #12243a 0%, #12243a 27%, rgba(18,36,58,.91) 46%, rgba(18,36,58,.30) 100%),
    linear-gradient(0deg, rgba(18,36,58,.7), transparent 55%);
}

.formation-hero-content {
  padding-top: 125px;
  padding-bottom: 110px;
}

.formation-hero h1 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(3.8rem, 7.5vw, 7rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.formation-hero h1 span { color: #63b4fb; }
.formation-hero-content > p {
  max-width: 560px;
  margin-top: 25px;
  color: #d0dce9;
  font-size: 1rem;
  line-height: 1.8;
}

.formation-hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.formation-hero-links a {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 23px;
  min-height: 51px;
  padding: 10px 17px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font-size: .82rem;
  font-weight: 600;
  transition: background .2s, border-color .2s;
}

.formation-hero-links a:hover { background: rgba(43,149,246,.25); border-color: #65baff; }

.formation-section { padding: 105px 0 115px; scroll-margin-top: 80px; }
.formation-learning { background: #fff; }

.formation-section-top {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 21px;
  border-bottom: 1px solid #d9e3ee;
}

.formation-section-number {
  font-family: 'Oswald', sans-serif;
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1;
  color: #2b95f6;
}

.formation-section-category {
  color: #536981;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .17em;
}

.formation-learning-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(55px, 8vw, 140px);
  padding-top: 62px;
  align-items: start;
}

.formation-section h2 {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(4.5rem, 7vw, 7.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.035em;
  text-transform: uppercase;
}

.formation-learning h2 { color: #16283d; }
.formation-section h2 span { color: #2b95f6; }

.formation-lead {
  max-width: 525px;
  margin-top: 23px;
  color: #35465a;
  font-size: clamp(1.12rem, 2vw, 1.48rem);
  line-height: 1.65;
}

.formation-learning-details {
  margin-top: 16px;
  padding: 7px 0 5px 32px;
  border-left: 3px solid #2b95f6;
}

.formation-learning-details p {
  color: #52677e;
  font-size: 1rem;
  line-height: 1.9;
}
.formation-learning-details p + p { margin-top: 24px; }

.formation-pill-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.formation-pill-list span {
  padding: 8px 12px;
  border-radius: 4px;
  background: #edf6ff;
  color: #1f78c7;
  font-size: .75rem;
  font-weight: 700;
}

.formation-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 50px;
  padding: 11px 19px;
  border-radius: 4px;
  background: #2b95f6;
  color: #fff;
  font-size: .83rem;
  font-weight: 700;
  transition: background .2s, transform .2s;
}

.formation-button:hover { background: #1876d3; transform: translateY(-2px); }
.formation-learning .formation-button { margin-top: 38px; }

.formation-staffing {
  background: #15283e;
  color: #fff;
}

.formation-staffing .formation-section-top { border-color: rgba(255,255,255,.18); }
.formation-staffing .formation-section-category { color: #a8bed4; }
.formation-staffing-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end;
  gap: 65px;
  margin: 65px 0 47px;
}

.formation-staffing h2 { color: #fff; }
.formation-staffing-intro > p {
  max-width: 490px;
  padding-bottom: 7px;
  color: #c1cede;
  font-size: 1.05rem;
  line-height: 1.8;
}

.formation-use-cases { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.formation-use-cases article {
  min-height: 265px;
  padding: 30px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 7px;
  background: rgba(255,255,255,.045);
}

.formation-use-cases article span {
  color: #70bdff;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .16em;
}

.formation-use-cases h3 {
  margin-top: 60px;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(1.55rem, 2.5vw, 2.2rem);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}

.formation-text-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  margin-top: 36px;
  padding-bottom: 7px;
  border-bottom: 1px solid #67b4f9;
  color: white;
  font-size: .87rem;
  font-weight: 700;
}
.formation-text-link:hover { color: #79c4ff; }

.formation-contact { padding: 75px 0; background: #eef6fd; }
.formation-contact-inner { display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.formation-contact p { color: #2083dd; font-size: .72rem; font-weight: 700; letter-spacing: .16em; }
.formation-contact h2 {
  max-width: 700px;
  margin-top: 12px;
  color: #182b42;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.7rem);
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}

.formation-button:focus-visible,
.formation-hero-links a:focus-visible,
.formation-text-link:focus-visible {
  outline: 2px solid #79c4ff;
  outline-offset: 4px;
}

@media (max-width: 800px) {
  .formation-hero-photo { inset: 0; opacity: .5; }
  .formation-hero::after { background: linear-gradient(90deg, rgba(18,36,58,.95), rgba(18,36,58,.64)); }
  .formation-learning-grid { gap: 40px; }
  .formation-staffing-intro { gap: 30px; }
  .formation-use-cases article { padding: 22px; }
}

@media (max-width: 700px) {
  .formation-container { width: min(100% - 36px, 1200px); }
  .formation-hero { min-height: 570px; }
  .formation-hero-content { padding-top: 95px; padding-bottom: 90px; }
  .formation-hero h1 { font-size: clamp(3.65rem, 14vw, 5.5rem); }
  .formation-hero-links a { width: 100%; }
  .formation-section { padding: 72px 0 82px; }
  .formation-learning-grid,
  .formation-staffing-intro { display: block; }
  .formation-learning-grid { padding-top: 35px; }
  .formation-section h2 { font-size: clamp(4rem, 15vw, 6rem); }
  .formation-learning-details { margin-top: 40px; }
  .formation-staffing-intro { margin: 40px 0; }
  .formation-staffing-intro > p { margin-top: 28px; }
  .formation-use-cases { grid-template-columns: 1fr; }
  .formation-use-cases article { min-height: 175px; padding: 26px; }
  .formation-use-cases h3 { margin-top: 25px; }
  .formation-contact-inner { display: block; }
  .formation-contact .formation-button { margin-top: 27px; }
}

@media (prefers-reduced-motion: reduce) {
  .formation-button, .formation-hero-links a { transition: none; }
}