/* KProduction — univers « pâte à modeler » : boutons qui s'écrasent, cartes molles, pâtes du héros, mascotte Kipi.
   Chargé par toutes les pages (après la feuille de style du site). Tout se coupe si le visiteur réduit les animations. */

/* ---- 1 · boutons en pâte ---- */
.btn, .cbtn { transition: transform .45s cubic-bezier(.34, 1.8, .5, 1), box-shadow .2s, border-color .15s; }
.btn-primary, .cbtn {
  box-shadow: inset 4px 5px 8px rgba(255,255,255,.34), inset -5px -6px 10px rgba(150,45,0,.32), 0 16px 40px -14px rgba(255,106,20,.75);
}
.btn-primary:hover, .cbtn:hover { transform: translateY(-2px) scale(1.03) rotate(-.6deg); }
.btn:active, .cbtn:active, .btn.kp-press, .cbtn.kp-press { transform: scale(1.09, .86); transition-duration: .08s; }

/* ---- 3 · cartes qui s'écrasent, illustrations qui sautent ---- */
.bene, .hstat, .svc, .work:not(.soon) { transform-origin: 50% 100%; }
.kp-squish { animation: kp-squish .7s cubic-bezier(.3, .7, .3, 1); }
.kp-squish .hs-ic, .kp-squish .bene-ban img, .kp-squish .svc-cover img { animation: kp-hop .7s cubic-bezier(.3, .7, .3, 1); }
.kp-squish .bene-ban img, .kp-squish .svc-cover img { animation-name: kp-jelly; }
@keyframes kp-squish { 0% { transform: none } 22% { transform: scale(1.04, .93) } 48% { transform: scale(.98, 1.04) } 72% { transform: scale(1.01, .99) } 100% { transform: none } }
@keyframes kp-hop { 0% { transform: none } 22% { transform: translateY(3px) scale(1.15, .82) } 50% { transform: translateY(-9px) scale(.9, 1.12) } 78% { transform: translateY(1px) scale(1.04, .96) } 100% { transform: none } }
@keyframes kp-jelly { 0% { transform: scale(1.05) } 25% { transform: scale(1.12, .98) } 55% { transform: scale(1.02, 1.1) } 80% { transform: scale(1.07, 1.03) } 100% { transform: scale(1.05) } }

/* ---- 2 · pâtes qui ondulent en fond, sur toutes les pages ---- */
.kp-blobs { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: .5; }
@media (max-width: 620px) { .kp-blobs { opacity: .36; } }
.bg-wash > .kp-blobs { position: absolute; z-index: auto; width: 100%; height: 100%; }

/* ---- 4 · mots orange en pâte à modeler ---- */
.kp-clay-word { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: #FF6A14 !important; -webkit-text-fill-color: #FF6A14 !important;
  text-shadow: 0 1px 0 #F46512, 0 2px 0 #E85C0D, 0 3px 0 #D9530A, 0 4px 0 #C94B08, 0 7px 12px rgba(120,40,0,.32); }
.kp-clay-word .kp-w { display: inline-block; white-space: nowrap; }
.kp-clay-word .kp-l { display: inline-block; transform-origin: 50% 100%; }
.kp-clay-word .kp-l.kp-pop { animation: kp-letter .65s cubic-bezier(.3,.7,.3,1) both; }
@keyframes kp-letter { 0% { transform: translateY(-.5em) scale(.6,1.3); opacity: 0 } 45% { transform: translateY(0) scale(1.22,.74); opacity: 1 } 70% { transform: scale(.94,1.06) } 100% { transform: none } }

/* ---- 5 · boudin de pâte entre les sections ---- */
.kp-roll { position: relative; z-index: 1; display: block; width: 100%; height: 56px; margin: -10px 0; pointer-events: none; }

/* ---- 6 · empreinte du doigt ---- */
.kp-dent { position: fixed; z-index: 99990; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 60% 65%, rgba(255,255,255,.35), transparent 55%), radial-gradient(circle at 40% 35%, rgba(120,35,0,.45), transparent 60%);
  box-shadow: inset 6px 8px 12px rgba(110,30,0,.45), inset -5px -6px 10px rgba(255,255,255,.35); animation: kp-dent 1.6s ease-out forwards; }
@keyframes kp-dent { 0% { transform: scale(.3); opacity: 0 } 12% { transform: scale(1.05); opacity: 1 } 70% { opacity: .9 } 100% { transform: scale(1.25); opacity: 0 } }

/* ---- Kipi ---- */
.kp-kipi { position: fixed; right: 12px; bottom: 6px; width: 132px; height: 132px; z-index: 40; touch-action: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  opacity: 0; transition: opacity .3s; border-radius: 40%; outline: none; }
.kp-kipi:focus-visible { box-shadow: 0 0 0 3px #FFB057; }
/* Kipi remplace le bouton « Une question ? » (il revient si Kipi est masqué ou indisponible) */
body.kp-has-kipi #cbtn { display: none !important; }
.kp-kipi .kp-chat { position: absolute; left: 14%; bottom: 14%; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; pointer-events: none;
  background: linear-gradient(135deg, #FF7A1A, #E8580F); box-shadow: inset 2px 2px 4px rgba(255,255,255,.35), inset -2px -3px 5px rgba(150,45,0,.35), 0 6px 12px -4px rgba(120,45,8,.6); }
.kp-kipi .kp-chat svg { width: 16px; height: 16px; }
.kp-kipi.on { opacity: 1; }
.kp-kipi canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kp-kipi .kp-bub { position: absolute; right: 30%; bottom: 100%; margin-bottom: -6px; transform: translateY(8px); background: #fff; color: #1B1510;
  font: 700 14px/1.3 'Sora', system-ui, sans-serif; padding: 10px 14px; border-radius: 16px; white-space: nowrap; pointer-events: none;
  box-shadow: 0 14px 28px -14px rgba(120,60,10,.55); border: 1px solid #EDE2D5; opacity: 0; transition: opacity .25s, transform .4s cubic-bezier(.3,1.6,.5,1); }
.kp-kipi .kp-bub.on { opacity: 1; transform: none; }
.kp-kipi .kp-bub::after { content: ""; position: absolute; right: 22px; bottom: -7px; width: 14px; height: 14px; background: #fff; border-right: 1px solid #EDE2D5; border-bottom: 1px solid #EDE2D5; transform: rotate(45deg); }
.kp-kipi .kp-zz { position: absolute; left: 66%; top: 12%; font: 800 18px/1 'Sora', system-ui, sans-serif; color: #E8580F; opacity: 0; pointer-events: none; }
.kp-kipi .kp-zz.on { animation: kp-zz 2.4s ease-in-out infinite; }
@keyframes kp-zz { 0% { transform: translate(0, 8px) scale(.7); opacity: 0 } 40% { opacity: .85 } 100% { transform: translate(20px, -30px) scale(1.2); opacity: 0 } }
.kp-kipi .kp-x { position: absolute; right: 2px; top: 6px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid #EDE2D5; background: #fff; color: #6B5D50;
  font: 700 15px/1 system-ui, sans-serif; cursor: pointer; opacity: 0; transition: opacity .2s; display: grid; place-items: center; padding: 0; }
.kp-kipi:hover .kp-x, .kp-kipi .kp-x:focus-visible { opacity: 1; }
@media (hover: none) { .kp-kipi .kp-x { opacity: .85; } }
@media (max-width: 620px) { .kp-kipi { right: 4px; bottom: 2px; width: 96px; height: 96px; } .kp-kipi .kp-chat { width: 24px; height: 24px; } .kp-kipi .kp-chat svg { width: 13px; height: 13px; } .kp-kipi .kp-bub { font-size: 13px; padding: 9px 12px; } }

@media (prefers-reduced-motion: reduce) {
  .kp-squish, .kp-squish * { animation: none !important; }
  .btn, .cbtn { transition: none; }
  .kp-blobs, .kp-kipi, .kp-roll, .kp-dent { display: none !important; }
  .kp-clay-word .kp-l.kp-pop { animation: none; }
}