/* ============================================================
   CHIDO Café — kiru.css
   Ce qui n'existe que sur Le Protocole Kiru : le montage de la
   comparaison de parts et les deux panneaux d'honnêteté.
   Le héros, les blocs numérotés (variante rail), les barres de
   proportion et les liens fléchés viennent de base.css.
   Charge base.css avant celle-ci.
   ============================================================ */

/* --- le problème : le propos face aux deux parts --- */
/* `data-meters` est posé sur ce bloc dans le HTML : c'est lui que le CSS
   observe pour lancer le remplissage des barres. */
.kiru__meters { align-self: center; width: min(100%, 30rem); }
.kiru__meters .bars { gap: 1.6rem; }
/* la part de la filière classique reste en encre, celle de Chido en
   rose : l'écart se lit à la couleur avant de se lire au chiffre */
.kiru__metersNote {
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 0.0625rem solid rgba(18, 15, 16, 0.18);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}

/* --- pourquoi on-chain ---
   La phrase de conclusion utilise `.punchline`, montée dans base.css. */

/* --- honnêteté et empreinte ---
   Deux panneaux côte à côte. Le premier porte une limite du dispositif,
   le second son coût : ni l'un ni l'autre ne doit ressembler à un
   argument de vente, d'où le cadre sobre plutôt qu'une carte à ombre. */
.honesty { display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); margin-top: clamp(2rem, 4vw, 2.75rem); }
.honesty__panel {
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  border: var(--stroke-thin);
  border-radius: var(--r);
  background: var(--paper);
}
.honesty__panel h3 { margin: 0 0 0.75rem; }
.honesty__panel p { margin: 0 0 0.85rem; font-size: 0.95rem; line-height: 1.62; }
.honesty__panel p:last-child { margin-bottom: 0; }
/* l'horizon technique n'est pas au même statut que le reste : c'est une
   intention, elle est signalée comme telle */
.honesty__horizon {
  margin-top: 1rem;
  padding-left: 0.9rem;
  border-left: 0.25rem solid var(--turquoise);
  font-size: 0.88rem;
  color: var(--ink-soft);
}

@media (min-width: 48rem) {
  .honesty { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.25rem); }
}

/* --- la répartition des 11,90 € ---
   Le tableau (`.foldtable`) vient du socle ; il n'y a ici que la
   respiration entre la cinquième étape du protocole et ce détail, et
   le titre qui l'annonce. */
.kiru__breakdown { margin-top: clamp(2.5rem, 5vw, 4rem); }
.kiru__breakdown h3 { margin: 0 0 0.35rem; }
.kiru__breakdown .note { margin-top: 1.5rem; }