/* Historique des Core Web Vitals, Nemo Ciment
   Se charge après outils.css, dont il reprend .r-table, .pastille, .verdicts et le formulaire d'adresse.
   Courbes SVG (.c-svg), barre de répartition bon / moyen / mauvais (.c-barre) construites par crux.js. */

.source-ligne .btn { min-height: 46px; }
.options-crux { display: flex; flex-wrap: wrap; gap: 8px 36px; margin: 12px 0 0; }
.options-crux fieldset { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; border: 0; }
.options-crux label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; text-transform: none; letter-spacing: 0; cursor: inherit; }
.options-crux input { accent-color: var(--pink); width: auto; flex: none; padding: 0; margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.pastille.v-bon { background: rgba(34,197,94,.16); color: #4ade80; }
.pastille.v-moyen { background: rgba(245,165,36,.16); color: #f5c264; }
.pastille.v-mauvais { background: rgba(239,68,68,.16); color: #f87171; }

.c-bloc { margin: 28px 0 0; }
.c-tete { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 6px 0 12px; }
.c-tete strong { font: 600 34px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.c-sous { flex-basis: 100%; font-size: 13.5px; line-height: 1.5; color: var(--muted-2); }

.c-svg { display: block; width: 100%; height: auto; max-width: 720px; }
.c-axe { stroke: rgba(255,255,255,.14); stroke-width: 1; }
.c-seuil { stroke: #4ade80; stroke-width: 1.5; stroke-dasharray: 5 4; }
.c-etiq { fill: var(--muted-2); font: 12px var(--font-body, system-ui, sans-serif); }
.c-etiq-bon { fill: #4ade80; }
.c-ligne { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.c-pt { stroke: var(--bg, #0b0b0f); stroke-width: 1.5; }
.c-pt-bon { fill: #4ade80; }
.c-pt-moyen { fill: #f5c264; }
.c-pt-mauvais { fill: #f87171; }

.c-rep { margin: 14px 0 6px; max-width: 720px; }
.c-barre { display: flex; height: 14px; border-radius: 7px; overflow: hidden; gap: 2px; }
.c-seg, .c-puce { background: var(--muted-2); }
.c-seg { flex-basis: 0; min-width: 3px; }
.c-bon { background: #4ade80; }
.c-moyen { background: #f5c264; }
.c-mauvais { background: #f87171; }
.c-leg { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted-2); }
.c-leg li { display: inline-flex; align-items: center; gap: 8px; }
.c-puce { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }

.c-tab { margin: 12px 0 0; }
.c-tab summary { cursor: pointer; font-size: 14px; color: var(--muted-2); }
.c-tab .r-table { margin-top: 10px; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .c-tete strong { font-size: 28px; }
  .c-tab { overflow-x: auto; }
  .c-tab .r-table { min-width: 460px; }
}