/*!
 * informations.css — Horizon Santé
 * Pages d’information (spécialités, urgences, conseils, le centre, bilans, tarifs, infos pratiques).
 * Chargée après styles.css, dans les mêmes couches (@layer déclarées dans styles.css).
 */

@layer components {
  .icon-badge--sm { inline-size: 2.5rem; block-size: 2.5rem; }
  .textarea { min-block-size: 9rem; resize: vertical; line-height: 1.5; }
  .horizon--center { margin-inline: auto; }
  .horizon--center::after { inset-inline-start: calc(50% - 12px); }
  .card--flat { box-shadow: none; }
  .timeline { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; counter-reset: step; max-inline-size: 48rem; }
  .timeline > li { position: relative; display: grid; grid-template-columns: 3.5rem 1fr; gap: 0 1.25rem; padding-block-end: var(--space-6); counter-increment: step; }
  .timeline > li::before { content: counter(step); grid-row: span 3; display: grid; place-items: center; inline-size: 3.5rem; block-size: 3.5rem; border-radius: 50%; background: var(--color-mint); color: var(--color-teal-deep); font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; z-index: 1; }
  .timeline > li::after { content: ""; position: absolute; inset-inline-start: 1.75rem; inset-block: 3.5rem 0; inline-size: 1px; background: var(--color-teal); opacity: 0.45; }
  .timeline > li:last-child { padding-block-end: 0; }
  .timeline > li:last-child::after { display: none; }
  .timeline h3 { font-size: 1.25rem; padding-block-start: 0.75rem; }
  .timeline p { color: var(--color-ink-2); margin-block-start: 0.35rem; }
  .timeline__time { font-weight: 700; color: var(--color-teal-deep); font-variant-numeric: tabular-nums; }
  .figure-card--serif .figure-card__value { font-family: var(--font-display); font-weight: 600; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
  .table .num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .table .num strong { color: var(--color-ink); }
  @media (min-width: 64em) {
    .table--sticky thead th { position: sticky; inset-block-start: var(--header-h); z-index: 1; }
  }
  .compare { min-inline-size: 44rem; }
  .compare th[scope="row"] { position: sticky; inset-inline-start: 0; background: #fff; z-index: 1; min-inline-size: 13rem; box-shadow: 1px 0 0 var(--color-border); }
  .compare thead th { text-align: center; text-transform: none; letter-spacing: 0; font-size: 1.0625rem; color: var(--color-ink); vertical-align: bottom; }
  .compare thead th:first-child { text-align: start; }
  .compare thead th span { display: block; font-weight: 400; color: var(--color-ink-2); font-variant-numeric: tabular-nums; font-size: 0.9375rem; }
  .compare td { text-align: center; }
  .compare tbody tr:hover th { background: var(--color-mint-soft); }
  .yes, .no { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: 50%; }
  .yes { background: var(--color-mint); color: var(--color-teal-deep); }
  .no { color: var(--color-ink-2); }
  .compare .yes-note { display: block; font-size: 0.875rem; color: var(--color-ink-2); }
  .is-hidden-col { display: none; }
  .faq { display: grid; gap: var(--space-3); max-inline-size: 52rem; }
  .faq details { border: var(--bw) solid var(--color-border); border-radius: var(--radius-card); background: #fff; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
  .faq details[open] { border-color: var(--color-teal); box-shadow: var(--shadow-1); }
  .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-block-size: 3.5rem; padding: 0.85rem 1.25rem; font-weight: 700; font-size: 1.1875rem; cursor: pointer; list-style: none; line-height: 1.35; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: ""; flex: none; inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--color-mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' fill='none' stroke='%230E5A56' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center / 60% no-repeat; transition: transform var(--dur-2) var(--ease); }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details > div { padding: 0 1.25rem 1.25rem; color: var(--color-ink-2); display: grid; gap: 0.75rem; }
  .faq details > div p { color: var(--color-ink); }
  .bilan-card { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.5rem; border: var(--bw) solid var(--color-border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-1); position: relative; }
  .bilan-card--feature { border: 2px solid var(--color-teal); }
  .bilan-card__tag { position: absolute; inset-block-start: -0.85rem; inset-inline-start: 1.25rem; padding: 0.2rem 0.75rem; border-radius: var(--radius-pill); background: var(--color-teal-deep); color: #fff; font-size: 0.875rem; font-weight: 700; }
  .bilan-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; }
  .bilan-card__for { color: var(--color-ink-2); }
  .bilan-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; color: var(--color-ink-2); font-size: var(--step--1); }
  .bilan-card__meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
  .bilan-card__actions .btn .icon { display: none; }
  .bilan-card__actions { margin-block-start: auto; display: grid; gap: 0.5rem; padding-block-start: 0.5rem; }
  .photo { overflow: hidden; border-radius: var(--radius-card); background: var(--color-mint-soft); }
  .photo img { inline-size: 100%; block-size: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
  .photo--wide img { aspect-ratio: 16 / 9; }
  .photo figcaption, .figure-caption { padding: 0.65rem 0.25rem 0; color: var(--color-ink-2); font-size: var(--step--1); }
  .illus { border-radius: var(--radius-card); background: var(--color-mint-soft); overflow: hidden; }
  .illus svg { inline-size: 100%; block-size: auto; }
  .byline { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; color: var(--color-ink-2); font-size: var(--step--1); max-inline-size: none; }
  .byline span { display: inline-flex; align-items: center; gap: 0.4rem; }
  .keypoints { padding: 1.25rem 1.5rem; border-radius: var(--radius-card); background: var(--color-mint-soft); border-inline-start: 5px solid var(--color-teal); }
  .keypoints h3 { margin: 0 0 0.5rem; font-size: 1.1875rem; }
  .toc { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0; max-inline-size: none; }
  .toc a { display: inline-flex; align-items: center; min-block-size: var(--target); padding: 0.35rem 1rem; border: var(--bw) solid var(--color-border-ui); border-radius: var(--radius-pill); background: #fff; color: var(--color-ink); font-weight: 700; text-decoration: none; font-size: 1.0625rem; }
  .toc a:hover { border-color: var(--color-teal-deep); background: var(--color-mint-soft); color: var(--color-teal-deep); }
  .toc-groups { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
  .toc-groups h2 { font-family: var(--font-text); font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-2); margin-block-end: 0.35rem; }
  .toc-groups ul { list-style: none; padding: 0; margin: 0; }
  .toc-groups a { display: inline-flex; min-block-size: 2.75rem; align-items: center; font-weight: 700; }
  .kv { display: grid; gap: 0.5rem; margin: 0; }
  .kv > div { display: grid; grid-template-columns: minmax(8rem, auto) 1fr; gap: 1rem; padding-block: 0.6rem; border-block-end: var(--bw) solid var(--color-border); }
  .kv dt { font-weight: 700; }
  .kv dd { margin: 0; }
  @media (max-width: 29.99em) {
    .kv > div { grid-template-columns: 1fr; gap: 0.15rem; }
  }
  .arch--sm { max-inline-size: 20rem; margin-inline: auto; inline-size: 100%; }
  .select--md { max-inline-size: 28rem; }
  .lede--center { margin-inline: auto; }
  .btn--on-dark { --_bg: transparent; --_fg: #fff; --_bd: var(--color-teal-light); }
  .btn--on-dark:hover { --_bg: rgb(127 216 196 / 0.15); }
  .prep-card__title { font-size: var(--step-1); margin-block-end: 0.75rem; }
  .prep-card__title:focus { outline: none; }
}

@layer utilities {
  .mt-6 { margin-block-start: var(--space-6) !important; }
  .mb-6 { margin-block-end: var(--space-6) !important; }
}

@layer pages {
  .spec-section { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); border-block-start: var(--bw) solid var(--color-border); }
  .spec-section__grid { display: grid; gap: clamp(1.5rem, 1rem + 2vw, 3rem); }
  @media (min-width: 64em) {
    .spec-section__grid { grid-template-columns: 1.15fr 0.85fr; }
  }
  .spec-section__head { display: flex; align-items: center; gap: 1rem; }
  .spec-aside { display: grid; gap: var(--space-4); align-content: start; }
  .spec-facts { display: grid; gap: 0.75rem; padding: 1.25rem; border-radius: var(--radius-card); background: var(--color-surface); border: var(--bw) solid var(--color-border); }
  .spec-facts dl { display: grid; gap: 0.6rem; margin: 0; }
  .spec-facts dl > div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; }
  .spec-facts dt { color: var(--color-ink-2); }
  .spec-facts dd { margin: 0; font-weight: 700; text-align: end; font-variant-numeric: tabular-nums; }
  .two-cols { columns: 2 16rem; column-gap: 2rem; }
  .two-cols li { break-inside: avoid; }
  .urgent-hero { background: linear-gradient(180deg, var(--color-urgent-soft), #fff 90%); }
  .urgent-hero .eyebrow { color: var(--color-urgent-deep); }
  .urgent-hero::after { display: none; }
  .urgent-hero .eyebrow::before { background: var(--color-urgent); box-shadow: 0 3px 0 -1px var(--color-urgent); }
  .national { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); list-style: none; padding: 0; margin: 0; max-inline-size: none; }
  .national li { display: grid; gap: 0.1rem; padding: 1rem 1.25rem; border-radius: var(--radius-card); background: #fff; border: 2px solid #F2B8B3; }
  .national strong { font-size: 2rem; font-weight: 800; color: var(--color-urgent-deep); font-variant-numeric: tabular-nums; line-height: 1.1; }
  .signs { display: grid; gap: var(--space-5); }
  @media (min-width: 64em) {
    .signs { grid-template-columns: 1fr 1fr; }
  }
  .signs__col { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--radius-panel); border: var(--bw) solid var(--color-border); background: #fff; }
  .signs__col h3 { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 1rem; }
  .signs__col ul { display: grid; gap: 0.6rem; padding-inline-start: 1.25rem; }
  .signs__col li::marker { color: var(--color-urgent); }
  .team { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); list-style: none; padding: 0; margin: 0; max-inline-size: none; }
  .team li { display: flex; gap: 1rem; align-items: center; padding: 1.25rem; border-radius: var(--radius-card); border: var(--bw) solid var(--color-border); background: #fff; }
  .team strong { display: block; font-size: 1.125rem; }
  .team span { color: var(--color-ink-2); font-size: var(--step--1); }
  .article-card .photo img { aspect-ratio: 3 / 2; }
  .article__grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 3.5rem); }
  @media (min-width: 64em) {
    .article__grid { grid-template-columns: minmax(0, 1fr) 22rem; }
    .article__aside { position: sticky; inset-block-start: calc(var(--header-h) + 1.5rem); align-self: start; }
  }
  .article__head { display: grid; gap: 0.85rem; margin-block-end: var(--space-5); }
}