/* ============================================================
   a11y-visuals.css — visuels animés de la page Accessibilité (2026-10-12)
   Jauge 13/13, schéma « comment le site s'adapte », démos des 4 principes.

   Règle d'or : le style de base = l'état final, lisible et immobile.
   Les animations ne s'ajoutent que sous html.m-on (mouvement autorisé) et
   une fois le bloc à l'écran (.a11y-viz.is-in, posé par a11y-visuals.js).
   « Figer animations » (body.a11y-stop) coupe tout.
   ============================================================ */

.a11y-viz { --ax-ok: #16a34a; --ax-ok-bg: rgba(22,163,74,.12); --ax-bad: #dc2626; --ax-bad-bg: rgba(220,38,38,.1); }
html:not(.light) .a11y-viz { --ax-ok: #4ade80; --ax-ok-bg: rgba(74,222,128,.12); --ax-bad: #f87171; --ax-bad-bg: rgba(248,113,113,.12); }

/* ── Jauge 13/13 (bandeau de conformité) ───────────────────── */
.ax-gauge { position: relative; flex-shrink: 0; width: 72px; height: 72px; display: grid; place-items: center; }
.ax-gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ax-gauge circle { fill: none; stroke-width: 5; }
.ax-gauge-track { stroke: rgba(52,211,153,.18); }
.ax-gauge-fill { stroke: #34d399; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.ax-gauge-num { position: relative; display: flex; align-items: baseline; color: #34d399; font-variant-numeric: tabular-nums; line-height: 1; }
.ax-gauge-num b { font-size: 21px; font-weight: 700; }
.ax-gauge-num small { font-size: 11px; font-weight: 600; opacity: .75; }
html.m-on .ax-gauge:not(.is-in) .ax-gauge-fill { stroke-dashoffset: 100; }
html.m-on .ax-gauge.is-in .ax-gauge-fill { animation: axGauge 1.4s cubic-bezier(.22,.8,.3,1) both; }
@keyframes axGauge { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }

/* ── Schéma : comment le site s'adapte ─────────────────────── */
.ax-flow { position: relative; }
.ax-flow-list { list-style: none; margin: 0; padding: 0; }
.ax-chip {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 11px 14px; border-radius: 14px; background: var(--pro-s2);
  font-size: 13.5px; line-height: 1.35; color: var(--mb-1, var(--ng-heading)); font-weight: 500;
}
.ax-chip-ico, .ax-chip-check { flex-shrink: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; }
.ax-chip-ico { background: var(--acc-bg, rgba(47,76,240,.1)); color: var(--acc, #2f4cf0); }
.ax-chip-check { background: var(--ax-ok-bg); color: var(--ax-ok); border-radius: 50%; }
.ax-chip-ico svg, .ax-chip-check svg { width: 16px; height: 16px; }
.ax-wire { position: relative; height: 2px; align-self: center; background: var(--pro-line-2, rgba(127,127,127,.25)); border-radius: 2px; }
.ax-wire i { position: absolute; top: 50%; left: 0; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--acc, #2f4cf0); box-shadow: 0 0 0 4px var(--acc-bg, rgba(47,76,240,.15)); opacity: 0; }

.ax-core {
  display: flex; flex-direction: column; gap: 8px; padding: 18px 16px;
  border-radius: 20px; background: var(--pro-s3);
  text-align: center; position: relative; z-index: 2;
}
.ax-core-site { font-size: 15px; font-weight: 650; color: var(--mb-1, var(--ng-heading)); margin-bottom: 4px; }
.ax-core-layer { display: block; padding: 8px 10px; border-radius: 10px; background: var(--pro-s1); font-size: 12.5px; font-weight: 550; color: var(--mb-2, var(--ng-t60)); }
.ax-core-layer:nth-child(2) { box-shadow: inset 3px 0 0 var(--acc, #2f4cf0); }

/* Grand écran : entrées | fil (passe sous le cœur) | sorties */
@media (min-width: 860px) {
  .ax-flow {
    display: grid; align-items: center; row-gap: 12px;
    grid-template-columns: minmax(0, 1fr) minmax(36px, 70px) 190px minmax(36px, 70px) minmax(0, 1fr);
  }
  .ax-flow-list, .ax-flow-row { display: contents; }
  .ax-core { grid-column: 3; grid-row: 1 / span 5; align-self: stretch; justify-content: center; }
  .ax-chip-in { grid-column: 1; }
  .ax-wire { grid-column: 2 / 5; }
  .ax-chip-out { grid-column: 5; }
  .ax-flow-row:nth-child(1) > * { grid-row: 1; }
  .ax-flow-row:nth-child(2) > * { grid-row: 2; }
  .ax-flow-row:nth-child(3) > * { grid-row: 3; }
  .ax-flow-row:nth-child(4) > * { grid-row: 4; }
  .ax-flow-row:nth-child(5) > * { grid-row: 5; }
}
/* Petit écran : cœur en tête, puis « entrée → sortie » ligne par ligne */
@media (max-width: 859px) {
  .ax-core { margin-bottom: 16px; }
  .ax-core-layer { display: inline-block; }
  .ax-flow-list { display: flex; flex-direction: column; gap: 10px; }
  .ax-flow-row { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); align-items: center; }
  .ax-chip { font-size: 12.5px; padding: 9px 10px; gap: 8px; }
  .ax-chip-ico, .ax-chip-check { width: 26px; height: 26px; }
}
@media (max-width: 420px) {
  .ax-flow-row { grid-template-columns: 1fr; gap: 6px; }
  .ax-wire { width: 2px; height: 14px; justify-self: center; }
  .ax-wire i { display: none; }
}

/* Animations du schéma */
html.m-on .ax-flow:not(.is-in) :is(.ax-chip, .ax-core-layer) { opacity: 0; }
html.m-on .ax-flow.is-in .ax-core-layer { animation: axRise .5s cubic-bezier(.22,.8,.3,1) both; animation-delay: calc(var(--i) * .15s); }
html.m-on .ax-flow.is-in .ax-chip-in { animation: axSlideR .55s cubic-bezier(.22,.8,.3,1) both; animation-delay: calc(.3s + var(--i) * .09s); }
html.m-on .ax-flow.is-in .ax-chip-out { animation: axSlideL .55s cubic-bezier(.22,.8,.3,1) both; animation-delay: calc(.75s + var(--i) * .09s); }
html.m-on .ax-flow.is-in .ax-wire i { animation: axPulse 3.4s cubic-bezier(.45,0,.55,1) infinite; animation-delay: calc(1.1s + var(--i) * .5s); }
html.m-on .ax-flow.is-in .ax-chip-check { animation: axPop 3.4s ease infinite; animation-delay: calc(1.1s + var(--i) * .5s); }
html.m-on .ax-flow.is-in .ax-core { animation: axGlow 3.4s ease-in-out infinite 1.1s; }
@keyframes axRise { from { opacity: 0; transform: translateY(8px); } }
@keyframes axSlideR { from { opacity: 0; transform: translateX(-14px); } }
@keyframes axSlideL { from { opacity: 0; transform: translateX(14px); } }
@keyframes axPulse {
  0% { left: 0; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: calc(100% - 8px); opacity: 0; }
}
@keyframes axPop { 0%, 82% { transform: scale(1); } 90% { transform: scale(1.22); } 100% { transform: scale(1); } }
@keyframes axGlow { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 6px var(--acc-bg, rgba(47,76,240,.12)); } }

/* ── Les 4 principes ───────────────────────────────────────── */
.ax-pour { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.ax-demo { padding: 14px 14px 22px; border-radius: 22px; background: var(--pro-s2); }
.ax-demo h3 { margin: 0 6px 6px; font-size: 16px; font-weight: 600; color: var(--mb-1, var(--ng-heading)); }
.ax-demo > p:not(.ax-demo-num) { margin: 0 6px; font-size: 13px; line-height: 1.6; color: var(--mb-2, var(--ng-t60)); }
.ax-demo-num { margin: 18px 6px 4px; font-size: 12px; font-weight: 600; color: var(--acc, #2f4cf0); font-variant-numeric: tabular-nums; }
.ax-stage {
  position: relative; height: 150px; border-radius: 16px; background: var(--pro-s1);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 14px; overflow: hidden;
}

/* 1. Contraste */
.ax-contrast { flex-direction: row; gap: 14px; }
.ax-swatch { flex-shrink: 0; width: 62px; height: 62px; border-radius: 14px; display: grid; place-items: center; background: var(--mb-1, #141414); }
.ax-swatch span { font-size: 24px; font-weight: 700; color: var(--pro-bg, #fff); }
.ax-meter { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ax-meter-bar { position: relative; height: 8px; border-radius: 8px; background: var(--pro-s3); margin-top: 16px; }
.ax-meter-bar i { position: absolute; inset: 0 auto 0 0; width: 80%; border-radius: 8px; background: linear-gradient(90deg, var(--ax-bad) 0%, #f59e0b 30%, var(--ax-ok) 46%); background-size: 125% 100%; }
.ax-mark { position: absolute; left: var(--at); bottom: 12px; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: var(--mb-2, var(--ng-t60)); }
.ax-mark::after { content: ''; position: absolute; left: 50%; top: 14px; width: 1px; height: 14px; background: var(--mb-3, rgba(127,127,127,.5)); }
.ax-meter-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ax-ratio { font-size: 15px; font-weight: 650; color: var(--mb-1, var(--ng-heading)); margin-right: auto; font-variant-numeric: tabular-nums; }
.ax-badge { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--ax-ok-bg); color: var(--ax-ok); }
html.m-on .ax-demo.is-in .ax-meter-bar i { animation: axFill 2.2s cubic-bezier(.3,.7,.3,1) both .2s; }
html.m-on .ax-demo.is-in .ax-badge-aa { animation: axBadge .4s ease both 1s; }
html.m-on .ax-demo.is-in .ax-badge-aaa { animation: axBadge .4s ease both 1.6s; }
html.m-on .ax-demo:not(.is-in) .ax-badge { opacity: .25; }
@keyframes axFill { from { width: 0; } }
@keyframes axBadge { from { opacity: .25; transform: scale(.85); } 60% { transform: scale(1.12); } to { opacity: 1; transform: none; } }

/* 2. Focus clavier (gabarit fixe : 4 éléments de 28/46/46/56 px, écart 14 px) */
.ax-mock { position: relative; width: 230px; height: 52px; border-radius: 12px; background: var(--pro-s3); display: flex; align-items: center; gap: 14px; padding: 0 12px; }
.ax-mock > span:not(.ax-focus) { height: 14px; border-radius: 7px; background: var(--mb-3, rgba(127,127,127,.45)); }
.ax-mock-logo { width: 28px; height: 28px !important; border-radius: 8px !important; background: var(--mb-1, #141414) !important; }
.ax-mock-link { width: 46px; }
.ax-mock-btn { width: 56px; height: 24px !important; border-radius: 999px !important; background: var(--acc, #2f4cf0) !important; }
.ax-focus { position: absolute; top: 50%; left: 8px; width: 36px; height: 36px; margin-top: -18px; border-radius: 11px; box-shadow: 0 0 0 2.5px var(--acc, #2f4cf0), 0 0 0 6px var(--acc-bg, rgba(47,76,240,.15)); }
.ax-keycap {
  display: inline-block; padding: 6px 14px; border-radius: 9px; font-size: 12px; font-weight: 650;
  color: var(--mb-1, var(--ng-heading)); background: var(--pro-s3); box-shadow: 0 3px 0 var(--pro-line-2, rgba(127,127,127,.3));
}
html.m-on .ax-demo.is-in .ax-focus { animation: axTab 4.8s steps(1, end) infinite; }
html.m-on .ax-demo.is-in .ax-keycap { animation: axKey 1.2s ease infinite; }
/* positions : logo, lien 1, lien 2, bouton (bord gauche − 4 px, largeur + 8 px) */
@keyframes axTab {
  0%   { left: 8px;   width: 36px; height: 36px; margin-top: -18px; }
  25%  { left: 50px;  width: 54px; height: 24px; margin-top: -12px; }
  50%  { left: 110px; width: 54px; height: 24px; margin-top: -12px; }
  75%  { left: 170px; width: 64px; height: 32px; margin-top: -16px; }
  100% { left: 8px;   width: 36px; height: 36px; margin-top: -18px; }
}
@keyframes axKey {
  0%, 70%, 100% { transform: none; box-shadow: 0 3px 0 var(--pro-line-2, rgba(127,127,127,.3)); }
  80% { transform: translateY(3px); box-shadow: 0 0 0 var(--pro-line-2, rgba(127,127,127,.3)); }
}

/* 3. Formulaire : erreur explicite puis correction */
.ax-form { align-items: stretch; gap: 7px; padding: 16px 18px; }
.ax-form-label { font-size: 11.5px; font-weight: 600; color: var(--mb-2, var(--ng-t60)); }
.ax-form-field {
  position: relative; display: flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 10px;
  background: var(--pro-s3); box-shadow: inset 0 0 0 2px var(--ax-ok);
  font: 500 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--mb-1, var(--ng-heading));
}
.ax-type-bad, .ax-type-good { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
.ax-type-bad { display: none; }
.ax-caret { display: inline-block; width: 1.5px; height: 15px; margin-left: 1px; background: currentColor; opacity: 0; }
.ax-form-msg { font-size: 11.5px; font-weight: 600; min-height: 15px; }
.ax-msg-bad { display: none; color: var(--ax-bad); }
.ax-msg-good { color: var(--ax-ok); }
/* Cycle de 7 s : tape « nathan@ » → erreur → corrige → valide */
html.m-on .ax-demo.is-in .ax-type-bad { display: inline-block; animation: axTypeBad 7s steps(1) infinite; }
html.m-on .ax-demo.is-in .ax-type-good { animation: axTypeGood 7s steps(1) infinite; }
html.m-on .ax-demo.is-in .ax-type-bad,
html.m-on .ax-demo.is-in .ax-type-good { width: 0; }
html.m-on .ax-demo.is-in .ax-caret { animation: axCaret .8s steps(1) infinite; }
html.m-on .ax-demo.is-in .ax-form-field { animation: axFieldState 7s steps(1) infinite; }
html.m-on .ax-demo.is-in .ax-msg-bad { display: block; animation: axShowBad 7s steps(1) infinite; }
html.m-on .ax-demo.is-in .ax-msg-good { animation: axShowGood 7s steps(1) infinite; }
@keyframes axTypeBad {
  0% { width: 0; } 3% { width: 1ch; } 6% { width: 2ch; } 9% { width: 3ch; } 12% { width: 4ch; } 15% { width: 5ch; } 18% { width: 6ch; } 21% { width: 7ch; }
  45% { width: 0; } 100% { width: 0; }
}
@keyframes axTypeGood {
  0% { width: 0; } 45% { width: 7ch; } 48% { width: 8ch; } 51% { width: 9ch; } 54% { width: 10ch; } 57% { width: 11ch; } 60% { width: 12ch; } 63% { width: 13ch; } 66% { width: 14ch; }
  100% { width: 14ch; }
}
@keyframes axFieldState {
  0% { box-shadow: inset 0 0 0 2px var(--pro-line-2, rgba(127,127,127,.3)); }
  24% { box-shadow: inset 0 0 0 2px var(--ax-bad); background: var(--ax-bad-bg); }
  45% { box-shadow: inset 0 0 0 2px var(--acc, #2f4cf0); background: var(--pro-s3); }
  68% { box-shadow: inset 0 0 0 2px var(--ax-ok); }
}
@keyframes axShowBad { 0% { opacity: 0; } 24% { opacity: 1; } 45% { opacity: 0; } }
@keyframes axShowGood { 0% { opacity: 0; } 68% { opacity: 1; } }
@keyframes axCaret { 0% { opacity: 1; } 50% { opacity: 0; } }
/* Les deux messages se superposent pendant l'animation */
html.m-on .ax-demo.is-in .ax-form { display: grid; grid-template-rows: auto auto 15px; align-content: center; }
html.m-on .ax-demo.is-in :is(.ax-msg-bad, .ax-msg-good) { grid-row: 3; grid-column: 1; }

/* 4. Robuste : code + annonce vocale */
.ax-robust { align-items: stretch; gap: 10px; }
.ax-code {
  display: block; padding: 10px 12px; border-radius: 10px; background: var(--pro-s3);
  font: 500 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--mb-2, var(--ng-t60));
}
.ax-code em { font-style: normal; color: var(--acc, #2f4cf0); font-weight: 650; }
.ax-voice { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 550; color: var(--mb-1, var(--ng-heading)); }
.ax-wave { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2.5px; height: 18px; }
.ax-wave i { width: 3px; height: 8px; border-radius: 2px; background: var(--acc, #2f4cf0); }
.ax-wave i:nth-child(2) { height: 14px; } .ax-wave i:nth-child(3) { height: 18px; } .ax-wave i:nth-child(4) { height: 10px; }
html.m-on .ax-demo.is-in .ax-wave i { animation: axWave 1s ease-in-out infinite; }
html.m-on .ax-demo.is-in .ax-wave i:nth-child(2) { animation-delay: .15s; }
html.m-on .ax-demo.is-in .ax-wave i:nth-child(3) { animation-delay: .3s; }
html.m-on .ax-demo.is-in .ax-wave i:nth-child(4) { animation-delay: .45s; }
html.m-on .ax-demo.is-in .ax-voice { animation: axRise .6s ease both .5s; }
html.m-on .ax-demo:not(.is-in) .ax-voice { opacity: 0; }
@keyframes axWave { 0%, 100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }

/* ── Figer animations / mouvement réduit : tout à l'état final ── */
body.a11y-stop .a11y-viz *, html.ax-calm .a11y-viz * { animation: none !important; }
body.a11y-stop .a11y-viz :is(.ax-chip, .ax-core-layer, .ax-voice, .ax-badge) { opacity: 1 !important; }
body.a11y-stop .ax-gauge .ax-gauge-fill { stroke-dashoffset: 0 !important; }
body.a11y-stop .a11y-viz .ax-type-bad, body.a11y-stop .a11y-viz .ax-msg-bad { display: none !important; }
body.a11y-stop .a11y-viz .ax-type-good { width: auto !important; }
body.a11y-stop .a11y-viz .ax-msg-good { opacity: 1 !important; }
body.a11y-stop .a11y-viz .ax-form-field { box-shadow: inset 0 0 0 2px var(--ax-ok) !important; background: var(--pro-s3) !important; }
@media (prefers-reduced-motion: reduce) { .a11y-viz * { animation: none !important; } }