@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins/Poppins-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins/Poppins-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Unbounded";
  src: url("fonts/Unbounded/static/Unbounded-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Unbounded";
  src: url("fonts/Unbounded/static/Unbounded-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

:root {
  --petrol: #006886;
  --ink: #2d3a42;
  --violet: #812990;
  --blue: #029ee2;
  --coral: #ff6b35;
  --ice: #ebf5fc;
  --white: #ffffff;
  --muted: #65717a;
  --line: rgba(45, 58, 66, 0.14);
  --title-font: "Unbounded", system-ui, sans-serif;
  --body-font: "Poppins", system-ui, sans-serif;
  --surface: #f2f6fd;
  --card-line: #dce8f5;
  --lilac: #e6dcee;
  --pill-bg: #ebf1fb;
  --brand-gradient: linear-gradient(125deg, var(--blue) 0%, color-mix(in srgb, var(--blue) 55%, var(--violet)) 42%, var(--violet) 100%);
  /* Fond d'un texte blanc (boutons, pastilles, étiquettes ; lot 11, E-15) : même départ plus foncé que la bande
     d'inscription, au moins 4,5:1 avec le blanc en tout point (contrôlé à l'enregistrement du thème, ThemeContrast). */
  --brand-gradient-text: linear-gradient(125deg, color-mix(in srgb, var(--blue) 65%, var(--ink)) 0%, color-mix(in srgb, var(--blue) 55%, var(--violet)) 42%, var(--violet) 100%);
  --card-radius: 24px;
  --photo-radius: 28px;
  --shadow: 0 18px 44px color-mix(in srgb, var(--violet) 12%, transparent);
  --diamond-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg fill='white' fill-opacity='.8'%3E%3Crect x='-30' y='-30' width='60' height='60' rx='14' transform='translate(42 42) rotate(45)'/%3E%3Crect x='-30' y='-30' width='60' height='60' rx='14' transform='translate(127 127) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
  --diamond-pattern-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cg fill='white' fill-opacity='.07'%3E%3Crect x='-30' y='-30' width='60' height='60' rx='14' transform='translate(42 42) rotate(45)'/%3E%3Crect x='-30' y='-30' width='60' height='60' rx='14' transform='translate(127 127) rotate(45)'/%3E%3C/g%3E%3C/svg%3E");
}

* {
  box-sizing: border-box;
}

html {
  color: var(--ink);
  font-family: var(--body-font);
  letter-spacing: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* « Réduire les animations » du système (lot 11, E-17) : ni transition, ni animation, ni défilement doux, partout. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Lien d'évitement (lot 11, E-09) : caché jusqu'au premier appui sur Tab. */
.skip-link {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1000;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

main:focus {
  outline: none;
}

body {
  margin: 0;
  background: var(--white);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  line-height: 1.72;
  margin: 0;
}

h1,
h2,
h3 {
  font-family: var(--title-font);
  letter-spacing: 0;
  margin: 0;
}

h1 {
  font-size: clamp(2rem, 4.65vw, 4.25rem);
  line-height: 1.02;
}

h2 {
  font-size: clamp(1.38rem, 2.72vw, 2.74rem);
  line-height: 1.08;
}

h3 {
  font-size: clamp(0.98rem, 1.32vw, 1.18rem);
  line-height: 1.2;
}

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.88);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
}

.nav {
  min-height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

.logo {
  width: 164px;
  flex: 0 0 auto;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
  color: var(--ink);
  font-weight: 600;
}

.nav-links a {
  white-space: nowrap;
}

.nav-links a:hover {
  color: var(--violet);
}

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}

.menu-toggle::-webkit-details-marker {
  display: none;
}

.menu-toggle-icon {
  display: grid;
  gap: 4px;
  width: 17px;
}

.menu-toggle-icon span {
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}

.menu-toggle:focus-visible,
.site-menu a:focus-visible,
.site-menu-close:focus-visible,
.nav-links a:focus-visible,
.btn:focus-visible,
.mini-btn:focus-visible,
.footer-rdv-button:focus-visible,
.formation-card:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}

.btn,
.mini-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--body-font);
  font-weight: 700;
  line-height: 1;
}

.btn {
  padding: 0 20px;
}

.btn-icon {
  gap: 10px;
}

.pdf-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
  background: var(--white);
  color: var(--violet);
}

.mini-btn {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.82rem;
}

.btn-primary {
  background: var(--brand-gradient-text);
  color: var(--white);
}

.btn-dark {
  background: var(--ink);
  color: var(--white);
}

.btn-soft {
  background: var(--ice);
  color: var(--petrol);
}

.eyebrow {
  width: fit-content;
  border-radius: 999px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 7px 14px;
  color: var(--white);
  font-family: var(--title-font);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  background: var(--ink);
}

.pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
}

.section {
  padding: clamp(72px, 9vw, 130px) 0;
}

.section-compact {
  padding: clamp(52px, 7vw, 92px) 0;
}

.grid-2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.hero-copy {
  display: grid;
  gap: 24px;
}

.lead {
  max-width: 690px;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
}

.formation-subtitle {
  margin: -10px 0 -4px;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.08;
  color: var(--violet);
}

.image-frame {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--photo-radius);
  background: var(--ice);
  box-shadow: var(--shadow);
}

.image-frame img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}

.stat-band {
  display: grid;
  grid-template-columns: repeat(var(--stat-count, 4), minmax(0, 1fr));
  overflow: hidden;
  position: relative;
  gap: 0;
  border: 0;
  border-radius: var(--card-radius);
  background: var(--diamond-pattern-soft) center / 170px 170px, var(--violet);
}

.stat strong {
  display: block;
  font-family: var(--title-font);
  line-height: 1;
  color: var(--white);
  font-size: clamp(2.2rem, 4.2vw, 3.6rem);
}

.stat span {
  display: block;
  margin-top: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.84);
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--white);
  overflow: hidden;
}

.card-body {
  display: grid;
  gap: 12px;
  padding: 22px;
}

.formation-hero {
  position: relative;
  padding: clamp(62px, 8vw, 100px) 0 clamp(50px, 7vw, 86px);
}

.formation-hero .grid-2 {
  grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1fr);
}

.content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.panel {
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--white);
  padding: clamp(22px, 4vw, 36px);
}

.panel h2,
.panel h3 {
  margin-bottom: 18px;
}

.check-list li {
  position: relative;
  padding-left: 22px;
  line-height: 1.55;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 2.5px;
  transform: rotate(45deg);
  background: var(--violet);
}

.check-list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.side-rail {
  position: sticky;
  top: 112px;
  display: grid;
  gap: 14px;
}

.footer {
  padding: 58px 0;
  background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--violet) 28%, var(--ink)));
  color: var(--white);
  padding-bottom: 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 24px;
}

.footer p,
.footer a {
  color: rgba(255, 255, 255, 0.76);
}

.footer .footer-rdv-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--brand-gradient-text);
  color: var(--white);
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 12px 24px color-mix(in srgb, var(--violet) 28%, transparent);
  margin-top: 14px;
}

.choice {
  display: grid;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.82);
}

.theme-a .hero-home {
  position: relative;
  padding: clamp(56px, 8vw, 98px) 0 42px;
}

.theme-a .hero-home .image-frame {
  position: relative;
  border-radius: var(--photo-radius);
  transform: rotate(1.8deg);
  z-index: 1;
}

.theme-a .hero-note {
  position: relative;
  z-index: 4;
  max-width: 360px;
  margin: -72px 0 0 -34px;
  padding: 24px;
  background: var(--brand-gradient-text);
  color: var(--white);
  box-shadow: 0 18px 40px rgba(0, 104, 134, 0.24);
  border-left: 0;
  border-radius: var(--card-radius);
}

/* Titre du héros de l'accueil avec une partie en gras (éditeur de l'admin) : le reste en trait fin. */
.hero-title-mixed {
  font-weight: 400;
}

.hero-title-mixed strong {
  font-weight: 700;
}

/* Pavé de l'accueil (titre et texte modifiables dans l'admin) : titre seul en grand, sinon titre plus mesuré. */
.hero-note-title {
  margin: 0;
  font-family: var(--title-font);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.3;
}

.hero-note-text {
  margin: 8px 0 0;
  line-height: 1.55;
}

.hero-note--title-only .hero-note-title {
  font-size: clamp(1.45rem, 2.3vw, 1.95rem);
  line-height: 1.15;
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}

.news-card {
  position: relative;
  min-height: 330px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-radius: var(--card-radius);
  background: var(--ink);
  color: var(--white);
  box-shadow: var(--shadow);
}

.news-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 220ms ease;
}

.news-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(45, 58, 66, 0.08) 0%, rgba(45, 58, 66, 0.52) 45%, rgba(45, 58, 66, 0.94) 100%),
    linear-gradient(90deg, rgba(0, 104, 134, 0.46), rgba(129, 41, 144, 0.18));
}

.news-card:nth-child(2)::after {
  background:
    linear-gradient(180deg, rgba(45, 58, 66, 0.04) 0%, rgba(45, 58, 66, 0.48) 42%, rgba(45, 58, 66, 0.92) 100%),
    linear-gradient(90deg, rgba(129, 41, 144, 0.5), rgba(2, 158, 226, 0.2));
}

.news-card:nth-child(3)::after {
  background:
    linear-gradient(180deg, rgba(45, 58, 66, 0.04) 0%, rgba(45, 58, 66, 0.48) 42%, rgba(45, 58, 66, 0.92) 100%),
    linear-gradient(90deg, rgba(2, 158, 226, 0.42), rgba(0, 104, 134, 0.36));
}

.news-card:hover img {
  transform: scale(1.04);
}

.news-card-content {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 12px;
  padding: 24px;
}

.news-card time {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.news-card h3 {
  max-width: 92%;
  color: var(--white);
  font-size: clamp(1.08rem, 1.55vw, 1.42rem);
}

.section-actions {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

.field-like {
  min-height: 50px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 600;
  border-color: var(--card-line);
  border-radius: 12px;
}

.theme-a .path-card {
  min-height: 270px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: var(--card-radius);
  color: var(--white);
  background: var(--ink);
  position: relative;
}

.theme-a .path-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.78;
}

.theme-a .path-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 0%, rgba(0, 104, 134, 0.28) 38%, rgba(0, 104, 134, 0.9) 100%),
    linear-gradient(90deg, rgba(0, 104, 134, 0.2), rgba(2, 158, 226, 0.16));
}

.theme-a .path-card:nth-child(4n + 3)::after {
  background:
    linear-gradient(180deg, transparent 0%, rgba(2, 158, 226, 0.24) 38%, rgba(0, 104, 134, 0.88) 100%),
    linear-gradient(90deg, rgba(2, 158, 226, 0.22), rgba(235, 245, 252, 0.08));
}

.theme-a .path-card:nth-child(4n + 4)::after {
  background:
    linear-gradient(180deg, transparent 0%, rgba(45, 58, 66, 0.28) 38%, rgba(45, 58, 66, 0.9) 100%),
    linear-gradient(90deg, rgba(129, 41, 144, 0.18), rgba(0, 104, 134, 0.22));
}

.theme-a .path-card .card-body {
  position: relative;
  z-index: 2;
  background: transparent;
}

.theme-a a.path-card img {
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.theme-a a.path-card:hover img,
.theme-a a.path-card:focus-visible img {
  opacity: 0.92;
  transform: scale(1.04);
}

.theme-a a.path-card:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
}

.theme-a .formation-hero {
  background: var(--ice);
}

.theme-a .formation-hero .image-frame {
  min-height: 500px;
  transform: rotate(-1.4deg);
}

.theme-a .directory-hero {
  position: relative;
  padding: clamp(62px, 8vw, 108px) 0 38px;
  background: linear-gradient(140deg, var(--ice), color-mix(in srgb, var(--blue) 7%, var(--white)) 58%, var(--white));
}

.theme-a .hero-home::before,
.theme-a .directory-hero::before {
  content: "";
  position: absolute;
  top: -130px;
  right: -70px;
  width: 310px;
  aspect-ratio: 1;
  transform: rotate(45deg);
  pointer-events: none;
  border-radius: 64px;
  background: var(--violet);
  opacity: 0.07;
}

.theme-a .hero-home > .container,
.theme-a .directory-hero > .container {
  position: relative;
  z-index: 1;
}

.formations-directory-hero .grid-2 {
  grid-template-columns: minmax(0, 1.12fr) minmax(330px, 0.88fr);
  align-items: center !important;
}

.formations-hero-photo {
  aspect-ratio: 1.32;
  min-width: 0;
  margin: 12px 20px 20px 0;
  overflow: hidden;
  border: 8px solid var(--white);
  border-radius: var(--photo-radius);
  background: var(--ice);
  box-shadow: var(--shadow);
  transform: rotate(4deg);
}

.formations-hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.formation-count { margin: 0 0 18px; color: var(--muted); font-family: var(--body-font); font-size: 1rem; font-weight: 600; line-height: 1.72; }
.formation-no-results { grid-column: 1 / -1; padding: 32px; background: var(--white); border-radius: var(--card-radius); }
.formation-no-results a { text-decoration: underline; }

.formation-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.formation-card {
  position: relative;
  display: grid;
  gap: 18px;
  min-height: 330px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--white);
  box-shadow: 0 14px 38px color-mix(in srgb, var(--petrol) 8%, transparent);
  padding-top: 34px;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  grid-template-rows: auto auto 1fr auto;
  align-content: start;
}

.formation-card::before {
  content: "";
  position: absolute;
  background: var(--brand-gradient);
  inset: -13px 26px auto auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  transform: rotate(45deg);
}

.formation-card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--violet) 35%, var(--card-line));
  box-shadow: var(--shadow);
}

.formation-card h3 {
  font-size: clamp(1.08rem, 1.55vw, 1.38rem);
}

.formation-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.formation-meta span {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--petrol);
  font-size: 0.76rem;
  font-weight: 700;
  background: var(--pill-bg);
}

.mission-main {
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--card-radius);
  background: var(--brand-gradient-text);
  color: var(--white);
}

.mission-main p {
  color: rgba(255, 255, 255, 0.82);
}

@media (max-width: 980px) {
  .nav {
    align-items: center;
    flex-wrap: wrap;
    padding: 18px 0;
  }

  .nav-links {
    gap: 16px;
  }

  .actions {
    flex-shrink: 0;
  }

  .grid-2,
.formation-hero .grid-2,
.content-layout {
    grid-template-columns: 1fr;
  }

  .formations-directory-hero .grid-2 {
    grid-template-columns: 1fr;
  }

  .formations-hero-photo {
    width: min(100% - 30px, 640px);
    margin: 10px auto 24px;
  }

  .grid-3,
.news-grid,
.stat-band,
.formation-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .side-rail {
    position: static;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .container {
    width: min(100% - 26px, 1180px);
  }

  .logo {
    width: 136px;
  }

  .nav-links {
    order: 3;
    justify-content: center;
    width: 100%;
    gap: 14px;
    font-size: 0.78rem;
  }

  .menu-toggle {
    width: 44px;
    padding: 0;
  }

  .menu-toggle > span:last-child {
    display: none;
  }

  .grid-3,
.news-grid,
.formation-grid,
.stat-band,
.footer-grid {
    grid-template-columns: 1fr;
  }

  .image-frame,
.theme-a .formation-hero .image-frame {
    min-height: 310px;
  }

  .formations-hero-photo {
    width: min(100% - 18px, 520px);
    margin-bottom: 12px;
    transform: rotate(2deg);
  }

  .theme-a .hero-note {
    margin: 16px 0 0;
  }

  .theme-a .path-card {
    min-height: 220px;
  }

  .btn {
    width: 100%;
  }
}
/* Formation : mêmes données que la fiche PDF, lecture complète sur le web. */
.formation-detail .formation-hero { padding-bottom: 32px; }
.formation-detail h1 { font-size: clamp(1.7rem, 3.2vw, 2.75rem); line-height: 1.18; overflow-wrap: normal; hyphens: none; }
.formation-detail .formation-facts {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 36px 0 0;
  padding: 24px;
  border-radius: var(--card-radius);
  position: relative;
  z-index: 1;
  background: var(--ink);
  color: var(--white);
}
.formation-detail dt { font-size: .85rem; margin-bottom: 8px; }
.formation-detail dd { margin: 0; font-weight: 600; }
.formation-detail .formation-entry { margin: 20px 0 0; max-width: 920px; }
.formation-detail .formation-pdf-source-note { max-width: 690px; margin: -12px 0 0; color: var(--muted); font-size: .85rem; }
.formation-detail .formation-curriculum { align-items: start; gap: 28px; }
.formation-detail .formation-info { display: flex; align-items: flex-start; gap: 10px; margin: 22px 0 0; color: var(--muted); font-size: .9rem; }
.formation-detail .formation-info .icon { flex: 0 0 auto; width: 1.1em; height: 1.1em; margin-top: .15em; color: var(--violet); }
.formation-detail .formation-prose { white-space: pre-line; }
.formation-detail .formation-note { margin-top: 20px; font-size: .9rem; }
.formation-detail .formation-note a { color: var(--violet); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.formation-detail .formation-certification { margin-top: 4px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--card-radius); background: var(--white); color: var(--muted); font-size: .85rem; }
.formation-detail .formation-certification h2 { margin: 0 0 8px; color: var(--ink); font-family: var(--body-font); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.formation-detail .formation-certification p { margin: 0; max-width: 920px; }
.formation-detail .formation-certification-footer { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 28px; margin-top: 16px; }
.formation-detail .formation-certification-dates { margin: 0; border-collapse: collapse; }
.formation-detail .formation-certification-dates th { padding: 5px 18px 5px 0; color: var(--ink); font-weight: 500; text-align: left; }
.formation-detail .formation-certification-dates td { padding: 5px 0; }
.formation-detail .formation-certification-dates span { display: inline-block; padding: 3px 12px; border-radius: 999px; background: var(--ice); color: var(--petrol); font-weight: 600; white-space: nowrap; }
.formation-detail .formation-certification-link { gap: 8px; }
@media (max-width: 640px) {
  .formation-detail .formation-certification-footer { flex-direction: column; align-items: flex-start; }
}
.formation-detail .formation-accessibility { display: flex; align-items: start; gap: 22px; }
.formation-detail .formation-accessibility img { flex: 0 0 80px; object-fit: contain; }
.formation-detail .formation-insertion dl > div + div { margin-top: 22px; padding-top: 22px; border-top: 1px solid #d6e4e9; }
.formation-detail .formation-updated { margin-top: 28px; color: var(--muted); font-size: .85rem; text-align: center; }
.formation-detail .panel, .formation-detail .hero-copy { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .formation-detail .formation-facts { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; padding: 20px; }
  .formation-detail .formation-accessibility { flex-direction: column; }
}

/* Charte plaquette UFA (octobre 2026) : losanges arrondis, cartes plates à contour fin,
   dégradé bleu → violet, chiffres clés sur violet. Couleurs de marque inchangées ; le corail
   n'est plus utilisé sur le site. Ce bloc ne touche que l'aspect, pas les grilles responsive. */

.theme-a .hero-home,
.theme-a .directory-hero {
  background: var(--diamond-pattern) center top / 170px 170px, var(--surface);
}

/* Titres : étiquette en capitales espacées, seconde partie du titre en violet. */

.mission-main .eyebrow {
  background: var(--white);
  color: var(--violet);
  background: var(--white);
  color: var(--violet);
}

.title-accent {
  color: var(--violet);
}

.mission-main .title-accent {
  color: inherit;
  font-weight: 400;
}

/* Cartes et panneaux : fond blanc, contour fin, sans ombre. */
.card,
.panel,
.formation-card,
.formation-no-results {
  border: 1.5px solid var(--card-line);
  border-radius: var(--card-radius);
  box-shadow: none;
}

.stat {
  position: relative;
  min-height: 170px;
  padding: 30px 28px;
  background: transparent;
}

.stat + .stat {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

/* Listes : puce en petit losange dégradé. */

.theme-a .path-card:nth-child(4n + 2)::after {
  background:
    linear-gradient(180deg, transparent 0%, rgba(129, 41, 144, 0.24) 38%, rgba(129, 41, 144, 0.88) 100%),
    linear-gradient(90deg, rgba(129, 41, 144, 0.22), rgba(2, 158, 226, 0.12));
}

/* Photos : liseré blanc comme dans la plaquette. */
.theme-a .hero-home .image-frame,
.theme-a .formation-hero .image-frame {
  border: 6px solid var(--white);
}

/* Fiche formation : en-tête à losanges et bandeau d'infos en dégradé. */
.theme-a .formation-detail .formation-hero {
  background: var(--diamond-pattern) center top / 170px 170px, var(--surface);
}

/* Décor : losanges, anneaux, étoiles, courbe pointillée. Purement visuel (aria-hidden). */
.hero-visual {
  position: relative;
}

.deco-diamond {
  position: absolute;
  z-index: 3;
  width: 74px;
  aspect-ratio: 1;
  border: 4px solid var(--white);
  border-radius: 20px;
  background: var(--brand-gradient);
  box-shadow: var(--shadow);
  transform: rotate(45deg);
  pointer-events: none;
}

.deco-diamond--hero {
  top: -26px;
  right: -18px;
}

.deco-diamond--catalogue {
  bottom: 6px;
  left: -22px;
  width: 58px;
  border-radius: 16px;
}

.deco-star {
  position: absolute;
  width: 34px;
  aspect-ratio: 1;
  background: url("images/pdf/star-white.png") center / contain no-repeat;
  pointer-events: none;
}

.theme-a .hero-note::after {
  content: "";
  position: absolute;
  top: -14px;
  right: 18px;
  width: 30px;
  aspect-ratio: 1;
  background: url("images/pdf/star-white.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 10px rgba(45, 58, 66, 0.25));
}

.stat-band::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 22px;
  width: 26px;
  aspect-ratio: 1;
  background: url("images/pdf/star-white.png") center / contain no-repeat;
  opacity: 0.9;
}

@media (max-width: 980px) {
  .stat + .stat {
    border-left: 0;
  }

  .stat {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
}

@media (max-width: 640px) {
  .deco-diamond--hero {
    top: -16px;
    right: 6px;
    width: 52px;
  }

  .deco-diamond--catalogue {
    display: none;
  }

  .eyebrow {
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    line-height: 1.5;
  }
}

/* Retouches du 9 octobre : navigation en Unbounded, dégradé réservé aux appels à l'action
   (et à l'encart « offres » de l'accueil), footer repris du site actuel. */
@font-face {
  font-family: "Unbounded";
  src: url("fonts/Unbounded/static/Unbounded-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

.topbar .logo {
  width: 132px;
}

.nav-links,
.menu-toggle {
  font-family: var(--title-font);
  font-weight: 500;
}

.nav-links {
  font-size: 0.95rem;
}

@media (min-width: 981px) {
  .nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .nav-links {
    justify-content: center;
    gap: 34px;
  }

  .nav .actions {
    justify-self: end;
  }
}

.deco-diamond,
.formation-card::before {
  background: var(--violet);
}

.mission-main {
  background: var(--diamond-pattern-soft) center / 170px 170px, var(--violet);
}

/* Cartes formation : hauteur des pastilles identique, méta toujours en bas. */

.formation-card .eyebrow {
  align-self: start;
}

/* Sans pôle au-dessus du titre (page d'un pôle, fiche sans pôle) : le texte garde l'espace libre. */
.formation-card:not(:has(> .eyebrow)) {
  grid-template-rows: auto 1fr auto;
}

/* Footer. */

.footer-brand > p:first-of-type {
  margin-top: 18px;
}

.footer-site {
  display: grid;
  align-content: start;
  gap: 8px;
}

.footer-site h2 {
  margin-bottom: 4px;
  color: var(--white);
  font-size: 0.9rem;
}

.footer-site a {
  width: fit-content;
}

.footer-site a:hover,
.footer-bottom a:hover {
  color: var(--white);
  text-decoration: underline;
}

.footer-salon {
  margin-top: 18px;
  font-size: 0.86rem;
  line-height: 1.55;
}

.footer-salon strong {
  display: block;
  color: var(--white);
}

.footer-partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 34px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer-partners img {
  width: auto;
  height: 74px;
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 26px;
  font-size: 0.8rem;
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

@media (max-width: 640px) {
  .topbar .logo {
    width: 116px;
  }

  .footer-partners img {
    height: 56px;
  }
}

/* Catalogue des formations : les losanges gardent le dégradé bleu → violet. */
.formation-card::before,
.catalogue-hero .deco-diamond {
  background: var(--brand-gradient);
}

/* Pages de contenu reprises du site actuel. */
.page-hero {
  padding-bottom: clamp(34px, 5vw, 58px);
}

.page-hero-copy {
  max-width: 820px;
}

.page-section {
  padding-top: clamp(34px, 5vw, 56px);
  position: relative;
}

.page-layout {
  display: grid;
  gap: clamp(36px, 5vw, 56px);
}

.page-layout > .prose,
.people-intro {
  max-width: 860px;
}

.prose {
  display: grid;
  gap: 16px;
  color: var(--ink);
  line-height: 1.7;
}

.prose > * {
  margin: 0;
}

.prose h2 {
  margin-top: 18px;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.prose h3,
.prose h2.heading-level-3 {
  margin-top: 8px;
  color: var(--petrol);
}

/* Intertitre saisi en niveau 3 sans niveau 2 au-dessus : balise <h2> pour les lecteurs d'écran, apparence d'un <h3>
   (AccessibleHtml, lot 11, E-11). */
.prose h2.heading-level-3 {
  font-size: clamp(0.98rem, 1.32vw, 1.18rem);
  line-height: 1.2;
}

/* Format et poids d'un document lié (« PDF, 978 Ko »), ajoutés au libellé du lien (E-13). */
.document-format {
  font-weight: 500;
  white-space: nowrap;
}

.prose a {
  color: var(--violet);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a[href$=".pdf"]::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 1em;
  margin-right: 0.4em;
  vertical-align: -0.12em;
  background: currentColor;
  -webkit-mask: url("images/site/file-pdf.svg") center / contain no-repeat;
  mask: url("images/site/file-pdf.svg") center / contain no-repeat;
}

.prose a[href$=".pdf"]::after {
  content: " (PDF)";
  font-size: 0.82em;
  font-weight: 500;
}

.prose ul,
.prose ol {
  display: grid;
  gap: 8px;
  padding-left: 1.3em;
}

.prose li::marker {
  color: var(--violet);
}

.prose img {
  max-width: min(100%, 320px);
  height: auto;
}

/* L'organigramme se lit en grand ; les logos des partenaires restent petits. */
.prose img[src*="Organigramme"] {
  max-width: 100%;
  border-radius: var(--card-radius);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  display: block;
  overflow-x: auto;
}

.prose tbody {
  display: table;
  width: 100%;
}

.prose td,
.prose th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--card-line, var(--line));
  text-align: left;
  vertical-align: top;
}

.prose tr:first-child td {
  background: var(--ice);
  font-weight: 600;
}

.prose details {
  border: 1.5px solid var(--card-line, var(--line));
  border-radius: 16px;
  background: var(--white);
}

.prose details > summary {
  cursor: pointer;
  padding: 16px 20px;
  font-weight: 600;
  list-style-position: inside;
}

.prose details > summary:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
  border-radius: 14px;
}

.prose details[open] > summary {
  color: var(--violet);
}

.prose details > :not(summary) {
  margin: 0 20px 16px;
}

/* Chiffre clé seul dans son paragraphe (classe posée par StaticPage::bodyHtml). */
.prose p.page-figure > strong {
  color: var(--violet);
  font-family: var(--title-font);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 600;
}

.people-group {
  display: grid;
  gap: 18px;
}

.people-group > h2 {
  font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px;
}

.person-card {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border: 1.5px solid var(--card-line, var(--line));
  border-radius: var(--card-radius);
  background: var(--white);
}

.person-card img,
.person-initials {
  width: 100%;
  aspect-ratio: 1;
  border-radius: calc(var(--card-radius) - 6px);
  object-fit: cover;
  background: var(--ice);
}

.person-initials {
  display: grid;
  place-items: center;
  color: var(--violet);
  font-family: var(--title-font);
  font-size: 2rem;
}

.person-card .person-name {
  font-size: 0.95rem;
  line-height: 1.2;
}

.person-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.4;
}

.person-card .person-site {
  color: var(--petrol);
  font-weight: 600;
}

.name-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.name-list li {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--pill-bg, var(--ice));
  font-size: 0.85rem;
}

/* Partenaires (« Nos partenaires ») : cartes comme les blocs de la fiche formation, logo dans une zone de hauteur fixe,
   deux colonnes sur grand écran. */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.partner-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.partner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 128px;
}

.partner-logos img {
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.partner-logos--pair img {
  max-width: calc(50% - 12px);
}

.partner-card h2 {
  margin: 0;
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
}

.partner-text {
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.partner-link {
  align-self: flex-start;
  margin-top: auto;
  color: var(--violet);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .partner-grid {
    grid-template-columns: 1fr;
  }
}

/* Galerie en fin de page, sur deux colonnes sans photo orpheline : trois photos = une grande et deux empilées ;
   nombre impair = la première en bandeau sur toute la largeur. */
.page-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: clamp(72px, 11vw, 100px);
  gap: 14px;
}

.page-gallery figure {
  grid-row: span 2;
  margin: 0;
  overflow: hidden;
  border-radius: var(--photo-radius);
  background: var(--ice);
}

.page-gallery--odd figure:first-child {
  grid-column: 1 / -1;
}

.page-gallery--trio figure:first-child {
  grid-row: span 4;
}

.page-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Accueil : diaporama du hero, une photo par pôle, en fondu. */
.hero-slides img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-slides img.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slides img {
    transition: none;
  }
}

/* Barre de recherche des formations : un seul composant (accueil et catalogue). */
.formation-search {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: 10px;
  padding: 14px;
  border: 1.5px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--white);
  box-shadow: 0 18px 40px color-mix(in srgb, var(--petrol) 8%, transparent);
}

.formation-search--home { margin-top: -28px; }
.formation-search--catalogue { margin-top: 34px; }

.formation-search .field-like {
  width: 100%;
  min-width: 0;
  border-radius: 12px;
  background-color: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  padding-left: 14px;
}

.formation-search input[type="search"] { padding-right: 10px; }
.formation-search input[type="search"]::placeholder { color: var(--muted); font-weight: 500; }

.formation-search select.field-like {
  appearance: none;
  padding-right: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23006886' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
}

.formation-search .field-like:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

.formation-search-selects {
  display: grid;
  /* Largeur égale, calculée pour « Tous les diplômes » (le libellé le plus long). */
  grid-template-columns: repeat(4, 11.6rem);
  gap: 10px;
}

.formation-search-filters > summary { display: none; }

.formation-search .btn { min-height: 50px; padding: 0 22px; }

/* Plus étroit : recherche et bouton, puis les quatre filtres. */
@media (max-width: 1180px) {
  .formation-search { grid-template-columns: 1fr auto; }
  .formation-search-filters { grid-column: 1 / -1; grid-row: 2; }
  .formation-search-selects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .formation-search--home { margin-top: 28px; }
  .formation-search-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile : filtres repliés derrière « Filtres ». */
@media (max-width: 640px) {
  .formation-search { grid-template-columns: 1fr; }
  .formation-search-filters { grid-row: auto; }
  .formation-search-filters > summary {
    display: flex;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23006886' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 15px center;
    background-repeat: no-repeat;
    padding-right: 38px;
  }
  .formation-search-filters > summary::-webkit-details-marker { display: none; }
  .formation-search-filters[open] > summary {
    margin-bottom: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5l5-5 5 5' fill='none' stroke='%23006886' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  .formation-search-selects { grid-template-columns: 1fr; }
  .formation-search .btn { width: 100%; }
}

.formation-search-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 8px;
  border-radius: 999px;
  background: var(--violet);
  color: var(--white);
  font-size: .75rem;
}

/* Menu global : panneau plein écran qui glisse depuis la droite. */
.site-menu {
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0 0 64px;
  border: 0;
  overflow-y: auto;
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--white);
  transform: translateX(0);
  transition: transform .35s ease, display .35s allow-discrete, overlay .35s allow-discrete;
}

@starting-style {
  .site-menu[open] { transform: translateX(100%); }
}

.site-menu:not([open]) { transform: translateX(100%); }
.site-menu::backdrop { background: transparent; }
html:has(.site-menu[open]) { overflow: hidden; }

.site-menu-head,
.site-menu-shortcuts,
.site-menu-panel {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

.site-menu-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0;
}

.site-menu-head .logo { width: 132px; filter: brightness(0) invert(1); }

.site-menu-close {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border: 1.5px solid rgba(255, 255, 255, .35);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.site-menu-close svg { width: 30px; height: 30px; }
.site-menu-close:hover { color: var(--white); border-color: var(--white); transform: rotate(90deg); }

.site-menu-shortcuts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 36px;
  margin-top: 18px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font-family: var(--title-font);
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
}

.site-menu-shortcuts a:not(.btn):hover { color: var(--blue); }
.site-menu-shortcuts .btn { font-family: var(--body-font); font-size: 1rem; min-height: 52px; padding: 0 28px; }

.site-menu-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 56px;
  margin-top: 44px;
}

.site-menu-title {
  margin-bottom: 18px;
  color: color-mix(in srgb, var(--blue) 70%, var(--white));
  font-family: var(--title-font);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  list-style: none;
  pointer-events: none;
}

.site-menu-title::-webkit-details-marker { display: none; }

.site-menu-group ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-menu-group a {
  display: inline-block;
  padding: 6px 0;
  font-family: var(--body-font);
  font-size: 1.18rem;
  font-weight: 500;
  line-height: 1.35;
  transition: color .2s ease, transform .2s ease;
}

.site-menu-group a:hover { color: color-mix(in srgb, var(--blue) 70%, var(--white)); transform: translateX(4px); }
.site-menu-external { color: rgba(255, 255, 255, .55); font-size: .85em; }

@media (max-width: 980px) {
  .site-menu-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 36px; }
}

/* Mobile : rubriques en accordéon, liens toujours en gros caractères. */
@media (max-width: 760px) {
  .site-menu-head { padding: 14px 0; }
  .site-menu-head .logo { width: 112px; }
  .site-menu-close { width: 52px; height: 52px; }
  .site-menu-close svg { width: 26px; height: 26px; }
  .site-menu-shortcuts { gap: 10px 26px; margin-top: 8px; padding-bottom: 24px; font-size: 1.45rem; }
  .site-menu-shortcuts .btn { width: 100%; }
  .site-menu-panel { grid-template-columns: 1fr; gap: 0; margin-top: 10px; }
  .site-menu-group { border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .site-menu-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding: 20px 0;
    font-size: 1.15rem;
    pointer-events: auto;
    cursor: pointer;
  }
  .site-menu-title::after { content: "+"; font-family: var(--body-font); font-size: 1.6rem; font-weight: 400; }
  .site-menu-group[open] .site-menu-title::after { content: "−"; }
  .site-menu-group ul { padding-bottom: 18px; }
  .site-menu-group a { font-size: 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu, .site-menu-close, .site-menu-group a { transition: none; }
}

/* Heros : fond à losanges réservé au hero, bord droit ; le reste de la page sur fond blanc. */
.theme-a {
  background: var(--white);
}

/* Bandeau des infos clés : fond plein, au-dessus du motif du hero ; intitulés plus lisibles, valeurs moins grasses. */

.formation-detail .formation-facts dt {
  margin-bottom: 6px;
  font-size: .95rem;
  color: rgba(255, 255, 255, .78);
}

.formation-detail .formation-facts dd {
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.35;
}

/* Fiche formation : liens dans les listes (poursuites d'études) et le texte des modalités d'accès. */
.formation-detail .check-list a,
.formation-detail .formation-prose a {
  color: var(--violet);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Design du 21 octobre, d'après la page 2 de la plaquette UFA : icônes Font Awesome (composant <x-site-icon>),
   titre de fiche en deux graisses, photo de hero en arche droite avec étoile et losanges,
   bandeau des infos clés sombre à icônes. */
.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
}

.pill--accent {
  border-color: transparent;
  background: var(--brand-gradient-text);
  color: var(--white);
}

.formation-detail h1 .title-prefix {
  display: block;
  margin-bottom: 0.18em;
  font-size: 0.64em;
  font-weight: 400;
  line-height: 1.2;
}

.formation-detail h1 .title-main {
  display: block;
  color: var(--violet);
}

.formation-visual {
  position: relative;
  width: min(100%, 500px);
  justify-self: center;
  padding: 18px 0 34px;
}

.theme-a .formation-hero .image-frame--arch {
  min-height: 0;
  aspect-ratio: 10 / 11;
  border-radius: 50% 50% var(--photo-radius) var(--photo-radius) / 46% 46% var(--photo-radius) var(--photo-radius);
  transform: none;
}

/* Photos des heros : plus de rotation (fiche formation et Le CFA). */

.formation-visual .deco-star,
.formation-visual .deco-diamond {
  z-index: 3;
}

.deco-star--gradient {
  background-image: url("images/pdf/ufa/star-gradient.png");
}

.formation-visual-star {
  top: 4%;
  left: 2%;
  width: 40px;
}

.formation-visual-diamond {
  top: 12%;
  right: -10px;
  width: 58px;
  border-radius: 16px;
  background: var(--brand-gradient);
}

.formation-visual-diamond--small {
  top: auto;
  right: 12%;
  bottom: 4px;
  width: 28px;
  border-width: 3px;
  border-radius: 8px;
  background: var(--blue);
}

/* Infos clés : le rythme (souvent une phrase) a une colonne deux fois plus large que site, durée et heures. */
@media (min-width: 1100px) {
  .formation-detail .formation-facts {
    grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.9fr);
    gap: 32px;
  }
}

@media (min-width: 761px) and (max-width: 1099px) {
  .formation-detail .formation-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 36px;
  }
}

.formation-detail .formation-facts > div {
  position: relative;
  min-height: 46px;
  padding-left: 62px;
}

.fact-icon {
  position: absolute;
  top: 3px;
  left: 3px;
  display: grid;
  place-items: center;
  width: 40px;
  aspect-ratio: 1;
  border-radius: 11px;
  background: var(--lilac);
  color: var(--violet);
  font-size: 1.05rem;
  transform: rotate(45deg);
}

.fact-icon .icon {
  transform: rotate(-45deg);
}

@media (max-width: 980px) {
  .formation-visual {
    width: min(100% - 24px, 440px);
  }
}

@media (max-width: 640px) {
  .formation-visual-star {
    width: 30px;
  }

  .formation-visual-diamond {
    right: -6px;
    width: 44px;
  }

  .formation-detail .formation-facts > div {
    padding: 50px 0 0;
  }
}

/* Fiche formation, cartes (21 octobre) : losange-icône en coin de carte, puces rondes, étiquettes pour les listes
   courtes, chiffres d'insertion en grand ; `overflow-x: clip` laisse fonctionner `sticky` (photos de la version C). */
.site-shell {
  overflow: visible;
  overflow-x: clip;
}

.formation-detail .panel {
  position: relative;
}

.formation-detail .panel h2,
.formation-detail .panel h3 {
  padding-right: 52px;
}

.panel-badge {
  position: absolute;
  top: -18px;
  right: 30px;
  display: grid;
  place-items: center;
  width: 44px;
  aspect-ratio: 1;
  border: 3px solid var(--white);
  border-radius: 12px;
  background: var(--brand-gradient);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--violet) 18%, transparent);
  color: var(--white);
  font-size: 1.05rem;
  transform: rotate(45deg);
}

.panel-badge .icon {
  transform: rotate(-45deg);
}

/* Puces des listes : petit cercle en dégradé (blanc dans les blocs en couleur pleine). */
.formation-detail .check-list li {
  padding-left: 22px;
}

.formation-detail .check-list li::before {
  top: 0.6em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand-gradient);
  transform: none;
}

.chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chip-list li {
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--pill-bg);
  color: var(--petrol);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.formation-detail .chip-list a {
  color: var(--violet);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Lien vers une fiche du CFA (poursuites d'études) : pastille ronde en dégradé, flèche blanche, qui avance au survol. */
.item-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.item-link-badge {
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  width: 22px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--brand-gradient);
  box-shadow: 0 0 0 2px var(--white);
  color: var(--white);
  font-size: 0.68rem;
  transition: transform 0.15s ease;
}

.item-link:hover .item-link-badge,
.item-link:focus-visible .item-link-badge {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .item-link-badge {
    transition: none;
  }
}

.formation-detail .formation-curriculum h4 {
  margin: 0 0 14px;
  font-family: var(--title-font);
  font-size: 1rem;
}

.formation-detail .formation-insertion dd {
  margin-top: 4px;
  color: var(--violet);
  font-family: var(--title-font);
  font-size: clamp(1.7rem, 2.4vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
}

.formation-detail .formation-insertion dd.is-unavailable {
  color: var(--muted);
  font-family: var(--body-font);
  font-size: 0.9rem;
  font-weight: 500;
}

/* Chantier B (12 novembre 2026) : source propre à un taux, sous son chiffre, quand les deux taux n'ont pas la même. */
.formation-detail .formation-insertion dd.formation-rate-source {
  margin-top: 8px;
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.5;
}

/* Fiche formation, rythme visuel (21-22 octobre) : un bloc sur trois environ en couleur pleine et texte blanc
   (Méthodes pétrole, Prérequis dégradé, Poursuite violet ; sans contour ni motif), et deux photos
   d'illustration en paysage. */
.formation-detail .panel--violet,
.formation-detail .panel--gradient,
.formation-detail .panel--blue {
  border-color: transparent;
  color: var(--white);
}

.formation-detail .panel--violet {
  background: var(--violet);
}

.formation-detail .panel--gradient {
  background: linear-gradient(125deg, color-mix(in srgb, var(--blue) 65%, var(--ink)) 0%, color-mix(in srgb, var(--blue) 35%, var(--violet)) 45%, var(--violet) 100%);
}

.formation-detail .panel--blue {
  background: var(--petrol);
}

.formation-detail .panel--violet :is(h2, h3, h4),
.formation-detail .panel--gradient :is(h2, h3, h4),
.formation-detail .panel--blue :is(h2, h3, h4) {
  color: var(--white);
}

.formation-detail .panel--violet .panel-badge,
.formation-detail .panel--gradient .panel-badge,
.formation-detail .panel--blue .panel-badge {
  border-color: transparent;
  background: var(--white);
  color: var(--violet);
}

.formation-detail .panel--violet .check-list li::before,
.formation-detail .panel--gradient .check-list li::before,
.formation-detail .panel--blue .check-list li::before {
  background: var(--white);
}

.formation-detail .panel--violet .chip-list li,
.formation-detail .panel--gradient .chip-list li,
.formation-detail .panel--blue .chip-list li {
  background: rgba(255, 255, 255, 0.16);
  color: var(--white);
}

.formation-detail .panel--violet a,
.formation-detail .panel--gradient a,
.formation-detail .panel--blue a {
  color: var(--white);
}

.formation-photo {
  position: relative;
  margin: 0;
}

.formation-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 21 / 9;
  border-radius: var(--photo-radius);
  object-fit: cover;
}

.formation-photo::after {
  content: "";
  position: absolute;
  top: -14px;
  left: 34px;
  width: 30px;
  aspect-ratio: 1;
  border: 3px solid var(--white);
  border-radius: 8px;
  background: var(--brand-gradient);
  transform: rotate(45deg);
}

.formation-photo--right::after {
  right: 34px;
  left: auto;
  background: var(--blue);
}

@media (max-width: 640px) {
  .formation-photo img {
    aspect-ratio: 16 / 9;
    border-radius: 20px;
  }
}

/* Pages de contenu, design du 21-22 octobre : hero de la même famille que les fiches (pastille dégradée, titre
   violet, photo en arche ou composition de losanges), colonne de texte recentrée, sections découpées aux
   intertitres avec une section sur trois en couleur pleine et texte blanc, losanges devant les intertitres et en marge. */
.theme-a .page-hero::before {
  display: none;
}

.page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(32px, 6vw, 72px);
  align-items: center;
}

.page-hero-grid--photo {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
}

.page-hero .eyebrow {
  background: var(--brand-gradient-text);
}

.page-hero h1 {
  color: var(--violet);
}

.page-hero-visual {
  position: relative;
  min-height: 230px;
}

.page-hero-grid--photo .page-hero-visual {
  min-height: 0;
  padding: 18px 0 30px;
}

.theme-a .page-hero .page-hero-photo {
  min-height: 0;
  aspect-ratio: 10 / 11;
  border-radius: 50% 50% var(--photo-radius) var(--photo-radius) / 46% 46% var(--photo-radius) var(--photo-radius);
  transform: none;
}

.page-hero-visual .deco-star,
.page-hero-visual .deco-diamond {
  z-index: 3;
}

.page-hero-star {
  top: 4%;
  left: 2%;
  width: 36px;
}

.page-hero-diamond {
  top: 12%;
  right: -8px;
  width: 52px;
  border-radius: 14px;
  background: var(--brand-gradient);
}

.page-hero-diamond--small {
  top: auto;
  right: 14%;
  bottom: 2px;
  width: 26px;
  border-width: 3px;
  border-radius: 8px;
  background: var(--blue);
}

/* Sans photo : composition de losanges (le petit losange bleu et le losange dégradé sont alors inutiles). */
.page-hero-grid:not(.page-hero-grid--photo) .page-hero-diamond {
  display: none;
}

.page-hero-shape {
  position: absolute;
  aspect-ratio: 1;
  transform: rotate(45deg);
}

.page-hero-shape--big {
  top: 38px;
  left: 70px;
  width: 140px;
  border: 6px solid var(--white);
  border-radius: 34px;
  background: var(--brand-gradient);
  box-shadow: var(--shadow);
}

.page-hero-shape--lilac {
  bottom: 6px;
  left: 6px;
  width: 78px;
  border-radius: 20px;
  background: var(--lilac);
}

.page-hero-shape--outline {
  top: 10px;
  right: 22px;
  width: 58px;
  border: 3px solid var(--blue);
  border-radius: 14px;
}

.page-section > .page-layout {
  max-width: 860px;
}

.page-body {
  display: grid;
  gap: clamp(28px, 4vw, 44px);
}

.page-body h2,
.people-group > h2 {
  display: flex;
  align-items: center;
  gap: 14px;
}

.page-body h2::before,
.people-group > h2::before {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  aspect-ratio: 1;
  border-radius: 3.5px;
  background: var(--brand-gradient);
  transform: rotate(45deg);
}

.page-block > h2:first-child {
  margin-top: 0;
}

.page-block--blue,
.page-block--gradient,
.page-block--violet {
  position: relative;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--card-radius);
}

.page-block--blue {
  background: var(--petrol);
}

.page-block--gradient {
  background: linear-gradient(125deg, color-mix(in srgb, var(--blue) 65%, var(--ink)) 0%, color-mix(in srgb, var(--blue) 35%, var(--violet)) 45%, var(--violet) 100%);
}

.page-block--violet {
  background: var(--violet);
}

.page-block--blue,
.page-block--gradient,
.page-block--violet,
.page-block--blue :is(h2, h3, h4, strong, a),
.page-block--gradient :is(h2, h3, h4, strong, a),
.page-block--violet :is(h2, h3, h4, strong, a) {
  color: var(--white);
}

.page-block--blue li::marker,
.page-block--gradient li::marker,
.page-block--violet li::marker {
  color: var(--white);
}

:is(.page-block--blue, .page-block--gradient, .page-block--violet) p.page-figure > strong {
  color: var(--white);
}

/* Les questions dépliables restent des cartes blanches : elles reprennent les couleurs du texte courant. */
:is(.page-block--blue, .page-block--gradient, .page-block--violet) details,
:is(.page-block--blue, .page-block--gradient, .page-block--violet) details :is(h3, h4, strong) {
  color: var(--ink);
}

:is(.page-block--blue, .page-block--gradient, .page-block--violet) details a,
:is(.page-block--blue, .page-block--gradient, .page-block--violet) details[open] > summary,
:is(.page-block--blue, .page-block--gradient, .page-block--violet) details li::marker {
  color: var(--violet);
}

.page-block--blue h2::before,
.page-block--gradient h2::before,
.page-block--violet h2::before {
  background: var(--white);
}

.page-block--blue::after,
.page-block--gradient::after,
.page-block--violet::after {
  content: "";
  position: absolute;
  top: -12px;
  right: 34px;
  width: 26px;
  aspect-ratio: 1;
  border: 3px solid var(--white);
  border-radius: 7px;
  background: var(--white);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--violet) 22%, transparent);
  transform: rotate(45deg);
}

/* Losanges flottant dans les marges, sur grand écran seulement. */
@media (min-width: 1180px) {
  .page-section::before,
  .page-section::after {
    content: "";
    position: absolute;
    aspect-ratio: 1;
    transform: rotate(45deg);
    pointer-events: none;
  }

  .page-section::before {
    top: 140px;
    left: calc(50% - 560px);
    width: 54px;
    border-radius: 14px;
    background: var(--lilac);
  }

  .page-section::after {
    top: 46%;
    right: calc(50% - 545px);
    width: 34px;
    border: 3px solid var(--blue);
    border-radius: 9px;
  }
}

@media (max-width: 980px) {
  .page-hero-grid,
  .page-hero-grid--photo {
    grid-template-columns: 1fr;
  }

  .page-hero-grid:not(.page-hero-grid--photo) .page-hero-visual {
    display: none;
  }

  .page-hero-grid--photo .page-hero-visual {
    width: min(100% - 24px, 340px);
    justify-self: center;
  }
}

@media (max-width: 640px) {
  .page-hero-grid--photo .page-hero-visual {
    width: min(100% - 56px, 250px);
  }
}

/* Portraits : deux par ligne sur téléphone plutôt qu'un portrait pleine largeur. */
@media (max-width: 640px) {
  .people-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
}

/* Le CFA (22 octobre) : hero des pages de contenu (titre en deux temps), rôle + trois sites à icône,
   chiffres sur violet, puis cartes « Découvrir le CFA » avec losange-icône, comme les blocs des fiches. */
.cfa-page-hero h1 {
  color: var(--ink);
}

.cfa-page-hero h1 .title-accent {
  display: block;
  color: var(--violet);
}

.cfa-page-hero .pill-row {
  margin-top: 4px;
}

.cfa-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 24px;
  align-items: stretch;
}

.cfa-overview .mission-main {
  display: grid;
  align-content: center;
  gap: 16px;
}

.cfa-overview .mission-main .eyebrow {
  justify-self: start;
}

.cfa-sites {
  display: grid;
  gap: 14px;
}

.cfa-site {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 20px 22px 20px 82px;
  border: 1.5px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--white);
  color: var(--ink);
  transition: border-color 180ms ease, transform 180ms ease;
}

a.cfa-site:not(.is-static):hover {
  border-color: color-mix(in srgb, var(--violet) 35%, var(--card-line));
  transform: translateY(-2px);
}

.cfa-site .fact-icon {
  top: 50%;
  left: 24px;
  margin-top: -20px;
}

.cfa-site-text {
  display: grid;
  flex: 1 1 auto;
  gap: 4px;
  font-size: 0.92rem;
  line-height: 1.45;
}

.cfa-site-text strong {
  color: var(--petrol);
  font-family: var(--title-font);
  font-size: 1rem;
}

.cfa-site-arrow {
  color: var(--violet);
}

.cfa-stats {
  padding-top: 0;
}

.cfa-discover {
  padding-top: 0;
}

.cfa-discover-title {
  margin-bottom: 38px;
}

.cfa-discover-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 22px;
}

.cfa-discover-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 30px 26px 26px;
  border: 1.5px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--white);
  color: var(--ink);
  transition: border-color 180ms ease, transform 180ms ease;
}

.cfa-discover-card:nth-child(3n + 2) {
  border-color: transparent;
  background: var(--violet);
  color: var(--white);
}

.cfa-discover-card:nth-child(3n + 2) span:not(.panel-badge) {
  color: rgba(255, 255, 255, 0.84);
}

.cfa-discover-card:nth-child(3n + 2) .panel-badge {
  border-color: transparent;
  background: var(--white);
  color: var(--violet);
}

.cfa-discover-card:hover {
  border-color: color-mix(in srgb, var(--violet) 35%, var(--card-line));
  transform: translateY(-2px);
}

.cfa-discover-card strong {
  padding-right: 48px;
  font-family: var(--title-font);
  font-size: 1.08rem;
  line-height: 1.25;
}

.cfa-discover-card span:not(.panel-badge) {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

@media (max-width: 980px) {
  .cfa-overview-grid {
    grid-template-columns: 1fr;
  }

  .cfa-discover-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .cfa-discover-grid {
    grid-template-columns: 1fr;
  }
}

/* Menu : un titre de groupe peut mener à sa page de présentation (« Le CFA » → /le-cfa). */
.site-menu-title a {
  color: inherit;
  pointer-events: auto;
  text-underline-offset: 4px;
}

.site-menu-title a:hover {
  text-decoration: underline;
}

/* Fiche formation, versions B (par défaut) et C (?design=c), 22 octobre au soir : blocs regroupés en quatre chapitres
   (surtitre et titre en deux graisses) ; B deux par deux sur toute la largeur, C en rangées alternées texte / photo ;
   fin commune : accessibilité et diplôme, puis bande d'inscription en dégradé avec le contact formation et le QR. */
.b-chapter .eyebrow,
.c-content .eyebrow {
  background: var(--brand-gradient-text);
}

.chapter-title {
  margin: 14px 0 0;
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 400;
  line-height: 1.15;
}

.chapter-title span {
  color: var(--violet);
  font-weight: 700;
}

.formation-detail .b-panels .panel h3,
.formation-closing .panel h2 {
  margin-bottom: 18px;
  font-size: clamp(1.38rem, 1.7vw, 1.6rem);
  line-height: 1.15;
}

/* Version B : chapitres de blocs deux par deux ; un bloc seul en fin de chapitre et le chapitre « Contenu et
   évaluation » sur toute la largeur ; les deux photos en bandeau entre les chapitres. */
.formation-b {
  padding-bottom: 0;
}

.b-chapter + .b-chapter,
.b-chapter + .formation-photo,
.formation-photo + .b-chapter {
  margin-top: clamp(64px, 8vw, 104px);
}

.b-panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 56px 32px;
  align-items: stretch;
  margin-top: 44px;
}

.b-panels > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.b-panels--stack {
  grid-template-columns: 1fr;
}

.formation-b .formation-photo img {
  aspect-ratio: 24 / 7;
}

@media (max-width: 980px) {
  .b-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .formation-b .formation-photo img {
    aspect-ratio: 16 / 9;
  }
}

/* Version C : rangées alternées texte / photo, photo qui déborde du conteneur et reste visible pendant la lecture ;
   chapitres et blocs plus espacés que dans B. */
.formation-c {
  --c-bleed: clamp(0px, calc((100vw - 1180px) / 2 - 24px), 96px);
}

.c-row {
  padding-top: clamp(96px, 12vw, 176px);
}

.c-row:first-child {
  padding-top: clamp(72px, 9vw, 130px);
}

.c-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(48px, 7vw, 112px);
  align-items: start;
}

.c-visual {
  position: sticky;
  top: 120px;
  margin: 0 0 0 calc(-1 * var(--c-bleed));
}

.c-row--reverse .c-row-grid {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
}

.c-row--reverse .c-visual {
  order: 2;
  margin: 0 calc(-1 * var(--c-bleed)) 0 0;
}

.c-visual img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--photo-radius);
  object-fit: cover;
}

.c-visual-diamond {
  position: absolute;
  top: 28px;
  right: -18px;
  width: 46px;
  aspect-ratio: 1;
  border: 4px solid var(--white);
  border-radius: 12px;
  background: var(--brand-gradient);
  transform: rotate(45deg);
}

.c-row--reverse .c-visual-diamond {
  right: auto;
  left: -18px;
  background: var(--blue);
}

.c-panels {
  display: grid;
  gap: 64px;
  margin-top: 52px;
}

.formation-c .panel h3 {
  margin-bottom: 18px;
  font-size: clamp(1.2rem, 1.5vw, 1.4rem);
}

@media (max-width: 980px) {
  .c-row-grid,
  .c-row--reverse .c-row-grid {
    grid-template-columns: 1fr;
  }

  .c-visual,
  .c-row--reverse .c-visual {
    position: relative;
    top: 0;
    order: 0;
    margin: 0;
  }

  .c-visual img {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 640px) {
  .c-visual-diamond {
    right: 8px;
    width: 36px;
  }

  .c-row--reverse .c-visual-diamond {
    left: 8px;
  }
}

/* Fin de fiche (B et C) : accessibilité et diplôme côte à côte, date de mise à jour, puis bande d'inscription. */
.formation-closing {
  padding: clamp(88px, 11vw, 160px) 0 clamp(72px, 9vw, 130px);
}

.closing-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  align-items: stretch;
}

.formation-closing .formation-certification {
  margin-top: 0;
}

.formation-closing .formation-certification-footer {
  flex-direction: column;
  align-items: flex-start;
}

.cta-band {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  margin-top: clamp(56px, 7vw, 88px);
  padding: clamp(32px, 5vw, 56px);
  border-radius: var(--card-radius);
  background: linear-gradient(125deg, color-mix(in srgb, var(--blue) 65%, var(--ink)) 0%, color-mix(in srgb, var(--blue) 35%, var(--violet)) 45%, var(--violet) 100%);
  color: var(--white);
}

.cta-band-star {
  top: 24px;
  right: 28px;
  width: 30px;
}

.cta-band-text {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.cta-band .eyebrow {
  background: var(--white);
  color: var(--violet);
}

.cta-band h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 400;
}

.cta-band h2 span {
  font-weight: 700;
}

.cta-band p {
  margin: 0;
  color: rgba(255, 255, 255, 0.86);
}

.cta-band-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  color: var(--violet);
}

/* Contacts formation : un ou deux (chacun avec son site), côte à côte quand la place le permet. */
.cta-contacts {
  display: grid;
  gap: 20px 32px;
  justify-self: stretch;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
}

.cta-contacts--two {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.cta-contact {
  display: flex;
  align-items: center;
  gap: 16px 20px;
}

.cta-contact-photo {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border: 3px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  object-fit: cover;
}

.cta-contact-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cta-contact-text small {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cta-contact-text strong {
  font-family: var(--title-font);
  font-size: 1.1rem;
}

.cta-contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
}

.cta-contact-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.cta-contact-links a:hover {
  text-decoration: underline;
}

.cta-band-qr {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 16px;
  border-radius: 18px;
  background: var(--white);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 600;
}

/* Lien vers les chiffres du CFA sur InserJeunes, sous la bande d'inscription de toutes les fiches. */
/* Couleurs du logo InserJeunes (corail #E2684F, vert-bleu #4E8088), assombries pour un texte blanc lisible (4,5:1). */
.formation-inserjeunes {
  margin: 18px 0 0;
}

.formation-inserjeunes-link {
  gap: .35em;
  padding-block: 10px;
  background: linear-gradient(90deg, #c0503a, #477a81);
  color: var(--white);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
}

.formation-inserjeunes-link:hover {
  background: linear-gradient(90deg, #a8432f, #3b6a70);
  color: var(--white);
}

@media (max-width: 980px) {
  .closing-grid,
  .cta-band {
    grid-template-columns: 1fr;
  }

  .cta-band-qr {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .cta-contact {
    align-items: flex-start;
  }
}

/* Bande d'inscription : bouton « Je veux être rappelé » (contour blanc) à côté de « Me préinscrire ». */
.cta-band-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.cta-band-callback {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: transparent;
  color: var(--white);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.cta-band-callback:hover,
.cta-band-callback:focus-visible {
  background: rgba(255, 255, 255, 0.14);
}

.formation-detail .hero-callback {
  justify-self: start;
  width: fit-content;
  margin-top: -8px;
  border: 2px solid var(--ink);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
}

.formation-detail .hero-callback:hover,
.formation-detail .hero-callback:focus-visible {
  background: var(--ink);
  color: var(--white);
}

/* Fenêtre « Je veux être rappelé » (<dialog> natif : Échap, focus, fond figé). */
.callback-dialog {
  width: min(680px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  padding: clamp(24px, 4vw, 40px);
  border: 0;
  border-radius: var(--card-radius);
  background: var(--white);
  box-shadow: 0 30px 80px rgba(16, 38, 45, 0.3);
  color: var(--ink);
}

.callback-dialog::backdrop {
  background: color-mix(in srgb, var(--ink) 62%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

html:has(.callback-dialog[open]) { overflow: hidden; }

.callback-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border: 1px solid var(--card-line);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}

.callback-close svg {
  width: 20px;
}

.callback-dialog .eyebrow {
  background: var(--brand-gradient-text);
}

.callback-dialog h2 {
  margin: 14px 0 0;
  padding-right: 48px;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}

.callback-dialog h2 span {
  color: var(--violet);
  font-weight: 700;
}

.callback-intro {
  margin: 12px 0 22px;
  color: var(--muted);
  font-size: 0.92rem;
}

.callback-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
}

.callback-grid label,
.callback-consent {
  font-size: 0.9rem;
  font-weight: 600;
}

.callback-field {
  display: grid;
  gap: 6px;
}

.callback-grid input,
.callback-grid select {
  min-height: 48px;
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}

.callback-grid select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23006886' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
}

.callback-grid :is(input, select):focus-visible,
.callback-consent input:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

.callback-dialog [aria-invalid="true"] {
  border-color: #b00020;
}

.callback-error {
  display: block;
  min-height: 1.3em;
  color: #b00020;
  font-size: 0.82rem;
  font-weight: 600;
}

.callback-warning {
  margin: 4px 0 14px;
  padding: 12px 16px;
  border-left: 4px solid #e59a17;
  border-radius: 10px;
  background: #fff4d8;
  color: #6b3f00;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Widget anti-robot Cloudflare Turnstile (300 × 65 px), au-dessus du bouton d'envoi des deux formulaires. */
.turnstile {
  margin-top: 14px;
}

.turnstile:empty {
  display: none;
}

.callback-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.callback-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
  color: var(--muted);
  font-weight: 500;
}

.callback-consent input {
  flex: 0 0 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--violet);
}

.callback-consent a {
  color: var(--violet);
  text-decoration: underline;
}

.callback-send {
  width: 100%;
  margin-top: 10px;
}

.callback-status {
  min-height: 1.3em;
  margin: 10px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.callback-success {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.callback-dialog [hidden] {
  display: none;
}

.callback-success h2:focus {
  outline: none;
}

@media (max-width: 640px) {
  .callback-grid {
    grid-template-columns: 1fr;
  }

  .cta-band-actions .btn,
  .formation-detail .hero-callback {
    width: 100%;
    justify-content: center;
  }
}

/* Page Contact : formulaire (profil, champs adaptés, suggestions) et coordonnées à côté. */
/* Au-dessus des losanges des marges de .page-section, prévus pour une colonne plus étroite. */
.contact-layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(260px, 1fr);
  gap: clamp(28px, 4vw, 48px);
  align-items: start;
}

.contact-card {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--card-line);
  border-radius: var(--card-radius);
  background: var(--white);
  box-shadow: var(--shadow);
  scroll-margin-top: 110px;
}

.contact-card .eyebrow {
  background: var(--brand-gradient-text);
}

.contact-card h2 {
  margin: 14px 0 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 400;
  line-height: 1.15;
}

.contact-card h2 span {
  color: var(--violet);
  font-weight: 700;
}

.contact-intro {
  margin: 12px 0 22px;
  color: var(--muted);
  font-size: 0.92rem;
}

.contact-audience {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
}

.contact-audience legend {
  margin-bottom: 10px;
  padding: 0;
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-audience-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.contact-audience-option {
  position: relative;
  display: block;
  cursor: pointer;
}

.contact-audience-option input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.contact-audience-option span {
  display: grid;
  place-items: center;
  min-height: 52px;
  padding: 8px 12px;
  border: 1px solid var(--card-line);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.contact-audience-option:hover span {
  border-color: var(--violet);
}

.contact-audience-option input:checked + span {
  border-color: transparent;
  background: var(--brand-gradient-text);
  color: var(--white);
}

.contact-audience-option input:focus-visible + span {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

.contact-audience-option input[aria-invalid="true"] + span {
  border-color: #b00020;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px 18px;
  margin-top: 8px;
}

.contact-field {
  display: grid;
  gap: 6px;
  align-content: start;
}

.contact-field--wide {
  grid-column: 1 / -1;
}

.contact-field label {
  font-size: 0.9rem;
  font-weight: 600;
}

.contact-field :is(input, select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-weight: 500;
}

.contact-field textarea {
  min-height: 150px;
  padding: 12px 14px;
  line-height: 1.55;
  resize: vertical;
}

.contact-field select {
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23006886' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-position: right 13px center;
  background-repeat: no-repeat;
}

.contact-field :is(input, select, textarea):focus-visible,
.contact-consent input:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

.contact-card [aria-invalid="true"]:not([type="radio"]) {
  border-color: #b00020;
}

.contact-error {
  display: block;
  min-height: 1.3em;
  color: #b00020;
  font-size: 0.82rem;
  font-weight: 600;
}

.contact-count {
  color: var(--muted);
  font-size: 0.8rem;
}

.contact-suggestions {
  margin: 6px 0 18px;
  padding: 18px 20px;
  border-radius: 16px;
  background: var(--ice);
}

.contact-suggestions h3 {
  margin: 0 0 12px;
  color: var(--petrol);
  font-size: 1rem;
}

.contact-suggestions ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-suggestions a {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid var(--card-line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
}

.contact-suggestions a:hover strong {
  color: var(--violet);
  text-decoration: underline;
}

.contact-suggestions a:focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 2px;
}

.contact-suggestion-type {
  color: var(--violet);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.contact-suggestions strong {
  font-size: 0.95rem;
  line-height: 1.35;
}

.contact-suggestion-excerpt {
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.contact-suggestions-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.contact-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.9rem;
}

.contact-consent input {
  flex: 0 0 20px;
  height: 20px;
  margin-top: 2px;
  accent-color: var(--violet);
}

.contact-consent a {
  color: var(--violet);
  text-decoration: underline;
}

.contact-send {
  width: 100%;
  margin-top: 10px;
}

.contact-status {
  min-height: 1.3em;
  margin: 10px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
}

.contact-success {
  display: grid;
  gap: 16px;
  justify-items: start;
}

.contact-success p {
  margin: 0;
  line-height: 1.6;
}

.contact-success h2:focus {
  outline: none;
}

.contact-card [hidden] {
  display: none;
}

.contact-aside {
  position: sticky;
  top: 110px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--card-radius);
  background: var(--surface);
}

.contact-aside .prose {
  gap: 10px;
}

.contact-aside .prose h2 {
  margin-top: 14px;
  font-size: 1.15rem;
}

.contact-aside .prose h2:first-child {
  margin-top: 0;
}

.contact-aside .prose h3 {
  margin-top: 6px;
  font-size: 1rem;
}

.contact-aside a {
  color: var(--violet);
}

@media (max-width: 960px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .contact-aside {
    position: static;
  }
}

@media (max-width: 640px) {
  .contact-audience-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* Lot 11 : accessibilité du site public. */

/* Menu sans JavaScript (E-16) : le lien « Menu » mène à #site-menu, qui s'affiche alors en panneau ; « Fermer » mène au
   contenu. Avec JavaScript (classe « js » sur <html>), le menu reste une fenêtre ouverte par showModal(). */
html:not(.js) .site-menu:target {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 100;
  transform: none;
}

.menu-toggle,
.site-menu-close {
  text-decoration: none;
}

/* Taille qu'avait le bouton « Menu » (13,33 px des boutons du navigateur), garde la même apparence en lien. */
.menu-toggle {
  font-size: 0.8333rem;
}

/* Bouton pause du diaporama de l'accueil (E-10), en haut à gauche de la photo. */
.hero-slides-toggle {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  color: var(--white);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
}

.hero-slides-toggle:focus-visible {
  outline: 3px solid var(--white);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--violet);
}

.hero-slides-toggle-icon {
  width: 12px;
  height: 12px;
  border-inline: 4px solid currentColor;
  box-sizing: border-box;
}

.hero-slides-toggle.is-paused .hero-slides-toggle-icon {
  border-inline: 0;
  border-block: 6px solid transparent;
  border-left: 11px solid currentColor;
}

/* Titre de l'encadré « Actualités » d'un article : balise <h2> (E-11), taille d'un intertitre de carte. */
.side-rail-title {
  font-size: clamp(0.98rem, 1.32vw, 1.18rem);
  line-height: 1.2;
}

/* Pages d'erreur (E-12). */
.error-hero .pill-row {
  margin-top: 26px;
}

.error-phone {
  margin-top: 18px;
  color: var(--muted);
}

.error-phone a {
  color: var(--violet);
  font-weight: 600;
}

/* Résultats aux examens de la fiche (chantier Q2, 2 novembre 2026) : tableau des 3 dernières sessions publiées ; sur
   téléphone, une carte par session avec le nom de chaque colonne. */
.formation-detail .formation-results-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.formation-detail .formation-results-table th,
.formation-detail .formation-results-table td { padding: 12px 14px 12px 0; text-align: left; vertical-align: top; border-bottom: 1px solid #d6e4e9; }
.formation-detail .formation-results-table thead th { color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.formation-detail .formation-results-table tbody th { font-weight: 700; white-space: nowrap; }
.formation-detail .formation-results-table td strong { display: block; color: var(--violet); font-family: var(--title-font); font-size: 1.25rem; line-height: 1.2; }
.formation-detail .formation-results-table td span { display: block; margin-top: 2px; color: var(--muted); font-size: .85rem; }
.formation-detail .formation-results-methods { margin: 12px 0 0; padding-left: 1.1em; font-size: .85rem; color: var(--muted); }
.formation-detail .formation-results-methods li + li { margin-top: 4px; }
@media (max-width: 640px) {
  .formation-detail .formation-results-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .formation-detail .formation-results-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; padding: 14px 0; border-bottom: 1px solid #d6e4e9; }
  .formation-detail .formation-results-table tbody th { grid-column: 1 / -1; }
  .formation-detail .formation-results-table th,
  .formation-detail .formation-results-table td { padding: 0; border-bottom: 0; }
  .formation-detail .formation-results-table td::before { content: attr(data-label); display: block; color: var(--muted); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
}

/* Rémunération des apprentis calculée sur le SMIC (9 novembre 2026, App\Support\Smic\ApprenticeSalary) : carte blanche,
   lisible sur tous les fonds de page ; sur téléphone, une carte par tranche d'âge avec le nom de chaque année. Les règles
   de .prose table (affichage en bloc, première ligne teintée) sont annulées : ce tableau a un vrai en-tête. */
.salary-table { margin: 20px 0; padding: clamp(16px, 3vw, 24px); border: 1px solid var(--card-line, var(--line)); border-radius: var(--card-radius); background: var(--white); color: var(--ink); }
.prose .salary-table table.salary-table__grid { display: table; width: 100%; overflow: visible; border-collapse: collapse; font-size: .95rem; }
.prose .salary-table .salary-table__grid :is(thead, tbody) { display: table-row-group; }
.prose .salary-table .salary-table__grid thead { display: table-header-group; }
.prose .salary-table .salary-table__grid caption { margin-bottom: 12px; caption-side: top; color: var(--ink); font-family: var(--title-font); font-size: 1.05rem; font-weight: 700; text-align: left; }
.prose .salary-table .salary-table__grid :is(th, td) { padding: 12px 14px 12px 0; border-bottom: 1px solid #d6e4e9; background: none; color: var(--ink); font-weight: 400; text-align: left; vertical-align: top; }
.prose .salary-table .salary-table__grid thead th { color: var(--muted); font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.prose .salary-table .salary-table__grid tbody th { font-weight: 700; white-space: nowrap; }
.prose .salary-table .salary-table__grid td strong { display: block; color: var(--violet); font-family: var(--title-font); font-size: 1.15rem; line-height: 1.2; white-space: nowrap; }
.prose .salary-table .salary-table__grid td span { display: block; margin-top: 2px; color: var(--muted); font-size: .85rem; }
.prose .salary-table .salary-table__note { margin: 14px 0 0; color: var(--muted); font-size: .85rem; line-height: 1.5; }
.prose .salary-table .salary-table__note a { color: var(--violet); }
.prose .salary-table .salary-table__note--next { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .prose .salary-table .salary-table__grid thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .prose .salary-table .salary-table__grid :is(tbody, tr) { display: block; }
  .prose .salary-table .salary-table__grid tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 8px; padding: 14px 0; border-bottom: 1px solid #d6e4e9; }
  .prose .salary-table .salary-table__grid tbody th { grid-column: 1 / -1; }
  .prose .salary-table .salary-table__grid :is(th, td) { padding: 0; border-bottom: 0; }
  .salary-table { padding: 16px 14px; }
  .prose .salary-table .salary-table__grid td strong { font-size: .92rem; }
  .prose .salary-table .salary-table__grid td::before { content: attr(data-label); display: block; color: var(--muted); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
}

/* Liens saisis dans les zones de texte en paragraphes (RichText, chantier E) : visibles comme liens partout. */
.rich-link {
  color: var(--violet);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}