/* Web Katalyst — page « Agents IA & automatisation ».
   Scène du hero (même composition que la landing IA), situations concrètes, bloc confiance, démonstrations, méthode.
   Règle : l'état par défaut est l'état final, lisible sans animation ; les animations ne jouent que sous .is-playing. */

/* ---------- Hero : scène ---------- */
.wk-hero-ia { padding-bottom: 56px; }
@media (min-width: 1024px) { .wk-hero-ia .wk-hero-grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; } }
.wk-sc { margin: 0; min-width: 0; --cycle: 9s; }
.wk-sc figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 18px; font-size: .8125rem; line-height: 1.45; color: var(--on-dark-muted); }
.wk-sc-tag { padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, .08); font: 700 .6875rem/1.3 var(--font-text); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.wk-sc-stage { container-type: inline-size; position: relative; }
.wk-sc-plane { position: relative; display: grid; gap: 12px; }
.wk-sc-glow { position: absolute; left: 10%; right: 10%; top: 30%; height: 40%; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03) 55%, transparent); filter: blur(2px); }

.wk-sc-card { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: linear-gradient(180deg, #2c303c, #1d2029); border: 1px solid rgba(255, 255, 255, .09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 16px 28px -14px rgba(0, 0, 0, .75); color: #fff; --tx: 0px; --ty: 70px; }
.wk-sc-txt { display: grid; min-width: 0; line-height: 1.25; }
.wk-sc-txt b { font: 700 .8125rem/1.3 var(--font-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-sc-txt small { display: none; font-size: .6875rem; color: var(--on-dark-muted); }
.wk-sc-ico { position: relative; flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: #383d4a; color: #fff; font: 800 .5625rem/1 var(--font-text); letter-spacing: .02em; }
.wk-sc-ico.is-mail::before { content: ""; width: 14px; height: 10px; border: 1.5px solid currentColor; border-radius: 2px; }
.wk-sc-ico.is-mail::after { content: ""; position: absolute; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-3px) rotate(45deg); }
.wk-sc-ico.is-doc { background: #f4f4f2; color: var(--wk-ink); }
.wk-sc-ico.is-person::before { content: ""; position: absolute; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.wk-sc-ico.is-person::after { content: ""; position: absolute; bottom: 5px; width: 14px; height: 7px; border-radius: 7px 7px 2px 2px; background: currentColor; }
.wk-sc-ico.is-chat::before { content: ""; width: 15px; height: 11px; border: 1.5px solid currentColor; border-radius: 5px 5px 5px 1px; }

.wk-sc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wk-sc-core { position: relative; display: grid; grid-template-columns: auto 1fr 1fr 1fr; align-items: center; gap: 6px; padding: 10px; border-radius: 14px; background: linear-gradient(160deg, #262a35 0%, #171a22 100%); border: 1px solid rgba(255, 193, 14, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .4), 0 24px 40px -18px rgba(0, 0, 0, .8), 0 0 46px -10px rgba(255, 193, 14, .28); }
.wk-sc-core-title { writing-mode: vertical-rl; transform: rotate(180deg); font: 700 .5625rem/1 var(--font-text); letter-spacing: .16em; text-transform: uppercase; color: var(--wk-yellow); }
.wk-sc-step { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 6px; border-radius: 8px; background: rgba(255, 255, 255, .05); color: #fff; font: 700 .75rem/1.2 var(--font-title); }
.wk-sc-step i { width: 8px; height: 8px; border-radius: 50%; background: var(--wk-yellow); box-shadow: 0 0 10px rgba(255, 193, 14, .8); }
.wk-sc-beam { display: none; position: absolute; height: 2px; background: repeating-linear-gradient(90deg, rgba(255, 193, 14, .85) 0 6px, transparent 6px 12px); }

.wk-sc-out { position: relative; display: grid; gap: 10px; }
.wk-sc-record, .wk-sc-reply { padding: 12px 14px; border-radius: 12px; background: #fff; color: var(--text-strong); box-shadow: 0 22px 40px -16px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .25); }
.wk-sc .wk-sc-head { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 700 .8125rem/1.2 var(--font-title); color: var(--text-strong); }
.wk-sc-head .wk-sc-ico { width: 22px; height: 22px; border-radius: 6px; background: var(--wk-ink); transform: scale(.9); }
.wk-sc-record dl { display: grid; margin: 0; }
.wk-sc-record dl > div { display: grid; grid-template-columns: 74px 1fr; gap: 8px; align-items: center; padding: 5px 0; border-top: 1px solid #eceae6; font-size: .75rem; }
.wk-sc-record dt { color: var(--muted); }
.wk-sc-record dd { margin: 0; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-sc-record dl > div:last-child dd { justify-self: start; padding: 1px 8px; border-radius: 99px; background: var(--wait-bg); color: var(--wait-ink); font-size: .6875rem; font-weight: 700; }
.wk-sc-line { display: block; height: 6px; width: var(--w); margin: 0 0 7px; border-radius: 3px; background: #e6e5e1; transform-origin: left center; }
.wk-sc-reply .wk-sc-line:nth-of-type(n+3) { display: none; }
.wk-sc .wk-sc-validate { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.wk-sc-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: var(--wk-yellow); color: var(--wk-ink); font: 700 .6875rem/1.3 var(--font-text); white-space: nowrap; }
.wk-sc-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wk-ink); }
.wk-sc-btn { padding: 3px 9px; border-radius: 5px; background: var(--wk-ink); color: #fff; font: 700 .6875rem/1.3 var(--font-text); }
.wk-sc-btn.is-ghost { background: transparent; color: var(--text-strong); border: 1px solid #d6d6d2; }
/* Caméléon : observateur discret. Petit écran : au coin de la réponse, à droite des boutons. */
.wk-sc-mascot { position: absolute; z-index: 3; right: -6px; bottom: -30px; width: 100px; height: auto; pointer-events: none; transform: scaleX(-1); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }

/* Écran large : scène en volume */
@container (min-width: 520px) {
  .wk-sc-stage { perspective: 1700px; perspective-origin: 30% 40%; }
  .wk-sc-plane { display: block; height: 0; padding-bottom: 74%; transform-style: preserve-3d; transform: rotateX(9deg) rotateY(-15deg) rotateZ(.6deg); }
  .wk-sc-plane > * { position: absolute; }
  .wk-sc-glow { left: 22%; right: auto; top: 8%; width: 46%; height: 86%; }
  .wk-sc-in { inset: 0 auto 0 0; width: 37%; display: block; }
  .wk-sc-in .wk-sc-card { position: absolute; width: 92%; padding: 9px 12px; gap: 10px; }
  .wk-sc-in .wk-sc-ico { width: 28px; height: 28px; }
  .wk-sc-txt small { display: block; }
  .wk-sc-card:nth-child(1) { left: 0; top: 6%; transform: rotate(-5deg) translateZ(30px); --tx: 33cqw; --ty: 12cqw; }
  .wk-sc-card:nth-child(2) { left: 10%; top: 29%; transform: rotate(4deg) translateZ(10px); --tx: 26cqw; --ty: 4cqw; }
  .wk-sc-card:nth-child(3) { left: 1%; top: 53%; transform: rotate(-2deg) translateZ(40px); --tx: 32cqw; --ty: -6cqw; }
  .wk-sc-card:nth-child(4) { left: 8%; top: 76%; transform: rotate(3deg) translateZ(0); --tx: 28cqw; --ty: -18cqw; }
  .wk-sc-core { left: 40%; top: 20%; width: 21%; grid-template-columns: 1fr; gap: 8px; padding: 14px; transform: translateZ(20px); }
  .wk-sc-core-title { writing-mode: horizontal-tb; transform: none; font-size: .625rem; }
  .wk-sc-step { justify-content: flex-start; padding: 7px 10px; font-size: .8125rem; }
  .wk-sc-beam { display: block; top: 52%; }
  .wk-sc-beam.is-in { right: 100%; width: 22%; }
  .wk-sc-beam.is-out { left: 100%; width: 18%; }
  .wk-sc-out { right: 0; top: 0; width: 36%; height: 100%; display: block; transform: translateZ(50px); }
  .wk-sc-record { position: absolute; top: 2%; left: 0; right: 0; }
  .wk-sc-reply { position: absolute; top: 57%; left: 6%; right: -4%; }
  .wk-sc-reply .wk-sc-line:nth-of-type(n+3) { display: block; }
  .wk-sc-mascot { left: 37.5%; right: auto; bottom: 0; width: 25%; transform: none; }
}

/* Animation, une seule lecture : les demandes entrent chez l'agent, ses étapes s'allument, la fiche se remplit,
   la réponse s'écrit, puis « À valider ». 0 % = 100 % = état final. */
.wk-sc.is-playing .wk-sc-in .wk-sc-card { animation: wk-sc-card var(--cycle) cubic-bezier(.55, .05, .35, 1) 1 both; animation-delay: calc(var(--i) * .45s); }
.wk-sc.is-playing .wk-sc-step { animation: wk-sc-step var(--cycle) ease 1 both; animation-delay: calc(var(--s) * .5s); }
.wk-sc.is-playing .wk-sc-step i { animation: wk-sc-dot var(--cycle) ease 1 both; animation-delay: calc(var(--s) * .5s); }
.wk-sc.is-playing .wk-sc-record dl > div { animation: wk-sc-row var(--cycle) ease 1 both; animation-delay: calc(var(--r) * .35s); }
.wk-sc.is-playing .wk-sc-line { animation: wk-sc-line var(--cycle) ease 1 both; animation-delay: calc(var(--l) * .3s); }
.wk-sc.is-playing .wk-sc-validate { animation: wk-sc-badge var(--cycle) ease 1 both; }
.wk-sc.is-playing .wk-sc-beam { animation: wk-sc-beam .9s linear 10; }
.wk-sc.is-paused * { animation-play-state: paused !important; }
@keyframes wk-sc-card { 0%, 10% { opacity: 1; translate: 0 0; scale: 1; } 24% { opacity: 0; translate: var(--tx) var(--ty); scale: .35; } 86% { opacity: 0; translate: 0 -8px; scale: .96; } 94%, 100% { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes wk-sc-step { 0%, 22% { background: rgba(255, 255, 255, .05); } 27%, 62% { background: rgba(255, 193, 14, .16); } 72%, 100% { background: rgba(255, 255, 255, .05); } }
@keyframes wk-sc-dot { 0%, 22% { background: #6b7080; box-shadow: none; } 27%, 100% { background: var(--wk-yellow); box-shadow: 0 0 10px rgba(255, 193, 14, .8); } }
@keyframes wk-sc-row { 0%, 12% { opacity: 1; translate: 0 0; } 16%, 38% { opacity: 0; translate: -8px 0; } 44%, 100% { opacity: 1; translate: 0 0; } }
@keyframes wk-sc-line { 0%, 12% { transform: scaleX(1); } 16%, 50% { transform: scaleX(0); } 58%, 100% { transform: scaleX(1); } }
@keyframes wk-sc-badge { 0%, 12% { opacity: 1; scale: 1; } 16%, 64% { opacity: 0; scale: .9; } 68% { opacity: 1; scale: 1.06; } 71%, 100% { opacity: 1; scale: 1; } }
@keyframes wk-sc-beam { to { background-position: 12px 0; } }
@media (prefers-reduced-motion: no-preference) { .wk-sc-mascot { animation: wk-sc-adapt 2.6s ease-out .5s both; } }
@keyframes wk-sc-adapt {
  0% { opacity: 0; filter: grayscale(1) sepia(1) saturate(2.4) brightness(.62) drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
  35% { opacity: 1; filter: grayscale(1) sepia(1) saturate(2.4) brightness(.62) drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
  100% { opacity: 1; filter: grayscale(0) sepia(0) saturate(1) brightness(1) drop-shadow(0 8px 10px rgba(0, 0, 0, .45)); }
}
/* Pause / relecture : icône seule, libellé pour les lecteurs d'écran. */
.wk-sc-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--on-dark-muted); opacity: .75; cursor: pointer; }
.wk-sc-toggle:hover, .wk-sc-toggle:focus-visible { opacity: 1; border-color: var(--line-dark); color: #fff; }
.wk-sc-toggle span { width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.wk-sc-toggle[data-etat="lire"] span { width: 0; height: 0; border: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 9px solid currentColor; }
/* Le bouton pause / rejouer n'apparaît qu'au lancement de la lecture : sa place est réservée à droite de la légende,
   hors du flux, pour que son apparition ne déplace ni la légende ni la suite de la page (petit écran surtout). */
.wk-sc figcaption { position: relative; min-height: 28px; padding-right: 38px; }
.wk-sc-toggle { position: absolute; right: 0; top: 50%; margin-top: -14px; }
@media (pointer: coarse) { .wk-sc figcaption { min-height: 44px; padding-right: 52px; } .wk-sc-toggle { width: 44px; height: 44px; margin-top: -22px; } }

/* ---------- Situations concrètes ---------- */
.wk-tasks { display: grid; gap: 16px; margin: 0 !important; }
.wk-task { display: grid; grid-template-rows: auto 1fr auto auto; gap: 16px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: #fff; }
.wk-page .wk-task h3 { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; margin: 0; font-size: 1.1875rem; line-height: 1.25; }
.wk-task-ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--wk-yellow); color: var(--wk-ink); }
.wk-task dl { display: grid; gap: 12px; margin: 0; align-content: start; }
.wk-task dt { margin-bottom: 2px; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wk-task dd { margin: 0; font-size: .9375rem; line-height: 1.5; }
.wk-task .is-agent dd { color: var(--text-strong); }
.wk-task .is-gain { padding: 12px 14px; border-radius: 10px; background: #fff7dc; }
.wk-task .is-gain dt { color: var(--wait-ink); }
.wk-task .is-gain dd { color: var(--text-strong); font-weight: 600; }
/* Ce que l'agent a produit : quatre jalons reliés */
.wk-task-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0 !important; counter-reset: wk-r; }
.wk-task-results li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 8px; background: var(--bg-soft); font-size: .8125rem; font-weight: 600; line-height: 1.3; color: var(--text-strong); }
.wk-task-results .wk-ico { flex: none; width: 18px; height: 18px; padding: 2px; border-radius: 50%; background: var(--ok-bg, #dff5e6); color: var(--ok, #1a7f43); stroke-width: 2.6; }
.wk-page .wk-task-more { margin: 0; }
.wk-link.is-down::after { content: "↓"; }
.wk-page .wk-note { margin: 22px 0 0; font-size: .875rem; color: var(--muted); }
@media (min-width: 760px) { .wk-tasks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .wk-task { padding: 28px; } }
@media (min-width: 1100px) { .wk-task-results { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .wk-task-results li { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; } }

/* ---------- Service client et confiance ---------- */
.wk-trust .wk-head p { color: #dde0e6; }
.wk-trust-grid { display: grid; gap: 18px; }
.wk-trust-col { padding: 22px; border: 1px solid var(--line-dark); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .04); }
.wk-page .wk-trust-col h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 1.125rem; color: #fff; }
.wk-trust-ico { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 193, 14, .14); color: var(--wk-yellow); }
.wk-trust-col ul { display: grid; gap: 0; margin: 0 !important; }
.wk-trust-col li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line-dark); }
.wk-trust-col li strong { color: #fff; }
.wk-trust-col li span { font-size: .875rem; color: var(--on-dark-muted); line-height: 1.45; }
.wk-trust-col.is-relay li { padding-left: 16px; border-left: 3px solid var(--wk-yellow); border-top: 0; margin-top: 12px; padding-top: 2px; padding-bottom: 2px; }
.wk-trust-col.is-relay li:first-child { margin-top: 0; }
.wk-trust-card { margin: 0; padding: 20px; border-radius: var(--radius-lg); background: #fff; color: var(--text); box-shadow: var(--shadow-lg); align-self: center; }
.wk-trust .wk-trust-card-title { margin: 0 0 12px; font: 700 1.0625rem/1.3 var(--font-title); color: var(--text-strong); }
.wk-trust-card dl { display: grid; margin: 0; }
.wk-trust-card dl > div { padding: 12px 0; border-top: 1px solid var(--line); }
.wk-trust-card dt { margin-bottom: 6px; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wk-trust-card dd { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: .875rem; font-weight: 600; color: var(--text-strong); }
.wk-trust-card dd span { padding: 4px 10px; border-radius: 14px; background: var(--bg-soft); }
.wk-trust-card .is-check dd span { background: var(--wait-bg); color: var(--wait-ink); }
.wk-trust-card figcaption { margin-top: 10px; font-size: .75rem; color: var(--muted); }
.wk-page .wk-trust-note { max-width: 46em; margin: 28px 0 0; padding-left: 16px; border-left: 3px solid var(--wk-yellow); color: #dde0e6; }
@media (min-width: 1024px) { .wk-trust-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: stretch; } }

/* ---------- Démonstrations ---------- */
.wk-page .wk-scenario-name { margin: 0 0 6px; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem); }
.wk-tabs.is-ready .wk-scenario-name { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.wk-page .wk-scenario .wk-scenario-lead { font: 400 1.0625rem/1.55 var(--font-text); color: var(--text); margin-bottom: 20px !important; max-width: 40em; }
.wk-how { margin-top: 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-soft); }
.wk-how summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 8px 18px; font-weight: 700; color: var(--text-strong); cursor: pointer; list-style: none; }
.wk-how summary::-webkit-details-marker { display: none; }
.wk-how summary::after { content: "+"; font: 400 1.5rem/1 var(--font-text); color: var(--muted); }
.wk-how[open] summary::after { content: "–"; }
.wk-how .wk-steps { margin: 0 !important; padding: 4px 18px 16px; }

/* ---------- Méthode : quatre engagements reliés ---------- */
@media (min-width: 1024px) {
  .wk-method.is-line { gap: 0; position: relative; }
  .wk-method.is-line li { border-radius: 0; border-right-width: 0; padding: 26px 22px; }
  .wk-method.is-line li:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
  .wk-method.is-line li:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; border-right-width: 1px; }
  .wk-method.is-line li { position: relative; }
  .wk-method.is-line li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; right: -7px; top: 36px; width: 12px; height: 12px; border-top: 2px solid var(--wk-yellow); border-right: 2px solid var(--wk-yellow); background: #fff; transform: rotate(45deg); }
}

@media (prefers-reduced-motion: reduce) {
  .wk-sc *, .wk-sc { animation: none !important; transition: none !important; }
}

/* ---------- Scénarios : choix visible, résumé lisible sans l'animation ---------- */
.wk-page .wk-tabs-label { margin: 0 0 8px; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wk-tabs:not(.is-ready) .wk-tabs-label { display: none; }
.wk-scenario-resume { display: grid; gap: 10px; margin: 0 0 20px; }
.wk-scenario-resume > div { padding: 12px 16px; border-radius: 10px; background: var(--bg-soft); }
.wk-scenario-resume > .is-result { background: #fff7dc; }
.wk-scenario-resume dt { margin-bottom: 2px; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wk-scenario-resume .is-result dt { color: var(--wait-ink); }
.wk-scenario-resume dd { margin: 0; font-size: .9375rem; line-height: 1.5; color: var(--text-strong); }
@media (min-width: 760px) { .wk-scenario-resume { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* ---------- Petit écran : blocs allégés ---------- */
@media (max-width: 759px) {
  /* Onglets des scénarios : tous visibles, sur plusieurs lignes au besoin, jamais coupés hors écran. */
  .wk-tablist { flex-wrap: wrap; overflow: visible; }
  .wk-tablist button { flex: 1 1 auto; min-height: 44px; }
  /* Situations : l'essentiel d'abord (avec l'agent, ce que l'équipe y gagne) ; le constat de départ est replié dans le titre. */
  .wk-task { gap: 12px; padding: 18px; }
  .wk-task dl > div:first-child { display: none; }
  .wk-task-results { grid-template-columns: 1fr 1fr; gap: 6px; }
  .wk-task-results li { padding: 6px 8px; font-size: .75rem; }
  /* Confiance : les précisions de chaque ligne sont masquées, les intitulés suffisent à la lecture rapide. */
  .wk-trust-col { padding: 18px; }
  .wk-trust-col:not(.is-relay) li { padding: 9px 0; }
  .wk-trust-col:not(.is-relay) li span { display: none; }
  .wk-method.is-line li { padding: 18px; }
}

/* =====================================================================================================================
   10/10/2026 — Ce qu'un agent sur mesure apporte, quatre exemples par niveau, schéma d'un parcours, technologies.
   ===================================================================================================================== */

/* ---------- Au-delà d'un assistant généraliste ---------- */
.wk-diff-grid { display: grid; gap: 18px; }
.wk-diff-alone { padding: 24px; border-radius: 18px; border: 1px dashed #c9ccd4; background: var(--bg-soft); }
.wk-page .wk-diff-alone h3 { margin: 0 0 14px; font-size: 1.0625rem; color: var(--muted); }
.wk-diff-chat { display: grid; gap: 7px; margin: 0 0 18px !important; }
.wk-diff-chat span { height: 26px; border-radius: 13px 13px 13px 4px; background: #e4e5e9; }
.wk-diff-chat span:nth-child(1) { width: 62%; }
.wk-diff-chat span:nth-child(2) { width: 84%; margin-left: auto; border-radius: 13px 13px 4px 13px; background: #d7d9df; }
.wk-diff-chat span:nth-child(3) { width: 48%; }
.wk-diff-alone ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.wk-diff-alone li { display: flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--text); }
.wk-diff-alone .wk-ico { flex: none; width: 20px; height: 20px; padding: 4px; border-radius: 50%; background: #e4e5e9; color: #6b7080; stroke-width: 2.6; }
.wk-diff-agent { position: relative; overflow: hidden; padding: 24px; border-radius: 18px; background: linear-gradient(160deg, #262932 0%, #181a21 55%, #101217 100%); color: var(--on-dark-muted); box-shadow: var(--shadow-lg); }
.wk-diff-agent::before { content: ""; position: absolute; top: 0; right: 0; width: 46%; height: 70%; background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1.5px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(120% 120% at 100% 0, #000, transparent 64%); mask-image: radial-gradient(120% 120% at 100% 0, #000, transparent 64%); pointer-events: none; }
.wk-diff-agent > * { position: relative; }
.wk-page .wk-diff-agent h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; font-size: 1.1875rem; color: #fff; }
.wk-diff-bot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--wk-yellow); color: var(--wk-ink); }
.wk-diff-agent ul { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.wk-diff-agent li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; }
.wk-diff-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--wk-yellow); }
.wk-diff-ico .wk-ico { width: 20px; height: 20px; }
.wk-page .wk-diff-agent li p { display: grid; gap: 2px; margin: 0; }
.wk-diff-agent li strong { color: #fff; font-size: .9688rem; }
.wk-diff-agent li span { font-size: .875rem; line-height: 1.45; }
@media (min-width: 700px) { .wk-diff-agent ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; } }
@media (min-width: 1024px) {
  .wk-diff-grid { grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 24px; align-items: stretch; }
  .wk-diff-alone, .wk-diff-agent { padding: 30px; }
  .wk-diff-agent ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 24px; }
}

/* ---------- Quatre exemples, du plus simple au plus avancé ---------- */
.wk-cas { margin-top: 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); overflow: hidden; scroll-margin-top: 96px; }
.wk-cas-head { display: grid; gap: 8px; padding: 22px 22px 0; }
.wk-page .wk-cas-level { display: inline-flex; align-items: center; gap: 9px; justify-self: start; margin: 0; padding: 5px 12px 5px 10px; border-radius: 99px; background: var(--wk-ink); color: #fff; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wk-cas-dots { display: inline-flex; gap: 4px; }
.wk-cas-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.wk-cas-level[data-force="1"] .wk-cas-dots i:nth-child(-n+1), .wk-cas-level[data-force="2"] .wk-cas-dots i:nth-child(-n+2), .wk-cas-level[data-force="3"] .wk-cas-dots i { background: var(--wk-yellow); }
.wk-page .wk-cas h3 { margin: 0; font-size: clamp(1.1875rem, 1.05rem + .6vw, 1.5rem); line-height: 1.25; }
.wk-cas-flow { display: grid; gap: 0; padding: 18px 22px 6px; }
.wk-cas-step { position: relative; padding: 16px 0; border-top: 1px solid var(--line); }
.wk-cas-step:first-child { border-top: 0; padding-top: 4px; }
.wk-page .wk-cas-label { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wk-cas-label span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--bg-soft); color: var(--text-strong); font-size: .6875rem; letter-spacing: 0; }
.wk-page .wk-cas-step.is-pb > p:last-child { margin: 0; font-size: .9375rem; line-height: 1.55; }
.wk-cas-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wk-cas-chips li { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font-size: .8438rem; font-weight: 600; color: var(--text-strong); }
.wk-cas-chips .wk-ico { flex: none; width: 18px; height: 18px; color: #8a6a00; }
.wk-cas-step.is-agent { margin: 6px -22px 0; padding: 18px 22px; border-top: 0; background: var(--wk-ink); color: var(--on-dark-muted); }
.wk-cas-step.is-agent .wk-cas-label { color: var(--wk-yellow); }
.wk-cas-step.is-agent .wk-cas-label span { background: var(--wk-yellow); color: var(--wk-ink); }
.wk-cas-step.is-agent ol { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; counter-reset: wk-a; }
.wk-cas-step.is-agent ol li { counter-increment: wk-a; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; font-size: .9375rem; line-height: 1.4; color: #fff; }
.wk-cas-step.is-agent ol li::before { content: ""; width: 8px; height: 8px; margin: .45em 0 0 4px; border-radius: 50%; background: var(--wk-yellow); }
.wk-page .wk-cas-relay { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(255, 255, 255, .28); font-size: .8438rem; line-height: 1.45; color: var(--on-dark-muted); }
.wk-cas-relay .wk-ico { width: 18px; height: 18px; margin-top: 1px; color: var(--wk-yellow); }
.wk-cas-step.is-out { border-top: 0; padding-top: 18px; }
.wk-page .wk-cas-gain { margin: 12px 0 0; font-size: .9063rem; font-weight: 600; color: var(--text-strong); }
.wk-cas-foot { display: grid; gap: 10px; padding: 14px 22px 18px; border-top: 1px solid var(--line); background: #fafaf8; }
.wk-page .wk-cas-pre { margin: 0; font-size: .8438rem; color: var(--muted); }
.wk-cas-guards { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.wk-cas-guards li { display: flex; align-items: center; gap: 6px; font-size: .7813rem; font-weight: 700; color: #14603a; }
.wk-cas-guards .wk-ico { width: 14px; height: 14px; stroke-width: 2.6; }
.wk-cases .wk-note { margin-top: 26px; max-width: 62em; }

/* Aperçus de résultat : un par exemple */
.wk-out { padding: 14px 16px 16px; border-radius: 14px; border: 1px solid var(--line); background: #fff; box-shadow: 0 8px 22px rgba(19, 21, 28, .08); }
.wk-page .wk-out-title { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 10px; font: 800 .9375rem/1.25 var(--font-title); color: var(--text-strong); }
.wk-out-tag { padding: 2px 9px; border-radius: 99px; background: var(--wk-yellow); color: var(--wk-ink); font: 700 .6875rem/1.5 var(--font-text); white-space: nowrap; }
.wk-page .wk-out-text { margin: 0; padding: 10px 12px; border-radius: 4px 12px 12px 12px; background: var(--bg-soft); font-size: .8438rem; line-height: 1.5; color: var(--text-strong); }
.wk-out-src { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.wk-out-src li { padding: 3px 9px; border-radius: 99px; background: #fff7dc; font-size: .7188rem; font-weight: 700; color: #6b5300; }
.wk-page .wk-out-btns { display: flex; gap: 8px; margin: 12px 0 0; }
.wk-out-btns span { padding: 6px 13px; border-radius: 8px; border: 1px solid var(--line); font-size: .75rem; font-weight: 700; color: var(--text-strong); }
.wk-out-btns .is-yes { border-color: var(--wk-yellow); background: var(--wk-yellow); color: var(--wk-ink); }
.wk-out-lines { display: grid; margin: 0; padding: 0; list-style: none; }
.wk-out-lines li, .wk-page .wk-out-total { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .8438rem; }
.wk-out-lines b { white-space: nowrap; color: var(--text-strong); }
.wk-page .wk-out-total { margin: 0; padding: 9px 0 0; border-bottom: 0; font-weight: 700; color: var(--text-strong); }
.wk-out-total b { font: 800 1rem/1.2 var(--font-title); white-space: nowrap; }
.wk-page .wk-out-ok, .wk-page .wk-out-warn, .wk-page .wk-out-foot { display: flex; align-items: center; gap: 7px; margin: 8px 0 0; font-size: .7813rem; font-weight: 700; }
.wk-out-ok { color: #14603a; }
.wk-out-warn { color: #8a5a00; }
.wk-out-foot { color: var(--text-strong); }
.wk-out-ok .wk-ico, .wk-out-warn .wk-ico, .wk-out-foot .wk-ico { flex: none; width: 15px; height: 15px; stroke-width: 2.4; }
.wk-out-orgs { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wk-out-orgs li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 9px; font-size: .8125rem; }
.wk-out-orgs .wk-ico { width: 18px; height: 18px; padding: 3px; border-radius: 50%; stroke-width: 2.8; }
.wk-out-orgs b { color: var(--text-strong); }
.wk-out-orgs span { font-size: .75rem; color: var(--muted); text-align: right; }
.wk-out-orgs .is-oui { background: #f2fbf5; }
.wk-out-orgs .is-oui .wk-ico { background: #dff3e6; color: #14603a; }
.wk-out-orgs .is-non { background: var(--bg-soft); }
.wk-out-orgs .is-non b { color: var(--muted); font-weight: 600; }
.wk-out-orgs .is-non .wk-ico { background: #e4e5e9; color: #6b7080; }
.wk-page .wk-out-gauge { height: 8px; margin: 0; border-radius: 99px; background: #e8e9ed; overflow: hidden; }
.wk-out-gauge span { display: block; width: var(--p, 50%); height: 100%; border-radius: 99px; background: var(--wk-yellow); }
.wk-page .wk-out-gaugetext { margin: 6px 0 10px; font-size: .8125rem; font-weight: 700; color: var(--text-strong); }
.wk-out-points, .wk-out-valid { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.wk-out-points li { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: .7969rem; }
.wk-out-points b, .wk-out-valid b { padding: 2px 8px; border-radius: 99px; font-size: .6875rem; white-space: nowrap; }
.wk-out-points .is-ok b, .wk-out-valid .is-ok b { background: #dff3e6; color: #14603a; }
.wk-out-points .is-attente b, .wk-out-valid .is-attente b { background: #fff1c9; color: #7a5600; }
.wk-out-valid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.wk-out-valid li { display: grid; justify-items: center; gap: 3px; padding: 8px 4px; border-radius: 10px; background: var(--bg-soft); text-align: center; font-size: .75rem; font-weight: 700; color: var(--text-strong); }
.wk-out-valid .wk-ico { width: 18px; height: 18px; color: var(--muted); }

@media (min-width: 1024px) {
  .wk-cas { margin-top: 28px; }
  .wk-cas-head { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; padding: 26px 30px 0; }
  .wk-cas-flow { grid-template-columns: minmax(0, .92fr) minmax(0, .74fr) minmax(0, 1fr) minmax(0, 1.18fr); padding: 22px 30px 26px; align-items: stretch; }
  .wk-cas-step { padding: 4px 26px 4px 0; border-top: 0; }
  .wk-cas-step + .wk-cas-step { padding-left: 26px; border-left: 1px solid var(--line); }
  .wk-cas-chips { display: grid; gap: 8px; }
  .wk-cas-step.is-agent { margin: -6px 0; padding: 18px 22px; border-left: 0; border-radius: 16px; }
  .wk-cas-step.is-out { padding: 4px 0 4px 26px; border-left: 0; }
  /* Flèche d'un temps au suivant : petit chevron jaune posé sur la séparation. */
  .wk-cas-step.is-src::before, .wk-cas-step.is-agent::before, .wk-cas-step.is-out::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-top: 2px solid var(--wk-yellow); border-right: 2px solid var(--wk-yellow); transform: rotate(45deg); background: #fff; }
  .wk-cas-step.is-agent::before { left: -19px; background: transparent; }
  .wk-cas-step.is-out::before { left: 7px; }
  .wk-cas-foot { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 14px 30px 16px; }
}

/* ---------- Schéma d'un parcours ---------- */
.wk-wf { margin: 0; }
.wk-wf-canvas { display: grid; gap: 34px; padding: 22px 18px; border-radius: 18px; border: 1px solid #e4e5e9; background-color: #f7f7f5; background-image: radial-gradient(#d3d5db 1px, transparent 1.4px); background-size: 18px 18px; }
.wk-wf figcaption { margin-top: 12px; font-size: .8438rem; color: var(--muted); }
.wk-wf-col { position: relative; display: grid; gap: 12px; align-content: center; }
.wk-wf-col + .wk-wf-col::before { content: ""; position: absolute; left: 50%; top: -28px; width: 2px; height: 22px; background: #9aa0ae; }
.wk-wf-col + .wk-wf-col::after { content: ""; position: absolute; left: calc(50% - 5px); top: -13px; width: 10px; height: 10px; border-right: 2px solid #9aa0ae; border-bottom: 2px solid #9aa0ae; transform: rotate(45deg); }
.wk-page .wk-wf-coltitle { margin: 0; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wk-wf-col ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wk-wfn { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 14px 10px 10px; border-radius: 12px; border: 1px solid #d5d8de; background: #fff; box-shadow: 0 2px 6px rgba(19, 21, 28, .06); }
.wk-wfn-ico { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: var(--bg-soft); color: var(--text-strong); }
.wk-wfn-ico .wk-ico { width: 20px; height: 20px; }
.wk-page .wk-wfn p { display: grid; gap: 1px; margin: 0; }
.wk-wfn strong { font-size: .875rem; line-height: 1.25; color: var(--text-strong); }
.wk-wfn span { font-size: .75rem; line-height: 1.35; color: var(--muted); }
.wk-wfn.is-mini { grid-template-columns: 30px minmax(0, 1fr); padding: 7px 12px 7px 7px; }
.wk-wfn.is-mini .wk-wfn-ico { width: 30px; height: 30px; border-radius: 8px; }
.wk-wfn.is-mini .wk-ico { width: 16px; height: 16px; }
.wk-wfn.is-agent { grid-template-columns: 48px minmax(0, 1fr); padding: 14px 16px 14px 12px; border: 2px solid var(--wk-yellow); background: var(--wk-ink); box-shadow: 0 0 0 5px rgba(255, 193, 14, .16), 0 10px 24px rgba(19, 21, 28, .18); }
.wk-wfn.is-agent .wk-wfn-ico { width: 48px; height: 48px; border-radius: 14px; background: var(--wk-yellow); color: var(--wk-ink); }
.wk-wfn.is-agent .wk-ico { width: 28px; height: 28px; }
.wk-wfn.is-agent strong { font-size: 1rem; color: #fff; }
.wk-wfn.is-agent span { color: var(--on-dark-muted); }
.wk-wf-subs { position: relative; gap: 6px !important; padding: 12px 0 0 22px !important; border-left: 2px dashed #b4b9c4; margin-left: 24px !important; }
.wk-wf-subs li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: center; }
.wk-wf-subs li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 16px; border-top: 2px dashed #b4b9c4; }
.wk-wf-subs .wk-wfn-ico { width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 1px solid #d5d8de; }
.wk-wf-subs .wk-ico { width: 15px; height: 15px; }
.wk-page .wk-wf-subs p { display: grid; margin: 0; }
.wk-wf-subs strong { font-size: .8125rem; color: var(--text-strong); }
.wk-wf-subs span { font-size: .7344rem; color: var(--muted); }
.wk-wfn.is-test { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; border: 2px dashed #9aa0ae; background: #fff; text-align: center; }
.wk-wf-branch { position: relative; display: grid; gap: 8px; padding: 26px 12px 12px; border-radius: 14px; border: 1px solid #d5d8de; background: rgba(255, 255, 255, .7); }
.wk-wf-tag { position: absolute; left: 12px; top: -11px; padding: 2px 10px; border-radius: 99px; font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; }
.wk-wf-branch.is-oui .wk-wf-tag { background: #dff3e6; color: #14603a; }
.wk-wf-branch.is-non .wk-wf-tag { background: #e4e5e9; color: #474c58; }
.wk-wfn.is-human { border-color: var(--wk-yellow); background: #fffaf0; }
.wk-wfn.is-human .wk-wfn-ico { background: var(--wk-yellow); color: var(--wk-ink); }
.wk-wfn.is-livrable { border-color: #bfe5cc; background: #f2fbf5; }
.wk-wfn.is-livrable .wk-wfn-ico { background: #dff3e6; color: #14603a; }
@media (min-width: 1100px) {
  .wk-wf-canvas { grid-template-columns: minmax(0, .82fr) minmax(0, 1.08fr) minmax(0, .9fr) minmax(0, 1.12fr) minmax(0, .96fr); gap: 40px; padding: 34px 30px; align-items: center; }
  .wk-wf-col + .wk-wf-col::before { left: -32px; top: 50%; width: 24px; height: 2px; }
  .wk-wf-col + .wk-wf-col::after { left: -17px; top: calc(50% - 4px); transform: rotate(-45deg); }
}

/* ---------- Technologies utilisées ---------- */
.wk-tech { margin-top: 44px; }
.wk-page .wk-tech h3 { margin: 0 0 16px; font-size: 1.125rem; }
.wk-tech ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wk-tech li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: #fff; }
.wk-tech-logo { display: flex; align-items: center; justify-content: center; height: 44px; }
.wk-tech-logo img { max-width: 100%; max-height: 36px; width: auto; height: auto; object-fit: contain; }
/* Le fichier officiel d'OpenAI contient déjà sa marge de protection : on l'affiche plus haut pour un poids visuel comparable. */
.wk-tech-logo img.is-openai { max-height: 48px; }
.wk-tech-logo img.is-claude { max-height: 24px; }
.wk-tech-logo.is-text { border-radius: 10px; background: var(--wk-ink); color: #fff; font: 800 .9375rem/1 var(--font-title); letter-spacing: .01em; }
.wk-page .wk-tech li p { display: grid; gap: 1px; margin: 0; }
.wk-tech li strong { font-size: .9375rem; color: var(--text-strong); }
.wk-tech li span { font-size: .8125rem; color: var(--muted); }
.wk-page .wk-tech-note { margin: 14px 0 0; max-width: 62em; font-size: .8125rem; color: var(--muted); }
@media (min-width: 800px) { .wk-tech ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Méthode : ce que vous recevez à chaque étape ---------- */
.wk-page .wk-method-get { display: grid; gap: 3px; margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: #fff7dc; font-size: .8438rem; line-height: 1.45; color: var(--text-strong); }
.wk-method-get b { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: #7a5600; }