/* ==========================================================================
   Sections animées (oct. 2026) : méthode, offres, polaroids, projets, témoignages
   Animations en CSS (transform / opacity), mises en pause hors écran,
   désactivées si l'utilisateur préfère réduire les animations.
   ========================================================================== */

/* ---------- Commun ---------- */
.sp-anim:not(.sp-in) *, .sp-anim:not(.sp-in) { animation-play-state: paused !important; }
.sp-hand { font-family: "Caveat", cursive; font-weight: 600; }

/* ---------- 1 · Méthode (remplace Mes expertises) : le tracé avance avec le scroll ---------- */
.sp-meth { position: relative; margin-top: 3rem; }
.sp-meth-path { position: relative; width: 100%; aspect-ratio: 1248 / 260; }
.sp-meth-stage { position: absolute; left: 0; top: 0; width: 1248px; height: 260px; transform-origin: 0 0; transform: scale(var(--k, 1)); }
.sp-meth-stage svg { position: absolute; inset: 0; overflow: visible; }
.sp-meth-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.sp-meth-runner { position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #e8604c; box-shadow: 0 0 0 7px rgba(232, 96, 76, .2); offset-path: path('M 0 236 C 70 226 100 200 147 200 C 260 200 340 120 465 120 C 590 120 680 170 783 170 C 886 170 990 90 1101 90 C 1170 90 1210 70 1248 60'); offset-rotate: 0deg; offset-distance: 0%; }
.sp-node { fill: #fff; stroke: #2563eb; stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transition: fill .4s, stroke .4s; }
.sp-node.on { fill: #2563eb; animation: sp-pop .5s cubic-bezier(.34, 1.8, .64, 1); }
.sp-n4.on { fill: #e8604c; stroke: #e8604c; }
@keyframes sp-pop { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
.sp-meth-prod { position: absolute; left: 90.6%; top: 4%; padding: 6px 12px; border-radius: 999px; background: #e8604c; color: #fff; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .15em; white-space: nowrap; opacity: 0; transform: translateY(8px) rotate(-4deg); transition: opacity .5s, transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.sp-meth-prod.on { opacity: 1; transform: rotate(-4deg); }
.sp-meth-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.sp-meth-card { padding: 24px; border-radius: 16px; background: #fff; border: 1px solid #ece7df; box-shadow: 0 18px 40px -30px rgba(26, 26, 46, .35); opacity: .35; transform: translateY(18px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.sp-meth-card.on { opacity: 1; transform: none; }
.sp-meth-card .mi-exp-num { display: block; margin-bottom: .6rem; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #2563eb; }
.sp-meth-card .mi-exp-head { display: block; min-height: 0 !important; padding: 0; margin: 0 0 1rem; background: none; border: 0; }
.sp-meth-card > *:not(.mi-exp-head) { margin-left: 0; margin-right: 0; }
.sp-meth-card { padding: 28px; }
.sp-meth-card h3 { margin: 0; }
.sp-meth-card .mi-exp-label { margin-top: 1rem; }
@media (max-width: 991px) {
  .sp-meth-path { display: none; }
  .sp-meth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .sp-meth-card { opacity: 1; transform: none; }
}
@media (max-width: 600px) { .sp-meth-grid { grid-template-columns: 1fr; } }

/* ---------- 2 · Offres (sélecteur) ---------- */
.sp-off { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.sp-off-left { display: flex; flex-direction: column; gap: 18px; }
.sp-off-left .h2, .sp-off-left .body { margin: 0; }
.sp-off-tabs { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.sp-sit { width: 100%; text-align: left; display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; border: 1px solid #e3ddd4; background: #fff; color: #1a1a2e; cursor: pointer; font: 500 1.05rem/1.45 "DM Sans", sans-serif; transition: background-color .5s cubic-bezier(.22,1,.36,1), color .5s, transform .5s cubic-bezier(.22,1,.36,1), box-shadow .5s, border-color .3s; }
.sp-sit:hover { border-color: #2563eb; transform: translateX(4px); }
.sp-sit:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.sp-sit-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 500 12px "JetBrains Mono", monospace; background: #f5f0eb; color: #2563eb; transition: all .5s; }
.sp-sit[aria-selected="true"] { background: #1a1a2e; color: #fff; border-color: #1a1a2e; transform: translateX(12px); box-shadow: 0 20px 40px -20px rgba(26, 26, 46, .5); }
.sp-sit[aria-selected="true"] .sp-sit-num { background: #2563eb; color: #fff; }
.sp-off-card { position: relative; display: grid; border-radius: 24px; background: #fff; box-shadow: 0 40px 80px -40px rgba(26, 26, 46, .35); overflow: hidden; }
.sp-off-card::before { content: ""; position: absolute; right: -80px; bottom: -80px; width: 280px; height: 280px; border-radius: 50%; background: #eff4ff; }
.sp-panel { grid-area: 1 / 1; position: relative; padding: 44px 48px; display: flex; flex-direction: column; gap: 16px; transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), visibility 0s .55s; }
.sp-panel[aria-hidden="true"] { opacity: 0; transform: translateY(16px); visibility: hidden; pointer-events: none; }
.sp-panel[aria-hidden="false"] { transition-delay: 0s; }
.sp-panel-tag { align-self: flex-start; font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: #2563eb; color: #fff; }
.sp-panel h3 { margin: 0; font-family: Fraunces, serif; font-weight: 600; font-size: 2.2rem; line-height: 1.1; color: #1a1a2e; }
.sp-panel h3 em { color: #2563eb; font-weight: 500; }
.sp-panel .sp-lead { margin: 0; color: #5a5a72; max-width: 560px; }
.sp-panel-box { padding: 16px 20px; border-radius: 14px; background: #faf9f7; display: flex; flex-direction: column; gap: 6px; max-width: 560px; }
.sp-mono { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #2563eb; }
.sp-opt { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: #5a5a72; }
.sp-panel-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.sp-price { font-family: Fraunces, serif; font-weight: 600; font-size: 1.9rem; color: #1a1a2e; }
.sp-price small { font-family: "DM Sans", sans-serif; font-size: .8rem; font-weight: 400; color: #5a5a72; }
.sp-cta { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 10px; background: #2563eb; color: #fff; text-decoration: none; font-weight: 500; transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .35s; }
.sp-cta:hover { color: #fff; background: #1d4ed8; transform: translateY(-2px); }
@media (max-width: 991px) {
  .sp-off { grid-template-columns: 1fr; gap: 32px; }
  .sp-sit[aria-selected="true"] { transform: none; }
  .sp-panel { padding: 32px 26px; }
  .sp-panel h3 { font-size: 1.7rem; }
}

/* ---------- 3 · Polaroids (À propos) ---------- */
@media (hover: hover) and (pointer: fine) {
  .mi-about-collage .mi-polaroid { translate: var(--px, 0px) calc(var(--py, 0px) + var(--lift, 0px)); transform-origin: 50% 4%; animation: sp-sway 5s ease-in-out infinite; transition: transform .9s cubic-bezier(.34, 2.2, .5, 1), translate .5s cubic-bezier(.22, 1, .36, 1), filter .4s, box-shadow .5s; }
  .mi-pol-2 { animation-duration: 6.2s !important; animation-delay: -2s !important; }
  .mi-pol-3 { animation-duration: 5.6s !important; animation-delay: -3.4s !important; }
  .mi-pol-4 { animation-duration: 6.8s !important; animation-delay: -1s !important; }
  .mi-about-collage .mi-polaroid:hover { --lift: -14px; transform: rotate(0deg) scale(1.08); z-index: 7; animation-play-state: paused; box-shadow: 0 50px 80px -24px rgba(0, 0, 0, .8); }
  .mi-about-collage:hover .mi-polaroid:not(:hover) { filter: saturate(.6) brightness(.82); }
}
@keyframes sp-sway { 0%, 100% { rotate: -1.6deg; } 50% { rotate: 1.6deg; } }
.mi-hand-4 svg { width: .8em; height: .8em; margin-left: .2em; vertical-align: -.05em; fill: var(--_color---secondary, #e8604c); }

/* ---------- 5 · Témoignages ---------- */
.sp-t { display: flex; flex-direction: column; align-items: center; gap: 40px; }
.sp-t-big { position: relative; display: grid; width: 100%; max-width: 1000px; border-radius: 24px; background: #1a1a2e; color: #fff; overflow: hidden; }
.sp-t-mark { position: absolute; right: 40px; top: 30px; width: 90px; fill: rgba(96, 165, 250, .18); }
.sp-t-panel { grid-area: 1 / 1; position: relative; padding: 52px 64px 44px; display: flex; flex-direction: column; justify-content: center; gap: 28px; transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1), filter .45s; }
.sp-t-panel[aria-hidden="true"] { opacity: 0; transform: translateY(14px); filter: blur(6px); visibility: hidden; transition: opacity .45s, transform .55s, filter .45s, visibility 0s .55s; }
.sp-t-quote { margin: 0; max-width: 860px; font-family: Fraunces, serif; font-weight: 500; font-size: 1.6rem; line-height: 1.42; color: #fff; }
.sp-t-quote.is-long { font-size: 1.4rem; }
.sp-t-who { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sp-t-who img, .sp-t-ini { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sp-t-ini { display: flex; align-items: center; justify-content: center; background: #2563eb; color: #fff; font-weight: 600; }
.sp-t-name { font-weight: 600; }
.sp-t-role { font-size: .9rem; color: #a5a8c4; }
.sp-t-big { text-align: left; }
.sp-t-who > span:not(.sp-t-ini) { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.sp-t-who > span br { display: none; }
.sp-t-who a { margin-left: auto; color: #93c5fd; font-weight: 500; }
.sp-t-who a:hover { color: #bfdbfe; }
.sp-t-strip { width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; padding: 14px 0 18px; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
.sp-t-strip::-webkit-scrollbar { display: none; }
.sp-t-strip.is-drag { cursor: grabbing; user-select: none; }
.sp-t-track { display: flex; gap: 20px; width: max-content; padding: 0 20px; }
.sp-t-card { width: 340px; height: 196px; flex-shrink: 0; box-sizing: border-box; padding: 22px 24px; border-radius: 16px; background: #fff; border: 1.5px solid #ece7df; text-align: left; display: flex; flex-direction: column; justify-content: space-between; cursor: pointer; font: inherit; color: #1a1a2e; transition: transform .4s cubic-bezier(.34,1.56,.64,1), border-color .3s, box-shadow .4s; }
.sp-t-card:hover, .sp-t-card:focus-visible { transform: translateY(-6px); box-shadow: 0 24px 40px -24px rgba(26, 26, 46, .4); outline: none; }
.sp-t-card[aria-pressed="true"] { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); }
.sp-t-card img { pointer-events: none; }
.sp-t-clamp { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-family: Fraunces, serif; font-size: .95rem; line-height: 1.45; }
.sp-t-foot { display: flex; align-items: center; gap: 12px; }
.sp-t-foot img, .sp-t-foot .sp-t-ini { width: 36px; height: 36px; font-size: 12px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sp-t-foot span.sp-t-txt { flex: 1; display: flex; flex-direction: column; font-size: .85rem; }
.sp-t-foot b { font-weight: 600; font-size: .9rem; }
.sp-t-live { display: none; align-items: center; gap: 3px; }
.sp-t-card[aria-pressed="true"] .sp-t-live { display: flex; }
.sp-t-live i { width: 3px; height: 10px; border-radius: 2px; background: #2563eb; animation: sp-eq .9s ease-in-out infinite; }
.sp-t-live i:nth-child(2) { animation-delay: .15s; } .sp-t-live i:nth-child(3) { animation-delay: .3s; }
@keyframes sp-eq { 0%, 100% { transform: scaleY(.4); } 50% { transform: scaleY(1); } }
@media (max-width: 767px) {
  .sp-t-panel { padding: 32px 24px 28px; gap: 20px; }
  .sp-t-quote, .sp-t-quote.is-long { font-size: 1.15rem; }
  .sp-t-mark { width: 56px; right: 20px; top: 16px; }
  .sp-t-card { width: 280px; height: 220px; }
  .sp-t-clamp { -webkit-line-clamp: 4; font-size: .9rem; }
  .sp-t-who a { margin-left: 0; }
}

/* ---------- 4 · Projets (vignettes motion) ---------- */
.sp-proj-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.sp-proj { display: flex; flex-direction: column; border-radius: 18px; background: #fff; overflow: hidden; text-decoration: none; color: #1a1a2e; box-shadow: 0 0 0 1px #ece7df; transition: box-shadow .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1); }
.sp-proj:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px #ece7df, 0 40px 60px -30px rgba(26, 26, 46, .35); }
.sp-proj:focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
.sp-thumb { position: relative; aspect-ratio: 612 / 380; overflow: hidden; }
.sp-stage { position: absolute; left: 0; top: 0; width: 612px; height: 380px; transform-origin: 0 0; transform: scale(var(--k, 1)); }
.sp-proj-body { padding: 22px 26px 26px; display: flex; flex-direction: column; gap: 12px; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-proj-title { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.sp-proj-title .h3 { margin: 0; }
.sp-arrow { flex-shrink: 0; color: #2563eb; transition: transform .4s cubic-bezier(.34,1.56,.64,1); }
.sp-proj:hover .sp-arrow { transform: translate(4px, -4px); }
@media (max-width: 767px) { .sp-proj-grid { grid-template-columns: 1fr; } }
/* Pas de survol (mobile, tablette) : on garde le rendu final */
/* Sans souris (mobile, tablette) : l'animation tourne en boucle, pas d'image figée */
@media (hover: none) { .sp-projets .sp-stage .still { display: none !important; } }

/* ---------- Réduction des animations ---------- */
@media (prefers-reduced-motion: reduce) {
  .sp-meth *, .sp-meth, .sp-projets *, .sp-t *, .mi-about-collage .mi-polaroid { animation: none !important; transition: none !important; }
  .sp-stage > :not(.still) { display: none; }
  .sp-stage .still { display: block !important; }
}

/* ---------- 4 · Projets : animations des vignettes (scène 612×380) ---------- */
.sp-projets .A{animation-iteration-count:infinite;animation-fill-mode:both}
.sp-projets .frame{position:absolute;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 30px 50px -24px rgba(0,0,0,.55)}
.sp-projets .full{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;display:block}
.sp-projets .bpgrid{background-color:#fff;background-image:linear-gradient(rgba(11,143,194,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(11,143,194,.09) 1px,transparent 1px);background-size:12px 12px}
.sp-projets .w{position:absolute;box-sizing:border-box;border:1.5px solid #0B8FC2;background:rgba(42,204,255,.08);border-radius:3px;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.06em;color:#0B8FC2;overflow:hidden;white-space:nowrap}
.sp-projets .scan{position:absolute;left:0;right:0;height:2px;background:#2ACCFF;box-shadow:0 0 14px 3px rgba(42,204,255,.7)}
/* ===== 1 · QEVLAR ===== */
.sp-projets .qbp{animation:qbp 5.9s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes qbp{0%,8.5%{clip-path:inset(0 0 100% 0);opacity:1}23.8%,63.4%{clip-path:inset(0 0 0 0);opacity:1}64.9%,100%{clip-path:inset(0 0 0 0);opacity:0}}
.sp-projets .qaf{animation:qaf 5.9s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes qaf{0%,8.5%,48.1%{clip-path:inset(0 0 100% 0);opacity:1}63.4%,93.3%{clip-path:inset(0 0 0 0);opacity:1}99.5%,100%{clip-path:inset(0 0 0 0);opacity:0}}
.sp-projets .qscan{animation:qscan 5.9s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes qscan{0%,8%{top:0;opacity:0}8.5%{top:0;opacity:1}23.8%{top:100%;opacity:1}25.2%,46.6%{top:100%;opacity:0}47.4%{top:0;opacity:0}48.1%{top:0;opacity:1}63.4%{top:100%;opacity:1}64.9%,100%{top:100%;opacity:0}}
.sp-projets .qm{animation-duration:5.9s;animation-timing-function:cubic-bezier(.3,0,.1,1)}
.sp-projets .qn{transform-origin:0 50%;animation:qn 5.9s cubic-bezier(.34,1.3,.64,1) infinite both}
@keyframes qn{0%,8.5%,34.4%{transform:scaleX(0);opacity:0}35.9%{opacity:1}43.5%,100%{transform:none;opacity:1}}
.sp-projets .qlab{position:absolute;right:10px;bottom:6px;font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.08em;color:#0B8FC2;animation:qlab 5.9s ease infinite both}
@keyframes qlab{0%,8.5%,32.9%{opacity:0}37.5%,48.1%{opacity:1}51.2%,100%{opacity:0}}
.sp-projets .q-top{left:0px;top:0px;width:500px;height:20px;animation-name:qtop}
@keyframes qtop{0%,8.5%,25.2%{left:0px;top:0px;width:500px;height:20px}40.5%,100%{left:0px;top:0px;width:500px;height:22px}}
.sp-projets .q-ov{left:54px;top:47px;width:27px;height:7px;animation-name:qov}
@keyframes qov{0%,8.5%,25.2%{left:54px;top:47px;width:27px;height:7px}40.5%,100%{left:47px;top:135px;width:60px;height:12px}}
.sp-projets .q-k1{left:58px;top:66px;width:61px;height:18px;animation-name:qk1}
@keyframes qk1{0%,8.5%,25.2%{left:58px;top:66px;width:61px;height:18px}40.5%,100%{left:100px;top:49px;width:195px;height:11px}}
.sp-projets .q-k2{left:123px;top:66px;width:105px;height:18px;animation-name:qk2}
@keyframes qk2{0%,8.5%,25.2%{left:123px;top:66px;width:105px;height:18px}40.5%,100%{left:47px;top:62px;width:231px;height:10px}}
.sp-projets .q-k3{left:255px;top:66px;width:65px;height:18px;animation-name:qk3}
@keyframes qk3{0%,8.5%,25.2%{left:255px;top:66px;width:65px;height:18px}40.5%,100%{left:47px;top:77px;width:270px;height:5px}}
.sp-projets .q-k4{left:353px;top:66px;width:47px;height:18px;animation-name:qk4}
@keyframes qk4{0%,8.5%,25.2%{left:353px;top:66px;width:47px;height:18px}40.5%,100%{left:47px;top:49px;width:48px;height:11px}}
.sp-projets .q-inc{left:58px;top:105px;width:303px;height:73px;animation-name:qinc}
@keyframes qinc{0%,8.5%,25.2%{left:58px;top:105px;width:303px;height:73px}40.5%,100%{left:47px;top:156px;width:199px;height:158px}}
.sp-projets .q-mal{left:58px;top:196px;width:172px;height:53px;animation-name:qmal}
@keyframes qmal{0%,8.5%,25.2%{left:58px;top:196px;width:172px;height:53px}40.5%,100%{left:254px;top:156px;width:199px;height:158px}}
.sp-projets .q-safe{left:255px;top:196px;width:182px;height:27px;animation-name:qsafe}
@keyframes qsafe{0%,8.5%,25.2%{left:255px;top:196px;width:182px;height:27px}40.5%,100%{left:47px;top:93px;width:406px;height:12px}}
.sp-projets .q-stp{left:54px;top:277px;width:44px;height:7px;animation-name:qstp}
@keyframes qstp{0%,8.5%,25.2%{left:54px;top:277px;width:44px;height:7px}40.5%,100%{left:47px;top:327px;width:60px;height:10px}}
.sp-projets .q-row{left:57px;top:303px;width:386px;height:18px;animation-name:qrow}
@keyframes qrow{0%,8.5%,25.2%{left:57px;top:303px;width:386px;height:18px}40.5%,100%{left:47px;top:345px;width:406px;height:15px}}
/* ===== 2 · KLYXOR ===== */
.sp-projets .stk{position:absolute;width:112px;height:44px;box-sizing:border-box;padding:0 12px;display:flex;align-items:center;font-family:'Caveat',cursive;font-size:22px;color:#1a1a2e;background:#fff3b8;border-radius:4px;box-shadow:0 10px 18px -10px rgba(26,26,46,.45);animation-duration:7.5s;animation-timing-function:cubic-bezier(.45,0,.2,1)}
.sp-projets .k1{left:60px;top:40px;animation-name:k1}
.sp-projets .k2{left:250px;top:30px;animation-name:k2}
.sp-projets .k3{left:430px;top:60px;animation-name:k3}
.sp-projets .k4{left:130px;top:190px;animation-name:k4}
.sp-projets .k5{left:360px;top:200px;animation-name:k5}
@keyframes k1{0%,0%{opacity:0;transform:rotate(-6deg) scale(.6)}4%,17.3%{opacity:1;transform:rotate(-6deg)}28%{opacity:1;transform:translate(120px,100px)}32%,100%{opacity:0;transform:translate(120px,100px)}}
@keyframes k2{0%,2%{opacity:0;transform:rotate(4deg) scale(.6)}6%,17.3%{opacity:1;transform:rotate(4deg)}28%{opacity:1;transform:translate(70px,110px)}32%,100%{opacity:0;transform:translate(70px,110px)}}
@keyframes k3{0%,4%{opacity:0;transform:rotate(-3deg) scale(.6)}8%,17.3%{opacity:1;transform:rotate(-3deg)}28%{opacity:1;transform:translate(-110px,80px)}32%,100%{opacity:0;transform:translate(-110px,80px)}}
@keyframes k4{0%,6%{opacity:0;transform:rotate(5deg) scale(.6)}10%,17.3%{opacity:1;transform:rotate(5deg)}28%{opacity:1;transform:translate(-90px,-50px)}32%,100%{opacity:0;transform:translate(-90px,-50px)}}
@keyframes k5{0%,8%{opacity:0;transform:rotate(-5deg) scale(.6)}12%,17.3%{opacity:1;transform:rotate(-5deg)}28%{opacity:1;transform:translate(100px,-60px)}32%,100%{opacity:0;transform:translate(100px,-60px)}}
.sp-projets .knode{position:absolute;top:140px;width:112px;height:44px;box-sizing:border-box;border-radius:10px;background:#fff;border:1.5px solid #2563eb;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:#1a1a2e;animation:knode 7.5s ease infinite both}
@keyframes knode{0%,25.3%{opacity:0;transform:scale(.9)}30.7%,41.3%{opacity:1;transform:none}45.3%,100%{opacity:0;transform:scale(.96)}}
.sp-projets .karrow{stroke-dasharray:1;animation:karrow 7.5s ease infinite both}
@keyframes karrow{0%,29.3%{stroke-dashoffset:1;opacity:1}36%,41.3%{stroke-dashoffset:0;opacity:1}45.3%,100%{stroke-dashoffset:0;opacity:0}}
.sp-projets .kwire{animation:kwire 7.5s ease infinite both}
@keyframes kwire{0%,41.3%{opacity:0}44%,72%{opacity:1}74.7%,100%{opacity:0}}
.sp-projets .kp{transform-origin:0 0;animation:kp 7.5s cubic-bezier(.34,1.3,.64,1) infinite both}
@keyframes kp{0%,42.7%{transform:scale(0);opacity:0}44%{opacity:1}50.7%,100%{transform:none;opacity:1}}
.sp-projets .kfin{animation:kfin 7.5s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes kfin{0%,58.7%{clip-path:inset(0 0 100% 0);opacity:1}69.3%,97.1%{clip-path:inset(0 0 0 0);opacity:1}99.4%,100%{clip-path:inset(0 0 0 0);opacity:0}}
.sp-projets .kscan{animation:kscan 7.5s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes kscan{0%,57.3%{top:0;opacity:0}58.7%{top:0;opacity:1}69.3%{top:100%;opacity:1}70.7%,100%{top:100%;opacity:0}}
.sp-projets .kframe{animation:kframe 7.5s ease infinite both}
@keyframes kframe{0%,40%{opacity:0;transform:scale(.97)}44%,97.1%{opacity:1;transform:none}99.4%,100%{opacity:0}}
.sp-projets .kchip{animation:kchip 7.5s cubic-bezier(.34,1.8,.64,1) infinite both}
@keyframes kchip{0%,70.7%{opacity:0;transform:scale(.4)}74.7%,97.1%{opacity:1;transform:none}99.4%,100%{opacity:0}}
/* ===== 3 · DOOR-IN ===== */
.sp-projets .dz{position:absolute;inset:0;transform-origin:306px 190px;animation:dz 10s cubic-bezier(.45,0,.2,1) infinite both;animation-delay:-.4s}
@keyframes dz{0%,6%{transform:scale(.817)}12%,22%{transform:scale(.4)}28%,39.3%{transform:scale(.817)}45.3%,55.3%{transform:scale(.4)}61.3%,72.6%{transform:scale(.817)}78.6%,88.6%{transform:scale(.4)}94.6%,100%{transform:scale(.817)}}
.sp-projets .dreel{position:absolute;top:0;width:612px;display:flex;flex-direction:column;gap:40px;animation:dreel 10s linear infinite both;animation-delay:-.4s}
@keyframes dreel{0%,12%{transform:translateY(-875px);animation-timing-function:cubic-bezier(.5,0,.15,1.06)}22%,45.3%{transform:translateY(-2611px);animation-timing-function:cubic-bezier(.5,0,.15,1.06)}55.3%,78.6%{transform:translateY(-4347px);animation-timing-function:cubic-bezier(.5,0,.15,1.06)}88.6%,100%{transform:translateY(-6083px)}}
.sp-projets .dside{opacity:.55}
.sp-projets .dblur{position:absolute;inset:0;animation:dblur 10s linear infinite both;animation-delay:-.4s}
@keyframes dblur{0%,13%{filter:blur(0)}15%,19%{filter:blur(4px)}21.5%,46.3%{filter:blur(0)}48.3%,52.3%{filter:blur(4px)}54.8%,79.6%{filter:blur(0)}81.6%,85.6%{filter:blur(4px)}88.1%,100%{filter:blur(0)}}
.sp-projets .dslot{display:block;width:612px;height:394px;flex-shrink:0;overflow:hidden;background:#fff;border-radius:12px;box-shadow:0 30px 50px -24px rgba(0,0,0,.6)}
.sp-projets .dslot img{display:block;width:100%;height:100%;object-fit:cover;object-position:top left}
/* ===== 4 · U:MAN ===== */
.sp-projets .ustk{position:absolute;padding:10px 14px;font-family:'Caveat',cursive;font-size:24px;line-height:1.05;color:#1a1a2e;background:#fff;border-radius:4px;box-shadow:0 10px 18px -10px rgba(26,26,46,.4);animation-duration:7.5s;animation-timing-function:cubic-bezier(.45,0,.2,1)}
.sp-projets .u1s{left:60px;top:50px;animation-name:u1s}
.sp-projets .u2s{left:330px;top:40px;animation-name:u2s}
.sp-projets .u3s{left:190px;top:170px;animation-name:u3s}
@keyframes u1s{0%,0%{opacity:0;transform:rotate(-5deg) scale(.6)}4%,18.7%{opacity:1;transform:rotate(-5deg)}29.3%,100%{opacity:0;transform:translate(120px,60px) scale(.5)}}
@keyframes u2s{0%,2%{opacity:0;transform:rotate(4deg) scale(.6)}6%,18.7%{opacity:1;transform:rotate(4deg)}29.3%,100%{opacity:0;transform:translate(-80px,70px) scale(.5)}}
@keyframes u3s{0%,4%{opacity:0;transform:rotate(-2deg) scale(.6)}8%,18.7%{opacity:1;transform:rotate(-2deg)}29.3%,100%{opacity:0;transform:translate(30px,-20px) scale(.5)}}
.sp-projets .usk{stroke-dasharray:1;animation:usk 7.5s ease infinite both}
@keyframes usk{0%,4%{stroke-dashoffset:1;opacity:1}17.3%,21.3%{stroke-dashoffset:0;opacity:1}26.7%,100%{stroke-dashoffset:0;opacity:0}}
.sp-projets .uframe{animation:uframe 7.5s ease infinite both}
@keyframes uframe{0%,20%{opacity:0;transform:scale(.94)}25.3%,97.3%{opacity:1;transform:none}99.5%,100%{opacity:0}}
.sp-projets .uwf{animation:uwf 7.5s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes uwf{0%,22.7%{clip-path:inset(0 100% 0 0)}36%,100%{clip-path:inset(0 0 0 0)}}
.sp-projets .uhi{animation:uhi 7.5s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes uhi{0%,41.3%{clip-path:inset(0 0 100% 0)}52%,100%{clip-path:inset(0 0 0 0)}}
.sp-projets .uscan{animation:uscan 7.5s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes uscan{0%,40%{top:0;opacity:0}41.3%{top:0;opacity:1}52%{top:100%;opacity:1}53.3%,100%{top:100%;opacity:0}}
.sp-projets .unext{animation:unext 7.5s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes unext{0%,69.3%{transform:translateX(100%)}77.3%,100%{transform:none}}
.sp-projets .ucur{position:absolute;left:0;top:0;z-index:4;animation:ucur 7.5s cubic-bezier(.45,0,.2,1) infinite both}
@keyframes ucur{0%,52%{transform:translate(455px,322px);opacity:0}54.7%{transform:translate(455px,322px);opacity:1}64%,68%{transform:translate(28px,152px);opacity:1}77.3%{transform:translate(295px,215px);opacity:1}80.6%,100%{transform:translate(295px,215px);opacity:0}}
.sp-projets .uring{animation:uring 7.5s ease infinite both}
@keyframes uring{0%,64%{opacity:0;transform:scale(.4)}65.3%{opacity:1;transform:scale(1)}70.7%,100%{opacity:0;transform:scale(1.9)}}
.sp-projets .still{z-index:8}
@media (hover: hover) {
.sp-projets .sp-proj:not(:hover):not(:focus-visible) .sp-thumb *{animation:none!important}
.sp-projets .sp-proj:not(:hover):not(:focus-visible) .sp-stage > :not(.still){visibility:hidden}
.sp-projets .sp-proj:hover .still,.sp-projets .sp-proj:focus-visible .still{display:none}
}

/* Pas d’apparition décalée à l’intérieur des cartes animées (tout le contenu d’une carte arrive en même temps) */
.mi-ready .sp-meth-card .mi-reveal, .mi-ready .sp-off-card .mi-reveal, .mi-ready .sp-proj .mi-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Hero : second accent en corail (comme la bannière LinkedIn) */
.h1---span.sp-hl-coral { color: #d9513d; white-space: nowrap; }

/* ==========================================================================
   Retours du 9 oct. 2026 : responsive accueil
   ========================================================================== */
/* Logos des projets à la place du badge */
.sp-proj-logo { display: block; height: 24px; width: auto; margin-right: 6px; align-self: center; }
.sp-proj-logo.is-klyxor, .sp-proj-logo.is-doorin { height: 28px; }
.sp-proj-logo.is-uman { height: 22px; }
.sp-chips { align-items: center; }

/* Logos « Ils me font confiance » : copie cachée sur ordi, bande qui défile sur mobile */
.mi-logos .sp-dup { display: none; }
@media (max-width: 767px) {
  .sp-logos-vp { overflow: hidden; margin: 0 -20px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
  .sp-logos-vp .mi-logos { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: 0; width: max-content; animation: sp-marquee 26s linear infinite; }
  .sp-logos-vp .mi-logos img { flex-shrink: 0; margin-right: 44px; height: 24px; max-width: none; }
  .mi-logos .sp-dup { display: block; }
}
@keyframes sp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Offres : sur mobile, les 3 offres l'une sous l'autre (pas d'onglets) */
.sp-panel-sit { display: none; margin: 0; font-family: Fraunces, serif; font-style: italic; font-size: 1.05rem; line-height: 1.4; color: #5a5a72; }
@media (max-width: 767px) {
  .sp-off-tabs, .sp-off-left > .body { display: none; }
  .sp-off-card { display: flex; flex-direction: column; gap: 20px; background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .sp-off-card::before { display: none; }
  .sp-panel, .sp-panel[aria-hidden="true"] { opacity: 1; transform: none; visibility: visible; pointer-events: auto; grid-area: auto; background: #fff; border-radius: 20px; box-shadow: 0 30px 60px -36px rgba(26, 26, 46, .35); padding: 28px 22px; }
  .sp-panel-sit { display: block; }
}

/* Expertises : la section se fige, le défilement fait avancer le tracé et les cartes (ordi) */
.sp-meth-sec.is-pinned { padding-top: 0 !important; padding-bottom: 0 !important; }
.sp-meth-sec.is-pinned .sp-meth-pin { position: relative; height: var(--pin-h, 260vh); }
.sp-meth-sec.is-pinned .sp-meth-sticky { position: sticky; top: var(--pin-top, 70px); padding: 40px 0 30px; box-sizing: border-box; }
.sp-meth-sec.is-pinned .sp-meth-sticky > .container { width: 100%; }
.sp-meth-sec.is-pinned .sp-meth { margin-top: 1rem; }
.sp-meth-sec.is-pinned .sp-meth-path { max-width: 980px; margin: 0 auto; }
.sp-meth-sec.is-pinned .mi-exp-intro .body { margin-top: .4rem; }
.sp-meth-sec.is-pinned .sp-meth-card { opacity: 0; transform: translateY(26px); }
.sp-meth-sec.is-pinned .sp-meth-card.on { opacity: 1; transform: none; }
/* Mobile : les cartes se superposent au fil du scroll */
@media (max-width: 767px) {
  .sp-meth-grid { display: block; }
  .sp-meth-card { position: sticky; top: 92px; margin-bottom: 18px; opacity: 1 !important; transform: none !important; box-shadow: 0 -12px 30px -20px rgba(26, 26, 46, .35), 0 18px 40px -30px rgba(26, 26, 46, .35); }
  .sp-meth-card.sp-c2 { top: 104px; }
  .sp-meth-card.sp-c3 { top: 116px; }
  .sp-meth-card.sp-c4 { top: 128px; }
}

/* Témoignages : carrousel au pouce sur mobile */
.sp-t-nav { display: none; }
@media (max-width: 767px) {
  .sp-t-big { display: none; }
  .sp-t { gap: 20px; }
  .sp-t-strip { cursor: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; -webkit-mask-image: none; mask-image: none; padding: 10px 0 14px; margin: 0 -20px; width: calc(100% + 40px); }
  .sp-t-track { gap: 14px; padding: 0 20px; }
  .sp-t-card[aria-hidden="true"] { display: none; }
  .sp-t-card { width: 84vw; max-width: 340px; height: auto; min-height: 320px; scroll-snap-align: center; gap: 22px; padding: 24px 22px; cursor: default; }
  .sp-t-card:hover, .sp-t-card:focus-visible { transform: none; box-shadow: none; }
  .sp-t-card[aria-pressed="true"] { border-color: #ece7df; box-shadow: none; }
  .sp-t-live { display: none !important; }
  .sp-t-clamp { display: block; -webkit-line-clamp: unset; overflow: visible; font-size: 1rem; line-height: 1.5; }
  .sp-t-nav { display: flex; gap: 12px; align-self: flex-start; }
  .sp-t-nav button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #e3ddd4; background: #fff; color: #1a1a2e; display: flex; align-items: center; justify-content: center; cursor: pointer; }
  .sp-t-nav button:disabled { opacity: .35; }
}

/* À propos : le texte d'abord, les photos ensuite (mobile et tablette) */
@media (max-width: 991px) {
  #profil--section .mi-about-collage { order: 2; }
}