/* V18 (22/10) : trois cartes côte à côte, partagées par « Le problème » (Shadow AI), « Conformité » et
   « Références ». Charte du Kit Com : fond blanc sur crème, filet, rayon 10, aucune ombre ; picto au trait de
   16 px (la grille des icônes de la démo, .kd__ico) dans un carré à filet. Sous 900 px, les cartes s'empilent
   (règles téléphone : mobile.css). */
.pa-trio { display: grid; gap: 16px; margin-top: clamp(28px, 3vw, 40px); }
@media (min-width: 900px) { .pa-trio { grid-template-columns: repeat(3, 1fr); } }
.pa-trio > li { display: flex; flex-direction: column; gap: 10px; padding: 20px; background: var(--blanc); border: 1px solid var(--filet); border-radius: 10px; }
.pa-trio__ico { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--filet); border-radius: 6px; color: var(--marine); }
.pa-trio__ico .kd__ico { width: 18px; height: 18px; }
.pa-trio h3 { font-size: 1.125rem; }
.pa-trio p { color: var(--second); font-size: .95rem; }
/* Ce que Kap apporte, sous le constat : en marine, une puce carrée orange (Conformité). */
.pa-trio .pa-trio__kap { display: flex; gap: 10px; align-items: baseline; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--filet); color: var(--marine); font-weight: 600; }
.pa-trio__kap::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--orange); transform: translateY(-1px); }

/* Variante courte : le picto et le titre sur une ligne (Shadow AI : ce qui part aujourd'hui). */
.pa-trio--court > li { flex-direction: row; align-items: center; gap: 14px; }

/* « Le problème » : le titre à gauche, le texte à droite, puis les cartes. */
.pa-probleme__g { display: grid; gap: 16px 64px; }
@media (min-width: 900px) { .pa-probleme__g { grid-template-columns: 5fr 7fr; align-items: start; } }
.pa-probleme__texte { display: grid; gap: 14px; max-width: 38em; }
.pa-probleme__texte p { color: var(--second); }
.pa-probleme__texte .pa-probleme__kap { color: var(--marine); font-weight: 600; }

/* « Clients » : le bandeau de logos (.pa-defile), sans pastille, plus lent que la ligne d'outils. La hauteur de
   chaque logo est dans ses attributs width et height (équilibrée selon sa forme) ; 80 % sur téléphone.
   V18 bis (25/10) : il tourne toujours de droite à gauche. Pas de pause au survol ni au clic (le clic le figeait
   jusqu'au clic suivant, :focus-within de style.css), et il tourne aussi en mouvement réduit : la règle générale
   de style.css (animation: none !important) est reprise ici avec une spécificité plus forte. */
.pa-defile--logos { margin-top: 8px; }
.pa-defile--logos .pa-defile__piste { align-items: center; animation-duration: 90s; }
.pa-defile--logos .pa-defile__piste li { padding: 0; margin-right: clamp(40px, 4vw, 64px); background: none; border: 0; border-radius: 0; }
.pa-defile--logos .pa-defile__piste img { width: auto; height: var(--h); }
/* Ni survol, ni clic, ni focus ne l'arrêtent. */
.pa-defile--logos:hover .pa-defile__piste, .pa-defile--logos:focus-within .pa-defile__piste { animation-play-state: running; }
@media (max-width: 599px) { .pa-defile--logos .pa-defile__piste img { height: calc(var(--h) * .8); } }
/* Mouvement réduit : le bandeau tourne quand même, comme sur tous les écrans. */
@media (prefers-reduced-motion: reduce) {
  .pa-defile.pa-defile--logos { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
  .pa-defile--logos .pa-defile__piste { animation: pa-defile 90s linear infinite !important; }
  .pa-defile--logos .pa-defile__piste li[aria-hidden] { display: inline-flex; }
}

/* « Ils croient en nous » : BSC AI Factory, et l'emplacement Mistral AI (désactivé dans index.html). */
.pa-croient__logos { display: grid; gap: 20px; }
.pa-croient__logos .pa-croient__bsc { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 12px 28px; align-items: center; }
.pa-croient__mistral img { height: 40px; width: 40px; }
@media (max-width: 599px) { .pa-croient__logos .pa-croient__bsc { grid-template-columns: 1fr; } }

/* Second point d'entrée « Test Shadow AI en 2 minutes » (désactivé dans index.html tant que l'URL manque). */
.pa-test { font-size: .92rem; color: var(--second); }
.pa-test .pa-lien { font-weight: 500; color: var(--marine); }
.fn-kap__test { margin-top: 14px; }

/* V19 (31/10) : sous « Ils croient en nous », la ligne vers les deux autres services (Modèles métier, Calcul européen). */
.pa-autres { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--filet); max-width: 46em; font: 500 1.08rem/1.55 var(--sans); color: var(--marine); }
.pa-autres .pa-lien { color: var(--marine); }
/* V19 : la ligne des services et la note ISO tiennent sur une ligne en largeur d'ordinateur. */
.pa-autres, #conformite .pa-note { max-width: none; }
/* V24 : « Ils croient en nous » sous le bandeau des clients. */
#clients .pa-croient { margin-top: clamp(32px, 4vw, 48px); }

/* V25 (31/10) : l'équipe à deux. Le titre et sa phrase à gauche, les deux portraits à droite, plus petits. */
.pa-duo { display: grid; gap: 32px 64px; }
@media (min-width: 900px) { .pa-duo { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: end; } }
.pa-duo__tete { display: grid; gap: 16px; max-width: 30em; }
.pa-duo__tete p { color: var(--second); font-size: 1.08rem; line-height: 1.55; }
.pa-equipe.pa-duo__l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }