/* Version téléphone de la page Kap (15/10). Chargée après toutes les autres feuilles, rien au-dessus de 599 px
   (sauf mention). Un seul fichier pour ne pas toucher aux feuilles des autres sections pendant qu'on y travaille.
   Principe : sur téléphone, la page doit se lire comme sur ordinateur (les mêmes sections, les mêmes démos),
   mais composée pour un écran de 360 à 430 px : rien qui déborde, rien de plus petit que 11 px, des cibles
   de 40 px, des blocs qui tiennent dans l'écran au lieu de s'étirer. Comportements associés : mobile.js. */

@media (max-width: 599px) {

  /* ---------- Général ---------- */
  /* Les colonnes de carrés des bords vivent dans la gouttière de 16 px : plus discrètes, elles n'accrochent
     plus l'œil contre la première lettre de chaque ligne. */
  .pa-bords { opacity: .55; }

  /* ---------- Hero ---------- */
  .pa-hero { padding-block: 28px 32px; }
  .pa-hero__bas { gap: 18px; margin-top: 14px; }
  .pa-hero__ligne { font-size: 1rem; line-height: 1.5; }
  .pa-hero__cta { width: 100%; align-items: stretch; gap: 8px; }
  .pa-hero__cta .pa-btn { width: 100%; min-height: 50px; justify-content: center; font-size: 1rem; }
  .pa-hero__aide { text-align: center; font-size: .84rem; }
  .kd { margin-top: 28px; }

  /* Les trois temps : un pas à pas en trois segments égaux (comme une barre de progression), le numéro
     et le libellé en dessous, au lieu d'une ligne qui se casse en 1 puis 2 + 3. */
  .kd__temps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .kd__temps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px; padding-top: 9px; border-top: 2px solid var(--filet); font-size: .74rem; line-height: 1.25; transition: opacity var(--vite), border-color var(--vite); }
  .kd__temps b { width: 18px; height: 18px; border-radius: 4px; font-size: .62rem; }
  .kd[data-temps="1"] .kd__temps li[data-temps="1"],
  .kd[data-temps="2"] .kd__temps li:is([data-temps="1"], [data-temps="2"]),
  .kd[data-temps="3"] .kd__temps li { border-top-color: var(--marine); }
  .kd[data-temps="1"] .kd__temps li[data-temps="1"],
  .kd[data-temps="2"] .kd__temps li[data-temps="2"],
  .kd[data-temps="3"] .kd__temps li[data-temps="3"] { border-top-color: var(--orange); }

  /* La fenêtre : un peu plus haute (la barre vide disparaît, voir plus bas), sans le double cadre. */
  .kd__fenetre { height: clamp(500px, calc(100dvh - var(--entete) - 96px), 700px); border-radius: 12px; }

  /* Barre du haut : l'entreprise (avec son chevron : c'est un sélecteur), puis les vues et les cockpits en
     onglets qui défilent au doigt, avec un fondu à droite pour dire qu'il y en a d'autres. Cibles de 40 px. */
  .kd__side { padding: 6px 8px; gap: 2px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }
  .kd__side::after { content: ""; flex: 0 0 24px; }
  .kd__ws { min-height: 40px; padding: 0 8px 0 4px; gap: 7px; }
  .kd__ws .kd__ws-chev { display: block; }
  .kd__ws-pme { max-width: 140px; font-size: .86rem; }
  .kd__menu { gap: 2px; }
  .kd__menu li { padding: 0; }
  .kd__menu button { min-height: 40px; padding: 0 12px; font-size: .84rem; }
  .kd__menu .kd__compteur { font-size: .68rem; padding: 3px 6px; }

  /* La barre du fil n'a rien à montrer tant que « Rejouer » (ou « Kap » dans un cockpit) n'est pas là :
     elle ne prend plus une ligne vide sous les onglets. */
  .kd__barre:not(:has(.kd__rejouer:not([hidden]), .kd__ouvrir-kap:not([hidden]))) { display: none; }
  .kd__barre { min-height: 0; padding: 6px 12px; }
  .kd__rejouer { min-height: 36px; padding-inline: 8px; font-size: .84rem; }

  /* Conversation : textes lisibles, numéros de source tapables. */
  .kd__qui { font-size: .66rem; letter-spacing: .16em; }
  .kd__msg--vous p { font-size: .94rem; padding: 11px 14px; }
  .kd .kd__rep p { font-size: .98rem; line-height: 1.5; }
  .kd__ref { font-size: .7rem; min-width: 20px; min-height: 20px; }
  .kd__trouves li { font-size: .74rem; }
  .kd__valid .pa-btn { min-height: 42px; }

  /* Les trois conversations, au-dessus de la saisie : même fondu pour dire qu'elles défilent. */
  .kd__cas--mobile { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); }
  .kd__cas--mobile::after { content: ""; flex: 0 0 20px; }
  .kd__cas-sect { font-size: .64rem; }
  .kd__champ { font-size: 1rem; }
  .kd__envoyer { min-height: 44px; }
  .kd__mention { font-size: .74rem; }

  /* ---------- Comment Kap travaille ---------- */
  /* Sans épinglage sur téléphone : le titre visible, les cinq temps en liste (allumés au fil de l'animation
     par mobile.js), puis la scène, compacte, qui tient en un écran. La phrase animée et son compteur
     faisaient doublon avec la liste. */
  .pa-process__pin { padding-block: 8px 24px; }
  .pa-process__g { gap: 22px; }
  .pa-process .pa-process__tete h2.pa-sr { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal;
    font: 600 1.7rem/1.15 var(--sans); letter-spacing: -.02em; color: var(--creme); }
  .pa-process__phrases, .pa-process__num { display: none; }
  .pa-process__liste { margin-top: 20px; gap: 0; }
  .pa-process__liste li { grid-template-columns: 30px 1fr; gap: 10px; padding: 10px 0 10px 12px; border-left: 2px solid rgba(255, 255, 255, .14); font-size: .95rem; line-height: 1.45; transition: opacity 300ms var(--sortie), border-color 300ms var(--sortie); }
  .pa-process__liste.is-suivi li { opacity: .42; }
  .pa-process__liste.is-suivi li.is-passe { opacity: 1; }
  .pa-process__liste.is-suivi li.is-ici { opacity: 1; border-left-color: var(--orange); }

  .pa-scene { gap: 34px; padding: 18px 12px 16px; }
  .pa-scene > div > .pa-label { margin-bottom: 10px; }
  /* Les douze outils en quatre colonnes : le logo au-dessus du nom. */
  .pa-scene__outils ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .pa-scene__outils li { flex-direction: column; justify-content: center; gap: 5px; height: auto; min-height: 58px; padding: 8px 2px 7px; font-size: .68rem; text-align: center; }
  .pa-scene__outils li span { max-width: 100%; }
  .pa-scene__outils img { width: 22px; height: 22px; }
  .pa-scene__corps { padding: 16px 12px 18px; gap: 14px; }
  /* Les trois cockpits côte à côte : chaque fil arrive sur sa carte au lieu de traverser les deux premières. */
  .pa-scene__cockpits ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .pa-scene__cockpits li { min-width: 0; padding: 9px 8px 10px; gap: 5px; align-content: start; }
  .pa-scene__cockpits li > * { min-width: 0; }
  .pa-scene__ck-tete .pa-label { font-size: .6rem; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .pa-scene__ck-tete i { flex: none; }
  .pa-scene__cockpits strong { font-size: .8rem; line-height: 1.25; }
  .pa-scene__bouton { padding: 4px 7px; font-size: .7rem; gap: 5px; }
  .pa-scene__ocr { font-size: .62rem; letter-spacing: .12em; }
  .pa-scene__serveur-t { font-size: .7rem; letter-spacing: .16em; }

  /* ---------- Un Kap par métier ---------- */
  /* Une carte par écran, la suivante qui dépasse de 20 px ; sous la rangée, des repères carrés (mobile.js) :
     où on est, et on peut taper pour aller à une carte. */
  .km { padding-block: 56px 48px; }
  .km__rang { margin-top: 28px; -webkit-mask-image: none; mask-image: none; }
  .km__liste { gap: 12px; }
  .km__liste > li { flex-basis: calc(100vw - 52px); }
  .km__carte { min-height: 0; padding-bottom: 18px; }
  .km__demande { margin-left: 16px; font-size: .94rem; }
  .km__appels li { font-size: .8rem; padding: 7px 10px; }
  .km__appels img { width: 14px; height: 14px; }
  .km__sait { font-size: .7rem; letter-spacing: .14em; }
  .km__points { display: flex; justify-content: center; gap: 0; margin-top: 14px; }
  .km__points button { display: grid; place-items: center; width: 28px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; }
  .km__points button::before { content: ""; width: 8px; height: 8px; background: rgba(255, 255, 255, .22); transition: background-color 200ms var(--sortie), transform 200ms var(--sortie); }
  .km__points button[aria-current="true"]::before { background: var(--orange); transform: scale(1.25); }
  .km__bas { flex-direction: column; gap: 6px; margin-top: 10px; }
  .km__lien { display: inline-block; padding-block: 6px; }

  /* Le bloc marine laissait jusqu'à 300 px de vide entre ses sections : ramené au pas des autres sections. */
  .pa-nuit .km { padding-top: 40px; padding-bottom: 24px; }
  .pa-nuit .ab { padding-top: 40px; }

  /* ---------- Une IA installée, pas louée ---------- */
  .ab-sous { font-size: 1rem; line-height: 1.55; }
  .ab-fen__chemin { font-size: .7rem; }

  /* ---------- Quatre étapes ---------- */
  .pa-ligne__arret h3 button { padding-block: 8px; margin-block: -8px; }
  .pa-ligne__arret .pa-lien { display: inline-block; padding-block: 8px; margin-block: -4px; }

  /* ---------- L'équipe ---------- */
  /* Deux portraits par ligne : l'équipe tient en un écran au lieu de quatre. */
  .pa-equipe { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .pa-equipe img { margin-bottom: 10px; }
  .pa-equipe h3 { font-size: .98rem; line-height: 1.25; }
  .pa-equipe p { font-size: .84rem; line-height: 1.35; margin-top: 2px; }

  /* ---------- Fin : FAQ et « Kap répond » ---------- */
  .fn-faq summary { min-height: 48px; }
  .fn-kap { padding-bottom: 16px; }
  .fn-kap__demande { max-width: 88%; }
  .fn-kap__action { flex-direction: column; align-items: stretch; padding: 14px; }
  .fn-kap__action-t { font-size: .68rem; letter-spacing: .14em; }
  .fn-kap__b { flex-direction: column; }
  .fn-kap__b .pa-btn { width: 100%; min-height: 46px; justify-content: center; }

  /* ---------- Pied ---------- */
  .pf__rdv { flex-direction: column; align-items: stretch; gap: 8px; }
  .pf__rdv .pa-btn { width: 100%; min-height: 50px; justify-content: center; }
  .pf__rdv p { text-align: center; }
}

/* Très petits écrans (moins de 375 px) : le titre du hero reste sur une ligne (epure.css) ; ici, les blocs
   qui seraient trop serrés. */
@media (max-width: 374px) {
  /* L'en-tête (marque, bouton, menu) débordait à 360 px : d'un pixel en français, de 26 en portugais. */
  .pk__actions { gap: 8px; }
  .pk__cta { padding-inline: 10px; font-size: .84rem; }
  .pk__marque { gap: 8px; font-size: 1.18rem; }
  .pa-scene__outils li { font-size: .62rem; }
  .pa-scene__cockpits strong { font-size: .74rem; }
  .pa-scene__ck-tete .pa-label { letter-spacing: 0; }
  .pa-scene__ck-tete i { display: none; }
  .kd__temps li { font-size: .7rem; }
}

@media (max-width: 599px) and (prefers-reduced-motion: reduce) {
  .pa-process__liste li, .km__points button::before { transition: none; }
}