/* =====================================================================
   Motion design du hero de la home (.chm), fond transparent.
   Piloté par assets/js/hero-motion.js : chaque étape pose une classe
   sur .chm (s-scatter, s-merge, s-card, f1..f4, d1, d2...).

   Toutes les dimensions sont exprimées en --u, qui vaut 1cqw sur grand
   écran : l'animation suit la largeur de sa colonne. Sous 460px de large,
   --u grossit et la scène passe en colonne (fiche puis priorité, sans
   pipeline) pour que les textes restent lisibles sur téléphone.
   ===================================================================== */
.chm {
    --c-ink: #0F172A; --c-muted: #64748b; --c-line: #e2e8f0; --c-b: #2B9FE8;
    --grad: linear-gradient(135deg, #5DD39E 0%, #2B9FE8 100%);
    --ease: cubic-bezier(.22,1,.36,1);
    --ease-in: cubic-bezier(.55,0,.8,.2);
    position: relative; width: 100%; max-width: 580px; margin: 0 auto;
    container: chm / inline-size;
    font-family: 'Inter', system-ui, sans-serif; color: var(--c-ink); text-align: left; line-height: 1.35;
    -webkit-font-smoothing: antialiased;
}
.chm-stage { --u: 1cqw; position: relative; width: 100%; aspect-ratio: 560 / 540; }
.chm-stage b, .chm-stage small, .chm-stage span, .chm-stage label { margin: 0; line-height: inherit; }
.chm-ico { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; display: block; }

/* ---------- 1. Les outils éparpillés ---------- */
.chm-frag {
    position: absolute; left: 50%; top: 44%;
    transform: translate(-50%, -50%) translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) rotate(var(--r)) scale(.6);
    opacity: 0;
    transition: transform .9s var(--ease), opacity .6s ease;
    transition-delay: var(--d, 0s);
    z-index: 3;
}
.chm-frag-in {
    display: flex; align-items: center; gap: calc(1.6 * var(--u));
    padding: calc(1.7 * var(--u)) calc(2.4 * var(--u)) calc(1.7 * var(--u)) calc(1.8 * var(--u));
    background: #fff; border: 1px solid var(--c-line); border-radius: calc(2.4 * var(--u));
    box-shadow: 0 calc(1.6 * var(--u)) calc(4 * var(--u)) calc(-1.6 * var(--u)) rgba(15,23,42,.18);
    white-space: nowrap;
    animation: chm-bob 3.2s ease-in-out infinite; animation-delay: var(--bob, 0s);
}
.chm-frag-ico { width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); border-radius: calc(1.5 * var(--u)); display: grid; place-items: center; font-size: calc(3 * var(--u)); background: #f1f5f9; color: var(--c-muted); }
.chm-frag-ico--note { background: #fef9c3; color: #a16207; }
.chm-frag b { display: block; font-size: calc(2.35 * var(--u)); font-weight: 600; line-height: 1.2; }
.chm-frag small { display: block; font-size: calc(1.9 * var(--u)); color: var(--c-muted); line-height: 1.3; }
.chm-frag--warn small { color: #d97706; }
@keyframes chm-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(-1.1 * var(--u)); } }

.chm.s-scatter .chm-frag { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--dx) * var(--u)), calc(var(--dy) * var(--u))) rotate(var(--r)) scale(1); }
.chm.s-merge .chm-frag {
    opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.25);
    transition: transform .75s var(--ease-in), opacity .45s ease .3s;
    transition-delay: calc(var(--d, 0s) * .4);
}

/* Onde de fusion */
.chm-pulse {
    position: absolute; left: 50%; top: 44%; width: calc(16 * var(--u)); height: calc(16 * var(--u));
    translate: -50% -50%; border-radius: 50%;
    background: var(--grad); opacity: 0; transform: scale(.2); z-index: 2; pointer-events: none;
}
.chm.s-merge .chm-pulse { animation: chm-pulse 1.1s var(--ease) .55s forwards; }
@keyframes chm-pulse {
    0% { opacity: 0; transform: scale(.2); }
    35% { opacity: .9; transform: scale(.55); }
    100% { opacity: 0; transform: scale(3.2); }
}

/* ---------- 2. La fiche société qui s'enrichit ---------- */
.chm-card {
    position: absolute; left: calc(4 * var(--u)); top: calc(3 * var(--u)); width: calc(76 * var(--u));
    background: #fff; border: 1px solid var(--c-line); border-radius: calc(3.2 * var(--u));
    box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) calc(-3 * var(--u)) rgba(15,23,42,.22), 0 calc(.6 * var(--u)) calc(1.6 * var(--u)) calc(-.6 * var(--u)) rgba(15,23,42,.08);
    padding: calc(3.4 * var(--u)) calc(3.6 * var(--u)) calc(3 * var(--u));
    opacity: 0; transform: translateY(calc(3 * var(--u))) scale(.92); transform-origin: 50% 40%;
    transition: transform .8s var(--ease), opacity .5s ease;
    z-index: 4;
}
.chm.s-card .chm-card { opacity: 1; transform: none; }

.chm-card-head { display: flex; align-items: center; gap: calc(2.2 * var(--u)); }
.chm-logo { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2.2 * var(--u)); display: grid; place-items: center; font-weight: 800; font-size: calc(3.6 * var(--u)); color: #fff; background: #0F172A; flex: none; }
.chm-card-title { flex: 1; min-width: 0; }
.chm-card-title b { display: block; font-size: calc(3.5 * var(--u)); font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.chm-card-title small { display: block; font-size: calc(2.15 * var(--u)); color: var(--c-muted); margin-top: calc(.4 * var(--u)); }

.chm-status { position: relative; flex: none; font-size: calc(1.95 * var(--u)); font-weight: 600; height: calc(4.6 * var(--u)); }
.chm-status span {
    position: absolute; right: 0; top: 0; display: inline-flex; align-items: center; gap: var(--u);
    height: calc(4.6 * var(--u)); padding: 0 calc(2 * var(--u)); border-radius: 9999px; white-space: nowrap;
    transition: opacity .35s ease, transform .45s var(--ease);
}
.chm-status-new { background: #f1f5f9; color: var(--c-muted); }
.chm-status-ok { background: linear-gradient(135deg, rgba(93,211,158,.16), rgba(43,159,232,.16)); color: #0f7fc4; opacity: 0; transform: scale(.8); }
.chm-status-ok .chm-ico { font-size: calc(2.3 * var(--u)); }
.chm.s-enriched .chm-status-new { opacity: 0; transform: scale(.8); }
.chm.s-enriched .chm-status-ok { opacity: 1; transform: none; }

.chm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2.4 * var(--u)) calc(3 * var(--u)); margin-top: calc(3.2 * var(--u)); padding-top: calc(3 * var(--u)); border-top: 1px solid var(--c-line); }
.chm-field { min-width: 0; }
.chm-field label { display: block; font-size: calc(1.85 * var(--u)); color: var(--c-muted); font-weight: 500; margin-bottom: calc(.8 * var(--u)); text-transform: uppercase; letter-spacing: .06em; }
.chm-field-val { position: relative; height: calc(3.4 * var(--u)); }
.chm-skel {
    position: absolute; left: 0; top: calc(.5 * var(--u)); height: calc(2.4 * var(--u)); width: var(--w, 70%); border-radius: 9999px;
    background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 45%, #eef2f7 90%); background-size: 200% 100%;
    animation: chm-shimmer 1.3s linear infinite;
    transition: opacity .3s ease;
}
@keyframes chm-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.chm-val {
    position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: calc(1.1 * var(--u));
    font-size: calc(2.7 * var(--u)); font-weight: 600; white-space: nowrap;
    opacity: 0; transform: translateY(var(--u)); filter: blur(3px);
    transition: opacity .45s ease, transform .55s var(--ease), filter .45s ease;
}
.chm-tick { width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: calc(1.8 * var(--u)); transform: scale(0); transition: transform .4s var(--ease) .15s; flex: none; }
.chm-tick .chm-ico { stroke-width: 3.5; }
.chm.f1 .chm-field:nth-child(1), .chm.f2 .chm-field:nth-child(2),
.chm.f3 .chm-field:nth-child(3), .chm.f4 .chm-field:nth-child(4) { --on: 1; }
.chm-field { --on: 0; }
.chm .chm-field .chm-skel { opacity: calc(1 - var(--on)); }
.chm.f1 .chm-field:nth-child(1) .chm-val, .chm.f2 .chm-field:nth-child(2) .chm-val,
.chm.f3 .chm-field:nth-child(3) .chm-val, .chm.f4 .chm-field:nth-child(4) .chm-val { opacity: 1; transform: none; filter: none; }
.chm.f1 .chm-field:nth-child(1) .chm-tick, .chm.f2 .chm-field:nth-child(2) .chm-tick,
.chm.f3 .chm-field:nth-child(3) .chm-tick, .chm.f4 .chm-field:nth-child(4) .chm-tick { transform: scale(1); }

.chm-contact {
    display: flex; align-items: center; gap: calc(2 * var(--u)); margin-top: calc(3.2 * var(--u)); padding: calc(2.2 * var(--u)) calc(2.4 * var(--u));
    border-radius: calc(2.4 * var(--u)); background: #f8fafc; border: 1px solid var(--c-line);
    opacity: 0; transform: translateY(calc(1.5 * var(--u)));
    transition: opacity .5s ease, transform .6s var(--ease);
}
.chm.s-contact .chm-contact { opacity: 1; transform: none; }
.chm-avatar { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: calc(2.3 * var(--u)); font-weight: 700; flex: none; }
.chm-contact-txt { flex: 1; min-width: 0; }
.chm-contact-txt b { display: block; font-size: calc(2.5 * var(--u)); font-weight: 600; }
.chm-contact-txt small { display: block; font-size: calc(2 * var(--u)); color: var(--c-muted); }
.chm-pill { flex: none; font-size: calc(1.85 * var(--u)); font-weight: 600; color: #15803d; background: rgba(93,211,158,.18); padding: calc(.8 * var(--u)) calc(1.8 * var(--u)); border-radius: 9999px; white-space: nowrap; display: inline-flex; align-items: center; gap: calc(.8 * var(--u)); }
.chm-pill .chm-ico { font-size: calc(2 * var(--u)); stroke-width: 3; }

.chm-source { display: flex; align-items: center; gap: var(--u); margin-top: calc(2.4 * var(--u)); font-size: calc(1.85 * var(--u)); color: var(--c-muted); opacity: 0; transition: opacity .5s ease; }
.chm-source .chm-ico { color: var(--c-b); font-size: calc(2.2 * var(--u)); }
.chm.s-enriched .chm-source { opacity: 1; }

/* Balayage lumineux pendant l'enrichissement */
.chm-scan { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.chm-scan::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
    background: linear-gradient(90deg, transparent, rgba(93,211,158,.16), rgba(43,159,232,.18), transparent);
    opacity: 0;
}
.chm.s-scan .chm-scan::after { animation: chm-scan 1.8s ease-in-out forwards; }
@keyframes chm-scan { 0% { left: -40%; opacity: 1; } 100% { left: 110%; opacity: 1; } }

/* ---------- 3. Le pipeline ---------- */
.chm-pipe {
    position: absolute; left: calc(12 * var(--u)); top: calc(62.5 * var(--u)); width: calc(76 * var(--u));
    background: #fff; border: 1px solid var(--c-line); border-radius: calc(3 * var(--u));
    box-shadow: 0 calc(2.4 * var(--u)) calc(6 * var(--u)) calc(-2.4 * var(--u)) rgba(15,23,42,.2);
    padding: calc(2.4 * var(--u)) calc(2.6 * var(--u)) calc(2.6 * var(--u));
    opacity: 0; transform: translateY(calc(3 * var(--u)));
    transition: transform .7s var(--ease), opacity .5s ease;
    z-index: 5;
}
.chm.s-pipe .chm-pipe { opacity: 1; transform: none; }
.chm-pipe-head { display: flex; justify-content: space-between; align-items: baseline; font-size: calc(2 * var(--u)); color: var(--c-muted); font-weight: 600; margin-bottom: calc(1.8 * var(--u)); }
.chm-pipe-head b { color: var(--c-ink); font-size: calc(2.3 * var(--u)); }
.chm-pipe-track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--u); }
.chm-col { height: calc(9.5 * var(--u)); border-radius: calc(1.6 * var(--u)); background: #f8fafc; border: 1px dashed #dbe3ec; padding: calc(1.2 * var(--u)) calc(1.3 * var(--u)); font-size: calc(1.7 * var(--u)); color: var(--c-muted); font-weight: 600; transition: background .4s ease, border-color .4s ease, color .4s ease; }
.chm:not(.d1) .chm-col:nth-child(1), .chm.d1:not(.d2) .chm-col:nth-child(2), .chm.d2 .chm-col:nth-child(3) {
    background: linear-gradient(135deg, rgba(93,211,158,.10), rgba(43,159,232,.10)); border-color: rgba(43,159,232,.45); border-style: solid; color: #0f7fc4;
}
.chm-deal {
    position: absolute; top: calc(4.4 * var(--u)); left: 0; width: calc(25% - var(--u));
    padding: 0 var(--u); box-sizing: border-box;
    transition: transform .8s var(--ease);
}
.chm-deal-in { background: #fff; border: 1px solid var(--c-line); border-radius: calc(1.2 * var(--u)); padding: calc(.9 * var(--u)) calc(1.1 * var(--u)); box-shadow: 0 var(--u) calc(2.4 * var(--u)) calc(-1 * var(--u)) rgba(15,23,42,.25); font-size: calc(1.75 * var(--u)); font-weight: 700; display: flex; align-items: center; gap: calc(.8 * var(--u)); white-space: nowrap; }
.chm-deal-in i { width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); border-radius: 50%; background: var(--grad); flex: none; }
.chm-deal-in em { font-style: normal; color: var(--c-muted); font-weight: 600; margin-left: auto; }
.chm.d1 .chm-deal { transform: translateX(calc(100% + 1.33 * var(--u))); }
.chm.d2 .chm-deal { transform: translateX(calc(200% + 2.66 * var(--u))); }

/* ---------- 4. La priorité du jour ---------- */
.chm-task {
    position: absolute; right: 0; top: calc(80 * var(--u)); width: calc(52 * var(--u));
    display: flex; align-items: center; gap: calc(2 * var(--u));
    background: #0F172A; color: #fff; border-radius: calc(3 * var(--u)); padding: calc(2.4 * var(--u)) calc(2.6 * var(--u));
    box-shadow: 0 calc(3 * var(--u)) calc(7 * var(--u)) calc(-2.4 * var(--u)) rgba(15,23,42,.55);
    opacity: 0; transform: translate(calc(6 * var(--u)), 0) scale(.94);
    transition: transform .75s var(--ease), opacity .45s ease;
    z-index: 6;
}
.chm.s-task .chm-task { opacity: 1; transform: none; }
.chm-task-ico { width: calc(6.6 * var(--u)); height: calc(6.6 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--grad); display: grid; place-items: center; font-size: calc(3.2 * var(--u)); flex: none; }
.chm.s-task .chm-task-ico { animation: chm-ring 1.4s ease .5s 2; }
@keyframes chm-ring { 0%, 100% { rotate: 0deg; } 10%, 30% { rotate: -12deg; } 20%, 40% { rotate: 12deg; } 50% { rotate: 0deg; } }
.chm-task-txt { flex: 1; min-width: 0; }
.chm-task-txt small { display: block; font-size: calc(1.75 * var(--u)); text-transform: uppercase; letter-spacing: .08em; color: #7dd3fc; font-weight: 700; }
.chm-task-txt b { display: block; font-size: calc(2.6 * var(--u)); font-weight: 700; margin: calc(.3 * var(--u)) 0; position: relative; width: fit-content; color: #fff; transition: color .3s ease; }
.chm-task-txt b::after { content: ""; position: absolute; left: 0; top: 55%; height: 2px; width: 0; background: rgba(255,255,255,.7); transition: width .5s var(--ease) .15s; }
.chm-task-txt span { display: block; font-size: calc(1.9 * var(--u)); color: #cbd5e1; line-height: 1.35; }
.chm-check { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; border: 2px solid rgba(255,255,255,.35); display: grid; place-items: center; flex: none; transition: background .35s ease, border-color .35s ease, transform .4s var(--ease); }
.chm-check svg { width: calc(2.8 * var(--u)); height: calc(2.8 * var(--u)); fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.chm-check polyline { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .45s ease .1s; }
.chm.s-done .chm-check { background: var(--grad); border-color: transparent; transform: scale(1.08); }
.chm.s-done .chm-check polyline { stroke-dashoffset: 0; }
.chm.s-done .chm-task-txt b { color: rgba(255,255,255,.75); }
.chm.s-done .chm-task-txt b::after { width: 100%; }

/* ---------- Sortie de boucle ---------- */
.chm.s-out .chm-card, .chm.s-out .chm-pipe, .chm.s-out .chm-task {
    opacity: 0; transform: translateY(calc(-2 * var(--u))) scale(.97);
    transition: opacity .6s ease, transform .7s var(--ease);
}

/* ---------- Téléphone : scène en colonne, textes agrandis ----------
   Sous 460px de colonne, la composition bureau tomberait sous 8px de texte.
   --u passe à 1,5cqw, la fiche prend toute la largeur, la priorité se pose
   sous elle et le pipeline disparaît (la timeline mobile le saute). */
@container chm (max-width: 460px) {
    .chm-stage { --u: 1.5cqw; aspect-ratio: auto; display: flex; flex-direction: column; padding: calc(1 * var(--u)) 0 calc(4 * var(--u)); }
    .chm-frag { transform: translate(-50%, -50%) translate(calc(var(--mx) * 1cqw), calc(var(--my) * 1cqw)) rotate(var(--r)) scale(.6); }
    .chm.s-scatter .chm-frag { transform: translate(-50%, -50%) translate(calc(var(--mx) * 1cqw), calc(var(--my) * 1cqw)) rotate(var(--r)) scale(1); }
    .chm-card { position: relative; left: auto; top: auto; width: auto; }
    .chm-field:nth-child(3) { display: none; }
    .chm-field:nth-child(4) { grid-column: 1 / -1; }
    .chm-val { font-size: calc(2.4 * var(--u)); }
    .chm-pipe { display: none; }
    .chm-task { position: relative; right: auto; top: auto; align-self: flex-end; width: 86%; margin-top: calc(-3 * var(--u)); }
}

/* Contrôle visuel (#motion-t=…) : chaque étape affichée à son état d'arrivée */
.chm.is-motion-seek *, .chm.is-motion-seek *::before, .chm.is-motion-seek *::after { transition: none !important; animation-play-state: paused !important; }

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