/* ==========================================================
   Animation « Outil DORA : registre et incidents »
   Livrée le 2026-10-07 ; retokenisée le 2026-11-07 sur la direction F « Ardoise ».
   Bloc volontairement sombre dans les deux thèmes du site (jetons ardoise).
   Accent bleu = remise du registre ; ambre = incidents.
   ========================================================== */

.dr {
  --dr-bg: var(--s-deep, #101829);
  --dr-panel: var(--slate, #182338);
  --dr-raise: var(--s-raise, #1F2C45);
  --dr-ink: var(--s-ink, #EEF2F8);
  --dr-ink-2: var(--s-muted, #AAB7CC);
  --dr-line: var(--s-line, #2B3850);
  --dr-blue: var(--s-accent, #8FB6F0);
  --dr-amber: #E9B65A;
  --dr-ok: #5CC894;
  --dr-warn: #E9B65A;
  --dr-accent: var(--dr-blue);
  --dr-display: var(--font-display, system-ui, sans-serif);
  --dr-body: var(--font-body, system-ui, sans-serif);
  --dr-mono: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);

  position: relative;
  color: var(--dr-ink);
  font-family: var(--dr-body);
  background-color: var(--dr-bg);
  background-image:
    linear-gradient(var(--dr-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--dr-line) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  border-radius: 0;
  padding: clamp(16px, 3vw, 32px);
  overflow: hidden;
}
.dr::before { /* voile pour adoucir la grille */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, transparent 0%, var(--dr-bg) 75%);
  opacity: .85;
}
.dr > * { position: relative; }
.dr *, .dr *::before, .dr *::after { box-sizing: border-box; }
.dr-mode--inc { --dr-accent: var(--dr-amber); }

/* ---------- En-tête ---------- */
.dr__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; }
.dr__head h4 { font-family: var(--dr-display); font-weight: 500; font-size: clamp(1.2rem, 2.2vw, 1.5rem); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 6px; }
.dr__head p { margin: 0; color: var(--dr-ink-2); max-width: 56ch; line-height: 1.5; }

/* ---------- Bascule des deux processus ---------- */
.dr__switch {
  display: inline-flex; padding: 3px; gap: 3px;
  border: 1px solid var(--dr-line); border-radius: 6px; background: var(--dr-panel);
}
.dr__switch button {
  font: inherit; font-size: .9rem; font-weight: 500; cursor: pointer;
  color: var(--dr-ink-2); background: transparent; border: 0; border-radius: 4px; padding: 7px 12px;
}
.dr__switch button:hover { color: var(--dr-ink); }
.dr__switch button[aria-selected="true"] { color: var(--dr-bg); background: var(--dr-blue); }
.dr__switch button[aria-selected="true"][data-tone="inc"] { background: var(--dr-amber); }
.dr button:focus-visible { outline: 2px solid var(--dr-ink); outline-offset: 2px; }

.dr-mode { margin-top: 24px; }
.dr-mode[hidden] { display: none; }
.dr:not(.is-js) .dr-mode + .dr-mode { margin-top: 40px; padding-top: 32px; border-top: 1px dashed var(--dr-line); }

/* ---------- Piste d'étapes ---------- */
.dr-track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), 1fr); }
.dr-track__rail, .dr-track__fill {
  position: absolute; top: 15px; height: 2px;
  left: calc(50% / var(--n)); right: calc(50% / var(--n));
  background: var(--dr-line);
}
.dr-track__fill {
  right: auto; width: calc((100% - 100% / var(--n)) * var(--p, 1));
  background: var(--dr-accent); transition: width .6s ease;
}
.dr-node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; }
.dr-node button {
  display: grid; justify-items: center; gap: 8px; width: 100%;
  font: inherit; color: var(--dr-ink-2); background: none; border: 0; cursor: pointer; padding: 0 4px;
}
.dr-node__sq {
  width: 32px; height: 32px; display: grid; place-items: center;
  font-family: var(--dr-mono); font-size: .75rem;
  background: var(--dr-bg); border: 1.5px solid var(--dr-line); border-radius: 4px;
  transition: border-color .3s, background-color .3s, color .3s;
}
.dr-node__lb { font-size: .82rem; line-height: 1.25; hyphens: auto; }
.dr-node.is-done .dr-node__sq { border-color: var(--dr-accent); color: var(--dr-accent); }
.dr-node.is-cur .dr-node__sq { background: var(--dr-accent); border-color: var(--dr-accent); color: var(--dr-bg); font-weight: 500; }
.dr-node.is-cur .dr-node__lb { color: var(--dr-ink); font-weight: 500; }
.dr.is-animated:not(.is-paused) .dr-node.is-cur .dr-node__sq { animation: dr-glow 1.8s ease-in-out infinite; }

/* ---------- Vue : artefact + journal ---------- */
.dr-view { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 760px) { .dr-view { grid-template-columns: 1.35fr 1fr; } }

.dr-stage {
  position: relative; min-height: 280px; padding: 20px;
  background: var(--dr-panel); border: 1px solid var(--dr-line); border-radius: 6px;
  display: grid; place-items: center;
}
.dr-stage__note { position: absolute; top: 8px; right: 12px; font-size: .72rem; color: var(--dr-ink-2); }
.dr-art { width: 100%; }
.dr.is-js .dr-art { display: none; }
.dr.is-js .dr-art.is-on { display: block; }
.dr:not(.is-js) .dr-art:not(.is-last) { display: none; }

.dr-log {
  margin: 0; padding: 14px 14px 14px 16px; list-style: none;
  background: var(--dr-bg); border: 1px solid var(--dr-line); border-left: 3px solid var(--dr-accent); border-radius: 6px;
  font-family: var(--dr-mono); font-size: .78rem; line-height: 1.7; color: var(--dr-ink-2);
  min-height: 140px; align-self: stretch;
}
.dr-log__title { color: var(--dr-ink); margin-bottom: 6px; }
.dr-log li[hidden] { display: none; }
.dr-log li::before { content: "› "; color: var(--dr-accent); }
.dr-log li.dr-log__title::before { content: none; }
.dr-log .ok { color: var(--dr-ok); }
.dr-log .warn { color: var(--dr-warn); }
.dr.is-animated .dr-log li.is-fresh { animation: dr-in .4s ease both; animation-delay: calc(var(--d, 0) * 1s); }

.dr-cap { margin: 14px 0 0; color: var(--dr-ink-2); font-size: .95rem; line-height: 1.5; max-width: 75ch; }
.dr-mono { font-family: var(--dr-mono); }

/* ---------- Moteur ---------- */
.dr.is-animated .dr-art.is-on .a { animation: dr-in .45s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--d, 0) * 1s); }
.dr.is-animated .dr-art.is-on .a.pop { animation-name: dr-pop; }
.dr.is-animated .dr-art.is-on .a.out { animation: dr-out .3s ease both; animation-delay: calc(var(--d, 0) * 1s); }
.dr.is-animated .dr-art.is-on .g { animation: dr-grow .5s ease-out both; animation-delay: calc(var(--d, 0) * 1s); }
.dr.is-paused .dr-art *, .dr.is-paused .dr-log * { animation-play-state: paused !important; }

@keyframes dr-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes dr-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } }
@keyframes dr-out { to { opacity: 0; transform: scale(.6); } }
@keyframes dr-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dr-draw { from { stroke-dashoffset: 200; } to { stroke-dashoffset: 0; } }
@keyframes dr-scan { from { top: 0; opacity: .7; } 90% { opacity: .7; } to { top: 100%; opacity: 0; } }
@keyframes dr-glow { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--dr-accent) 25%, transparent); } }

/* Marques d'état */
.dr-mk { position: relative; display: inline-grid; width: 20px; height: 20px; flex: 0 0 auto; }
.dr-mk > span { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 3px; }
.dr-mk svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dr-mk__ok { color: var(--dr-ok); background: color-mix(in srgb, var(--dr-ok) 16%, transparent); }
.dr-mk__warn { color: var(--dr-warn); background: color-mix(in srgb, var(--dr-warn) 18%, transparent); }
.dr:not(.is-animated) .dr-mk__warn { display: none; }

/* ---------- ROI 1 : contrôle du contenu ---------- */
.r1 { position: relative; display: grid; gap: 6px; max-width: 460px; margin: 0 auto; }
.r1__scan { position: absolute; left: -6px; right: -6px; height: 2px; background: var(--dr-accent); opacity: 0; pointer-events: none; }
.dr.is-animated .dr-art.is-on .r1__scan { animation: dr-scan 2.4s ease-in-out .2s both; }
.r1__row { display: grid; grid-template-columns: 74px 1fr 1fr 1fr 20px; gap: 8px; align-items: center; padding: 6px 8px; background: var(--dr-raise); border-radius: 4px; }
.r1__row > code { font-family: var(--dr-mono); font-size: .72rem; color: var(--dr-ink-2); }
.r1__cell { height: 8px; border-radius: 2px; background: var(--dr-line); }
.r1__row--flag .r1__cell:nth-child(3) { background: color-mix(in srgb, var(--dr-warn) 55%, var(--dr-line)); }
.dr:not(.is-animated) .r1__row--flag .r1__cell:nth-child(3) { background: var(--dr-line); }
.r1__note { margin-top: 8px; font-size: .82rem; color: var(--dr-warn); }

/* ---------- ROI 2 : règles XBRL / intégrité ---------- */
.r2 svg { display: block; width: 100%; max-width: 440px; margin: 0 auto; height: auto; overflow: visible; }
.r2__box { fill: var(--dr-raise); stroke: var(--dr-line); stroke-width: 1.5; }
.r2__edge { fill: none; stroke: var(--dr-accent); stroke-width: 1.5; }
.dr.is-animated .dr-art.is-on .r2__edge { stroke-dasharray: 200; animation: dr-draw .8s ease-out both; animation-delay: calc(var(--d, 0) * 1s); }
.r2 text { fill: var(--dr-ink); font-family: var(--dr-mono); font-size: 11px; }
.r2 .r2__ok { fill: var(--dr-ok); }
.r2 .r2__okmark { fill: none; stroke: var(--dr-bg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r2 g.a { transform-box: fill-box; transform-origin: center; }
.r2__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; margin-top: 12px; font-size: .82rem; color: var(--dr-ink-2); }

/* ---------- ROI 3 : transcodification (codes réels de la taxonomie) ---------- */
.r3 { display: grid; gap: 10px; max-width: 460px; margin: 0 auto; }
.r3__row { display: grid; grid-template-columns: 1fr 40px auto; align-items: center; gap: 8px; }
.r3__lbl { background: var(--dr-raise); border-radius: 4px; padding: 6px 10px; font-size: .85rem; }
.r3__arr { height: 2px; background: var(--dr-accent); transform-origin: left; position: relative; }
.r3__arr::after { content: ""; position: absolute; right: -1px; top: -3px; border: 4px solid transparent; border-left-color: var(--dr-accent); border-right: 0; }
.r3__code { font-family: var(--dr-mono); font-size: .8rem; color: var(--dr-accent); border: 1px solid var(--dr-accent); border-radius: 4px; padding: 5px 8px; }

/* ---------- ROI 4 : package et XML ---------- */
.r4 { display: grid; gap: 12px; max-width: 420px; margin: 0 auto; }
.r4__pkg { border: 1px solid var(--dr-line); border-radius: 6px; background: var(--dr-raise); }
.r4__pkg header { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--dr-line); font-family: var(--dr-mono); font-size: .8rem; }
.r4__pkg header svg { width: 15px; height: 15px; fill: none; stroke: var(--dr-accent); stroke-width: 2; }
.r4__pkg ul { list-style: none; margin: 0; padding: 8px 12px 10px 34px; font-family: var(--dr-mono); font-size: .76rem; color: var(--dr-ink-2); line-height: 1.8; }
.r4__env { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--dr-accent); border-radius: 6px; padding: 10px 12px; }
.r4__env span { font-family: var(--dr-mono); font-size: .8rem; }
.r4__badge { font-family: var(--dr-body) !important; font-weight: 500; font-size: .78rem !important; color: var(--dr-bg); background: var(--dr-accent); border-radius: 3px; padding: 3px 8px; }

/* ---------- Incident 1 : formulaires cumulatifs ---------- */
.i1 { position: relative; height: 240px; max-width: 400px; margin: 0 auto; }
.i1__card {
  position: absolute; left: 0; right: 0; padding: 12px 14px;
  background: var(--dr-raise); border: 1px solid var(--dr-line); border-radius: 6px;
}
.i1__card:nth-child(1) { top: 0; transform-origin: top; }
.i1__card:nth-child(2) { top: 56px; left: 16px; right: -16px; }
.i1__card:nth-child(3) { top: 112px; left: 32px; right: -32px; border-color: var(--dr-accent); }
@media (max-width: 480px) { .i1__card:nth-child(2) { left: 8px; right: -4px; } .i1__card:nth-child(3) { left: 16px; right: -8px; } }
.i1__card h5 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: .9rem; font-weight: 500; font-family: var(--dr-body); }
.i1__card h5 small { font-family: var(--dr-mono); font-weight: 400; color: var(--dr-accent); font-size: .74rem; }
.i1__f { height: 7px; border-radius: 2px; background: var(--dr-line); margin: 7px 0; transform-origin: left; }
.i1__f--on { background: color-mix(in srgb, var(--dr-accent) 55%, var(--dr-line)); }
.i1__inh { font-size: .74rem; color: var(--dr-ink-2); margin-top: 8px; }

/* ---------- Incident 2 : vérification des champs ---------- */
.i2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; max-width: 470px; margin: 0 auto; }
.i2__chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 10px; background: var(--dr-raise); border: 1px solid var(--dr-line); border-radius: 4px; font-size: .84rem; }
.i2__chip--flag { border-color: var(--dr-warn); }
.dr:not(.is-animated) .i2__chip--flag { border-color: var(--dr-line); }
.dr.is-animated .dr-art.is-on .i2__chip--flag { animation: dr-unflag .4s ease 2.6s both; }
@keyframes dr-unflag { to { border-color: var(--dr-line); } }
.i2__note { grid-column: 1 / -1; font-size: .82rem; color: var(--dr-warn); }

/* ---------- Incident 3 : JSON ---------- */
.i3 { margin: 0; max-width: 460px; width: 100%; justify-self: center; background: var(--dr-bg); border: 1px solid var(--dr-line); border-radius: 6px; padding: 12px 14px; font-family: var(--dr-mono); font-size: .76rem; line-height: 1.75; white-space: pre; overflow-x: auto; color: var(--dr-ink-2); }
.i3 span { display: block; }
.i3 .k { color: var(--dr-accent); }
.i3 .v { color: var(--dr-ink); }
.i3 i { font-style: normal; }
.i3__ready { margin-top: 10px; text-align: center; font-size: .85rem; color: var(--dr-ok); }

/* Signalement temporaire puis correction */
@keyframes dr-flash { 0% { opacity: 0; transform: scale(.5); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dr-unflag-bg { to { background: var(--dr-line); } }
.dr.is-animated .dr-art.is-on .flash { animation: dr-flash 1.4s ease both; animation-delay: calc(var(--d, 0) * 1s); }
.dr.is-animated .dr-art.is-on .r1__row--flag .r1__cell:nth-child(3) { animation: dr-unflag-bg .4s ease 2.2s both; }
.dr.is-animated .dr-art.is-on .r1__note { animation: dr-in .4s ease .9s both; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .dr *, .dr *::before, .dr *::after { animation: none !important; transition: none !important; }
}