/* ============================================================
   AudioKit — Boîte à outils « résultat » (socle, Lot C — 21/10/2026)
   ------------------------------------------------------------
   Composants K1–K14 (K0 = jetons d'état --state-* dans layout.css).
   Repris de l'AI Detector (rendu identique) : K1 en-tête fichier,
   K2 synthèse, K3 carte + encadré, K4 confiance, K5 jauge, K6 barre
   empilée, K7 frise, K11 pastilles, K12 « et maintenant ? ».
   Nouveaux : K8 onde, K9 avant/après, K10 tableau de mesures,
   K13 export sans repayer, K14 états (chargement, erreur, vide, démo).
   Variables du socle uniquement → clair ET sombre. Accent de l'outil
   surchargeable : --r-accent / --r-accent-tint sur .ak-r.
   ============================================================ */

.ak-r { --r-accent: var(--accent); --r-accent-tint: var(--accent-tint); }

/* Tons d'état (texte) — l'état n'est jamais porté par la couleur seule. */
.ak-r-is-bad     { color: var(--state-bad-text) !important; }
.ak-r-is-warn    { color: var(--state-warn-text) !important; }
.ak-r-is-good    { color: var(--state-good-text) !important; }
.ak-r-is-unknown { color: var(--state-unknown-text) !important; }

/* Pastilles de couleur (légendes, barre empilée) */
.ak-r-sw--bad     { background: var(--state-bad); }
.ak-r-sw--warn    { background: var(--state-warn); box-shadow: inset 0 0 0 1px var(--state-warn-text); }
.ak-r-sw--good    { background: var(--state-good); }
.ak-r-sw--unknown { background: var(--state-hatch); box-shadow: inset 0 0 0 1px var(--state-hatch-edge, rgba(136, 135, 128, 0.35)); }
.ak-r-swatch { flex: none; width: 12px; height: 12px; border-radius: 3px; }

/* ── K1 — En-tête fichier + K11 pastilles ─────────────────────── */
.ak-r-file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px;
             background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.ak-r-file__icon { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
                   background: var(--r-accent-tint); color: var(--r-accent); }
.ak-r-file__meta { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ak-r-file__name { font-size: 14px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-r-file__info { font-size: 12.5px; color: var(--text-soft); }
.ak-r-file__pills { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.ak-r-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; border-radius: var(--radius-pill);
             font-size: 12px; font-weight: 600; color: var(--r-accent); background: var(--r-accent-tint); border: 1px solid transparent; white-space: nowrap; }
.ak-r-pill--warn    { color: var(--state-warn-text); background: var(--state-warn-tint); }
.ak-r-pill--good    { color: var(--state-good-text); background: var(--state-good-tint); }
.ak-r-pill--bad     { color: var(--state-bad-text);  background: var(--state-bad-tint); }
.ak-r-pill--neutral { color: var(--text-soft); background: var(--state-soft-bg); }

/* ── K2 — Phrase de synthèse ──────────────────────────────────── */
.ak-r-summary { margin: 0 0 16px; font-size: 20px; line-height: 1.45; font-weight: 600; letter-spacing: -0.2px; color: var(--text); }

/* ── K3 — Carte résultat (+ grille duo, encadré) ──────────────── */
.ak-r-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.ak-r-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px; min-width: 0;
             background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.ak-r-card__kicker { margin: 0; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; color: var(--r-accent); }
.ak-r-card__label { margin: 0; font-size: 26px; font-weight: 700; line-height: 1.2; letter-spacing: -0.4px; color: var(--text); }
.ak-r-card__sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--text-soft); }
.ak-r-card__advice { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }
.ak-r-card__estimate { margin: auto 0 0; padding-top: 6px; font-size: 12px; line-height: 1.45; color: var(--text-soft); }
/* Valeur héros (BPM, tonalité…) : très grand chiffre + unité */
.ak-r-hero { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.ak-r-hero__value { font-size: 64px; font-weight: 700; line-height: 1; letter-spacing: -2px; color: var(--text); }
.ak-r-hero__unit { font-size: 18px; font-weight: 600; color: var(--text-soft); }
.ak-r-callout { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--state-soft-bg); }
.ak-r-callout__icon { flex: none; color: var(--state-bad-text); margin-top: 1px; }
.ak-r-callout--info .ak-r-callout__icon { color: var(--r-accent); }
.ak-r-callout__text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text); }

/* ── K4 — Confiance 3 segments ────────────────────────────────── */
.ak-r-conf { display: inline-flex; align-items: center; gap: 8px; }
.ak-r-conf__segs { display: inline-flex; gap: 3px; }
.ak-r-conf__seg { width: 16px; height: 6px; border-radius: 3px; background: var(--border-strong); }
.ak-r-conf__seg.is-on { background: var(--text-soft); }
.ak-r-conf__label { font-size: 12px; font-weight: 600; color: var(--text-soft); }

/* ── K5 — Jauge demi-cercle ───────────────────────────────────── */
.ak-r-gauge { display: flex; justify-content: center; margin: 2px 0 -4px; }
.ak-r-gauge svg { width: 200px; height: auto; max-width: 100%; overflow: visible; }
.ak-r-gauge__arc { fill: none; stroke-width: 16; stroke-linecap: round; opacity: 0.28; }
.ak-r-gauge__arc--good { stroke: var(--state-good); }
.ak-r-gauge__arc--warn { stroke: var(--state-warn); }
.ak-r-gauge__arc--bad  { stroke: var(--state-bad); }
.ak-r-gauge__arc--unknown { stroke: var(--state-unknown); }
.ak-r-gauge__arc.is-active { opacity: 1; }
.ak-r-gauge__needle line { stroke: var(--text); stroke-width: 4; stroke-linecap: round; }
.ak-r-gauge__needle circle { fill: var(--text); }
.ak-r-gauge__needle { transform-origin: 100px 100px; transition: transform .5s var(--ease-out, ease-out); }
@media (prefers-reduced-motion: reduce) { .ak-r-gauge__needle { transition: none; } }

/* ── K6 — Barre empilée + légende ─────────────────────────────── */
.ak-r-stack { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.ak-r-stack__bar { display: flex; gap: 3px; height: 14px; border-radius: 7px; overflow: hidden; }
.ak-r-stack__seg { flex: 1 1 0; min-width: 8px; }
.ak-r-stack__legend { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.ak-r-stack__legend li { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-soft); }
.ak-r-stack__legend b { margin-left: auto; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.ak-r-legend { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.ak-r-legend li { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); }

/* ── K7 — Frise temporelle ────────────────────────────────────── */
.ak-r-timeline { display: flex; flex-direction: column; gap: 4px; }
.ak-r-tl { position: relative; height: 14px; border-radius: 4px; overflow: hidden; background: var(--state-hatch); box-shadow: inset 0 0 0 1px rgba(136, 135, 128, 0.30); }
.ak-r-tl svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ak-r-tl__times { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.ak-r-tl--plain { background: var(--state-soft-bg); }

/* ── K8 — Onde de résultat + marqueurs (nouveau) ──────────────── */
.ak-r-wave { position: relative; display: flex; flex-direction: column; gap: 6px; }
.ak-r-wave__frame { position: relative; height: 72px; }
.ak-r-wave__plot { position: absolute; inset: 0; border-radius: 8px; background: var(--state-soft-bg); overflow: hidden; }
.ak-r-wave__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ak-r-wave__bars { fill: var(--r-accent); opacity: 0.75; }
.ak-r-wave__region--good { fill: var(--state-good-tint); }
.ak-r-wave__region--warn { fill: var(--state-warn-tint); }
.ak-r-wave__region--bad  { fill: var(--state-bad-tint); }
.ak-r-wave__region--unknown { fill: var(--state-unknown-tint); }
.ak-r-wave__markers { position: absolute; inset: 0; pointer-events: none; }
.ak-r-wave__marker { position: absolute; top: 0; bottom: 0; width: 44px; margin-left: -22px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; }
.ak-r-wave__marker::before { content: ""; position: absolute; left: 21px; top: 0; bottom: 0; width: 2px; background: var(--text); opacity: .55; }
.ak-r-wave__marker:hover::before, .ak-r-wave__marker:focus-visible::before { opacity: 1; }
.ak-r-wave__marker:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
/* Tête de lecture + déplacement (attachPlayhead) : toute l'onde est la cible
   (72 px de haut, pleine largeur). pan-y : le défilement vertical de la page
   reste possible au doigt ; un glissé horizontal déplace la lecture. */
.ak-r-seek { position: absolute; inset: 0; border-radius: 8px; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.ak-r-seek:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ak-r-playhead { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: var(--text);
                 pointer-events: none; opacity: 0; transition: opacity .15s var(--ease-out, ease-out); }
.ak-r-playhead::before { content: ""; position: absolute; top: -3px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
                         border-radius: 50%; background: var(--text); box-shadow: 0 0 0 2px var(--surface); }
.ak-r-seek.is-on .ak-r-playhead { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ak-r-playhead { transition: none; } }
/* Avec une tête de lecture, les repères (« écouter à partir d'ici ») ne prennent
   plus que la moitié haute de l'onde (44 × 36 px, 44 × 44 px au doigt, petit onglet
   visible) : sinon des repères serrés (click-track, mobile) couvriraient toute
   l'onde et empêcheraient de s'y déplacer. Leur trait reste visible sur toute la
   hauteur, sans capter le clic ; le bas de l'onde déplace toujours la lecture. */
.ak-r-wave__frame.has-seek .ak-r-wave__marker { bottom: auto; height: 36px; }
@media (pointer: coarse) { .ak-r-wave__frame.has-seek .ak-r-wave__marker { height: 44px; } }
.ak-r-wave__frame.has-seek .ak-r-wave__marker::before { bottom: auto; height: 72px; pointer-events: none; }
.ak-r-wave__frame.has-seek .ak-r-wave__marker::after { content: ""; position: absolute; left: 18px; top: 0; width: 8px; height: 7px;
                                                       border-radius: 0 0 3px 3px; background: var(--text); opacity: .55; }
.ak-r-wave__frame.has-seek .ak-r-wave__marker:hover::after,
.ak-r-wave__frame.has-seek .ak-r-wave__marker:focus-visible::after { opacity: 1; }
.ak-r-wave__times { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-soft); font-variant-numeric: tabular-nums; }

/* ── K9 — Avant / après (nouveau) ─────────────────────────────── */
.ak-r-ab { display: inline-flex; padding: 3px; gap: 3px; border-radius: 10px; background: var(--state-soft-bg); border: 1px solid var(--border); }
.ak-r-ab__btn { min-height: 44px; min-width: 96px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent;
                color: var(--text-soft); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ak-r-ab__btn[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.ak-r-ab__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── K10 — Tableau de mesures (nouveau) ───────────────────────── */
.ak-r-measures { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ak-r-measures caption { text-align: left; margin-bottom: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.1px; color: var(--text-soft); }
.ak-r-measures th, .ak-r-measures td { padding: 10px 8px; border-top: 1px solid var(--border); text-align: left; vertical-align: top; }
.ak-r-measures thead th { border-top: 0; font-size: 12px; font-weight: 600; color: var(--text-soft); }
.ak-r-measures td.is-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ak-r-measures__label { font-weight: 600; color: var(--text); }
.ak-r-measures__hint { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; color: var(--text-soft); font-weight: 400; }
.ak-r-measures__status { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
@media (max-width: 540px) {
  .ak-r-measures thead { display: none; }
  /* Une ligne par information : libellé, avant, après, statut — jamais de
     valeur coincée à droite d'un libellé long (bord de carte à 390 px). */
  .ak-r-measures tr { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 10px 0; border-top: 1px solid var(--border); }
  .ak-r-measures td.is-num { white-space: normal; }
  .ak-r-measures th, .ak-r-measures td { border: 0; padding: 0; }
  .ak-r-measures td[data-col="target"] { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-soft); }
  .ak-r-measures td[data-label]::before { content: attr(data-label) ": "; font-weight: 400; color: var(--text-soft); }
  :lang(fr) .ak-r-measures td[data-label]::before { content: attr(data-label) "\00a0: "; }
}

/* ── K12 — « Et maintenant ? » ────────────────────────────────── */
.ak-r-next { margin-top: 18px; padding: 18px; background: var(--r-accent-tint); border-radius: var(--radius-card); }
.ak-r-next__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--text); }
.ak-r-next__text { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }
.ak-r-next__cards { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ak-r-next__card { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; }
.ak-r-next__card h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text); }
.ak-r-next__card p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); }
a.ak-r-next__card { text-decoration: none; min-height: 44px; transition: border-color .15s var(--ease-out, ease-out); }
a.ak-r-next__card:hover { border-color: var(--accent); }
a.ak-r-next__card:hover h4 { color: var(--accent); }
a.ak-r-next__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ak-r-next__go { margin-top: auto; font-size: 12.5px; font-weight: 600; color: var(--accent); }

/* ── K13 — Export / partage sans repayer (nouveau) ────────────── */
.ak-r-export { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ak-r-export .btn { min-height: 44px; }
.ak-r-export__note { flex-basis: 100%; margin: 2px 0 0; font-size: 12px; color: var(--text-soft); }
.ak-r-copied { color: var(--state-good-text); }

/* ── K14 — États : chargement, erreur, vide, démo (nouveau) ───── */
.ak-r-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 18px; text-align: center;
              border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.ak-r-state__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--state-soft-bg); color: var(--text-soft); }
.ak-r-state--error .ak-r-state__icon { background: var(--state-bad-tint); color: var(--state-bad-text); }
.ak-r-state__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text); }
.ak-r-state__text { margin: 0; max-width: 460px; font-size: 13.5px; line-height: 1.55; color: var(--text-soft); }
.ak-r-steps { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; text-align: left; }
.ak-r-steps li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-soft); }
.ak-r-steps li::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--border-strong); }
.ak-r-steps li.is-done { color: var(--text); }
.ak-r-steps li.is-done::before { background: var(--state-good); border-color: var(--state-good); }
.ak-r-steps li.is-current { color: var(--text); font-weight: 600; }
.ak-r-steps li.is-current::before { border-color: var(--accent); border-top-color: transparent; animation: ak-r-spin .9s linear infinite; }
@keyframes ak-r-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ak-r-steps li.is-current::before { animation: none; border-top-color: var(--accent); } }
.ak-r-demo { position: relative; padding: 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-card); background: var(--bg); text-align: left; }
.ak-r-demo__badge { display: inline-block; margin-bottom: 10px; padding: 2px 8px; border-radius: 6px; background: var(--info-bg); color: var(--info-text); font-size: 11.5px; font-weight: 600; }

/* Divers repris de l'AI Detector : notes, lien-bouton, avertissement, actions, note démo */
.ak-r-notes { margin: 14px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.5; color: var(--text-soft); display: flex; flex-direction: column; gap: 6px; }
.ak-r-linkbtn { min-height: 44px; padding: 0 2px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600;
                color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ak-r-linkbtn:hover { color: var(--accent-deep, var(--accent)); }
.ak-r-linkbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.ak-r-demo-notice { margin: 12px 0 0; font-size: 12px; color: var(--warn-text); background: var(--warn-bg); border-radius: 8px; padding: 8px 12px; text-align: center; }
.ak-r-disclaimer { margin: 20px auto 0; max-width: 560px; font-size: 12.5px; line-height: 1.55; color: var(--text-soft); text-align: center; }
.ak-r-actions { display: flex; justify-content: center; margin-top: 14px; }
.ak-r-actions .btn { min-height: 44px; }

@media (max-width: 760px) {
  .ak-r-next__cards { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .ak-r-duo { grid-template-columns: 1fr; }
  .ak-r-summary { font-size: 18px; }
  .ak-r-card__label { font-size: 23px; }
  .ak-r-hero__value { font-size: 52px; }
  .ak-r-file { flex-wrap: wrap; }
  .ak-r-file__pills { width: 100%; justify-content: flex-start; }
  .ak-r-stack__legend { gap: 6px 10px; }
}