/* =====================================================================
   L'AIDE DE LA PAGE (R1451) — feuille à part, et c'est voulu.

   ⚠ MESURÉ AVANT D'ÉCRIRE : app.css pèse 511 Ko et app.js 488 Ko. Ajouter
   l'aide dedans l'aurait fait payer à CHAQUE page, pour un panneau que la
   plupart n'ouvriront pas. Elle a donc sa feuille, petite, et son script est
   « defer » : il ne retarde aucun affichage.

   ⚠ AUCUNE COULEUR NOUVELLE : tout vient des jetons de :root. Une palette de
   plus aurait fait de l'aide une pièce étrangère à l'application.

   ⚠ PROPRIÉTÉS LOGIQUES PARTOUT (inset-inline-end, padding-inline,
   border-inline-start) : l'arabe se lit de droite à gauche, et une feuille
   écrite en « left/right » demande ensuite une seconde feuille pour le rtl.
   Écrite ainsi, elle n'en demande aucune.
   ===================================================================== */

/* ---------- la porte du guide ---------- */
/* R1456 — IL N'Y A PLUS DE BOUTON ICI. Le « ? » flottant de R1451 a été
   retiré : il faisait une TROISIÈME entrée vers la question « aidez-moi », à
   côté de deux repères que les gens connaissaient déjà (R449, R1055). La
   porte du guide est désormais « Visite guidée », au pied de page, qui garde
   son habillage d'origine dans app.css — on ne le redessine pas ici.
   Ses 42 lignes de feuille sont parties avec lui : ce fichier est le mien,
   et y laisser du mort n'avait aucune excuse. */

/* ---------- le panneau : PAS une modale ---------- */
/* Une modale cache ce qu'elle explique. Ici la page reste visible, et la
   commande éclairée reste à l'écran pendant qu'on lit sa ligne. */
/* ⚠ R1459 — LE PANNEAU S'ARRÊTE AU-DESSUS DE LA BARRE DU PIED.
   Mesuré : « .pied-barre » est « position: fixed; bottom: 0 » avec un
   z-index de 80, quand le panneau en a 61. Elle lui passait donc PAR-DESSUS
   et mangeait ses vingt-huit derniers pixels — c'est-à-dire le bouton
   « Assistance », qu'on voyait coupé par le bas. Monter le panneau au-dessus
   d'elle aurait caché le pied ; on le fait donc s'arrêter où elle commence. */
.kza-panneau {
  position: fixed;
  inset-block-start: 0;
  inset-block-end: var(--h-pied, 28px);   /* R1492 : le jeton, plus le chiffre */
  inset-inline-end: 0;
  z-index: 61;
  width: min(340px, 92vw);
  display: flex; flex-direction: column;
  background: var(--panel);
  border-inline-start: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  transform: translateX(100%);
  transition: transform .14s ease-out;   /* ≤ 150 ms : la promesse de fluidité */
  font-family: var(--sans);
  color: var(--ink);
}
[dir="rtl"] .kza-panneau { transform: translateX(-100%); }
.kza-panneau.kza-ouvert { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .kza-panneau { transition: none; } }

.kza-tete {
  padding: 14px 16px 10px;
  border-block-end: 1px solid var(--line);
  background: var(--paper2);
}
.kza-route {
  font-size: 11.5px; color: var(--faint);
  text-transform: uppercase; letter-spacing: .04em;
  margin-block-end: 3px;
}
.kza-nom { font-family: var(--serif); font-size: 19px; line-height: 1.2; margin: 0; }
.kza-quoi { font-size: 13px; color: var(--muted); margin-block-start: 5px; line-height: 1.45; }
.kza-fermer {
  position: absolute; inset-block-start: 10px; inset-inline-end: 10px;
  width: 28px; height: 28px; border: 0; border-radius: var(--r);
  background: transparent; color: var(--muted); cursor: pointer;
}
.kza-fermer:hover { background: var(--line); color: var(--ink); }

/* ---------- la recherche dans la fiche ---------- */
/* Elle donne l'accès direct que l'ordre alphabétique aurait donné, SANS payer
   son défaut : l'alphabet est un ordre de consultation, pas d'apprentissage. */
.kza-chercher { padding: 10px 16px; border-block-end: 1px solid var(--line); }
.kza-chercher input {
  width: 100%; height: 32px; padding-inline: 10px;
  border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--paper); color: var(--ink); font-size: 13px;
}
.kza-chercher input:focus { outline: none; border-color: var(--seal); }

/* ---------- le corps ---------- */
.kza-corps { flex: 1; overflow-y: auto; padding: 4px 0 16px; }
.kza-groupe { padding: 10px 16px 2px; }
.kza-groupe > h4 {
  margin: 0 0 6px; font-size: 11.5px; font-weight: 600;
  color: var(--seal); text-transform: uppercase; letter-spacing: .05em;
}
.kza-ligne {
  display: flex; gap: 8px; align-items: flex-start;
  width: 100%; text-align: start;
  padding: 7px 8px; margin-inline: -8px;
  border: 0; border-radius: var(--r);
  background: transparent; color: var(--ink);
  font-size: 13px; line-height: 1.4; font-family: inherit;
  cursor: default;
}
/* R1464 — TOUTE ligne agit désormais : elle conduit à son geste, ici ou
   ailleurs. Ne rendre cliquables que celles à cible aurait menti sur les
   autres, qui mènent pourtant quelque part. */
.kza-ligne[data-quoi] { cursor: pointer; }
.kza-ligne[data-quoi]:hover { background: var(--seal-soft); }
/* R1458 — deux lignes : le geste, puis COMMENT il se fait. La seconde est plus
   pâle et plus petite — on la lit quand on en a besoin, et elle n'allège pas le
   premier balayage de l'œil. */
.kza-l-corps { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kza-l-quoi { line-height: 1.35; }
.kza-l-comment { font-size: 11.5px; line-height: 1.4; color: var(--muted); }
.kza-ligne[data-quoi]:hover .kza-l-comment { color: var(--seal-dark); }
.kza-g-comment { font-size: 11.5px; line-height: 1.4; color: var(--muted); }

.kza-ligne::before {
  content: ''; flex: 0 0 auto;
  width: 5px; height: 5px; margin-block-start: 6px;
  border-radius: 50%; background: var(--line2);
}
.kza-ligne[data-quoi]::before { background: var(--seal); }
.kza-vide { padding: 18px 16px; font-size: 13px; color: var(--muted); }

/* ---------- le pied : le pont vers la vue d'ensemble ---------- */
/* R1453 — LE CHOIX EST EN TÊTE, non au pied : il se voit à l'ouverture,
   avant toute lecture. C'est ce que « toujours proposer » veut dire. */
.kza-pied {
  border-block-end: 1px solid var(--line);
  padding: 10px 16px; background: var(--paper2);
  display: flex; gap: 8px; flex-wrap: wrap;
}
.kza-pied button {
  flex: 1 1 0; min-width: 0; min-height: 32px;
  padding-inline: 4px;
  border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kza-pied button:hover { border-color: var(--seal); color: var(--seal); }
.kza-pied button[aria-pressed="true"] { background: var(--seal); border-color: var(--seal); color: #fff; }

/* ---------- « Que faire ? » : tous les gestes, tous les écrans ---------- */
/* ⚠ Chaque ligne porte SON écran, en second. La réponse n'est pas « oui, ça
   existe », c'est « oui, et c'est LÀ » : une aide qui dit qu'une chose est
   possible sans dire où laisse le travail à moitié fait. */
.kza-tout { display: flex; flex-direction: column; gap: 2px; padding: 6px 16px 0; }
.kza-geste {
  display: flex; flex-direction: column; gap: 1px;
  padding: 7px 9px; margin-inline: -9px;
  border-radius: var(--r);
  color: var(--ink); text-decoration: none;
  border-inline-start: 2px solid transparent;
}
.kza-geste:hover { background: var(--seal-soft); border-inline-start-color: var(--seal); }
.kza-g-quoi { font-size: 13px; line-height: 1.35; }
.kza-g-ou   { font-size: 11.5px; color: var(--faint); }
.kza-geste:hover .kza-g-ou { color: var(--seal); }

/* ---------- la visite en 24 étapes, dans le guide général ---------- */
/* R1457 — LE BOUTON DU TOUR. Il ouvre le tutoriel — projecteur sur la vraie
   commande, pas à pas — et il se montre AVANT la liste : qui ouvre l'aide pour
   apprendre doit trouver le tutoriel en premier. */
/* R1459 — L'AMBRE DE LA VISITE, et non le vert de l'application.
   Le client : « mets le bouton Faire le tour en orange-or, comme tu l'as fait
   pour l'icône de la visite guidée. » ⚠ Et c'est juste au-delà du goût : le
   pied de page allume déjà « Visite guidée » à l'ambre depuis R1055 —
   « l'ambre du projecteur qu'elle allume ». La même couleur pour le même
   geste apprend que les deux boutons font la même chose. */
.kza-tour {
  display: block; width: calc(100% - 32px); margin: 10px 16px 6px;
  padding: 9px 11px; text-align: center;
  border: 1px solid var(--ambre); border-radius: var(--r);
  background: rgba(194, 154, 58, .12); color: var(--ambre);
  font-family: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none;
  cursor: pointer;
}
.kza-tour:hover { background: var(--ambre-vif); border-color: var(--ambre-vif); color: #fff; }
.kza-tour:focus-visible { outline: 2px solid var(--ambre-vif); outline-offset: 2px; }

/* ---------- joindre quelqu'un : au bas, et à part ---------- */
/* Apprendre et demander de l'aide à un humain ne sont pas le même geste :
   les mêler sur la même ligne aurait fait croire à une quatrième leçon. */
.kza-bas {
  border-block-start: 1px solid var(--line);
  padding: 8px 16px; background: var(--paper2);
}
.kza-assist {
  width: 100%; min-height: 30px;
  border: 1px solid var(--line2); border-radius: var(--r);
  background: var(--panel); color: var(--muted);
  font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.kza-assist:hover { border-color: var(--seal); color: var(--seal); }

/* ---------- la vue d'ensemble : le CYCLE ---------- */
/* Personne ne pense en ÉCRANS. On pense « où en est mon document » : les
   étapes se lisent donc en colonne, reliées, et chaque écran y est un CTA. */
.kza-etape { padding: 12px 16px 4px; position: relative; }
.kza-etape:not(:last-child)::before {
  content: ''; position: absolute;
  inset-block-start: 34px; inset-block-end: -4px;
  inset-inline-start: 26px;
  width: 1px; background: var(--line);
}
.kza-et-tete { display: flex; gap: 10px; align-items: center; }
.kza-et-rond {
  flex: 0 0 auto; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--seal-soft); color: var(--seal);
  position: relative; z-index: 1;
}
.kza-et-titre { font-weight: 600; font-size: 13.5px; }
.kza-et-quoi { font-size: 12.5px; color: var(--muted); margin: 3px 0 6px 32px; line-height: 1.4; }
[dir="rtl"] .kza-et-quoi { margin: 3px 32px 6px 0; }
.kza-et-ecrans { display: flex; flex-direction: column; gap: 3px; margin-inline-start: 32px; }
.kza-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  width: 100%; text-align: start;
  padding: 6px 8px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--paper);
  color: var(--ink); font-family: inherit; font-size: 12.5px; cursor: pointer;
}
.kza-cta:hover { border-color: var(--seal); background: var(--seal-soft); }
.kza-cta small { color: var(--faint); font-size: 11px; }

/* ---------- l'éclairage de la vraie commande ---------- */
/* On éclaire la commande RÉELLE, jamais une capture d'écran : une capture
   mentirait au premier changement d'interface. Mécanisme repris de la
   visite guidée (R1045). */
.kza-cible {
  outline: 2px solid var(--seal) !important;
  outline-offset: 3px;
  border-radius: var(--r);
  animation: kza-pulse 1.1s ease-out 2;
}
@keyframes kza-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(14,107,92,.38); }
  100% { box-shadow: 0 0 0 12px rgba(14,107,92,0); }
}
@media (prefers-reduced-motion: reduce) { .kza-cible { animation: none; } }

/* ---------- « ET MAINTENANT ? » : une ligne, un geste ---------- */
/* Pas vingt options : UNE phrase et UN bouton. C'est ce qui fait comprendre ;
   un catalogue répond à « où est le bouton », jamais à « que dois-je faire ». */
/* R1452 — elle vit DANS LE PANNEAU : marges et taille sont celles du
   panneau, non d'une pleine largeur de page. */
.kza-maintenant {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 10px 16px 2px;
  padding: 9px 11px;
  border: 1px solid var(--seal-soft);
  border-inline-start: 3px solid var(--seal);
  border-radius: var(--r);
  background: var(--info-bg);
  font-size: 12.5px; color: var(--ink);
}
.kza-mt-txt { flex: 1 1 auto; line-height: 1.4; }
.kza-mt-nb {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding-inline: 5px;
  border-radius: 10px; background: var(--seal); color: #fff;
  font-size: 12px; font-weight: 600;
}
.kza-mt-lien {
  flex: 0 0 auto; min-height: 28px;
  display: inline-flex; align-items: center; padding-inline: 11px;
  border: 1px solid var(--seal); border-radius: var(--r);
  background: var(--panel); color: var(--seal);
  font-size: 12.5px; text-decoration: none; white-space: nowrap;
}
.kza-mt-lien:hover { background: var(--seal); color: #fff; }

/* ---------- l'état vide qui OUVRE UNE PORTE (N0) ---------- */
/* Mesuré sur quatre écrans : 11 phrases d'état vide, et toutes PASSIVES —
   « Ce dossier est vide. », point final. C'est le moment précis où la personne
   est bloquée et cherche : y répondre par un mur est le plus coûteux des
   silences, et le moins cher à rompre. */
.kza-porte {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding-inline: 11px;
  border: 1px solid var(--seal); border-radius: var(--r);
  background: var(--panel); color: var(--seal);
  font-size: 12.5px; text-decoration: none; white-space: nowrap;
}
.kza-porte:hover { background: var(--seal); color: #fff; }
/* Quand la porte SUIT une phrase sur la même ligne, elle prend son recul ;
   seule au milieu d'un état vide centré, un retrait l'aurait décalée. */
.kza-porte--suite { margin-inline-start: 8px; }
.kza-porte[hidden] { display: none; }

/* ---------- le téléphone : 360 px ---------- */
/* Le panneau devient une feuille par le bas : à cette largeur, un panneau
   latéral ne laisse plus rien voir de la page qu'il explique. */
/* La barre du pied se resserre à 700 px : le panneau suit, sans quoi il
   laisserait deux pixels de vide ou mordrait de nouveau dessus. */
@media (max-width: 700px) {
  .kza-panneau { inset-block-end: 26px; }
}

@media (max-width: 560px) {
  .kza-panneau {
    inset-block-start: auto;
    inset-inline: 0;
    width: auto;
    max-height: 72vh;
    border-inline-start: 0;
    border-block-start: 1px solid var(--line);
    border-start-start-radius: 14px; border-start-end-radius: 14px;
    transform: translateY(100%);
  }
  [dir="rtl"] .kza-panneau { transform: translateY(100%); }
  .kza-panneau.kza-ouvert { transform: translateY(0); }
  .kza-maintenant { font-size: 12.5px; }
}