/* Illustrations de repérage des spécialités, sans contenu clinique. */
.spec-grid:has(.spec-card--illustrated) {
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.spec-card--illustrated {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem;
  grid-template-rows: auto 1fr auto;
  column-gap: 1rem;
  padding: 1.5rem;
  border-radius: 0;
}

.spec-card--illustrated .spec-card__name {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  padding-top: .375rem;
  line-height: 1.35;
}

.spec-card--illustrated .spec-card__desc {
  grid-column: 1;
  grid-row: 2;
  margin-top: .5rem;
  line-height: 1.6;
}

.spec-card--illustrated .spec-card__footer {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 1rem;
  padding-top: .875rem;
  border-top: 1px solid var(--rule-soft);
}

.spec-card__illustration {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  display: block;
  width: 7rem;
  height: 5.25rem;
  object-fit: contain;
  border-radius: 0;
  pointer-events: none;
}

.specialty-feature {
  padding: clamp(2rem, 5vw, 4rem) 0;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}

.specialty-feature__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: 2rem;
  align-items: center;
}

.specialty-feature__eyebrow { color: var(--teal-text); margin-bottom: 1rem; }
.specialty-feature h1 {
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.12;
  letter-spacing: -.035em;
  font-weight: 600;
}
.specialty-feature__description {
  max-width: 38rem;
  margin-top: 1rem;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
}
.specialty-feature__topics { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.specialty-feature__topics span {
  padding: .3rem .65rem;
  border: 1px solid var(--rule);
  border-radius: 0;
  color: var(--ink-soft);
  background: var(--surface-alt);
  font-size: .75rem;
}
.specialty-feature__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin-top: 1.75rem;
}
.specialty-feature__button {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  min-height: 46px;
  padding: .75rem 1rem;
  background: var(--solid-bg);
  color: var(--solid-fg);
  border-radius: 0;
  font-size: .875rem;
  font-weight: 500;
}
.specialty-feature__button:hover { opacity: .88; }
.specialty-feature__back {
  padding-block: .75rem;
  font-size: .875rem;
  color: var(--teal-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.specialty-feature__art {
  /* Ni fond ni cadre : les illustrations sont des WebP détourés. Une plaque blanche
     serait un rectangle clair au milieu de la page en thème sombre, et un cadre
     délimiterait la toile plutôt que le dessin. */
  display: flex;
  justify-content: center;
}
.specialty-feature__art img { display: block; width: 100%; height: auto; }
#outils { scroll-margin-top: 4rem; }

@media (min-width: 640px) {
  .spec-grid:has(.spec-card--illustrated) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .specialty-feature__layout { grid-template-columns: minmax(0, 1fr) 19rem; gap: 5rem; }
}

@media (min-width: 1100px) {
  .spec-grid:has(.spec-card--illustrated) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 639px) {
  .spec-card--illustrated { padding: 1.25rem; }
  .specialty-feature__layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; position: relative; }
  .specialty-feature__eyebrow { max-width: calc(100% - 5rem); }
  .specialty-feature h1 { max-width: calc(100% - 5rem); padding-top: 1rem; }
  .specialty-feature__art { position: absolute; top: -.5rem; right: 1rem; width: 4.75rem; }
  .specialty-feature__actions { align-items: flex-start; flex-direction: column; gap: .25rem; }
}