/* =====================================================================
   Motion design du hero de l'accueil (.cjr) : « Votre journée avec Charik ».
   Même grammaire que hero-motion-agenda.css : barre de progression, accroche
   par temps, puis une phrase de fin. Classes posées par assets/js/hero-motion.js :
   b1..b5 (entrée), x1..x5 (sortie), et les sous-étapes c1..c3, b1-focus,
   b2-fill, b2-chip, r1..r4, b3-tag, b4-m1, b4-m2, b4-won.
   Dimensions en --u (1cqw). Chaque état « :not(.bN) » coupe ses transitions.
   ===================================================================== */
.cjr {
    --ink: #0F172A; --muted: #64748b; --line: #e2e8f0;
    --b: #2B9FE8; --g: #5DD39E;
    --grad: linear-gradient(135deg, #5DD39E 0%, #2B9FE8 100%);
    --grad-soft: linear-gradient(135deg, rgba(93,211,158,.14), rgba(43,159,232,.14));
    --spring: cubic-bezier(.34,1.56,.64,1);
    --out: cubic-bezier(.22,1,.36,1);
    position: relative; width: 100%; max-width: 560px; margin: 0 auto;
    container: cjr / inline-size;
    font-family: 'Inter', system-ui, sans-serif; color: var(--ink); text-align: left; line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}
.cjr-stage { --u: 1cqw; position: relative; width: 100%; aspect-ratio: 100 / 84; }
.cjr-stage b, .cjr-stage span, .cjr-stage small { margin: 0; font-style: normal; }
.cjr-ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; flex: none; }

/* ---------- Barre de progression ---------- */
.cjr-progress { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(1.2 * var(--u)); }
.cjr-seg { height: calc(.9 * var(--u)); min-height: 3px; border-radius: 9999px; background: rgba(100,116,139,.2); overflow: hidden; }
.cjr-seg i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: inherit; }
.cjr.b1 .cjr-seg:nth-child(1) i { width: 100%; transition: width 3.3s linear; }
.cjr.b2 .cjr-seg:nth-child(2) i { width: 100%; transition: width 2.95s linear; }
.cjr.b3 .cjr-seg:nth-child(3) i { width: 100%; transition: width 3.15s linear; }
.cjr.b4 .cjr-seg:nth-child(4) i { width: 100%; transition: width 3.15s linear; }
.cjr.b5 .cjr-seg:nth-child(5) i { width: 100%; transition: width 3.1s linear; }

/* ---------- Accroches ---------- */
.cjr-caps { position: absolute; left: 0; right: 0; top: calc(4.5 * var(--u)); height: calc(10 * var(--u)); }
.cjr-cap { position: absolute; inset: 0; overflow: hidden; font-size: calc(6.6 * var(--u)); font-weight: 800; letter-spacing: -.035em; line-height: 1.35; white-space: nowrap; }
.cjr-cap span { display: inline-block; transform: translateY(115%); transition: transform .55s var(--out); transition-delay: calc(var(--i, 0) * 70ms); }
.cjr-cap .g { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .08em .12em .02em; margin: 0 -.08em -.12em -.02em; }
.cjr.b1:not(.x1) .cjr-cap--1 span, .cjr.b2:not(.x2) .cjr-cap--2 span, .cjr.b3:not(.x3) .cjr-cap--3 span, .cjr.b4:not(.x4) .cjr-cap--4 span { transform: none; }
.cjr.x1 .cjr-cap--1 span, .cjr.x2 .cjr-cap--2 span, .cjr.x3 .cjr-cap--3 span, .cjr.x4 .cjr-cap--4 span { transform: translateY(-115%); transition-duration: .35s; transition-timing-function: ease-in; transition-delay: calc(var(--i, 0) * 30ms); }
.cjr:not(.b1) .cjr-cap--1 span, .cjr:not(.b2) .cjr-cap--2 span, .cjr:not(.b3) .cjr-cap--3 span, .cjr:not(.b4) .cjr-cap--4 span { transition: none; }

/* ---------- Scènes ---------- */
.cjr-beat { position: absolute; left: 0; right: 0; top: calc(18 * var(--u)); bottom: 0; opacity: 0; transform: translateY(calc(3 * var(--u))) scale(.97); transition: opacity .3s ease, transform .5s var(--out); }
.cjr.b1:not(.x1) .cjr-beat--1, .cjr.b2:not(.x2) .cjr-beat--2, .cjr.b3:not(.x3) .cjr-beat--3, .cjr.b4:not(.x4) .cjr-beat--4, .cjr.b5:not(.x5) .cjr-beat--5 { opacity: 1; transform: none; }
.cjr.x1 .cjr-beat--1, .cjr.x2 .cjr-beat--2, .cjr.x3 .cjr-beat--3, .cjr.x4 .cjr-beat--4, .cjr.x5 .cjr-beat--5 { transform: translateY(calc(-3 * var(--u))) scale(.97); transition-duration: .25s, .3s; }
.cjr:not(.b1) .cjr-beat--1, .cjr:not(.b2) .cjr-beat--2, .cjr:not(.b3) .cjr-beat--3, .cjr:not(.b4) .cjr-beat--4, .cjr:not(.b5) .cjr-beat--5 { transition: none; }

.cjr-panel { position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: calc(1 * var(--u)); padding: calc(3 * var(--u)) calc(3.4 * var(--u)) calc(3.4 * var(--u)); background: #fff; border: 1px solid var(--line); border-radius: calc(3.4 * var(--u)); box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) calc(-3 * var(--u)) rgba(15,23,42,.22); }
.cjr-head { display: flex; align-items: center; gap: calc(2 * var(--u)); margin-bottom: calc(2.6 * var(--u)); }
.cjr-head b { font-size: calc(4.2 * var(--u)); font-weight: 800; letter-spacing: -.02em; }
.cjr-time { padding: calc(.8 * var(--u)) calc(2 * var(--u)); border-radius: 9999px; background: var(--ink); color: #fff; font-size: calc(3 * var(--u)); font-weight: 700; font-variant-numeric: tabular-nums; }
.cjr-ic { width: calc(7.4 * var(--u)); height: calc(7.4 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--grad-soft); color: #0f7fc4; display: grid; place-items: center; font-size: calc(3.6 * var(--u)); flex: none; }
.cjr-chip { display: inline-flex; align-items: center; gap: calc(1.2 * var(--u)); margin-top: calc(2.6 * var(--u)); padding: calc(1.3 * var(--u)) calc(2.4 * var(--u)); border-radius: 9999px; background: rgba(93,211,158,.16); color: #15803d; font-size: calc(2.9 * var(--u)); font-weight: 700; opacity: 0; transform: translateY(calc(2 * var(--u))); }
.cjr-chip .cjr-ico { font-size: calc(3.2 * var(--u)); stroke-width: 2.6; }

/* ---- 9 h : priorités ---- */
.cjr-task { display: flex; align-items: center; gap: calc(2.6 * var(--u)); padding: calc(2 * var(--u)) calc(2.4 * var(--u)); border: 1px solid var(--line); border-radius: calc(2.4 * var(--u)); margin-top: calc(1.6 * var(--u)); opacity: 0; transform: translateX(calc(5 * var(--u))); }
.cjr-task > span:nth-child(2) { flex: 1; min-width: 0; }
.cjr-task b { display: block; font-size: calc(3.7 * var(--u)); font-weight: 700; }
.cjr-task small { display: block; font-size: calc(2.9 * var(--u)); color: var(--muted); }
.cjr.c1 .cjr-task--1, .cjr.c2 .cjr-task--2, .cjr.c3 .cjr-task--3 { opacity: 1; transform: none; transition: opacity .25s ease, transform .5s var(--spring); }
.cjr:not(.b1) .cjr-task { transition: none; }
.cjr-now { padding: calc(.8 * var(--u)) calc(2 * var(--u)); border-radius: 9999px; background: var(--grad); color: #fff; font-size: calc(2.7 * var(--u)); font-weight: 700; opacity: 0; transform: scale(.5); }
.cjr.b1-focus .cjr-task--1 { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; border: 2px solid transparent; transition: border-color .2s ease; }
.cjr.b1-focus .cjr-now { opacity: 1; transform: none; transition: opacity .2s ease, transform .45s var(--spring); }
.cjr:not(.b1-focus) .cjr-now { transition: none; }

/* ---- 11 h : rendez-vous ---- */
.cjr-cal { border-top: 1px solid var(--line); }
.cjr-slot { display: grid; grid-template-columns: calc(11 * var(--u)) 1fr; align-items: center; height: calc(9 * var(--u)); border-bottom: 1px solid var(--line); }
.cjr-slot small { font-size: calc(2.9 * var(--u)); color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.cjr-ev { display: flex; align-items: center; gap: calc(1.2 * var(--u)); height: calc(6.4 * var(--u)); padding: 0 calc(2.4 * var(--u)); border-radius: calc(1.6 * var(--u)); background: #f1f5f9; color: var(--muted); font-size: calc(3.1 * var(--u)); font-weight: 600; white-space: nowrap; }
.cjr-ev--new { background: var(--grad); color: #fff; font-weight: 700; transform-origin: left center; transform: scaleX(.2); opacity: 0; }
.cjr-ev--new .cjr-ico { font-size: calc(3.6 * var(--u)); }
.cjr.b2-fill .cjr-ev--new { transform: none; opacity: 1; transition: transform .5s var(--out), opacity .2s ease; }
.cjr:not(.b2-fill) .cjr-ev--new { transition: none; }
.cjr.b2-chip .cjr-beat--2 .cjr-chip { opacity: 1; transform: none; transition: opacity .25s ease, transform .45s var(--spring); }

/* ---- 14 h : fiche ---- */
.cjr-row { position: relative; display: grid; grid-template-columns: calc(20 * var(--u)) 1fr; align-items: center; height: calc(8.4 * var(--u)); border-bottom: 1px dashed var(--line); }
.cjr-row small { font-size: calc(2.9 * var(--u)); color: var(--muted); font-weight: 600; }
.cjr-row b { grid-column: 2; grid-row: 1; font-size: calc(3.6 * var(--u)); font-weight: 700; opacity: 0; transform: translateX(calc(-3 * var(--u))); }
.cjr-skel { grid-column: 2; grid-row: 1; height: calc(2.2 * var(--u)); width: 55%; border-radius: 9999px; background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 45%, #eef2f7 90%); background-size: 200% 100%; animation: cjr-shimmer 1.2s linear infinite; }
@keyframes cjr-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cjr.r1 .cjr-row--1 b, .cjr.r2 .cjr-row--2 b, .cjr.r3 .cjr-row--3 b, .cjr.r4 .cjr-row--4 b { opacity: 1; transform: none; transition: opacity .2s ease, transform .45s var(--spring); }
.cjr.r1 .cjr-row--1 .cjr-skel, .cjr.r2 .cjr-row--2 .cjr-skel, .cjr.r3 .cjr-row--3 .cjr-skel, .cjr.r4 .cjr-row--4 .cjr-skel { opacity: 0; transition: opacity .2s ease; }
.cjr.b3-tag .cjr-beat--3 .cjr-chip { opacity: 1; transform: none; transition: opacity .25s ease, transform .45s var(--spring); }
.cjr:not(.b3) .cjr-row b, .cjr:not(.b3) .cjr-skel { transition: none; }

/* ---- 17 h : affaire signée ---- */
.cjr-pipe { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.6 * var(--u)); height: calc(22 * var(--u)); }
.cjr-col { border-radius: calc(2.2 * var(--u)); background: #f8fafc; border: 1px solid var(--line); padding: calc(1.6 * var(--u)); }
.cjr-col small { font-size: calc(2.7 * var(--u)); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cjr-col--won { transition: background .3s ease, border-color .3s ease; }
.cjr.b4-won .cjr-col--won { background: rgba(93,211,158,.14); border-color: rgba(21,128,61,.3); }
.cjr.b4-won .cjr-col--won small { color: #15803d; }
.cjr-deal { position: absolute; left: calc(1 * var(--u)); top: calc(8 * var(--u)); width: calc((100% - 3.2 * var(--u)) / 3 - 2 * var(--u)); display: flex; align-items: center; gap: calc(1.6 * var(--u)); padding: calc(1.8 * var(--u)); background: #fff; border: 1px solid var(--line); border-radius: calc(2 * var(--u)); box-shadow: 0 calc(1.5 * var(--u)) calc(4 * var(--u)) calc(-1.5 * var(--u)) rgba(15,23,42,.25); box-sizing: border-box; }
.cjr-deal .cjr-ic { display: none; } /* la colonne est étroite : le nom et la démo d'origine passent avant l'icône */
.cjr-deal > span:nth-child(2) { min-width: 0; }
.cjr-deal b { display: block; font-size: calc(3.3 * var(--u)); font-weight: 800; }
.cjr-deal small { display: block; font-size: calc(2.4 * var(--u)); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cjr-won-badge { position: absolute; right: calc(-1.6 * var(--u)); top: calc(-1.6 * var(--u)); width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: calc(3 * var(--u)); transform: scale(0); }
.cjr-won-badge .cjr-ico { stroke-width: 3.5; }
.cjr.b4-m1 .cjr-deal { transform: translateX(calc(100% + 3.6 * var(--u))); transition: transform .6s var(--out); }
.cjr.b4-m2 .cjr-deal { transform: translateX(calc(200% + 7.2 * var(--u))); }
.cjr.b4-won .cjr-won-badge { transform: scale(1); transition: transform .45s var(--spring); }
.cjr:not(.b4) .cjr-deal, .cjr:not(.b4-won) .cjr-won-badge { transition: none; }
.cjr-confetti { position: absolute; right: calc(16 * var(--u)); top: calc(22 * var(--u)); width: 0; height: 0; }
.cjr-confetti i { position: absolute; width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); border-radius: 50%; background: var(--g); opacity: 0; }
.cjr-confetti i:nth-child(even) { background: var(--b); border-radius: 2px; }
.cjr.b4-won .cjr-confetti i { animation: cjr-burst 1.1s var(--out) forwards; }
.cjr-confetti i:nth-child(1) { --dx: -14; --dy: -10; } .cjr-confetti i:nth-child(2) { --dx: -6; --dy: -15; }
.cjr-confetti i:nth-child(3) { --dx: 4; --dy: -14; } .cjr-confetti i:nth-child(4) { --dx: 12; --dy: -9; }
.cjr-confetti i:nth-child(5) { --dx: 15; --dy: 0; } .cjr-confetti i:nth-child(6) { --dx: -15; --dy: 2; }
.cjr-confetti i:nth-child(7) { --dx: -9; --dy: 9; } .cjr-confetti i:nth-child(8) { --dx: 9; --dy: 10; }
@keyframes cjr-burst { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) scale(1); } }

/* ---- Fin : la promesse ---- */
.cjr-beat--5 { top: 0; display: grid; place-items: center; text-align: center; }
.cjr-end { margin: 0; display: grid; gap: calc(2 * var(--u)); padding: 0 calc(4 * var(--u)); text-wrap: balance; }
.cjr-end span { display: block; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; opacity: 0; transform: translateY(calc(3 * var(--u))); }
.cjr-end .l1 { font-size: calc(6 * var(--u)); color: var(--muted); }
.cjr-end .l2 { font-size: calc(8.4 * var(--u)); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .08em .14em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.cjr.b5 .cjr-end span { opacity: 1; transform: none; transition: opacity .3s ease, transform .6s var(--out); }
.cjr.b5 .cjr-end .l2 { transition-delay: .5s; }
.cjr:not(.b5) .cjr-end span { transition: none; }

/* Contrôle visuel (#motion-t=…) : chaque étape à son état d'arrivée */
.cjr.is-motion-seek *, .cjr.is-motion-seek *::before, .cjr.is-motion-seek *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }

/* Mouvement réduit : état final figé (data-motion-final) */
@media (prefers-reduced-motion: reduce) {
    .cjr *, .cjr *::before, .cjr *::after { transition: none !important; animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}