/* ── arc-base ── */
/* ══════════════════════════════════════════════════════════════════════
   ARC — socle commun (port vanilla des composants uiarc.dev).
   Les jetons --arc-* dérivent des jetons de la page (--ink, --line, --accent…)
   avec une valeur de repli : le socle fonctionne même hors de styles.css.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --arc-fg: var(--ink, #eef0f6);
  --arc-fg-2: var(--ink-2, rgba(238, 240, 246, .6));
  --arc-fg-3: var(--ink-3, rgba(238, 240, 246, .36));
  --arc-line: var(--line, rgba(255, 255, 255, .08));
  --arc-line-2: var(--line-2, rgba(255, 255, 255, .15));
  --arc-surf: var(--surf, #0e1626);
  --arc-surf-2: var(--surf-2, #131c2f);
  --arc-muted: rgba(255, 255, 255, .045);
  --arc-accent: var(--accent, #7c75ff);
  --arc-accent-dim: var(--accent-dim, rgba(124, 117, 255, .14));
  --arc-accent-line: var(--accent-line, rgba(124, 117, 255, .3));
  --arc-ok: var(--ok, #2fd39b);
  --arc-bad: var(--bad, #ef6b63);
  --arc-font: var(--f-body, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);

  /* Courbes et durées de uiarc (foundation.css). */
  --arc-ease-enter: cubic-bezier(.16, 1, .3, 1);
  --arc-ease-standard: cubic-bezier(.22, 1, .36, 1);
  --arc-ease-exit: cubic-bezier(.7, 0, .84, 0);
  --arc-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --arc-dur-instant: 120ms;
  --arc-dur-fast: 160ms;
  --arc-dur-standard: 240ms;
  --arc-dur-considered: 480ms;
  --arc-dur-spring: 580ms;
  /* Ressort à léger rebond (bounce .15). Repli : un Bézier qui dépasse à peine. */
  --arc-spring: cubic-bezier(.34, 1.2, .5, 1);
  /* Ressort critique (aucun dépassement) : panneaux et hauteurs. */
  --arc-spring-smooth: cubic-bezier(.22, 1, .36, 1);
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --arc-spring: linear(0, 0.0258, 0.09, 0.1763, 0.2732, 0.3724, 0.4683, 0.5573, 0.6376, 0.7082, 0.7689, 0.8202, 0.8628, 0.8976, 0.9256, 0.9476, 0.9648, 0.9778, 0.9875, 0.9945, 0.9994, 1.0026, 1.0047, 1.0058, 1.0062, 1.0062, 1.0059, 1.0055, 1.0049, 1.0043, 1.0036, 1.0031, 1.0025, 1.002, 1.0016, 1.0013, 1);
  }
}

.arc-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Chiffres qui roulent (odomètre) : utilisé par le curseur. */
.arc-roll { display: inline-flex; align-items: center; white-space: nowrap; font-variant-numeric: tabular-nums; }
.arc-roll__col {
  --feather: .2em;
  position: relative; display: inline-block; overflow-x: visible; overflow-y: clip;
  margin-block: calc(var(--feather) * -1); padding-block: var(--feather);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--feather) * 1.5), #000 calc(100% - var(--feather) * 1.5), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--feather) * 1.5), #000 calc(100% - var(--feather) * 1.5), transparent);
}
.arc-roll__sizer { visibility: hidden; }
.arc-roll__glyph { position: absolute; inset: var(--feather) 0; text-align: center; will-change: transform, opacity; }
.arc-roll__sym { display: inline-block; overflow-x: clip; white-space: pre; }

/* ── animated-counter ── */
/* arc/animated-counter — port vanilla de uiarc « animated-counter » (compteur à rouleaux).
   Sans JS : le texte du HTML (valeur finale) reste affiché tel quel.
   Typo, couleur, graisse, interlignage : hérités du parent (.fact b, etc.). */
.arc-counter { position: relative; display: inline-flex; align-items: flex-start; white-space: nowrap; vertical-align: baseline; font: inherit; color: inherit; letter-spacing: inherit; line-height: inherit; font-variant-numeric: tabular-nums; }
/* Texte complet pour lecteurs d'écran / copier-coller ; la version visuelle est aria-hidden. */
.arc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.arc-counter-v { display: inline-flex; align-items: flex-start; white-space: nowrap; user-select: none; -webkit-user-select: none; }
/* Chaque chiffre est un rouleau rogné ; la fenêtre dépasse un peu de la ligne et s'estompe sur les bords. */
.arc-col { --feather: .16em; position: relative; display: inline-block; overflow: hidden; margin-block: calc(var(--feather) * -1); padding-block: var(--feather); -webkit-mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--feather) * 1.5), #000 calc(100% - var(--feather) * 1.5), transparent); mask-image: linear-gradient(to bottom, transparent, #000 calc(var(--feather) * 1.5), #000 calc(100% - var(--feather) * 1.5), transparent); }
.arc-col-s { visibility: hidden; }
.arc-col-g { position: absolute; inset: var(--feather) 0; text-align: center; will-change: transform; }
.arc-sym { display: inline-block; overflow-x: clip; }
/* Couleur du suffixe/préfixe réglable : [data-arc="counter"] { --arc-counter-affix: var(--accent); } */
.arc-sym.arc-affix { color: var(--arc-counter-affix, inherit); }

/* ── text-shimmer ── */
/* arc/text-shimmer — port CSS pur de uiarc « text-shimmer » : un balayage de lumière sur une ligne de statut courte.
   Usage : <span class="arc-shimmer">Réponse en 24 h</span>. À poser sur un span INTERNE (le fond du conteneur ne doit pas être clippé au texte).
   Bande = 2,2 em de demi-largeur, profil en cloche, balayage 1,8 s puis pause de 32 % (cycle 2,376 s), départ après .12 s.
   Réglages : --arc-shimmer-highlight, --arc-shimmer-base, --arc-shimmer-band, --arc-shimmer-duration. */
.arc-shimmer {
  --arc-sh-hi: var(--arc-shimmer-highlight, color-mix(in oklab, currentColor 30%, #fff));
  --arc-sh-base: var(--arc-shimmer-base, color-mix(in oklab, currentColor 62%, transparent));
  --arc-sh-b: var(--arc-shimmer-band, 2.2em);
  --arc-sh-d: var(--arc-shimmer-duration, 2.376s);
  display: inline-block; max-width: 100%;
  /* Sans color-mix / en contraste forcé : couleur pleine (voir @supports plus bas). */
  color: inherit;
}
@supports (color: color-mix(in oklab, red, blue)) {
  .arc-shimmer {
    background-image: linear-gradient(90deg,
      var(--arc-sh-base),
      var(--arc-sh-base) calc(50% - var(--arc-sh-b)),
      color-mix(in oklab, var(--arc-sh-hi) 50%, var(--arc-sh-base)) calc(50% - var(--arc-sh-b) * .5),
      color-mix(in oklab, var(--arc-sh-hi) 90%, var(--arc-sh-base)) calc(50% - var(--arc-sh-b) * .2),
      var(--arc-sh-hi) 50%,
      color-mix(in oklab, var(--arc-sh-hi) 90%, var(--arc-sh-base)) calc(50% + var(--arc-sh-b) * .2),
      color-mix(in oklab, var(--arc-sh-hi) 50%, var(--arc-sh-base)) calc(50% + var(--arc-sh-b) * .5),
      var(--arc-sh-base) calc(50% + var(--arc-sh-b)),
      var(--arc-sh-base));
    /* Image = 2 × la largeur du texte + 4 bandes : la bande entre et sort entièrement du texte. */
    background-size: calc(200% + var(--arc-sh-b) * 4) 100%;
    background-repeat: no-repeat;
    background-position: 100% 0;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: arc-shimmer-sweep var(--arc-sh-d) linear .12s infinite;
  }
  .arc-shimmer.arc-paused, .arc-page-hidden .arc-shimmer { animation-play-state: paused; }
  .arc-shimmer::selection { -webkit-text-fill-color: currentColor; }
}
@keyframes arc-shimmer-sweep { 0% { background-position: 100% 0; } 75.76% { background-position: 0% 0; } 100% { background-position: 0% 0; } }
@media (prefers-reduced-motion: reduce) {
  .arc-shimmer { animation: none !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
}
@media (forced-colors: active) {
  .arc-shimmer { animation: none !important; background: none !important; -webkit-text-fill-color: currentColor !important; }
}

/* ── in-view-title ── */
/* arc/in-view-title — port vanilla de uiarc « in-view-title » + « text-reveal » : révélation mot par mot à l'entrée dans le viewport.
   Le titre reste du texte normal dans le HTML ; le JS découpe en mots (en gardant <br>, <em>, couleurs). */
.arc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.arc-tw { display: inline-block; }
.arc-tt-vis { display: inline; }
/* Variante « word » / « reveal » : chaque mot sort d'un cache. Marges négatives = place pour les jambages et le flou sans toucher à la mise en page. */
.arc-tclip { display: inline-block; vertical-align: top; overflow: hidden; padding: .08em .14em .2em; margin: -.08em -.14em -.2em; }
.arc-tclip-m { display: inline-block; vertical-align: top; padding: .1em .16em .24em; margin: -.1em -.16em -.24em; -webkit-mask-image: linear-gradient(#000 calc(100% - .18em), transparent); mask-image: linear-gradient(#000 calc(100% - .18em), transparent); }
/* État de départ (retiré à l'entrée dans le viewport, puis la WAAPI prend le relais avec fill: backwards). */
.arc-tt-pending[data-arc-v="blur"] .arc-tw { opacity: 0; transform: translateY(.2em); filter: blur(8px); }
.arc-tt-pending[data-arc-v="word"] .arc-tw { opacity: 0; transform: translateY(.9em); }
.arc-tt-pending[data-arc-v="reveal"] .arc-tw { opacity: 0; transform: translateY(.62em); filter: blur(8px); }
@media (prefers-reduced-motion: reduce) {
  .arc-tt-pending .arc-tw { opacity: 1 !important; transform: none !important; filter: none !important; }
}

/* ── text-morph ── */
/* arc/text-morph — port vanilla de uiarc « text-morph ». Sans JS : le premier mot reste affiché tel quel.
   Le cadre porte la largeur animée ; son masque révèle les nouvelles lettres par un bord doux quand il s'élargit.
   Marges négatives + padding = place pour le flou et les jambages sans changer la mise en page. */
.arc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.arc-morph-frame { position: relative; display: inline-block; box-sizing: content-box; padding: .5em .5em .5em .2em; margin: -.5em -.5em -.5em -.2em; text-align: start; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - .5em), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - .5em), transparent); }
.arc-morph-track { position: relative; display: inline-block; white-space: nowrap; }
.arc-morph-g { display: inline-block; white-space: pre; transform-origin: 50% 60%; }
.arc-morph-g.arc-out { position: absolute; pointer-events: none; margin: 0; }

/* ── line-chart ── */
/* ══════════════════════════════════════════════════════════════════════
   arc/line-chart — port vanilla du line-chart uiarc.
   Variante sombre par defaut ; `arc-light` (sur le composant ou un ancetre)
   donne la variante claire pour la maquette a fond blanc.
   ══════════════════════════════════════════════════════════════════════ */
.arc-lc {
  --arc-accent: var(--accent, #7c75ff);
  --arc-ok: var(--ok, #2fd39b);
  --arc-bad: var(--bad, #ef6b63);
  --arc-fg: var(--ink, #eef0f6);
  --arc-text2: var(--ink-2, rgba(238, 240, 246, .6));
  --arc-muted: var(--ink-3, rgba(238, 240, 246, .36));
  --arc-border: var(--line, rgba(255, 255, 255, .08));
  --arc-border-strong: var(--line-2, rgba(255, 255, 255, .15));
  --arc-surface: var(--surf, #0e1626);
  --arc-raised: var(--surf-2, #131c2f);
  --arc-pill: rgba(255, 255, 255, .09);
  --arc-shadow: 0 20px 48px rgba(0, 0, 0, .34), 0 3px 10px rgba(0, 0, 0, .2);
  --arc-ease: cubic-bezier(.22, 1, .36, 1);
  --arc-enter: cubic-bezier(.16, 1, .3, 1);
  --arc-spring: linear(0, 0.0258, 0.09, 0.1763, 0.2732, 0.3724, 0.4683, 0.5573, 0.6376, 0.7082, 0.7689, 0.8202, 0.8628, 0.8976, 0.9256, 0.9476, 0.9648, 0.9778, 0.9875, 0.9945, 0.9994, 1.0026, 1.0047, 1.0058, 1.0062, 1.0062, 1.0059, 1.0055, 1.0049, 1.0043, 1.0036, 1.0031, 1.0025, 1.002, 1.0016, 1.0013, 1);
}
.arc-lc.arc-light, .arc-light .arc-lc {
  --arc-accent: var(--accent-2, #635bff);
  --arc-ok: #0e9f6e;
  --arc-bad: #d64545;
  --arc-fg: var(--p-text, #14141a);
  --arc-text2: var(--p-text-2, #62626e);
  --arc-muted: var(--p-text-3, #9b9ba6);
  --arc-border: var(--p-line, #e7e7ec);
  --arc-border-strong: #d2d2da;
  --arc-surface: var(--paper, #fff);
  --arc-raised: #fff;
  --arc-pill: #fff;
  --arc-shadow: 0 20px 48px rgba(0, 0, 0, .105), 0 3px 10px rgba(0, 0, 0, .045);
}

.arc-lc { position: relative; display: grid; min-width: 0; gap: 14px; margin: 0; color: var(--arc-fg); font-family: var(--f-body, "Inter", system-ui, sans-serif); letter-spacing: -.005em; text-align: left; }
.arc-lc *, .arc-lc *::before, .arc-lc *::after { box-sizing: border-box; }

/* En-tete : total, variation, selecteur de plage */
.arc-lc-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; min-width: 0; }
.arc-lc-readout { display: grid; gap: 5px; min-width: 0; }
.arc-lc-caption { color: var(--arc-text2); font-size: 12.5px; line-height: 1.3; }
.arc-lc-figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-width: 0; }
.arc-lc-total { color: var(--arc-fg); font-size: 28px; font-weight: 600; letter-spacing: -.028em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arc-lc-badge { position: relative; display: inline-block; min-width: 1ch; font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; white-space: nowrap; color: var(--arc-ok); transition: color 240ms var(--arc-ease); }
.arc-lc-badge[data-tone="down"] { color: var(--arc-bad); }
.arc-lc-badge[data-tone="point"] { color: var(--arc-text2); font-weight: 500; }
.arc-lc-vs { color: var(--arc-muted); font-size: 12px; line-height: 1.3; white-space: nowrap; }
.arc-lc .arc-swap { display: inline-block; white-space: pre; }
.arc-lc .arc-swap[data-leaving] { position: absolute; top: 0; left: 0; pointer-events: none; }

/* Selecteur de plage : pastille qui glisse (ressort) */
.arc-lc-ranges { position: relative; display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: color-mix(in oklab, var(--arc-fg) 6%, transparent); }
.arc-lc-pill { position: absolute; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 999px; background: var(--arc-pill); box-shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 0 0 1px color-mix(in oklab, var(--arc-fg) 6%, transparent); transition: transform 580ms var(--arc-spring), width 580ms var(--arc-spring); pointer-events: none; }
.arc-lc-range { position: relative; min-width: 44px; height: 28px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent; color: var(--arc-text2); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 500; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent; transition: color 160ms var(--arc-ease); }
.arc-lc-range[aria-checked="true"] { color: var(--arc-fg); }
@media (hover: hover) and (pointer: fine) { .arc-lc-range:hover { color: var(--arc-fg); } }
.arc-lc-range:focus-visible, .arc-lc-toggle:focus-visible, .arc-lc-plot:focus-visible { outline: 2px solid var(--arc-accent); outline-offset: 2px; }

/* Legende cliquable */
.arc-lc-legend { display: flex; flex-wrap: wrap; gap: 2px 4px; min-width: 0; margin-inline: -8px; }
.arc-lc-toggle { display: inline-flex; min-height: 32px; align-items: center; gap: 8px; padding: 0 10px 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--arc-text2); cursor: pointer; font: inherit; font-size: 13px; line-height: 1.5; -webkit-tap-highlight-color: transparent; transition: color 160ms var(--arc-ease), background-color 160ms var(--arc-ease), transform 120ms var(--arc-ease); }
.arc-lc-toggle:active { transform: scale(.97); }
.arc-lc-toggle[aria-pressed="false"] { color: var(--arc-muted); }
.arc-lc-toggle-label { white-space: nowrap; transition: opacity 160ms var(--arc-ease); }
.arc-lc-toggle[aria-pressed="false"] .arc-lc-toggle-label { opacity: .72; text-decoration: line-through; text-decoration-color: color-mix(in oklab, currentColor 55%, transparent); }
.arc-lc-swatch { position: relative; width: 14px; height: 10px; flex: none; }
.arc-lc-swatch::before { position: absolute; top: 50%; left: 0; width: 100%; height: 2.5px; border-radius: 2px; background: var(--arc-series); content: ""; transform: translateY(-50%) scaleX(1); transform-origin: left; transition: transform 240ms var(--arc-spring), opacity 160ms var(--arc-ease); }
.arc-lc-swatch[data-dashed]::before { background: repeating-linear-gradient(to right, var(--arc-series) 0 4px, transparent 4px 7px); }
.arc-lc-toggle[aria-pressed="false"] .arc-lc-swatch::before { opacity: .45; transform: translateY(-50%) scaleX(.35); }
@media (hover: hover) and (pointer: fine) { .arc-lc-toggle:hover { background: color-mix(in oklab, var(--arc-fg) 5%, transparent); color: var(--arc-fg); } }

/* Trace, axe des valeurs a droite, axe des dates dessous */
.arc-lc-chart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto 26px; min-width: 0; }
.arc-lc-plot { position: relative; grid-area: 1 / 1; min-width: 0; height: var(--arc-lc-h, 220px); outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.arc-lc-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.arc-lc-grid { stroke: var(--arc-border); stroke-width: 1; shape-rendering: crispEdges; transition: opacity 240ms var(--arc-ease); }
.arc-lc-baseline { stroke: var(--arc-border-strong); stroke-width: 1; shape-rendering: crispEdges; }
.arc-lc-crosshair { stroke: var(--arc-border-strong); stroke-width: 1; shape-rendering: crispEdges; opacity: 0; transition: opacity 120ms var(--arc-ease); }
.arc-lc-chart[data-scrubbing] .arc-lc-crosshair { opacity: 1; }
.arc-lc-line { fill: none; stroke: var(--arc-series); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.arc-lc-line[data-dashed] { stroke-dasharray: 4 5; stroke-width: 1.75; }
.arc-lc-area { fill: color-mix(in oklab, var(--arc-series) 9%, transparent); stroke: none; }
.arc-lc-dot { fill: var(--arc-series); stroke: var(--arc-surface); stroke-width: 2; opacity: 0; transition: opacity 120ms var(--arc-ease); }
.arc-lc-chart[data-scrubbing] .arc-lc-dot:not([data-hidden]) { opacity: 1; }

.arc-lc-tooltip { position: absolute; top: 0; left: 0; z-index: 2; display: grid; min-width: 150px; max-width: min(230px, 100%); gap: 4px; padding: 10px 12px; border: 1px solid var(--arc-border); border-radius: 14px; background: var(--arc-raised); box-shadow: var(--arc-shadow); opacity: 0; pointer-events: none; scale: .96; will-change: transform; transition: opacity 160ms var(--arc-ease), scale 160ms var(--arc-ease); }
.arc-lc-chart[data-scrubbing] .arc-lc-tooltip { opacity: 1; scale: 1; }
.arc-lc-tip-title { margin: 0 0 2px; color: var(--arc-text2); font-size: 12px; line-height: 1.5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.arc-lc-tip-row { display: flex; min-width: 0; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 1.5; }
.arc-lc-tip-row[hidden] { display: none; }
.arc-lc-tip-swatch { width: 10px; height: 2.5px; flex: none; border-radius: 2px; background: var(--arc-series); }
.arc-lc-tip-swatch[data-dashed] { background: repeating-linear-gradient(to right, var(--arc-series) 0 3px, transparent 3px 5px); }
.arc-lc-tip-name { min-width: 0; flex: 1; overflow: hidden; color: var(--arc-text2); text-overflow: ellipsis; white-space: nowrap; }
.arc-lc-tip-value { flex: none; margin-left: 8px; color: var(--arc-fg); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.arc-lc-message { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; color: var(--arc-muted); font-size: 13px; pointer-events: none; transition: opacity 160ms var(--arc-ease); }
.arc-lc-message[hidden] { display: none; }

.arc-lc-gutter { position: relative; grid-area: 1 / 2; min-width: 0; }
.arc-lc-tick { position: absolute; top: 0; left: 10px; display: block; height: 0; white-space: nowrap; pointer-events: none; transition: opacity 240ms var(--arc-ease); }
.arc-lc-tick-text { display: block; transform: translateY(-50%); color: var(--arc-muted); font-size: 12px; line-height: 1; font-variant-numeric: tabular-nums; }
.arc-lc-axis { position: relative; grid-area: 2 / 1; min-width: 0; }
.arc-lc-axis-label { position: absolute; top: 8px; color: var(--arc-muted); font-size: 12px; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; transition: opacity 240ms var(--arc-ease); }

.arc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 480px) {
  .arc-lc-plot { height: min(var(--arc-lc-h, 220px), 184px); }
  .arc-lc-total { font-size: 24px; }
  .arc-lc-chart { grid-template-columns: minmax(0, 1fr) 38px; }
  .arc-lc-tick { left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-lc-pill, .arc-lc-toggle, .arc-lc-swatch::before, .arc-lc-tooltip, .arc-lc-crosshair, .arc-lc-dot, .arc-lc-grid, .arc-lc-tick, .arc-lc-axis-label, .arc-lc-badge { transition: none; }
}

/* ── slider ── */
/* ARC · slider — port de uiarc/slider. Piste, remplissage découpé au pouce,
   pouce à ressort, bulle avec chiffres qui roulent. Requiert arc-base.css. */
.arc-slider {
  --arc-thumb: 22px; --arc-track: 6px;
  display: grid; width: 100%; min-width: 0; color: var(--arc-fg);
  font-family: var(--arc-font); font-size: 14px; line-height: 1.5;
  user-select: none; -webkit-user-select: none;
}
.arc-slider__header { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 16px; }
.arc-slider__label { min-width: 0; font-weight: 500; }
.arc-slider__readout { display: inline-flex; flex: none; align-items: center; color: var(--arc-fg-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.arc-slider__body { display: grid; grid-template-columns: minmax(0, 1fr); }
/* Toute la rangée prend l'appui ; le défilement vertical reste libre au toucher. Hauteur 44 px = cible tactile. */
.arc-slider__control { position: relative; grid-area: 1 / 1; height: 44px; cursor: pointer; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.arc-slider__track {
  position: absolute; top: 50%; right: calc(var(--arc-thumb) / 2); left: calc(var(--arc-thumb) / 2);
  height: var(--arc-track); margin-top: calc(var(--arc-track) / -2);
  border-radius: 999px; background: rgba(255, 255, 255, .12);
}
.arc-slider__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--arc-accent); clip-path: inset(0 100% 0 0 round 999px); }
.arc-slider__tick { position: absolute; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 999px; background: rgba(255, 255, 255, .3); }
.arc-slider__fill .arc-slider__tick { background: rgba(255, 255, 255, .6); }
.arc-slider__thumbs { position: absolute; inset: 0 calc(var(--arc-thumb) / 2); container-type: inline-size; pointer-events: none; }
.arc-slider__layer { position: absolute; inset: 0; will-change: transform; }
.arc-slider__thumb {
  position: absolute; top: 50%; right: 0; box-sizing: border-box; width: var(--arc-thumb); height: var(--arc-thumb);
  translate: 50% -50%; border: 0; border-radius: 999px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .25);
  pointer-events: auto; cursor: grab; outline: none;
  transition: box-shadow var(--arc-dur-fast) var(--arc-ease-standard), scale var(--arc-dur-spring) var(--arc-spring);
}
.arc-slider__thumb::after { content: ""; position: absolute; inset: -11px; border-radius: inherit; }
.arc-slider__thumb[data-active] { scale: 1.16; }
/* Anneau de focus clavier : critère d'accessibilité (le focus souris reste silencieux). */
.arc-slider__thumb:focus-visible { box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07), 0 1px 2px rgba(0, 0, 0, .32), 0 0 0 3px var(--arc-surf, #0e1626), 0 0 0 5px var(--arc-accent); }
.arc-slider[data-dragging], .arc-slider[data-dragging] .arc-slider__control, .arc-slider[data-dragging] .arc-slider__thumb { cursor: grabbing; }

/* La bulle se centre sur le pouce jusqu'au bord du composant, puis s'y arrête. --at = position du pouce en % de la piste. */
.arc-slider__anchor {
  --edge: calc(var(--arc-thumb) / 2); --x: calc(var(--at, 0) * 1cqw);
  position: absolute; right: 0; bottom: calc(50% + var(--arc-thumb) / 2 + 8px); display: flex;
  translate: clamp(calc(100% - var(--edge) - var(--x)), 50%, calc(100cqw + var(--edge) - var(--x))) 0;
  pointer-events: none;
}
@media (pointer: coarse) { .arc-slider__anchor { bottom: calc(50% + var(--arc-thumb) / 2 + 18px); } }
.arc-slider__bubble {
  display: inline-flex; min-height: 28px; align-items: center; padding: 0 12px;
  border-radius: 999px; background: var(--arc-fg); color: #0b1020;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .45); font-size: 14px; font-weight: 550; white-space: nowrap;
  transform-origin: 50% 100%;
  opacity: 0; transform: translateY(6px) scale(.6); filter: blur(2px); visibility: hidden;
  transition: opacity var(--arc-dur-instant) var(--arc-ease-exit), transform var(--arc-dur-instant) var(--arc-ease-exit), filter var(--arc-dur-instant) var(--arc-ease-exit), visibility 0s linear var(--arc-dur-instant);
}
.arc-slider__bubble[data-show] {
  opacity: 1; transform: none; filter: none; visibility: visible;
  transition: opacity var(--arc-dur-fast) var(--arc-ease-enter), transform .4s var(--arc-spring), filter var(--arc-dur-fast) var(--arc-ease-enter), visibility 0s;
}

/* Repères : chaque étiquette tient sur son point ; aux extrémités, le bord extérieur reste dans le composant. */
.arc-slider__marks { position: relative; grid-area: 2 / 1; height: 20px; margin: -4px calc(var(--arc-thumb) / 2) 0; color: var(--arc-fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.arc-slider__mark {
  position: absolute; top: 0; translate: -50% 0; padding: 0; border: 0; background: none; font: inherit; color: inherit;
  white-space: nowrap; cursor: pointer; transition: color var(--arc-dur-fast) var(--arc-ease-standard);
}
.arc-slider__mark::before { content: ""; position: absolute; inset: -14px -6px -6px; } /* zone de toucher élargie */
.arc-slider__mark[data-edge="start"] { translate: max(-50%, calc(var(--arc-thumb) / -2)) 0; }
.arc-slider__mark[data-edge="end"] { translate: min(-50%, calc(-100% + var(--arc-thumb) / 2)) 0; }
.arc-slider__mark[data-on] { color: var(--arc-fg-2); }
@media (hover: hover) and (pointer: fine) { .arc-slider__mark:hover { color: var(--arc-fg); } }
.arc-slider__mark:focus-visible { outline: 2px solid var(--arc-accent); outline-offset: 2px; border-radius: 4px; }

.arc-slider[data-disabled] { opacity: .5; }
.arc-slider[data-disabled] .arc-slider__control, .arc-slider[data-disabled] .arc-slider__thumb { cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
  .arc-slider__thumb, .arc-slider__mark, .arc-slider__bubble { transition: none !important; }
}

/* ── donut-chart ── */
/* ARC · donut-chart — port de uiarc/donut-chart. Requiert arc-base.css. */
.arc-donut { container-type: inline-size; display: block; min-width: 0; margin: 0; color: var(--arc-fg); font-family: var(--arc-font); }
.arc-donut__layout { display: grid; min-width: 0; gap: 20px; }
.arc-donut__layout > * { min-width: 0; }
/* L'anneau flanque la légende quand la place existe, sinon elle passe dessous. */
@container (min-width: 460px) {
  .arc-donut[data-legend] .arc-donut__layout { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; }
}

.arc-donut__ring { position: relative; max-width: 100%; aspect-ratio: 1; justify-self: center; container-type: inline-size; -webkit-tap-highlight-color: transparent; }
.arc-donut__ring:focus-visible { outline: 2px solid var(--arc-accent); outline-offset: 4px; border-radius: 50%; }
.arc-donut__svg { display: block; width: 100%; height: 100%; overflow: visible; cursor: default; }
.arc-donut__svg[data-hovering] { cursor: pointer; }
/* La piste n'apparaît qu'avant le premier balayage : les interstices restent à la couleur de la page. */
.arc-donut__track { fill: none; stroke: var(--arc-muted); transition: opacity var(--arc-dur-considered) var(--arc-ease-standard); opacity: 0; }
.arc-donut__track[data-idle] { opacity: 1; }
/* Les formes sont écrites à chaque image par le script ; seules la couleur et l'atténuation se font en CSS. */
.arc-donut__seg { fill: var(--slice); shape-rendering: geometricPrecision; transition: fill var(--arc-dur-standard) var(--arc-ease-standard), opacity var(--arc-dur-standard) var(--arc-ease-standard); }
.arc-donut__seg[data-dim] { opacity: .45; }

/* Le centre lit le segment actif, sinon le total. Toutes les lectures partagent une cellule : un changement ne déplace rien. */
.arc-donut__center { position: absolute; top: 50%; left: 50%; display: grid; width: calc(var(--inner) - 16px); transform: translate(-50%, -50%); pointer-events: none; }
.arc-donut__readout {
  grid-area: 1 / 1; display: grid; min-width: 0; justify-items: center; gap: 2px; text-align: center;
  opacity: 0; transform: translateY(calc(var(--place, 1) * .45em));
  transition: opacity var(--arc-dur-fast) var(--arc-ease-standard), transform var(--arc-dur-fast) var(--arc-ease-standard);
}
.arc-donut__readout[data-place="0"] {
  opacity: 1; transform: none;
  transition: opacity var(--arc-dur-standard) var(--arc-ease-enter), transform var(--arc-dur-standard) var(--arc-ease-enter);
}
.arc-donut__clabel, .arc-donut__cmeta { display: block; width: 100%; overflow: hidden; font-size: clamp(10.5px, 5.6cqw, 12px); line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.arc-donut__clabel { color: var(--arc-fg-2); }
.arc-donut__cmeta { color: var(--arc-fg-3); font-variant-numeric: tabular-nums; }
.arc-donut__cvalue {
  display: block; max-width: 100%; overflow: hidden; font-size: clamp(14px, 9cqw, 24px); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.2; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap;
}

/* Légende : survoler une ligne allume le segment, et inversement. */
.arc-donut__legend { display: grid; margin: 0 0 -2px; padding: 0; list-style: none; }
.arc-donut__legend li { margin: 0 0 2px; }
.arc-donut__row {
  display: grid; width: 100%; min-height: 44px; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; column-gap: 10px;
  padding: 6px 10px; border: 0; border-radius: 12px; background: transparent; color: var(--arc-fg); cursor: pointer;
  font: inherit; font-size: 14px; line-height: 1.4; text-align: left; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--arc-dur-fast) var(--arc-ease-standard), transform var(--arc-dur-instant) var(--arc-ease-standard);
}
.arc-donut__row:active { transform: scale(.985); }
.arc-donut__row:focus-visible { outline: 2px solid var(--arc-accent); outline-offset: 1px; }
.arc-donut__row[data-active], .arc-donut__row[data-pinned] { background: rgba(255, 255, 255, .06); }
.arc-donut__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--slice); }
.arc-donut__text { display: grid; min-width: 0; }
.arc-donut__rlabel, .arc-donut__rsub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-donut__rsub { color: var(--arc-fg-3); font-size: 12px; font-variant-numeric: tabular-nums; }
.arc-donut__share { justify-self: end; color: var(--arc-fg); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .arc-donut__row:hover { background: rgba(255, 255, 255, .06); } }
@media (prefers-reduced-motion: reduce) {
  .arc-donut__seg, .arc-donut__track, .arc-donut__row, .arc-donut__readout { transition: none !important; }
}

/* ── calc ── */
/* ARC · calc — calculateur de commission (curseur + lignes + donut). Requiert arc-base.css, slider.css, donut-chart.css. */
.arc-calc { container-type: inline-size; color: var(--arc-fg); font-family: var(--arc-font); }
.arc-calc__grid { display: grid; gap: 28px; }
.arc-calc__grid > * { min-width: 0; }
.arc-calc__main { display: grid; gap: 6px; align-content: start; }
.arc-calc__chart { justify-self: center; width: 100%; max-width: 260px; }
@container (min-width: 540px) {
  .arc-calc__grid { grid-template-columns: minmax(0, 1fr) 200px; align-items: center; gap: 36px; }
  .arc-calc__chart { max-width: none; }
}

.arc-calc__lab { display: block; margin-bottom: 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--arc-fg-3); }
.arc-calc__slider { margin-top: 2px; }
.arc-calc__rows { margin-top: 22px; }
.arc-calc__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 15px 0; border-top: 1px solid var(--arc-line); font-size: 15px; }
.arc-calc__row > span { color: var(--arc-fg-2); }
.arc-calc__row > b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.arc-calc__row.is-fee > b { color: var(--arc-bad); }
.arc-calc__row.is-net { padding-top: 20px; }
.arc-calc__row.is-net > span { color: var(--arc-fg); font-weight: 600; font-size: 16.5px; }
.arc-calc__row.is-net > b { font-size: clamp(22px, 8cqw, 28px); font-weight: 650; letter-spacing: -.03em; color: var(--arc-ok); }
.arc-calc__note { margin: 16px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--arc-fg-3); }

/* ── accordion ── */
/* ARC · accordion — port de uiarc/accordion sur <details>/<summary> natifs.
   Lisible sans JS (chevron CSS, ouverture native) ; le JS ajoute la hauteur à ressort. */
.arc-accordion { width: 100%; border-top: 1px solid var(--arc-line); font-family: var(--arc-font); color: var(--arc-fg); }
.arc-accordion > details { border-bottom: 1px solid var(--arc-line); }
.arc-accordion summary {
  display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: 24px;
  padding: 24px 0; cursor: pointer; list-style: none; color: var(--arc-fg);
  font-size: 18px; font-weight: 550; letter-spacing: -.02em; line-height: 1.4;
  -webkit-tap-highlight-color: transparent; transition: color var(--arc-dur-fast) var(--arc-ease-standard);
}
.arc-accordion summary::-webkit-details-marker { display: none; }
.arc-accordion summary:focus-visible { outline: 2px solid var(--arc-accent); outline-offset: 2px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  .arc-accordion summary:hover { color: var(--arc-fg-2); }
  .arc-accordion summary:hover .arc-accordion__icon { color: var(--arc-fg); }
}
/* Chevron de repli (sans JS) : disparaît dès que l'icône SVG est injectée. */
.arc-accordion:not([data-enhanced]) summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-right: 4px;
  border: solid var(--arc-fg-3); border-width: 0 1.7px 1.7px 0; transform: rotate(45deg) translate(-2px, -2px);
}
.arc-accordion:not([data-enhanced]) details[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); border-color: var(--arc-accent); }
.arc-accordion__icon {
  display: inline-flex; flex: none; color: var(--arc-fg-3);
  transition: color var(--arc-dur-fast) var(--arc-ease-standard), transform .46s var(--arc-spring);
}
.arc-accordion__icon svg { width: 17px; height: 17px; display: block; }
.arc-accordion details[data-state="open"] .arc-accordion__icon { color: var(--arc-accent); transform: rotate(180deg); }

.arc-accordion__body { overflow: hidden; box-sizing: border-box; color: var(--arc-fg-2); font-size: 16px; line-height: 1.6; padding-bottom: 26px; }
.arc-accordion__body > * { margin: 0; max-width: 70ch; overflow-wrap: anywhere; }
.arc-accordion__body > * + * { margin-top: .8em; }
.arc-accordion[data-enhanced] .arc-accordion__body { padding-bottom: 0; }
.arc-accordion__inner { padding: 0 0 26px; will-change: transform; }
@media (max-width: 520px) {
  .arc-accordion summary { font-size: 16.5px; padding: 20px 0; gap: 16px; }
  .arc-accordion__body { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-accordion summary, .arc-accordion__icon { transition: none !important; }
}

/* ── segmented-control ── */
/* ARC · segmented-control — port de uiarc/segmented-control.
   Sans JS : le segment sélectionné (aria-selected / aria-pressed) porte son propre fond.
   Avec JS : un indicateur unique glisse sous les libellés. */
.arc-seg {
  --arc-seg-radius: 16px; --arc-fade-start: 0px; --arc-fade-end: 0px;
  position: relative; isolation: isolate; display: inline-flex; max-width: 100%; min-width: 0; flex-shrink: 1; gap: 2px;
  box-sizing: border-box; padding: 3px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  border: 1px solid var(--arc-line); border-radius: var(--arc-seg-radius); background: var(--arc-muted);
  font-family: var(--arc-font);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--arc-fade-start), #000 calc(100% - var(--arc-fade-end)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--arc-fade-start), #000 calc(100% - var(--arc-fade-end)), transparent);
}
.arc-seg::-webkit-scrollbar { display: none; }
.arc-seg[data-fade-start] { --arc-fade-start: 20px; }
.arc-seg[data-fade-end] { --arc-fade-end: 20px; }
/* Les segments ne changent ni d'échelle ni de graisse : seul l'indicateur voyage, la couleur le suit. */
.arc-seg > button {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin: 0; padding: 0 16px; border: 0; border-radius: calc(var(--arc-seg-radius) - 4px);
  background: transparent; color: var(--arc-fg-3); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap;
  cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color var(--arc-dur-fast) var(--arc-ease-standard);
}
.arc-seg > button svg { width: 16px; height: 16px; flex: none; }
.arc-seg > button svg.woo { width: 26px; height: 9px; }
@media (hover: hover) and (pointer: fine) { .arc-seg > button:hover { color: var(--arc-fg); } }
.arc-seg > button[aria-selected="true"], .arc-seg > button[aria-pressed="true"], .arc-seg > button:active { color: var(--arc-fg); }
.arc-seg > button:focus-visible { outline: 2px solid var(--arc-accent); outline-offset: -2px; }
.arc-seg:not([data-enhanced]) > button[aria-selected="true"], .arc-seg:not([data-enhanced]) > button[aria-pressed="true"] {
  background: var(--arc-surf-2); box-shadow: inset 0 0 0 1px var(--arc-line-2);
}
.arc-seg__ind {
  position: absolute; z-index: -1; left: 0; top: 0; width: 0; height: 0; box-sizing: border-box;
  border: 1px solid var(--arc-accent-line); border-radius: calc(var(--arc-seg-radius) - 4px);
  background: var(--arc-accent-dim); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); pointer-events: none; opacity: 0;
}
@media (max-width: 380px) { .arc-seg > button { padding: 0 12px; } }
@media (prefers-reduced-motion: reduce) { .arc-seg > button { transition: none !important; } }

/* ── stepper ── */
/* ARC · stepper — port de uiarc/stepper (horizontal, repli vertical par container query).
   Sans JS : liste numérotée lisible. Avec JS : marqueurs, connecteurs qui se remplissent, progression douce. */
.arc-stepper {
  --arc-marker: 28px; --arc-halo: 4px; --arc-step-gap: 80ms;
  container: arc-stepper / inline-size; min-width: 0; color: var(--arc-fg); font-family: var(--arc-font);
}
.arc-stepper__list { display: grid; grid-template-columns: repeat(var(--arc-steps, 3), minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: arcstep; }
.arc-step { position: relative; min-width: 0; counter-increment: arcstep; }

/* Repli sans JS : pastille numérotée au-dessus du titre. */
.arc-stepper:not([data-enhanced]) .arc-step::before {
  content: counter(arcstep); display: grid; place-items: center; width: var(--arc-marker); height: var(--arc-marker); margin-bottom: 12px;
  border-radius: 999px; box-shadow: inset 0 0 0 1px var(--arc-line-2); color: var(--arc-fg-2); font-size: 12px; font-weight: 600;
}
.arc-stepper:not([data-enhanced]) .arc-step > strong, .arc-step__title { display: block; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }

.arc-step__head {
  display: grid; width: fit-content; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 8px;
  background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; justify-items: start; row-gap: 12px;
  -webkit-tap-highlight-color: transparent;
}
.arc-step__head:focus-visible { outline: 2px solid var(--arc-accent); outline-offset: 6px; }

/* La bague sort de derrière le disque ; le disque porte la couleur d'état et le glyphe. */
.arc-step__marker { position: relative; display: grid; width: var(--arc-marker); height: var(--arc-marker); flex: none; place-items: center; }
.arc-step__ring {
  position: absolute; inset: calc(var(--arc-halo) * -1); border-radius: 999px; background: var(--arc-accent-dim);
  opacity: 0; transform: scale(.6);
  transition: opacity var(--arc-dur-fast) var(--arc-ease-exit), transform var(--arc-dur-fast) var(--arc-ease-exit);
}
.arc-step[data-status="current"] .arc-step__ring {
  opacity: 1; transform: none;
  transition: opacity var(--arc-dur-fast) var(--arc-ease-standard) var(--arc-rd, 0ms), transform .4s var(--arc-spring) var(--arc-rd, 0ms);
}
.arc-step__disc {
  position: relative; display: grid; width: 100%; height: 100%; place-items: center; border-radius: 999px;
  background: var(--arc-surf); box-shadow: inset 0 0 0 1px var(--arc-line-2); color: var(--arc-fg-3);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
  transition: background-color var(--arc-dur-standard) var(--arc-ease-standard), box-shadow var(--arc-dur-standard) var(--arc-ease-standard), color var(--arc-dur-standard) var(--arc-ease-standard), transform var(--arc-dur-spring) var(--arc-spring);
}
.arc-step__glyph { display: grid; grid-area: 1 / 1; place-items: center; transition: opacity var(--arc-dur-fast) var(--arc-ease-standard), transform .4s var(--arc-spring); }
.arc-step__chk { width: 14px; height: 14px; opacity: 0; transform: scale(.5); }
.arc-step__chk path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--arc-dur-standard) var(--arc-ease-enter) 0ms; }
.arc-step[data-status="current"] .arc-step__disc { box-shadow: inset 0 0 0 1.5px var(--arc-accent); color: var(--arc-fg); }
.arc-step[data-status="complete"] .arc-step__disc { background: var(--arc-accent); box-shadow: inset 0 0 0 1px var(--arc-accent); color: #fff; }
.arc-step[data-win] .arc-step__disc { background: var(--arc-ok); box-shadow: inset 0 0 0 1px var(--arc-ok); color: #06231a; }
.arc-step[data-status="complete"] .arc-step__num { opacity: 0; transform: scale(.5); }
.arc-step[data-status="complete"] .arc-step__chk { opacity: 1; transform: none; transition-delay: var(--arc-d, 0ms); }
.arc-step[data-status="complete"] .arc-step__chk path { stroke-dashoffset: 0; transition-delay: calc(var(--arc-d, 0ms) + 40ms); }

/* Le rail reste en place ; seul le remplissage s'étire dessus, depuis l'étape qui vient de se terminer. */
.arc-step__conn { position: absolute; overflow: hidden; border-radius: 999px; background: var(--arc-line-2); pointer-events: none;
  top: calc(var(--arc-marker) / 2 - 1px); height: 2px; left: calc(var(--arc-marker) + var(--arc-halo) + 4px); right: calc(var(--arc-halo) + 4px); }
.arc-step__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--arc-accent); transform-origin: left center; transform: scaleX(0); transition: transform .5s var(--arc-spring-smooth) var(--arc-d, 0ms), background-color var(--arc-dur-standard) var(--arc-ease-standard); }
.arc-step[data-fill] .arc-step__fill { transform: scaleX(1); }
.arc-step[data-fill][data-last-fill] .arc-step__fill { background: var(--arc-ok); }

.arc-step__label { display: block; color: var(--arc-fg-3); font-size: 16px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; overflow-wrap: break-word; transition: color var(--arc-dur-standard) var(--arc-ease-standard); }
.arc-step[data-status="complete"] .arc-step__label, .arc-step[data-status="current"] .arc-step__label { color: var(--arc-fg); }
.arc-step__body { margin-top: 7px; padding-right: 20px; font-size: 14px; line-height: 1.5; color: var(--arc-fg-3); transition: color var(--arc-dur-standard) var(--arc-ease-standard); }
.arc-step__body p { margin: 0; }
.arc-step[data-status="complete"] .arc-step__body, .arc-step[data-status="current"] .arc-step__body { color: var(--arc-fg-2); }
@media (hover: hover) and (pointer: fine) {
  .arc-step__head:hover .arc-step__label { color: var(--arc-fg); }
  .arc-step[data-status="complete"] .arc-step__head:hover .arc-step__disc { background: var(--arc-accent); filter: brightness(1.12); }
}
.arc-step__head:active .arc-step__disc { transform: scale(.92); }

/* Repli vertical quand la place manque : marqueur à gauche, texte aligné dessous. */
@container arc-stepper (max-width: 34rem) {
  .arc-stepper__list { grid-template-columns: minmax(0, 1fr); }
  .arc-step { padding-bottom: 26px; }
  .arc-step:last-child { padding-bottom: 0; }
  .arc-step__head { grid-template-columns: var(--arc-marker) minmax(0, 1fr); column-gap: 14px; align-items: center; row-gap: 0; width: 100%; min-height: 44px; }
  .arc-step__body { margin-top: 2px; padding: 0 0 0 calc(var(--arc-marker) + 14px); }
  .arc-step__conn { top: calc(var(--arc-marker) + var(--arc-halo) + 8px); bottom: calc(var(--arc-halo) + 4px); height: auto; width: 2px; left: calc(var(--arc-marker) / 2 - 1px); right: auto; }
  .arc-step__fill { transform-origin: center top; transform: scaleY(0); }
  .arc-step[data-fill] .arc-step__fill { transform: scaleY(1); }
  .arc-stepper:not([data-enhanced]) .arc-step::before { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-step__ring, .arc-step__disc, .arc-step__glyph, .arc-step__chk path, .arc-step__fill, .arc-step__label, .arc-step__body { transition: none !important; }
}