/* ===========================================================
   Petites illustrations animées, partagées (Offres, Cas clients,
   Ressources). Couleurs en dur : ce fichier est chargé aussi sur des
   pages qui n'utilisent pas les jetons v2. Préfixe .dc.
   Les animations démarrent quand l'élément [data-deco] arrive à l'écran
   (classe .is-in posée par deco.js).
   =========================================================== */

.dc-host { position: relative; }
.dc { pointer-events: none; }
.dc-card {
  position: absolute; z-index: 5; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 14px; white-space: nowrap;
  background: linear-gradient(160deg, rgba(36, 28, 42, .9), rgba(20, 18, 24, .95));
  border: 1px solid rgba(255, 255, 255, .1); color: #f2eef6; font-size: 13px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(18px) scale(.94);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1);
}
.dc-card small { display: block; font-size: 11px; color: #a79db2; }
.dc-card b { font-weight: 700; }
.dc-card--light { background: #fff; color: #14101a; border-color: rgba(238, 28, 122, .18); box-shadow: 0 18px 44px rgba(120, 20, 60, .14); }
.dc-card--light small { color: #6b6470; }
.is-in .dc-card, .dc-card.is-in { opacity: 1; transform: none; }
.is-in .dc-card { animation: dc-bob 6.5s ease-in-out 1s infinite; }
.dc-d1 { transition-delay: .25s !important; animation-delay: -2s !important; }
.dc-d2 { transition-delay: .5s !important; animation-delay: -4s !important; }
@keyframes dc-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }

.dc-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; font-size: 14px; font-weight: 800; color: #fff; background: #ee1c7a; }
.dc-ico--ok { background: #1f9d55; }
.dc-ico--no { background: #ee1c7a; }
.dc-live { width: 8px; height: 8px; border-radius: 50%; background: #2ee59d; flex-shrink: 0; animation: dc-ping 1.8s infinite; }
@keyframes dc-ping { 0% { box-shadow: 0 0 0 0 rgba(46, 229, 157, .6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(46, 229, 157, 0); } }
.dc-typing { display: inline-flex; gap: 4px; }
.dc-typing i { width: 6px; height: 6px; border-radius: 50%; background: #ff5e9c; animation: dc-type 1.2s infinite; }
.dc-typing i:nth-child(2) { animation-delay: .15s; } .dc-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dc-type { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- Offres · espace client : notifications sur la capture ---------- */
.dc-os1 { top: 6%; left: -6%; }
.dc-os2 { bottom: 14%; right: -4%; }
.dc-os3 { top: 46%; left: -9%; }

/* ---------- Offres · « C'est pour vous. Ou pas. » ---------- */
.dc-who1 { top: 40px; left: 7%; rotate: -5deg; }
.dc-who2 { top: 150px; right: 7%; rotate: 5deg; }

/* ---------- Offres · FAQ : bulle « on vous répond » ---------- */
.dc-faq1 { top: 30px; left: 6%; rotate: -4deg; }
.dc-faq2 { top: 150px; right: 7%; rotate: 4deg; }

/* ---------- Offres · ressources : icône PDF qui descend ---------- */
.dc-pdf { position: absolute; top: clamp(22px, 3vw, 34px); right: clamp(22px, 3vw, 34px); width: 46px; height: 58px; border-radius: 8px; background: linear-gradient(170deg, #fff, #fbeff4); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); display: grid; place-items: center; }
.dc-pdf::before { content: 'PDF'; position: absolute; top: 7px; left: 6px; right: 6px; padding: 2px 0; border-radius: 4px; background: #ee1c7a; color: #fff; font-size: 8.5px; font-weight: 800; text-align: center; }
.dc-pdf span { margin-top: 14px; font-size: 16px; font-weight: 800; color: #ee1c7a; animation: dc-drop 1.8s ease-in-out infinite; }
@keyframes dc-drop { 0% { transform: translateY(-4px); opacity: 0; } 40% { opacity: 1; } 80% { transform: translateY(5px); opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }

/* ---------- Offres · appel final : créneau réservé ---------- */
.dc-cal1 { top: 22%; left: 6%; rotate: -5deg; }
.dc-cal2 { bottom: 20%; right: 7%; rotate: 4deg; }
.dc-slot { display: grid; grid-template-columns: repeat(3, auto); gap: 5px; margin-top: 6px; }
.dc-slot i { font-style: normal; padding: 3px 7px; border-radius: 6px; font-size: 11px; border: 1px solid rgba(255, 255, 255, .14); color: #a79db2; }
.dc-slot i.on { animation: dc-book 4s infinite; }
@keyframes dc-book { 0%, 35% { background: transparent; color: #a79db2; border-color: rgba(255, 255, 255, .14); } 45%, 100% { background: #ee1c7a; color: #fff; border-color: #ee1c7a; } }

/* ---------- Cas clients · chiffres : cartes animées ---------- */
.dc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.dc-stat {
  position: relative; padding: 26px 24px 22px; border-radius: 20px; text-align: left; overflow: hidden;
  background: linear-gradient(165deg, rgba(36, 28, 42, .78), rgba(22, 18, 28, .95)); border: 1px solid rgba(255, 255, 255, .09);
  opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1), border-color .3s;
}
.dc-stat:hover { border-color: rgba(238, 28, 122, .4); }
.is-in .dc-stat { opacity: 1; transform: none; }
.is-in .dc-stat:nth-child(2) { transition-delay: .1s; } .is-in .dc-stat:nth-child(3) { transition-delay: .2s; } .is-in .dc-stat:nth-child(4) { transition-delay: .3s; }
.dc-stat .dc-ico { margin-bottom: 18px; }
.dc-stat b { display: block; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1; color: #ff5e9c; }
.dc-stat span { display: block; margin-top: 10px; font-size: 14px; color: #c9c3ce; line-height: 1.4; }
.dc-stat__bar { margin-top: 18px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.dc-stat__bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: linear-gradient(90deg, #ff5e9c, #ee1c7a); transform: scaleX(0); transform-origin: left; transition: transform 1.6s cubic-bezier(.16, 1, .3, 1) .4s; }
.is-in .dc-stat__bar i { transform: scaleX(1); }
@media (max-width: 900px) { .dc-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dc-stats { grid-template-columns: 1fr; } }

/* ---------- Cas clients · appel final : « Vous ? » parmi les clients ---------- */
.dc-faces { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.dc-face { position: absolute; width: var(--s, 56px); height: var(--s, 56px); border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); overflow: hidden; box-shadow: 0 16px 34px rgba(90, 0, 40, .35); animation: dc-bob 7s ease-in-out infinite; }
.dc-face img { width: 100%; height: 100%; object-fit: cover; }
.dc-face--you { display: grid; place-items: center; background: rgba(255, 255, 255, .2); border-style: dashed; color: #fff; font-weight: 800; font-size: 13px; overflow: visible; }
.dc-face--you::after { content: '★★★★★'; position: absolute; top: calc(100% + 6px); font-size: 10px; letter-spacing: 1px; color: #fff; white-space: nowrap; }
.final-cta__inner { position: relative; z-index: 1; }

/* ---------- Ressources · couvertures : page qui se feuillette ---------- */
.dc-page { position: absolute; right: 26px; bottom: 22px; width: 92px; height: 118px; z-index: 1; }
.dc-page i { position: absolute; inset: 0; border-radius: 8px; background: linear-gradient(170deg, #fff, #f6e3eb); box-shadow: 0 14px 30px rgba(0, 0, 0, .45); }
.dc-page i:nth-child(1) { transform: rotate(-8deg) translate(-10px, 4px); opacity: .55; }
.dc-page i:nth-child(2) { transform: rotate(-3deg) translate(-4px, 2px); opacity: .8; }
.dc-page i:nth-child(3) { padding: 12px 10px; display: grid; gap: 6px; align-content: start; animation: dc-flip 4.5s ease-in-out infinite; transform-origin: left center; }
.dc-page i:nth-child(3)::before { content: ''; height: 10px; border-radius: 3px; background: #ee1c7a; }
.dc-page i:nth-child(3)::after { content: ''; height: 40px; border-radius: 3px; background: repeating-linear-gradient(180deg, #e7d2dc 0 4px, transparent 4px 9px); }
@keyframes dc-flip { 0%, 60%, 100% { transform: rotateY(0); } 75% { transform: perspective(300px) rotateY(-28deg); } }
.is-unlocked .dc-page i:nth-child(3)::before { background: #1f9d55; }

/* ---------- Ressources · formulaire : cadenas qui s'ouvre ---------- */
.dc-lock { position: absolute; top: -26px; right: 34px; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: #ee1c7a; box-shadow: 0 16px 36px rgba(238, 28, 122, .45); animation: dc-bob 5.5s ease-in-out infinite; }
.dc-lock svg { width: 26px; height: 26px; color: #fff; }
.dc-lock .dc-shackle { transform-origin: 16px 11px; animation: dc-unlock 4s ease-in-out infinite; }
@keyframes dc-unlock { 0%, 45%, 100% { transform: rotate(0); } 60%, 85% { transform: translateY(-2px) rotate(28deg); } }
.gate2 { position: relative; }

/* ---------- Responsive / accessibilité ---------- */
@media (max-width: 1100px) { .dc-who1, .dc-who2, .dc-faq1, .dc-faq2, .dc-cal1, .dc-cal2 { display: none; } }
@media (max-width: 920px) { .dc-os1, .dc-os3 { left: 2%; } .dc-os2 { right: 2%; } .dc-os3 { display: none; } }
@media (max-width: 760px) { .dc-face { --s: 40px !important; opacity: .7; } .dc-face:nth-child(n+5) { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .dc *, .dc-card, .dc-face, .dc-lock, .dc-pdf span, .dc-page i, .dc-live, .dc-slot i { animation: none !important; }
  .dc-card, .dc-stat, .dc-stat__bar i { transition: none !important; opacity: 1 !important; transform: none !important; }
}
.dl2__card { position: relative; }