/* =====================================================================
   Motion design du hero de /application-mobile-crm/ (.cmo), fond transparent.
   Même grammaire que hero-motion-agenda.css : 4 temps, une accroche par temps,
   barre de progression en tête. Le téléphone reste en place, seul l'écran change.
   Classes posées par assets/js/hero-motion.js : b1..b4 (entrée), x1..x4 (sortie
   de l'accroche), et les sous-étapes b1-type, b1-filter, b1-tap, c1..c3,
   b3-type, b3-save, b3-done, b4-check.

   Deux repères : --u (1 % de la scène) hors du téléphone, --s (1 % de la largeur
   de l'écran, hauteur 196s) dedans. Le second marche parce que .cmo-screen est
   lui-même un conteneur : les cqw de ses descendants se rapportent à lui.
   Règle de boucle : chaque état « :not(.bN) » coupe ses transitions.
   ===================================================================== */
.cmo {
    --ink: #0F172A; --muted: #64748b; --line: #e2e8f0;
    --b: #2B9FE8;
    --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: 470px; margin: 0 auto;
    container: cmo / inline-size;
    font-family: 'Inter', system-ui, sans-serif; color: var(--ink); text-align: left; line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}
.cmo-stage { --u: 1cqw; position: relative; width: 100%; aspect-ratio: 100 / 132; }
.cmo-stage b, .cmo-stage span, .cmo-stage small, .cmo-stage i { margin: 0; font-style: normal; }
.cmo-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 ---------- */
.cmo-progress { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(1.2 * var(--u)); }
.cmo-seg { height: calc(.9 * var(--u)); min-height: 3px; border-radius: 9999px; background: rgba(100,116,139,.2); overflow: hidden; }
.cmo-seg i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: inherit; }
.cmo.b1 .cmo-seg:nth-child(1) i { width: 100%; transition: width 2.45s linear; }
.cmo.b2 .cmo-seg:nth-child(2) i { width: 100%; transition: width 2.7s linear; }
.cmo.b3 .cmo-seg:nth-child(3) i { width: 100%; transition: width 4.4s linear; }
.cmo.b4 .cmo-seg:nth-child(4) i { width: 100%; transition: width 3.4s linear; }

/* ---------- Accroches ---------- */
.cmo-caps { position: absolute; left: 0; right: 0; top: calc(4.5 * var(--u)); height: calc(10 * var(--u)); text-align: center; }
.cmo-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; }
.cmo-cap span { display: inline-block; transform: translateY(115%); transition: transform .55s var(--out); transition-delay: calc(var(--i, 0) * 70ms); }
.cmo-cap .g { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .04em; }
.cmo.b1:not(.x1) .cmo-cap--1 span, .cmo.b2:not(.x2) .cmo-cap--2 span, .cmo.b3:not(.x3) .cmo-cap--3 span, .cmo.b4:not(.x4) .cmo-cap--4 span { transform: none; }
.cmo.x1 .cmo-cap--1 span, .cmo.x2 .cmo-cap--2 span, .cmo.x3 .cmo-cap--3 span, .cmo.x4 .cmo-cap--4 span { transform: translateY(-115%); transition-duration: .35s; transition-timing-function: ease-in; transition-delay: calc(var(--i, 0) * 30ms); }
.cmo:not(.b1) .cmo-cap--1 span, .cmo:not(.b2) .cmo-cap--2 span, .cmo:not(.b3) .cmo-cap--3 span, .cmo:not(.b4) .cmo-cap--4 span { transition: none; }

/* ---------- Le téléphone ---------- */
.cmo-phone { position: absolute; left: calc(20 * var(--u)); width: calc(60 * var(--u)); top: calc(17 * var(--u)); padding: calc(1.8 * var(--u)); box-sizing: border-box; background: #0F172A; border-radius: calc(9 * var(--u)); box-shadow: 0 calc(5 * var(--u)) calc(12 * var(--u)) calc(-4 * var(--u)) rgba(15,23,42,.45); }
.cmo-screen { --s: 1cqw; container-type: inline-size; position: relative; aspect-ratio: 100 / 196; background: #fff; border-radius: calc(7.4 * var(--u)); overflow: hidden; }

.cmo-status { position: absolute; left: 0; right: 0; top: 0; height: calc(9 * var(--s)); display: flex; align-items: center; justify-content: space-between; padding: calc(1.5 * var(--s)) calc(8 * var(--s)) 0; box-sizing: border-box; font-size: calc(4.2 * var(--s)); }
.cmo-status b { font-weight: 700; }
.cmo-bars { display: flex; align-items: flex-end; gap: calc(.6 * var(--s)); height: calc(3.2 * var(--s)); }
.cmo-bars i { display: block; width: calc(.9 * var(--s)); background: var(--ink); border-radius: 1px; }
.cmo-bars i:nth-child(1) { height: 35%; } .cmo-bars i:nth-child(2) { height: 55%; } .cmo-bars i:nth-child(3) { height: 78%; } .cmo-bars i:nth-child(4) { height: 100%; }

.cmo-views { position: absolute; left: 0; right: 0; top: calc(9 * var(--s)); bottom: calc(18 * var(--s)); overflow: hidden; }
.cmo.x4 .cmo-views { opacity: 0; transition: opacity .3s ease; }
.cmo-view { position: absolute; inset: 0; background: #fff; }
.cmo-bar { height: calc(14 * var(--s)); display: flex; align-items: center; gap: calc(3 * var(--s)); padding: 0 calc(6 * var(--s)); }
.cmo-bar b { font-size: calc(7 * var(--s)); font-weight: 800; letter-spacing: -.02em; }
.cmo-bar .cmo-ico { font-size: calc(6 * var(--s)); }

.cmo-av { width: calc(9 * var(--s)); height: calc(9 * var(--s)); border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: calc(3.4 * var(--s)); flex: none; }
.cmo-av--g { background: var(--grad); }
.cmo-item--skel .cmo-av, .cmo-task.cmo-item--skel .cmo-box { background: #eef2f7; }
.cmo-item--skel i { display: block; height: calc(2.6 * var(--s)); width: var(--w); border-radius: 9999px; background: #eef2f7; }
.cmo-item--skel i + i { margin-top: calc(1.6 * var(--s)); height: calc(2 * var(--s)); background: #f4f6f9; }

/* Temps 1 : liste */
.cmo-view--list { opacity: 0; }
.cmo.b1 .cmo-view--list { opacity: 1; transition: opacity .3s ease, transform .4s var(--out); }
.cmo.b2 .cmo-view--list { opacity: 0; transform: translateX(-30%); }
.cmo:not(.b1) .cmo-view--list { transition: none; }
.cmo-search { position: absolute; left: calc(5 * var(--s)); right: calc(5 * var(--s)); top: calc(15 * var(--s)); height: calc(11 * var(--s)); display: flex; align-items: center; gap: calc(2.4 * var(--s)); padding: 0 calc(3.6 * var(--s)); box-sizing: border-box; border-radius: 9999px; background: #f1f5f9; font-size: calc(4.6 * var(--s)); }
.cmo-search .cmo-ico { color: var(--muted); }
.cmo-ph { position: absolute; left: calc(11.6 * var(--s)); color: #94a3b8; }
.cmo-typed { display: inline-block; white-space: nowrap; font-weight: 600; clip-path: inset(0 100% 0 0); }
.cmo.b1-type .cmo-ph { opacity: 0; }
.cmo.b1-type .cmo-search .cmo-typed { clip-path: inset(0 0 0 0); transition: clip-path .45s steps(var(--n)); }
.cmo:not(.b1-type) .cmo-search .cmo-typed { transition: none; }
.cmo-list { position: absolute; left: 0; right: 0; top: calc(30 * var(--s)); }
.cmo-item { height: calc(15 * var(--s)); display: flex; align-items: center; gap: calc(3 * var(--s)); padding: 0 calc(6 * var(--s)); border-bottom: 1px solid #f1f5f9; }
.cmo-item > span:last-child { flex: 1; min-width: 0; }
.cmo-item b { display: block; font-size: calc(4.8 * var(--s)); font-weight: 700; }
.cmo-item small { display: block; font-size: calc(3.8 * var(--s)); color: var(--muted); }
.cmo.b1-filter .cmo-item:not(.cmo-item--hit) { opacity: 0; transform: translateY(calc(-2 * var(--s))); transition: opacity .25s ease, transform .3s ease; }
.cmo.b1-tap .cmo-item--hit { background: var(--grad-soft); transition: background .2s ease .1s; }

/* Temps 2 et 3 : fiche */
.cmo-view--contact { transform: translateX(100%); }
.cmo.b2 .cmo-view--contact { transform: none; transition: transform .45s var(--out); }
.cmo.b4 .cmo-view--contact { opacity: 0; transition: opacity .25s ease .3s; }
.cmo:not(.b2) .cmo-view--contact { transition: none; }
.cmo-who { position: absolute; left: 0; right: 0; top: calc(15 * var(--s)); display: grid; justify-items: center; text-align: center; }
.cmo-av--xl { width: calc(16 * var(--s)); height: calc(16 * var(--s)); font-size: calc(5.6 * var(--s)); }
.cmo-who b { font-size: calc(6.4 * var(--s)); font-weight: 800; letter-spacing: -.02em; margin-top: calc(2 * var(--s)) !important; }
.cmo-who small { display: flex; align-items: center; gap: calc(1.2 * var(--s)); font-size: calc(3.9 * var(--s)); color: var(--muted); font-weight: 500; }
.cmo-actions { position: absolute; left: calc(8 * var(--s)); right: calc(8 * var(--s)); top: calc(51 * var(--s)); display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.cmo-actions > span { display: grid; justify-items: center; gap: calc(1 * var(--s)); font-size: calc(3.5 * var(--s)); color: var(--muted); font-weight: 600; }
.cmo-actions i { width: calc(11 * var(--s)); height: calc(11 * var(--s)); border-radius: 50%; background: var(--grad-soft); color: #0f7fc4; display: grid; place-items: center; font-size: calc(5 * var(--s)); }
.cmo.b3 .cmo-act-note i { background: var(--grad); color: #fff; transition: background .2s ease .2s, color .2s ease .2s; }
.cmo.b3-done .cmo-act-note i { background: var(--grad-soft); color: #0f7fc4; }
.cmo-tabs { position: absolute; left: calc(6 * var(--s)); right: calc(6 * var(--s)); top: calc(70 * var(--s)); display: flex; gap: calc(2 * var(--s)); }
.cmo-tabs span { padding: calc(1.6 * var(--s)) calc(3.4 * var(--s)); border-radius: 9999px; border: 1px solid var(--line); font-size: calc(3.7 * var(--s)); font-weight: 600; color: var(--muted); }
.cmo-tabs .is-on { border-color: rgba(43,159,232,.5); background: rgba(43,159,232,.1); color: #0f7fc4; }
.cmo-hist { position: absolute; left: calc(6 * var(--s)); right: calc(6 * var(--s)); top: calc(82 * var(--s)); }
.cmo-ev { height: calc(17 * var(--s)); display: flex; align-items: center; gap: calc(3 * var(--s)); border-bottom: 1px dashed var(--line); box-sizing: border-box; opacity: 0; transform: translateX(calc(-4 * var(--s))); }
.cmo-ev > span:last-child { min-width: 0; }
.cmo-ev b { display: block; font-size: calc(4.2 * var(--s)); font-weight: 700; white-space: nowrap; }
.cmo-ev small { display: block; font-size: calc(3.5 * var(--s)); color: var(--muted); }
.cmo-ev-ico { width: calc(8.5 * var(--s)); height: calc(8.5 * var(--s)); border-radius: 50%; background: #f1f5f9; color: var(--muted); display: grid; place-items: center; font-size: calc(4.2 * var(--s)); flex: none; }
.cmo.c1 .cmo-ev--1, .cmo.c2 .cmo-ev--2, .cmo.c3 .cmo-ev--3 { opacity: 1; transform: none; transition: opacity .2s ease, transform .45s var(--spring); }
.cmo-ev--new { position: absolute; left: 0; right: 0; top: 0; transform: scale(.9); }
.cmo-ev--new .cmo-ev-ico { background: var(--grad); color: #fff; }
.cmo.b3-done .cmo-ev--new { opacity: 1; transform: none; transition: opacity .25s ease .25s, transform .5s var(--spring) .25s; }
.cmo.b3-done .cmo-hist .cmo-ev:not(.cmo-ev--new) { transform: translateY(calc(17 * var(--s))); transition: transform .4s var(--out); }
.cmo:not(.b3-done) .cmo-ev--new { transition: none; }

.cmo-dim { position: absolute; inset: 0; background: rgba(15,23,42,.35); opacity: 0; }
.cmo-sheet { position: absolute; left: 0; right: 0; bottom: 0; top: calc(77 * var(--s)); padding: calc(3.4 * var(--s)) calc(6 * var(--s)) 0; box-sizing: border-box; background: #fff; border-radius: calc(6 * var(--s)) calc(6 * var(--s)) 0 0; transform: translateY(105%); box-shadow: 0 calc(-2 * var(--s)) calc(8 * var(--s)) rgba(15,23,42,.15); }
.cmo.b3:not(.b3-done) .cmo-dim { opacity: 1; transition: opacity .3s ease .35s; }
.cmo.b3:not(.b3-done) .cmo-sheet { transform: none; transition: transform .45s var(--out) .35s; }
.cmo.b3-done .cmo-dim { transition: opacity .25s ease; }
.cmo.b3-done .cmo-sheet { transition: transform .3s ease-in; }
.cmo:not(.b3) .cmo-dim, .cmo:not(.b3) .cmo-sheet { transition: none; }
.cmo-grip { width: calc(12 * var(--s)); height: calc(1.4 * var(--s)); border-radius: 9999px; background: #cbd5e1; margin: 0 auto calc(3 * var(--s)); }
.cmo-sheet-title { display: block; font-size: calc(5.6 * var(--s)); font-weight: 800; margin-bottom: calc(2.4 * var(--s)) !important; }
.cmo-sheet small { display: block; font-size: calc(3.5 * var(--s)); color: var(--muted); font-weight: 600; margin: calc(1.4 * var(--s)) 0 calc(1 * var(--s)) !important; }
.cmo-input { height: calc(10 * var(--s)); display: flex; align-items: center; padding: 0 calc(3 * var(--s)); border: 1px solid var(--line); border-radius: calc(2.4 * var(--s)); font-size: calc(4.2 * var(--s)); overflow: hidden; }
.cmo-input--area { height: calc(18 * var(--s)); align-items: flex-start; padding-top: calc(3 * var(--s)); box-sizing: border-box; }
.cmo.b3-type .cmo-sheet .cmo-typed { clip-path: inset(0 0 0 0); transition: clip-path .6s steps(var(--n)); }
.cmo.b3-type .cmo-sheet .cmo-typed--2 { transition-duration: .8s; transition-delay: .75s; }
.cmo:not(.b3-type) .cmo-sheet .cmo-typed { transition: none; }
.cmo-save { position: absolute; left: calc(6 * var(--s)); right: calc(6 * var(--s)); bottom: calc(8 * var(--s)); height: calc(11 * var(--s)); display: grid; place-items: center; border-radius: 9999px; background: var(--grad); color: #fff; font-size: calc(4.4 * var(--s)); font-weight: 700; }
.cmo.b3-save .cmo-save { animation: cmo-press .3s ease .1s; }
@keyframes cmo-press { 50% { transform: scale(.96); filter: brightness(.92); } }

/* Temps 4 : tâches */
.cmo-view--tasks { opacity: 0; }
.cmo.b4 .cmo-view--tasks { opacity: 1; transition: opacity .3s ease .35s; }
.cmo:not(.b4) .cmo-view--tasks { transition: none; }
.cmo-count { position: relative; height: calc(7 * var(--s)); padding: 0 calc(6 * var(--s)); font-size: calc(3.9 * var(--s)); color: var(--muted); font-weight: 600; }
.cmo-count span { position: absolute; left: calc(6 * var(--s)); top: 0; transition: opacity .2s ease; }
.cmo-count-b { opacity: 0; }
.cmo.b4-check .cmo-count-a { opacity: 0; }
.cmo.b4-check .cmo-count-b { opacity: 1; transition-delay: .3s; }
.cmo-task { height: calc(18 * var(--s)); display: flex; align-items: center; gap: calc(3.4 * var(--s)); padding: 0 calc(6 * var(--s)); border-bottom: 1px solid #f1f5f9; margin-top: calc(2 * var(--s)); }
.cmo-task:first-of-type { margin-top: calc(2 * var(--s)); }
.cmo-task > span:last-child { flex: 1; min-width: 0; }
.cmo-task b { display: block; font-size: calc(4.6 * var(--s)); font-weight: 700; }
.cmo-task small { display: block; font-size: calc(3.6 * var(--s)); color: var(--muted); }
.cmo-task .cmo-due { color: #dc2626; font-weight: 600; }
.cmo-box { width: calc(7 * var(--s)); height: calc(7 * var(--s)); border-radius: 50%; border: 2px solid #cbd5e1; display: grid; place-items: center; color: #fff; font-size: calc(4 * var(--s)); flex: none; box-sizing: border-box; }
.cmo-box .cmo-ico { stroke-width: 3.5; transform: scale(0); }
.cmo.b4-check .cmo-task--1 .cmo-box { background: var(--grad); border-color: transparent; transition: background .2s ease .15s, border-color .2s ease .15s; }
.cmo.b4-check .cmo-task--1 .cmo-box .cmo-ico { transform: none; transition: transform .4s var(--spring) .2s; }
.cmo.b4-check .cmo-task--1 b, .cmo.b4-check .cmo-task--1 .cmo-due { color: #94a3b8; transition: color .3s ease .3s; }
.cmo.b4-check .cmo-task--1 b { text-decoration: line-through; }
.cmo:not(.b4-check) .cmo-task--1 *, .cmo:not(.b4-check) .cmo-count span { transition: none; }

/* Barre d'onglets */
.cmo-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(18 * var(--s)); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); background: #fff; padding-bottom: calc(2.4 * var(--s)); box-sizing: border-box; }
.cmo-tab { display: grid; justify-items: center; align-content: center; gap: calc(.8 * var(--s)); font-size: calc(3.3 * var(--s)); font-weight: 600; color: #94a3b8; }
.cmo-tab .cmo-ico { font-size: calc(5.6 * var(--s)); }
.cmo:not(.b4) .cmo-tab--contacts, .cmo.b4 .cmo-tab--tasks { color: var(--b); }
.cmo.b4 .cmo-tab--tasks, .cmo.b4 .cmo-tab--contacts { transition: color .2s ease .2s; }

/* Toucher : un seul indicateur, déplacé d'un point à l'autre (coordonnées en s) */
.cmo-tap { position: absolute; width: calc(10 * var(--s)); height: calc(10 * var(--s)); margin: calc(-5 * var(--s)) 0 0 calc(-5 * var(--s)); border-radius: 50%; background: rgba(15,23,42,.16); border: 2px solid rgba(43,159,232,.6); box-sizing: border-box; opacity: 0; pointer-events: none; z-index: 5; }
@keyframes cmo-tap1 { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes cmo-tap2 { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes cmo-tap3 { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes cmo-tap4 { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes cmo-tap5 { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
.cmo.b1-tap .cmo-tap { left: calc(40 * var(--s)); top: calc(46.5 * var(--s)); animation: cmo-tap1 .55s ease; }
.cmo.b3 .cmo-tap { left: calc(76.7 * var(--s)); top: calc(65.5 * var(--s)); animation: cmo-tap2 .55s ease .1s; }
.cmo.b3-save .cmo-tap { left: calc(50 * var(--s)); top: calc(164.5 * var(--s)); animation: cmo-tap3 .55s ease; }
.cmo.b4 .cmo-tap { left: calc(83.3 * var(--s)); top: calc(185 * var(--s)); animation: cmo-tap4 .55s ease .05s; }
.cmo.b4-check .cmo-tap { left: calc(9.5 * var(--s)); top: calc(43 * var(--s)); animation: cmo-tap5 .55s ease; }

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