/* Section « Un Kap par métier » : structure de linear.app (rangée de fenêtres qui déborde et s'estompe sur
   les bords, ligne « + » en pied), couleurs du Kit Com Propul AI. Fond marine, panneaux marine clair,
   filet 1 px, rayon 10, aucune ombre, aucun dégradé de couleur (le seul dégradé est un masque de transparence).
   Orange en texte seulement, puisque le fond est marine. */
.km { --km-g: calc((100% - min(1240px, 100% - 48px)) / 2); --km-filet: rgba(255, 255, 255, .12);
  background: var(--marine); color: var(--creme); padding-block: clamp(80px, 10vw, 140px) clamp(64px, 7vw, 96px); overflow: hidden; }
.km .pa-label { color: var(--orange); }
.km :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }

/* En-tête : le titre à gauche, le sous-titre à droite (comme « AI and automations »). */
.km__tete-sec { display: grid; gap: 20px 64px; align-items: start; }
@media (min-width: 900px) { .km__tete-sec { grid-template-columns: 5fr 6fr; } }
.km__tete-sec .pa-label { margin-bottom: 14px; }
.km h2 { font: 600 clamp(2.1rem, 3.8vw, 3.5rem)/1.06 var(--sans); letter-spacing: -.035em; color: var(--creme); max-width: 11em; }
.km__sous { font-size: clamp(1.1rem, 1.2vw, 1.3rem); line-height: 1.5; color: #D5DCEC; max-width: 30em; }
@media (min-width: 900px) { .km__sous { padding-top: 34px; } }

/* La rangée : déborde de l'écran, défile au clavier, au doigt et à la souris, s'aimante aux cartes. */
.km__rang { margin-top: clamp(48px, 6vw, 80px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--km-g); padding: 4px var(--km-g) 8px;
  scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, #000 91%, transparent); mask-image: linear-gradient(90deg, #000 91%, transparent); }
.km__rang::-webkit-scrollbar { display: none; }
.km__rang.is-glisse { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.km__rang:focus-visible { outline-offset: -2px; }
.km__liste { display: flex; gap: 16px; width: max-content; }
.km__liste > li { flex: 0 0 min(440px, calc(85vw - 16px)); scroll-snap-align: start; }

/* Le panneau : une fenêtre d'application. */
.km__carte { display: flex; flex-direction: column; height: 100%; min-height: 340px; padding-bottom: 22px; background: var(--marine-clair); border: 1px solid var(--km-filet); border-radius: 10px; }
.km__tete { display: flex; align-items: center; gap: 10px; padding: 14px 16px 10px; }
.km__carre { width: 9px; height: 9px; flex: none; background: var(--orange); }
.km h3 { font: 600 .95rem/1.3 var(--sans); color: var(--creme); min-width: 0; }
.km__ico { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.km__demande { margin: 8px 16px 0 44px; padding: 12px 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: 10px; font-size: .95rem; line-height: 1.5; color: var(--creme); min-height: 3.1em; }

/* « Kap réfléchit... » puis « A réfléchi 40 s », la petite grille de pixels devant. */
.km__etat { display: flex; align-items: center; gap: 8px; margin: 18px 16px 0; font-size: .84rem; color: var(--second-clair); }
.km__etat em { font-style: normal; font-weight: 600; color: var(--orange); }
.km__etat-encours { display: none; }
.km__grille { display: grid; grid-template-columns: repeat(3, 3px); gap: 2px; flex: none; }
.km__grille i { width: 3px; height: 3px; background: var(--second-clair); opacity: .6; }

/* Les appels aux connecteurs, comme Claude ou ChatGPT quand ils interrogent une source : une ligne compacte
   par outil, logo de 12 px, nom de l'outil, ce que Kap y fait, et l'état au bout (point qui bat, puis coche). */
.km__appels { display: grid; gap: 5px; margin: 10px 16px 0; }
.km__appels li { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 6px 10px; border: 1px solid var(--km-filet); border-radius: 8px; background: rgba(255, 255, 255, .03); font-size: .78rem; line-height: 1.3; color: var(--second-clair); }
.km__appels img { width: 12px; height: 12px; flex: none; object-fit: contain; }
.km__appels b { flex: none; font-weight: 600; color: var(--creme); }
.km__appels span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.km__appels li::after { content: ""; flex: none; margin-left: auto; width: 6px; height: 10px; border: solid var(--orange); border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }

.km__res { margin: 14px 16px 0; font-size: .95rem; line-height: 1.55; color: var(--creme); }

/* Lecture : metiers.js pose .km--anime puis, panneau par panneau, .is-demande, .is-travail, .is-fait, et
   .is-la puis .is-ok sur chaque appel. Le texte reste dans le document (opacité seulement) ; sans JS ou en
   mouvement réduit, tout est visible dans son état final. */
.km--anime .km__demande, .km--anime .km__etat, .km--anime .km__res {
  opacity: 0; transform: translateY(6px); transition: opacity 420ms var(--sortie), transform 420ms var(--sortie); }
.km--anime .is-demande .km__demande, .km--anime .is-travail .km__etat, .km--anime .is-fait .km__res { opacity: 1; transform: none; }
.km--anime .km__carte:not(.is-fait) .km__etat-fait { display: none; }
.km--anime .km__carte.is-travail:not(.is-fait) .km__etat-encours { display: inline; animation: km-pulse 1.2s ease-in-out infinite; }
.km--anime .km__carte.is-travail:not(.is-fait) .km__grille i { animation: km-pixel 900ms steps(2) infinite; }
.km__grille i:nth-child(2n) { animation-delay: 150ms; } .km__grille i:nth-child(3n) { animation-delay: 300ms; } .km__grille i:nth-child(5) { animation-delay: 450ms; }
.km--anime .km__appels li { opacity: 0; transform: translateY(4px); transition: opacity 280ms var(--sortie), transform 280ms var(--sortie); }
.km--anime .km__appels li.is-la { opacity: 1; transform: none; }
.km--anime .km__appels li.is-la:not(.is-ok) span { color: var(--creme); animation: km-pulse 900ms ease-in-out infinite; }
.km--anime .km__appels li.is-la:not(.is-ok)::after { width: 6px; height: 6px; border: 0; border-radius: 50%; background: var(--orange); transform: none; animation: km-pulse 700ms ease-in-out infinite; }
@keyframes km-pulse { 50% { opacity: .45; } }
@keyframes km-pixel { 50% { opacity: .15; } }

/* La sixième fenêtre : votre métier. Pas de lecture, un champ de saisie décoratif, ce que Kap sait déjà faire. */
.km__carte--vous { border-style: dashed; border-color: rgba(255, 255, 255, .18); background: transparent; }
.km__carre--vide { background: transparent; border: 1px solid var(--second-clair); }
.km__saisie { display: flex; align-items: center; margin: 8px 16px 0; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; color: var(--second-clair); font-size: .95rem; }
.km__saisie::after { content: ""; width: 2px; height: 1.1em; margin-left: 2px; background: var(--orange); animation: km-curseur 1s steps(2) infinite; }
@keyframes km-curseur { 50% { opacity: 0; } }
.km__sait { margin: 20px 16px 8px; font: 500 .64rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--second-clair); }
.km__usages { display: grid; gap: 8px; margin: 0 16px; }
.km__usages li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--creme); }
.km__puce { width: 6px; height: 6px; flex: none; background: var(--orange); }
.km__vous-bas { margin: auto 16px 0; padding-top: 20px; display: grid; gap: 14px; justify-items: start; }
.km__vous-bas p { font-size: .86rem; line-height: 1.5; color: var(--second-clair); }
.km__btn { min-height: 40px; padding-inline: 16px; font-size: .9rem; }

/* Sous la rangée : une seule ligne, discrète. */
.km__bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin-top: 18px; font-size: .84rem; color: var(--second-clair); }
.km__lien { color: var(--creme); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(250, 247, 246, .35); }
.km__lien:hover { text-decoration-color: var(--orange); }

@media (max-width: 599px) {
  .km { --km-g: 16px; }
  .km__rang { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .km__carte { min-height: 320px; }
  .km__demande { margin-left: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .km__rang { scroll-behavior: auto; }
}

/* Lecture carte par carte (metiers.js pose .km--seq puis .is-actif) : la carte qui joue est nette, les autres
   floutées et en retrait ; à la fin, .km--seq part et toutes redeviennent nettes. */
.km__carte { transition: filter 500ms var(--sortie), opacity 500ms var(--sortie); }
.km--seq .km__carte:not(.is-actif) { filter: blur(3px); opacity: .4; }
.km__tete { min-height: 48px; }
@media (prefers-reduced-motion: reduce) { .km__carte { transition: none; } }