/* ============================================================
   home-journey.css — carte « Mon parcours » de l'accueil (2026-10-12)
   Style de base = état final immobile. Animations seulement sous html.m-on
   une fois le bloc à l'écran (.hj.is-in, home-journey.js) ; coupées par
   « Figer animations » (body.a11y-stop) et .hj-calm.
   ============================================================ */

.hj {
  display: grid; gap: clamp(20px, 3vw, 40px); align-items: center;
  padding: clamp(16px, 2.6vw, 32px); border-radius: 32px; background: var(--pro-s1);
}
@media (min-width: 1000px) { .hj { grid-template-columns: minmax(0, 1.65fr) minmax(280px, 1fr); } }
.hj-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* France */
.hj-dot { fill: var(--mb-3, rgba(127,127,127,.5)); opacity: .55; }
.hj-fr-fill { stroke: none; }
.hj-fr-line { fill: none; stroke: var(--mb-2, rgba(127,127,127,.7)); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* Région + loupe */
.hj-region { fill: var(--acc, #2f4cf0); }
.hj-region-ring { fill: none; stroke: var(--acc, #2f4cf0); stroke-width: 1.5; opacity: .35; }
.hj-lens { fill: none; stroke: var(--acc, #2f4cf0); stroke-width: 1.4; stroke-dasharray: 4 5; opacity: .55; }

/* Médaillon */
.hj-inset-bg { fill: var(--pro-s2); }
.hj-inset-edge { fill: none; stroke: var(--acc, #2f4cf0); stroke-width: 1.5; opacity: .45; }
.hj-inset-dots { opacity: .45; }
.hj-radar { fill: none; stroke: var(--pro-line-2, rgba(127,127,127,.25)); stroke-width: 1; stroke-dasharray: 3 6; }
.hj-sweep { fill: var(--acc, #2f4cf0); opacity: .07; transform-box: view-box; transform-origin: 785px 300px; }
.hj-north { fill: var(--mb-3, rgba(127,127,127,.6)); font: 600 13px/1 var(--v3-font, system-ui), sans-serif; text-anchor: middle; }

/* Trajet */
.hj-g0 { stop-color: var(--mb-3, #8a8a8a); }
.hj-g1 { stop-color: var(--acc, #2f4cf0); }
.hj-route { fill: none; stroke: var(--acc, #2f4cf0); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: .85; }

/* Étapes */
.hj-stop-dot { fill: var(--pro-s1); stroke: var(--acc, #2f4cf0); stroke-width: 3; transition: r .35s cubic-bezier(.34,1.56,.64,1), fill .3s ease; }
.hj-stop-pulse { fill: var(--acc, #2f4cf0); opacity: 0; transform-box: fill-box; transform-origin: center; }
.hj-stop-label { fill: var(--mb-2, rgba(127,127,127,.8)); font: 550 14px/1 var(--v3-font, system-ui), sans-serif; transition: fill .3s ease, opacity .3s ease; paint-order: stroke; stroke: var(--pro-s2); stroke-width: 5px; stroke-linejoin: round; }
.hj-stop.is-active .hj-stop-dot { fill: var(--acc, #2f4cf0); r: 9; }
.hj-stop.is-active .hj-stop-label { fill: var(--mb-1, currentColor); font-weight: 650; }
@media (max-width: 640px) { .hj-stop-label { display: none; } }

/* Colonne de droite : étape en cours */
.hj-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.hj-card { position: relative; display: grid; padding: 22px 22px 18px; border-radius: 22px; background: var(--pro-s2); min-height: 150px; }
.hj-step { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 6px; transition: opacity .45s ease, transform .45s cubic-bezier(.22,.8,.3,1); }
/* Étapes inactives : invisibles à l'écran, mais lues par les lecteurs d'écran */
.hj-step:not(.is-on) { opacity: 0; transform: translateY(8px); pointer-events: none; }
.hj-step-year { display: flex; align-items: center; gap: 10px; font-size: 28px; font-weight: 650; letter-spacing: -.02em; color: var(--acc, #2f4cf0); font-variant-numeric: tabular-nums; }
.hj-step-year em { font-style: normal; font-size: 11.5px; font-weight: 600; letter-spacing: 0; padding: 3px 9px; border-radius: 999px; background: var(--acc-bg, rgba(47,76,240,.1)); }
.hj-step-title { font-size: 16.5px; line-height: 1.35; font-weight: 600; color: var(--mb-1, var(--ng-heading)); }
.hj-step-meta { font-size: 13.5px; line-height: 1.5; color: var(--mb-2, var(--ng-t60)); }
.hj-progress { grid-area: 2 / 1; display: flex; gap: 5px; margin-top: 16px; }
.hj-progress i { flex: 1; height: 3px; border-radius: 3px; background: var(--pro-s3); overflow: hidden; position: relative; }
.hj-progress i.is-past { background: var(--mb-3, rgba(127,127,127,.5)); }
.hj-progress i.is-on { background: var(--acc, #2f4cf0); }
.hj-stats { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--mb-2, var(--ng-t60)); }
.hj-stats b { color: var(--mb-1, var(--ng-heading)); font-weight: 650; }
.hj-cta { align-self: flex-start; }

/* ── Orchestration (mouvement autorisé) ───────────────────── */
html.m-on .hj:not(.is-in) :is(.hj-fr-fill, .hj-region, .hj-region-ring, .hj-inset, .hj-lens) { opacity: 0; }
html.m-on .hj:not(.is-in) .hj-fr-line { stroke-dasharray: 1; stroke-dashoffset: 1; }

html.m-on .hj.is-in .hj-fr-line { stroke-dasharray: 1; animation: hjDraw 1.8s cubic-bezier(.45,0,.2,1) both; }
html.m-on .hj.is-in .hj-fr-fill { animation: hjFade .9s ease both .9s; }
html.m-on .hj.is-in .hj-region { transform-box: fill-box; transform-origin: center; animation: hjPop .5s cubic-bezier(.34,1.56,.64,1) both 1.4s; }
html.m-on .hj.is-in .hj-region-ring { transform-box: fill-box; transform-origin: center; animation: hjRing 2.4s ease-out infinite 1.6s; }
html.m-on .hj.is-in .hj-region-ring-2 { animation-delay: 2.8s; }
html.m-on .hj.is-in .hj-lens { stroke-dasharray: 4 5; animation: hjFade .5s ease both 1.8s; }
html.m-on .hj.is-in .hj-inset { transform-box: view-box; transform-origin: 785px 300px; animation: hjOpen .8s cubic-bezier(.22,.8,.3,1) both 2s; }
html.m-on .hj.is-in .hj-sweep { animation: hjSweep 6s linear infinite 2.6s; }
html.m-on .hj.is-in .hj-stop { transform-box: fill-box; transform-origin: center; animation: hjPop .45s cubic-bezier(.34,1.56,.64,1) both; animation-delay: calc(2.5s + var(--i) * .12s); }
html.m-on .hj.is-in .hj-route { stroke-dasharray: 1; animation: hjDraw 1.7s cubic-bezier(.45,0,.2,1) both 2.9s; }
html.m-on .hj.is-in .hj-stop.is-active .hj-stop-pulse { animation: hjPulse 1.8s ease-out infinite; }
html.m-on .hj.is-in .hj-side { animation: hjSide .7s cubic-bezier(.22,.8,.3,1) both .5s; }

@keyframes hjDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes hjFade { from { opacity: 0; } }
@keyframes hjPop { from { opacity: 0; transform: scale(.2); } }
@keyframes hjRing { from { transform: scale(.4); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
@keyframes hjOpen { from { opacity: 0; transform: scale(.55); } }
@keyframes hjSweep { to { transform: rotate(360deg); } }
@keyframes hjPulse { from { opacity: .45; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }
@keyframes hjSide { from { opacity: 0; transform: translateY(14px); } }

/* Figé / mouvement réduit : état final, rien ne bouge */
body.a11y-stop .hj *, .hj.hj-calm * { animation: none !important; transition: none !important; }
body.a11y-stop .hj :is(.hj-fr-fill, .hj-region, .hj-inset, .hj-lens) { opacity: 1 !important; }
body.a11y-stop .hj .hj-region-ring { opacity: .35 !important; }
body.a11y-stop .hj :is(.hj-fr-line, .hj-route) { stroke-dashoffset: 0 !important; }
@media (prefers-reduced-motion: reduce) { .hj * { animation: none !important; } }