/* Radar des modèles : radar, familles et fiches générés par .dev/generate-model-pages.py.
   Les couleurs, polices et rayons viennent des tokens de global.css. */

.mr-main { position: relative; z-index: 1; padding: 124px 0 72px; }
.mr-shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; display: grid; gap: 30px; }
.mr-shell > *, .mr-grid > *, .mr-content > * { min-width: 0; }

.mr-crumb ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--text-secondary); font-size: .84rem; }
.mr-crumb li + li::before { content: "/"; margin-right: 8px; color: var(--gold); }
.mr-crumb a { color: inherit; text-decoration: none; }
.mr-crumb a:hover, .mr-crumb a:focus-visible { color: var(--text-primary); text-decoration: underline; }

.mr-head { display: grid; gap: 14px; }
.mr-title { display: flex; gap: 16px; align-items: center; }
.mr-title h1 { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: clamp(1.9rem, 4.2vw, 2.9rem); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.mr-lead { margin: 0; max-width: 72ch; color: var(--body-text); font-size: 1.02rem; line-height: 1.7; }

.mr-mark, .mr-mono {
  flex: none; display: grid; place-items: center; width: 52px; height: 52px;
  background: var(--surface); border: 1px solid var(--card-border); border-radius: var(--radius-md);
  color: var(--gold); font-weight: 800; font-size: 1.3rem;
}
.mr-mark img { width: 30px; height: 30px; }
.mr-mark--sm, .mr-mono--sm { width: 34px; height: 34px; font-size: .86rem; }
.mr-mark--sm img { width: 20px; height: 20px; }
.mr-logo { display: block; background: var(--gold); -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat; }
.mr-mark .mr-logo { width: 30px; height: 30px; }
.mr-mark--sm .mr-logo { width: 20px; height: 20px; }

.mr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mr-chip {
  display: inline-block; padding: 3px 9px; border: 1px solid var(--border-card); border-radius: var(--radius-full);
  color: var(--text-secondary); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.mr-chip--nouveau { border-color: var(--gold-border); background: var(--gold-dim); color: var(--gold); }
.mr-chip--actif { border-color: var(--border-success); color: var(--success); }
.mr-chip--remplace, .mr-chip--retire { color: var(--text-secondary); }
.mr-chip--fin-annoncee { border-color: var(--border-error); color: #e08a85; }
.mr-chip--test { border-color: var(--border-success); color: var(--success); }

.mr-by { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; color: var(--text-secondary); font-size: .86rem; }
.mr-stats { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; color: var(--text-secondary); font-size: .92rem; }
.mr-stats b { color: var(--text-primary); font-variant-numeric: tabular-nums; }

.mr-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0;
  background: var(--card-border); border: 1px solid var(--card-border); border-radius: var(--radius-md); overflow: hidden;
}
.mr-fact { margin: 0; padding: 12px 14px; background: var(--base); }
.mr-fact dt { color: var(--text-secondary); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mr-fact dd { margin: 2px 0 0; }
.mr-fact b { display: block; font-family: var(--font-mono); font-size: 1.12rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.mr-fact span { color: var(--text-secondary); font-size: .8rem; }

.mr-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.mr-content { display: grid; gap: 30px; }
.mr-aside { display: grid; gap: 14px; }
.mr-section { display: grid; gap: 10px; }
.mr-section h2 { margin: 0; font-size: 1.3rem; font-weight: 700; line-height: 1.3; }
.mr-section p { margin: 0; max-width: 72ch; color: var(--body-text); line-height: 1.7; }
.mr-caption { color: var(--text-secondary) !important; font-size: .84rem; }

.mr-answer { padding: 16px 18px; background: var(--base); border: 1px solid var(--card-border); border-left: 3px solid var(--gold); }
.mr-answer h2 { margin: 0 0 6px; color: var(--gold); font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mr-answer p { margin: 0; max-width: 75ch; color: var(--text-primary); line-height: 1.75; }

.mr-card { padding: 14px 16px; background: var(--base); border: 1px solid var(--card-border); border-radius: var(--radius-md); }
.mr-card h2, .mr-card h3 { margin: 0 0 8px; color: var(--text-secondary); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mr-card ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .92rem; }
.mr-card li small { color: var(--text-secondary); }
.mr-card a { color: var(--text-primary); }
.mr-card a:hover, .mr-card a:focus-visible { color: var(--gold); }
.mr-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mr-two ul { list-style: disc; padding-left: 18px; }

.mr-tests { display: grid; gap: 10px; }
.mr-test { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px; border: 1px solid var(--gold-border); background: var(--gold-dim); }
.mr-test img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.mr-test b { display: block; }
.mr-test span { color: var(--text-secondary); font-size: .86rem; }
.mr-test a { color: var(--gold); }

.mr-table-wrap { overflow-x: auto; border: 1px solid var(--card-border); border-radius: var(--radius-md); }
.mr-table { width: 100%; min-width: 620px; border-collapse: collapse; font-size: .88rem; }
.mr-table th, .mr-table td { padding: 9px 12px; border-bottom: 1px solid var(--card-border); text-align: left; white-space: nowrap; }
.mr-table th { background: var(--base); color: var(--text-secondary); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.mr-table .r { text-align: right; font-variant-numeric: tabular-nums; }
.mr-table tr.is-current td { background: var(--gold-dim); }
.mr-table tbody tr:last-child td { border-bottom: 0; }
.mr-table caption { caption-side: bottom; padding: 8px 12px; text-align: left; }
.mr-table a { color: var(--text-primary); }
.mr-table a:hover, .mr-table a:focus-visible { color: var(--gold); }
.mr-table .mr-muted { color: var(--text-secondary); }

.mr-dl { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); margin: 0; border: 1px solid var(--card-border); border-radius: var(--radius-md); overflow: hidden; font-size: .92rem; }
.mr-dl dt, .mr-dl dd { margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--card-border); overflow-wrap: anywhere; }
.mr-dl dt { background: var(--base); color: var(--text-secondary); }
.mr-dl dd { font-variant-numeric: tabular-nums; }
.mr-dl dt:last-of-type, .mr-dl dd:last-of-type { border-bottom: 0; }
.mr-dl .mr-unknown { color: var(--text-secondary); font-style: italic; }
.mr-dl code { font-family: var(--font-mono); font-size: .86rem; }

.mr-lineage { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .86rem; }
.mr-lineage li { display: flex; align-items: center; gap: 8px; }
.mr-lineage li + li::before { content: "→"; color: var(--text-secondary); }
.mr-pill { display: inline-block; padding: 3px 10px; border: 1px solid var(--border-card-hover); border-radius: var(--radius-full); color: var(--text-primary); }
.mr-pill[aria-current] { border-color: var(--gold); color: var(--gold); }
a.mr-pill { text-decoration: none; }
a.mr-pill:hover, a.mr-pill:focus-visible { border-color: var(--gold); }

.mr-lines { display: grid; gap: 12px; }
.mr-lines h3 { margin: 0 0 6px; font-size: .95rem; }

.mr-marks { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 0; }
.mr-marks div { margin: 0; padding: 12px 14px; background: var(--base); border: 1px solid var(--card-border); }
.mr-marks dt { color: var(--text-secondary); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mr-marks dd { margin: 3px 0 0; }
.mr-marks dd span { display: block; color: var(--text-secondary); font-size: .84rem; }
.mr-marks a { color: var(--text-primary); font-weight: 700; }

.mr-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.mr-filter {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px;
  background: transparent; border: 1px solid var(--border-card-hover); border-radius: var(--radius-md);
  color: var(--text-secondary); font: inherit; font-size: .86rem; cursor: pointer;
}
.mr-filter b { color: var(--text-secondary); font-weight: 600; font-variant-numeric: tabular-nums; }
.mr-filter:hover { border-color: var(--gold); color: var(--text-primary); }
.mr-filter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mr-filter[aria-pressed="true"] { background: var(--text-primary); border-color: var(--text-primary); color: var(--deep); font-weight: 700; }
.mr-filter[aria-pressed="true"] b { color: var(--deep); }

.mr-feed { margin: 0; padding: 0; list-style: none; border: 1px solid var(--card-border); border-radius: var(--radius-md); overflow: hidden; }
.mr-day { padding: 7px 14px; background: var(--base); color: var(--text-secondary); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mr-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 14px; border-top: 1px solid var(--card-border); }
.mr-row b { display: block; font-size: .95rem; }
.mr-row b a { color: var(--text-primary); }
.mr-row b a:hover, .mr-row b a:focus-visible { color: var(--gold); }
.mr-row span { color: var(--text-secondary); font-size: .82rem; }
.mr-row .mr-price { font-family: var(--font-mono); font-size: .8rem; text-align: right; white-space: nowrap; }

.mr-families { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mr-family { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 12px; background: var(--base); border: 1px solid var(--card-border); }
.mr-family b { display: block; font-size: .95rem; }
.mr-family a { color: var(--text-primary); }
.mr-family a:hover, .mr-family a:focus-visible { color: var(--gold); }
.mr-family span { color: var(--text-secondary); font-size: .8rem; }

.mr-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 24px; align-items: center; padding: 22px 24px;
  background: linear-gradient(180deg, var(--gold-dim), transparent); border: 1px solid var(--gold-border);
}
.mr-cta h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.55rem; font-weight: 500; line-height: 1.2; }
.mr-cta p { margin: 0; color: var(--body-text); }

.mr-faq { display: grid; gap: 8px; }
.mr-faq details { padding: 12px 16px; background: var(--base); border: 1px solid var(--card-border); }
.mr-faq summary { cursor: pointer; font-weight: 600; }
.mr-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mr-faq details p { margin: 8px 0 0; color: var(--body-text); line-height: 1.7; }

.mr-sources { display: grid; gap: 6px; margin: 0; padding: 14px 16px; border: 1px solid var(--card-border); color: var(--text-secondary); font-size: .84rem; line-height: 1.6; }
.mr-sources p { margin: 0; }
.mr-sources a { color: var(--text-primary); }
.mr-dl a, .mr-section p a { color: var(--gold); }
.mr-dl a:hover, .mr-dl a:focus-visible, .mr-section p a:hover, .mr-section p a:focus-visible { color: var(--gold-soft); }

[data-mr-filter-target] [hidden] { display: none; }

@media (max-width: 900px) {
  .mr-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .mr-main { padding-top: 104px; }
  .mr-shell { width: min(1120px, calc(100% - 32px)); gap: 26px; }
  .mr-title { align-items: flex-start; }
  .mr-mark, .mr-mono { width: 44px; height: 44px; }
  .mr-two, .mr-cta { grid-template-columns: 1fr; }
  .mr-test { grid-template-columns: 1fr; }
  .mr-dl { grid-template-columns: 1fr; }
  .mr-dl dt { border-bottom: 0; padding-bottom: 2px; }
  .mr-row { grid-template-columns: 34px minmax(0, 1fr); }
  .mr-row .mr-price { grid-column: 2; text-align: left; }
}