/* ============================================================
   Services / Offre de formation — rich Mondrian page
   Builds on references.css (.mz wall primitives, .reveal).
   Scoped under .svc so it never touches the rest of the site.
   ============================================================ */
.svc { --wl: 6px; }

/* ---------- HERO ---------- */
.svc-hero { grid-template-columns: 1.7fr 1fr; }
.svc-hero .display-xl { margin-bottom: 14px; }
.svc-hero .lead { max-width: 56ch; font-size: 1.12rem; }
.svc-qualiopi { width: 100%; max-width: 230px; height: auto; display: block; }
.svc-qualiopi__cap { margin-top: 14px; font-size: 0.72rem; line-height: 1.35; color: #5b5b54; max-width: 240px; }

/* ---------- breathing room between major blocks ---------- */
.svc.refs-page { padding-top: 14px !important; }
.svc .section { margin-top: 20px; }
.svc .section-head { margin: 58px 0 20px; }
.svc-badge {
  display: inline-block; margin-bottom: 18px;
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.74rem; padding: 7px 14px;
  background: var(--mondrian-black); color: #fff;
}
.svc-hero__aside { gap: var(--wl); }

/* ---------- KEY STATS (agrément, prix, modules…) ---------- */
.svc-stats { grid-template-columns: repeat(4, 1fr); }
.svc-stat .statnum { font-size: clamp(1.35rem, 2.6vw, 2rem); line-height: 1.05; word-break: break-word; hyphens: auto; }
.svc-stat--num .statnum { font-size: clamp(2.6rem, 5.2vw, 3.8rem); }
.svc-stat .label { font-size: 0.78rem; margin-top: 8px; color: inherit; }

/* ---------- DOWNLOAD BUTTONS ---------- */
.svc-actions {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin: var(--wl) 0 0;
}
.svc-btn {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 26px; background: #fff;
  border: var(--wl) solid var(--mondrian-black);
  box-shadow: 8px 8px 0 var(--mondrian-black);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  cursor: pointer;
}
.svc-btn:hover { transform: translate(-3px, -3px); box-shadow: 11px 11px 0 var(--mondrian-black); }
.svc-btn:active { transform: translate(4px, 4px); box-shadow: 4px 4px 0 var(--mondrian-black); }
.svc-btn--primary { background: var(--mondrian-red); }
.svc-btn--primary .svc-btn__txt, .svc-btn--primary .svc-btn__sub { color: #fff; }
.svc-btn__ico {
  flex: 0 0 auto; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  border: 4px solid var(--mondrian-black); background: var(--mondrian-yellow);
  font-weight: 900; font-size: 0.78rem; letter-spacing: 0.02em;
}
.svc-btn--primary .svc-btn__ico { background: #fff; }
.svc-btn__txt {
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: 1.04rem; line-height: 1.12; color: var(--mondrian-black);
}
.svc-btn__sub { display: block; margin-top: 5px; font-weight: 700; font-size: 0.78rem; color: #5b5b54; text-transform: none; letter-spacing: 0; }

/* ---------- FRAMEWORK (cadre commun à toutes les formations) ---------- */
.svc-frame { grid-template-columns: repeat(4, 1fr); }
.svc-frame .cell { min-height: 196px; padding: clamp(1.5rem, 2.6vw, 2.6rem); }
.svc-frame h3 {
  font-size: 0.82rem; letter-spacing: 0.06em; margin-bottom: 10px;
  color: var(--mondrian-red);
}
.svc-frame.cell-blue h3 { color: var(--mondrian-yellow); }
.svc-frame ul { list-style: none; }
.svc-frame li { font-size: 0.94rem; line-height: 1.45; font-weight: 700; padding-left: 16px; position: relative; margin-bottom: 9px; }
.svc-frame li::before { content: "›"; position: absolute; left: 0; color: var(--mondrian-red); font-weight: 900; }
.svc-frame .cell.blue li::before, .svc-frame .cell.red li::before { color: #fff; }

/* ---------- MODULES (accordéon) ---------- */
.svc-mods { display: flex; flex-direction: column; gap: 10px; }
.svc-mod {
  background: #fff; border: var(--wl) solid var(--mondrian-black);
}
.svc-mod > summary {
  list-style: none; cursor: pointer;
  display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 18px;
  padding: 18px 22px;
}
.svc-mod > summary::-webkit-details-marker { display: none; }
.svc-mod__num {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1.5rem; color: #fff; background: var(--mondrian-blue);
  border: 4px solid var(--mondrian-black);
}
.svc-mod:nth-child(4n+1) .svc-mod__num { background: var(--mondrian-red); }
.svc-mod:nth-child(4n+2) .svc-mod__num { background: var(--mondrian-blue); }
.svc-mod:nth-child(4n+3) .svc-mod__num { background: var(--mondrian-yellow); color: var(--mondrian-black); }
.svc-mod:nth-child(4n+4) .svc-mod__num { background: var(--mondrian-black); }
.svc-mod__head h3 { font-size: clamp(1rem, 1.7vw, 1.28rem); line-height: 1.1; }
.svc-mod__meta { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 7px; }
.svc-tag {
  font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 3px 9px; border: 2px solid var(--mondrian-black); background: var(--mondrian-cream);
}
.svc-tag--pers { background: var(--mondrian-yellow); }
.svc-mod__chev {
  font-weight: 900; font-size: 1.4rem; color: var(--mondrian-black);
  transition: transform .25s ease; padding: 0 6px;
}
.svc-mod[open] .svc-mod__chev { transform: rotate(45deg); }
.svc-mod[open] > summary { border-bottom: var(--wl) solid var(--mondrian-black); background: var(--mondrian-cream); }

.svc-mod__body { padding: 22px 26px 26px; }
.svc-mod__body .svc-sub {
  font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em;
  font-size: 0.82rem; color: var(--mondrian-red); margin: 16px 0 8px;
}
.svc-mod__body .svc-sub:first-child { margin-top: 0; }
.svc-mod__body ul { list-style: none; margin-bottom: 6px; }
.svc-mod__body li { font-size: 0.96rem; line-height: 1.4; padding-left: 18px; position: relative; margin-bottom: 6px; }
.svc-mod__body li::before { content: "—"; position: absolute; left: 0; color: var(--mondrian-blue); font-weight: 900; }

/* ---------- CONTACT / CTA ---------- */
.svc-contact { grid-template-columns: 1.3fr 1fr; }
.svc-contact a { text-decoration: underline; text-underline-offset: 3px; }
.svc-contact .lead { font-size: 1.04rem; }

.svc-note { font-size: 0.84rem; color: #5b5b54; margin-top: 10px; line-height: 1.45; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .svc-hero, .svc-contact { grid-template-columns: 1fr; }
  .svc-stats { grid-template-columns: repeat(2, 1fr); }
  .svc-frame { grid-template-columns: repeat(2, 1fr); }
  .svc-actions { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .svc-stats { grid-template-columns: 1fr; }
  .svc-frame { grid-template-columns: 1fr; }
  .svc-mod > summary { grid-template-columns: 48px 1fr auto; gap: 12px; padding: 14px 14px; }
  .svc-mod__num { width: 48px; height: 48px; font-size: 1.15rem; }
  .svc-mod__body { padding: 18px 16px 20px; }
}