/* =====================================================================
   Motion design du hero de /agenda-crm/ (.cag), fond transparent.
   Même grammaire que hero-motion-lp.css (/logiciel-crm/) : format « stories »
   en 4 temps, une accroche par temps, barre de progression en tête. Piloté par
   assets/js/hero-motion.js : b1..b4 = entrée d'un temps, x1..x4 = sortie, puis
   les sous-étapes (b1-day, b1-slot, b1-form, b1-send, b2-toast, c1..c3,
   b3-tag, b4-move, b4-click, b4-task).

   Dimensions en --u (1cqw). Les temps 1 et 4 placent leurs blocs en absolu
   pour que le curseur tombe juste : coordonnées reprises en tête du
   template-part, à recaler ensemble.
   Règle de boucle : chaque état « :not(.bN) » coupe ses transitions, sinon
   la remise à zéro ferait défiler les éléments à l'écran.
   ===================================================================== */
.cag {
    --ink: #0F172A; --muted: #64748b; --line: #e2e8f0;
    --g: #5DD39E; --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: 560px; margin: 0 auto;
    container: cag / inline-size;
    font-family: 'Inter', system-ui, sans-serif; color: var(--ink); text-align: left; line-height: 1.3;
    -webkit-font-smoothing: antialiased;
}
.cag-stage { --u: 1cqw; position: relative; width: 100%; aspect-ratio: 100 / 84; }
.cag-stage b, .cag-stage span, .cag-stage small, .cag-stage em { margin: 0; font-style: normal; }
.cag-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 ---------- */
.cag-progress { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(1.2 * var(--u)); }
.cag-seg { height: calc(.9 * var(--u)); min-height: 3px; border-radius: 9999px; background: rgba(100,116,139,.2); overflow: hidden; }
.cag-seg i { display: block; height: 100%; width: 0; background: var(--grad); border-radius: inherit; }
.cag.b1 .cag-seg:nth-child(1) i { width: 100%; transition: width 3.65s linear; }
.cag.b2 .cag-seg:nth-child(2) i { width: 100%; transition: width 2.7s linear; }
.cag.b3 .cag-seg:nth-child(3) i { width: 100%; transition: width 3.1s linear; }
.cag.b4 .cag-seg:nth-child(4) i { width: 100%; transition: width 3.2s linear; }

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

/* ---------- Scènes ---------- */
.cag-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); }
.cag.b1:not(.x1) .cag-beat--1, .cag.b2:not(.x2) .cag-beat--2, .cag.b3:not(.x3) .cag-beat--3, .cag.b4:not(.x4) .cag-beat--4 { opacity: 1; transform: none; }
.cag.x1 .cag-beat--1, .cag.x2 .cag-beat--2, .cag.x3 .cag-beat--3, .cag.x4 .cag-beat--4 { transform: translateY(calc(-3 * var(--u))) scale(.97); transition-duration: .25s, .3s; }
.cag:not(.b1) .cag-beat--1, .cag:not(.b2) .cag-beat--2, .cag:not(.b3) .cag-beat--3, .cag:not(.b4) .cag-beat--4 { transition: none; }

.cag-panel { 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); }

.cag-head { display: flex; align-items: center; gap: calc(2.4 * var(--u)); padding-bottom: calc(2.6 * var(--u)); border-bottom: 1px solid var(--line); }
.cag-head b { display: block; font-size: calc(4.4 * var(--u)); font-weight: 800; letter-spacing: -.02em; }
.cag-head small { display: flex; align-items: center; gap: calc(1 * var(--u)); font-size: calc(2.9 * var(--u)); color: var(--muted); font-weight: 500; }
.cag-head small .cag-ico { font-size: calc(3.2 * var(--u)); color: var(--b); }
.cag-avatar { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: calc(3.2 * var(--u)); flex: none; }
.cag-avatar--crm { background: var(--ink); }

/* Curseur, commun aux temps 1 et 4. Pointe à ~(1u, .5u) du coin du SVG. */
.cag-cursor { position: absolute; left: calc(80 * var(--u)); top: calc(60 * var(--u)); width: calc(6 * var(--u)); height: calc(6 * var(--u)); opacity: 0; z-index: 4; transition: left .6s var(--out), top .6s var(--out), opacity .2s ease; filter: drop-shadow(0 2px 3px rgba(15,23,42,.3)); }
.cag-cursor svg { width: 100%; height: 100%; }
@keyframes cag-click1 { 50% { transform: scale(.8); } }
@keyframes cag-click2 { 50% { transform: scale(.8); } }
@keyframes cag-click3 { 50% { transform: scale(.8); } }
@keyframes cag-click4 { 50% { transform: scale(.8); } }

/* ---- Temps 1 : le prospect réserve ---- */
.cag-book { position: absolute; left: calc(2 * var(--u)); right: calc(2 * var(--u)); top: 0; height: calc(64 * var(--u)); padding: calc(3 * var(--u)) calc(3.4 * var(--u)); box-sizing: border-box; overflow: hidden; }
.cag-pick, .cag-form { position: absolute; left: calc(3.4 * var(--u)); right: calc(3.4 * var(--u)); top: calc(17 * var(--u)); }
.cag-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(1.6 * var(--u)); }
.cag-day { height: calc(10 * var(--u)); border: 1px solid var(--line); border-radius: calc(2 * var(--u)); display: grid; place-items: center; align-content: center; gap: calc(.3 * var(--u)); background: #fff; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.cag-day small { font-size: calc(2.6 * var(--u)); color: var(--muted); font-weight: 600; }
.cag-day b { font-size: calc(4 * var(--u)); font-weight: 800; }
.cag.b1-day .cag-day--on { background: var(--grad); border-color: transparent; color: #fff; transition-delay: .6s; }
.cag.b1-day .cag-day--on small { color: rgba(255,255,255,.85); }
.cag:not(.b1-day) .cag-day--on { transition: none; }
.cag-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(1.6 * var(--u)); margin-top: calc(2.4 * var(--u)); }
.cag-slot { height: calc(7.5 * var(--u)); display: grid; place-items: center; border: 1.5px solid rgba(43,159,232,.45); color: #0f7fc4; border-radius: calc(2 * var(--u)); font-size: calc(3.5 * var(--u)); font-weight: 700; opacity: 0; transform: translateY(calc(1.5 * var(--u))); }
.cag.b1-day .cag-slot { opacity: 1; transform: none; transition: opacity .25s ease, transform .4s var(--out), background .2s ease, color .2s ease; transition-delay: calc(.7s + var(--i) * 50ms); }
.cag:not(.b1-day) .cag-slot { transition: none; }
.cag-tz { margin-top: calc(3 * var(--u)); text-align: center; font-size: calc(2.8 * var(--u)); color: var(--muted); font-weight: 500; }
.cag.b1-slot .cag-slot--on { background: var(--grad); border-color: transparent; color: #fff; transition-delay: .6s; }

.cag.b1-form .cag-pick { opacity: 0; transform: translateY(calc(-2 * var(--u))); transition: opacity .2s ease, transform .3s ease; }
.cag-form { opacity: 0; transform: translateY(calc(3 * var(--u))); }
.cag.b1-form .cag-form { opacity: 1; transform: none; transition: opacity .25s ease .15s, transform .45s var(--out) .15s; }
.cag:not(.b1-form) .cag-form, .cag:not(.b1-form) .cag-pick { transition: none; }
.cag-recap { height: calc(7 * var(--u)); display: flex; align-items: center; gap: calc(1.6 * var(--u)); padding: 0 calc(2.6 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--grad-soft); color: #0f7fc4; font-size: calc(3.4 * var(--u)); font-weight: 700; }
.cag-recap .cag-ico { font-size: calc(3.6 * var(--u)); }
.cag-field { margin-top: calc(1.8 * var(--u)); }
.cag-field small { display: block; font-size: calc(2.7 * var(--u)); color: var(--muted); font-weight: 600; margin-bottom: calc(.6 * var(--u)) !important; }
.cag-input { height: calc(7 * var(--u)); display: flex; align-items: center; padding: 0 calc(2.4 * var(--u)); border: 1px solid var(--line); border-radius: calc(1.8 * var(--u)); font-size: calc(3.5 * var(--u)); font-weight: 600; }
.cag-typed { display: inline-block; white-space: nowrap; clip-path: inset(0 100% 0 0); }
.cag.b1-form .cag-typed { clip-path: inset(0 0 0 0); transition: clip-path .5s steps(var(--n)) .45s; }
.cag.b1-form .cag-typed--2 { transition-delay: 1s; }
.cag:not(.b1-form) .cag-typed { transition: none; }
.cag-submit { margin-top: calc(2.6 * var(--u)); height: calc(8 * var(--u)); display: grid; place-items: center; border-radius: 9999px; background: var(--grad); color: #fff; font-size: calc(3.6 * var(--u)); font-weight: 700; box-shadow: 0 calc(1.5 * var(--u)) calc(4 * var(--u)) calc(-1.5 * var(--u)) rgba(43,159,232,.6); }
.cag.b1-send .cag-submit { animation: cag-press .3s ease .1s; }
@keyframes cag-press { 50% { transform: scale(.96); filter: brightness(.92); } }

/* Curseur du temps 1 : jour (32u, 22u), créneau 10:00 (50u, 33u), bouton (52u, 54u) */
.cag.b1-day .cag-beat--1 .cag-cursor { opacity: 1; left: calc(32 * var(--u)); top: calc(22 * var(--u)); animation: cag-click1 .25s ease .55s; }
.cag.b1-slot .cag-beat--1 .cag-cursor { left: calc(50 * var(--u)); top: calc(33 * var(--u)); animation: cag-click2 .25s ease .55s; }
.cag.b1-form .cag-beat--1 .cag-cursor { left: calc(52 * var(--u)); top: calc(54 * var(--u)); transition-delay: .4s; }
.cag.b1-send .cag-beat--1 .cag-cursor { animation: cag-click3 .25s ease .05s; }
.cag:not(.b1) .cag-beat--1 .cag-cursor { transition: none; }

/* ---- Temps 2 : l'invitation part seule ---- */
.cag-confirm { position: absolute; left: calc(4 * var(--u)); right: calc(4 * var(--u)); top: calc(1 * var(--u)); padding: calc(4 * var(--u)); text-align: center; display: grid; justify-items: center; }
.cag-ok { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: calc(6.4 * var(--u)); transform: scale(0); box-shadow: 0 calc(1.5 * var(--u)) calc(4 * var(--u)) rgba(43,159,232,.45); }
.cag-ok .cag-ico { stroke-width: 3.5; }
.cag.b2 .cag-ok { transform: scale(1); transition: transform .5s var(--spring) .25s; }
.cag:not(.b2) .cag-ok { transition: none; }
.cag-confirm > b { display: block; margin-top: calc(2.6 * var(--u)) !important; font-size: calc(5 * var(--u)); font-weight: 800; letter-spacing: -.02em; }
.cag-confirm > small { display: block; font-size: calc(3.2 * var(--u)); color: var(--muted); font-weight: 600; margin-top: calc(.6 * var(--u)) !important; }
.cag-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(1.6 * var(--u)); margin-top: calc(3 * var(--u)); }
.cag-chip { display: inline-flex; align-items: center; gap: calc(1.2 * var(--u)); padding: calc(1.3 * var(--u)) calc(2.4 * var(--u)); border-radius: 9999px; background: var(--grad-soft); color: #0f7fc4; font-size: calc(3.1 * var(--u)); font-weight: 700; opacity: 0; transform: scale(.5); }
.cag-chip .cag-ico { font-size: calc(3.4 * var(--u)); }
.cag.b2 .cag-chip { opacity: 1; transform: none; transition: opacity .2s ease, transform .45s var(--spring); transition-delay: calc(.55s + var(--i) * 120ms); }
.cag:not(.b2) .cag-chip { transition: none; }

.cag-toast { position: absolute; left: calc(6 * var(--u)); right: calc(6 * var(--u)); top: calc(48 * var(--u)); display: flex; align-items: center; gap: calc(2.4 * var(--u)); padding: calc(2.6 * var(--u)) calc(3 * var(--u)); border-radius: calc(3 * var(--u)); opacity: 0; transform: translateY(calc(5 * var(--u))); }
.cag-toast b { display: block; font-size: calc(3.7 * var(--u)); font-weight: 800; }
.cag-toast small { display: block; font-size: calc(2.9 * var(--u)); color: var(--muted); font-weight: 500; }
.cag-bell { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: calc(2.2 * var(--u)); background: var(--ink); color: #fff; display: grid; place-items: center; font-size: calc(4 * var(--u)); flex: none; }
.cag.b2-toast .cag-toast { opacity: 1; transform: none; transition: opacity .25s ease, transform .5s var(--spring); }
.cag.b2-toast .cag-bell { animation: cag-ring .6s ease .35s; }
@keyframes cag-ring { 20% { rotate: -14deg; } 40% { rotate: 12deg; } 60% { rotate: -8deg; } 80% { rotate: 4deg; } }
.cag:not(.b2-toast) .cag-toast { transition: none; }

/* ---- Temps 3 : la fiche se remplit ---- */
.cag-card { 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(1.8 * var(--u)); }
.cag-tag { margin-left: auto; display: inline-flex; align-items: center; gap: calc(1 * var(--u)); padding: calc(1.2 * var(--u)) calc(2.2 * var(--u)); border-radius: 9999px; background: var(--grad); color: #fff; font-size: calc(2.8 * var(--u)); font-weight: 700; white-space: nowrap; opacity: 0; transform: scale(.4); }
.cag-tag .cag-ico { font-size: calc(3 * var(--u)); }
.cag.b3-tag .cag-tag { opacity: 1; transform: none; transition: opacity .2s ease, transform .5s var(--spring); animation: cag-glow 1.2s ease .35s; }
.cag:not(.b3-tag) .cag-tag { transition: none; }
@keyframes cag-glow { 0% { box-shadow: 0 0 0 0 rgba(43,159,232,.55); } 100% { box-shadow: 0 0 0 calc(3 * var(--u)) rgba(43,159,232,0); } }
.cag-row { display: grid; grid-template-columns: calc(22 * var(--u)) minmax(0, 1fr); align-items: center; padding: calc(2 * var(--u)) 0; border-bottom: 1px dashed var(--line); }
.cag-row:last-child { border-bottom: 0; }
.cag-row > small { font-size: calc(2.9 * var(--u)); color: var(--muted); font-weight: 600; }
.cag-row-val { position: relative; height: calc(6 * var(--u)); }
.cag-skel { position: absolute; left: 0; top: calc(2 * var(--u)); height: calc(2 * var(--u)); width: var(--w, 50%); border-radius: 9999px; background: linear-gradient(90deg, #eef2f7 0%, #f8fafc 45%, #eef2f7 90%); background-size: 200% 100%; animation: cag-shimmer 1.2s linear infinite; }
@keyframes cag-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.cag-row-in { position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; gap: calc(1.4 * var(--u)); font-size: calc(3.5 * var(--u)); font-weight: 700; white-space: nowrap; opacity: 0; transform: translateX(calc(-3 * var(--u))); }
.cag-row-in em { font-size: calc(2.9 * var(--u)); color: var(--muted); font-weight: 500; }
.cag-logo { width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); border-radius: calc(1.4 * var(--u)); background: var(--ink); color: #fff; display: grid; place-items: center; font-size: calc(3 * var(--u)); font-weight: 800; }
.cag.c1 .cag-row:nth-child(1) .cag-row-in, .cag.c2 .cag-row:nth-child(2) .cag-row-in, .cag.c3 .cag-row:nth-child(3) .cag-row-in { opacity: 1; transform: none; transition: opacity .2s ease, transform .45s var(--spring); }
.cag.c1 .cag-row:nth-child(1) .cag-skel, .cag.c2 .cag-row:nth-child(2) .cag-skel, .cag.c3 .cag-row:nth-child(3) .cag-skel { opacity: 0; transition: opacity .2s ease; }

/* ---- Temps 4 : la relance est prête ---- */
.cag-card--follow { top: 0; height: calc(64 * var(--u)); box-sizing: border-box; overflow: hidden; }
.cag-hist-label { position: absolute; left: calc(3.4 * var(--u)); top: calc(17 * var(--u)); font-size: calc(2.7 * var(--u)); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.cag-event { position: absolute; left: calc(3.4 * var(--u)); right: calc(3.4 * var(--u)); top: calc(21.5 * var(--u)); height: calc(10 * var(--u)); display: flex; align-items: center; gap: calc(2.4 * var(--u)); padding: 0 calc(2.4 * var(--u)); border: 1px solid var(--line); border-radius: calc(2.2 * var(--u)); background: #f8fafc; box-sizing: border-box; }
.cag-event b { display: block; font-size: calc(3.4 * var(--u)); font-weight: 700; }
.cag-event small { display: block; font-size: calc(2.8 * var(--u)); color: var(--muted); font-weight: 500; }
.cag-event-ico { width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u)); border-radius: 50%; display: grid; place-items: center; font-size: calc(3.4 * var(--u)); background: var(--grad-soft); color: #0f7fc4; flex: none; }
.cag-event-ico--done { background: rgba(93,211,158,.2); color: #15803d; }
.cag-event-ico--done .cag-ico { stroke-width: 3; }
.cag-event--task { top: calc(33 * var(--u)); background: #fff; border-color: rgba(43,159,232,.4); opacity: 0; transform: translateY(calc(-3 * var(--u))) scale(.96); }
.cag-pill { margin-left: auto; padding: calc(.7 * var(--u)) calc(2 * var(--u)); border-radius: 9999px; background: var(--grad); color: #fff; font-size: calc(2.7 * var(--u)); font-weight: 700; }
.cag.b4-task .cag-event--task { opacity: 1; transform: none; transition: opacity .25s ease, transform .5s var(--spring); }
.cag:not(.b4-task) .cag-event--task { transition: none; }
.cag-plan { position: absolute; left: calc(3.4 * var(--u)); right: calc(3.4 * var(--u)); top: calc(46 * var(--u)); height: calc(9 * var(--u)); border-radius: 9999px; border: 1.5px solid rgba(15,23,42,.14); display: grid; place-items: center; font-size: calc(3.6 * var(--u)); font-weight: 700; box-sizing: border-box; transition: background .25s ease, border-color .25s ease, color .25s ease; }
.cag-plan > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: calc(1.2 * var(--u)); transition: opacity .2s ease, transform .3s var(--out); }
.cag-plan .cag-ico { font-size: calc(4 * var(--u)); stroke-width: 2.5; }
.cag-plan-b { opacity: 0; transform: translateY(calc(2 * var(--u))); }
.cag.b4-click .cag-plan { animation: cag-press .3s ease; }
.cag.b4-task .cag-plan { background: rgba(93,211,158,.16); border-color: rgba(21,128,61,.35); color: #15803d; }
.cag.b4-task .cag-plan-a { opacity: 0; transform: translateY(calc(-2 * var(--u))); }
.cag.b4-task .cag-plan-b { opacity: 1; transform: none; }
.cag:not(.b4-task) .cag-plan, .cag:not(.b4-task) .cag-plan > span { transition: none; }

/* Curseur du temps 4 : bouton « Planifier la relance » (52u, 51u) */
.cag.b4-move .cag-beat--4 .cag-cursor { opacity: 1; left: calc(52 * var(--u)); top: calc(51 * var(--u)); }
.cag.b4-click .cag-beat--4 .cag-cursor { animation: cag-click4 .25s ease; }
.cag.b4-task .cag-beat--4 .cag-cursor { opacity: 0; transition-delay: .8s; }
.cag:not(.b4) .cag-beat--4 .cag-cursor { transition: none; }

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