/* ============================================================
   Mockups animés « Transfert de données offert »
   3 variantes : .tm-a (pont de données, fiche produit),
   .tm-b (checklist 0€, catalogue), .tm-c (friction barrée, home).
   Requiert les variables du site (--primary, --ink, --muted…).
   ============================================================ */

/* ── A : pont de données (bandeau fiche produit) ── */
.tm-a { display: flex; align-items: center; gap: clamp(16px, 4vw, 40px); background: linear-gradient(165deg, #16255C, var(--primary)); color: #fff; border-radius: 12px; padding: 20px 24px; flex-wrap: wrap; }
.tm-a .tm-txt { flex: 1; min-width: 220px; }
.tm-a .tm-txt b { font-family: Montserrat, sans-serif; font-weight: 900; font-size: 1.02rem; display: block; margin-bottom: 4px; }
.tm-a .tm-txt span { font-size: .82rem; color: rgba(255,255,255,.85); font-family: Lato, sans-serif; }
.tm-a .tm-badge { background: #D1FAE5; color: #065F46; font-family: Outfit, sans-serif; font-size: .7rem; font-weight: 700; border-radius: 999px; padding: 5px 12px; }
.tm-flow { display: flex; align-items: center; gap: 46px; position: relative; flex-shrink: 0; }
.tm-ph { width: 44px; height: 82px; background: #0B1120; border-radius: 11px; padding: 3px; }
.tm-ph i { display: flex; width: 100%; height: 100%; border-radius: 8px; background: #1B2A4A; align-items: center; justify-content: center; font-style: normal; font-size: .95rem; }
.tm-ph.new i { background: linear-gradient(165deg, #123B2A, #1C7A4F); }
.tm-dot { position: absolute; top: 50%; left: 40px; font-size: .8rem; animation: tmTravel 3.6s linear infinite; }
.tm-dot:nth-child(3) { animation-delay: .9s; } .tm-dot:nth-child(4) { animation-delay: 1.8s; } .tm-dot:nth-child(5) { animation-delay: 2.7s; }
@keyframes tmTravel { 0% { transform: translate(0, -50%) scale(.5); opacity: 0; } 14% { opacity: 1; transform: translate(6px, -70%) scale(1); } 86% { opacity: 1; transform: translate(42px, -70%) scale(1); } 100% { transform: translate(50px, -50%) scale(.5); opacity: 0; } }

/* ── B : checklist 0€ (bandeau catalogue) ── */
.tm-b { display: flex; align-items: center; gap: clamp(16px, 3vw, 32px); background: #fff; border: 1.5px solid var(--badge-bg, #E8F0FE); border-radius: 12px; padding: 16px 22px; margin-bottom: 1.5rem; flex-wrap: wrap; }
.tm-b .tm-txt b { font-family: Montserrat, sans-serif; font-weight: 900; font-size: .98rem; display: block; margin-bottom: 3px; }
.tm-b .tm-txt span { font-size: .8rem; color: var(--muted); font-family: Lato, sans-serif; }
.tm-b .tm-items { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.tm-b .tm-it { display: flex; align-items: center; gap: 6px; font-family: Outfit, sans-serif; font-size: .78rem; font-weight: 600; }
.tm-b .tm-c { width: 17px; height: 17px; border-radius: 50%; border: 2px solid #D2D6DF; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .55rem; flex-shrink: 0; }
.tm-b .tm-c::after { content: '✓'; opacity: 0; }
.tm-b .tm-it:nth-child(1) .tm-c { animation: tmCheck 6s infinite .3s; } .tm-b .tm-it:nth-child(1) .tm-c::after { animation: tmTick 6s infinite .3s; }
.tm-b .tm-it:nth-child(2) .tm-c { animation: tmCheck 6s infinite 1.4s; } .tm-b .tm-it:nth-child(2) .tm-c::after { animation: tmTick 6s infinite 1.4s; }
.tm-b .tm-it:nth-child(3) .tm-c { animation: tmCheck 6s infinite 2.5s; } .tm-b .tm-it:nth-child(3) .tm-c::after { animation: tmTick 6s infinite 2.5s; }
.tm-b .tm-it:nth-child(4) .tm-c { animation: tmCheck 6s infinite 3.6s; } .tm-b .tm-it:nth-child(4) .tm-c::after { animation: tmTick 6s infinite 3.6s; }
.tm-b .tm-zero { font-family: "Luckiest Guy", cursive; font-size: 1.5rem; color: var(--success, #10B981); animation: tmPop 6s infinite 4.7s; margin-left: auto; }
@keyframes tmCheck { 0%, 4% { background: transparent; border-color: #D2D6DF; } 8%, 82% { background: #10B981; border-color: #10B981; } 92%, 100% { background: transparent; border-color: #D2D6DF; } }
@keyframes tmTick { 0%, 4% { opacity: 0; } 8%, 82% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes tmPop { 0%, 6% { transform: scale(1); } 9% { transform: scale(1.3); } 12%, 100% { transform: scale(1); } }

/* ── C : friction barrée (carte home) ── */
.tm-c-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 1.25rem 0 .5rem; }
.tm-card { background: var(--surface, #F8F9FA); border-radius: 10px; padding: 9px 15px; font-family: Outfit, sans-serif; font-size: .8rem; font-weight: 600; position: relative; }
.tm-pain { color: var(--muted); animation: tmPain 5.5s infinite; }
.tm-pain::after { content: ''; position: absolute; left: 8%; top: 50%; height: 2.5px; background: #E11D48; border-radius: 2px; width: 0; animation: tmStrike 5.5s infinite; }
.tm-joy { background: var(--success, #10B981); color: #fff; transform: scale(0); animation: tmJoy 5.5s infinite; }
@keyframes tmStrike { 0%, 18% { width: 0; } 32%, 88% { width: 84%; } 100% { width: 84%; } }
@keyframes tmPain { 0%, 30% { opacity: 1; } 45%, 86% { opacity: .5; } 100% { opacity: 1; } }
@keyframes tmJoy { 0%, 38% { transform: scale(0); } 46% { transform: scale(1.08); } 50%, 92% { transform: scale(1); } 100% { transform: scale(0); } }

@media (prefers-reduced-motion: reduce) {
  .tm-dot, .tm-c, .tm-c::after, .tm-zero, .tm-pain, .tm-pain::after, .tm-joy { animation: none !important; }
  .tm-joy { transform: scale(1); } .tm-pain::after { width: 84%; }
  .tm-b .tm-c { background: #10B981; border-color: #10B981; } .tm-b .tm-c::after { opacity: 1; }
}