/* Pages de détail et pages d'information — socle partagé. */
.detail-nav { background: var(--ink); color: var(--paper); }
.detail-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 5.25rem; }
.detail-nav__logo { display: block; width: 4.25rem; }
.detail-nav__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem 1.25rem; font-size: .82rem; font-weight: 600; }
.detail-nav__links a:hover { color: var(--yellow); }
/* La barre de navigation est `fixed` et son bas tombe vers 90 px tant
   qu'on n'a pas la place du menu complet. Le héros doit lui réserver
   cette hauteur : avec 4 rem, la ceja (« Espace client », « Boutique »)
   passait sous la barre sur tout écran de moins de 64 rem. On garde les
   7 rem du grand écran et on ne descend jamais sous la barre. */
.detail-hero { padding-block: clamp(6.75rem, 9vw, 7rem) clamp(4rem, 9vw, 7rem); background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
/* Le fond du héros, quand le client en pose un. Même mécanique que `.phero`
   dans base.css : décor voilé, jamais annoncé, et rien du tout s'il est vide. */
.detail-hero__media { position: absolute; inset: 0; }
.detail-hero__media img,
.detail-hero__media video { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.detail-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(18, 15, 16, .86) 0%, rgba(18, 15, 16, .62) 45%, rgba(18, 15, 16, .28) 100%),
    linear-gradient(to top, rgba(18, 15, 16, .55) 0%, transparent 45%);
}
.detail-hero > .shell { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .detail-hero__media video { display: none; }
}
.detail-hero .lead { max-width: 44rem; }
.detail-kicker { margin: 0 0 .75rem; font: 600 .7rem/1.4 "IBM Plex Mono", monospace; letter-spacing: .15em; text-transform: uppercase; color: var(--yellow); }
.detail-title { max-width: 58rem; margin: 0; font-size: clamp(2.35rem, 15vw, 3.5rem); line-height: .98; overflow-wrap: anywhere; }
.detail-meta { margin: 1.25rem 0 0; color: var(--on-dark); font: .75rem/1.7 "IBM Plex Mono", monospace; }
.detail-layout { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.detail-copy { max-width: 45rem; }
.detail-copy > * + * { margin-top: 1.1rem; }
.detail-copy h2 { margin-top: 2.5rem; font: 700 clamp(1.6rem, 3vw, 2.55rem)/1.08 var(--font-display); }
.detail-card { padding: clamp(1.25rem, 3vw, 2rem); border: var(--stroke); border-radius: var(--r-lg); background: var(--paper-2); box-shadow: var(--pop-sm); }
.detail-card h2 { margin-top: 0; }
.detail-list { display: grid; gap: .8rem; margin: 0; }
.detail-list li { padding-bottom: .8rem; border-bottom: var(--stroke-thin); }
.detail-list li:last-child { padding-bottom: 0; border: 0; }
.detail-media { align-self: stretch; min-height: 17rem; display: grid; place-items: center; padding: 1rem; border: var(--stroke); border-radius: var(--r-lg); background: var(--yellow); box-shadow: var(--pop); }
.detail-media img { max-height: 32rem; width: auto; }
.product-gallery { display: grid; gap: .85rem; }
.product-gallery__main { display: grid; place-items: center; min-height: 17rem; padding: 1rem; border: var(--stroke); border-radius: var(--r-lg); background: var(--paper-2); box-shadow: var(--pop); }
.product-gallery__main img { max-height: clamp(18rem, 42vw, 31rem); }
.product-gallery__thumbs { display: flex; gap: .65rem; }
.product-gallery__thumb { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; padding: .3rem; border: var(--stroke-thin); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; }
.product-gallery__thumb.is-active { border-color: var(--ink); background: var(--yellow); }
.product-gallery__thumb img { max-height: 3.4rem; }
.product-facts { display: grid; grid-template-columns: 1fr; gap: 0; margin: 1.5rem 0; }
.product-facts div { padding: .75rem 0; border-top: var(--stroke-thin); }
.product-facts b { display: block; margin-bottom: .2rem; font: .62rem/1.3 "IBM Plex Mono", monospace; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.product-payments { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0; }
.product-payments span { padding: .35rem .55rem; border: var(--stroke-thin); border-radius: var(--r-pill); font: .64rem/1 "IBM Plex Mono", monospace; }
.detail-note { padding: 1rem 1.2rem; border-left: .4rem solid var(--pink); background: rgba(239, 89, 167, .1); }
.detail-footer { padding-block: 2.5rem; background: var(--ink); color: var(--paper); }
.detail-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; font-size: .85rem; }
.detail-footer a { text-decoration: underline; text-underline-offset: .2em; }
.detail-footer a:hover { color: var(--yellow); }
.detail-nav, .detail-footer { display: none; }
@media (min-width: 52rem) { .detail-layout--aside { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .6fr); } }
@media (min-width: 30rem) {
  .detail-title { font-size: clamp(2.5rem, 7vw, 5.8rem); }
  .detail-media { min-height: 22rem; padding: 2rem; }
  .product-gallery__main { min-height: clamp(20rem, 48vw, 34rem); padding: 1.5rem; }
  .product-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
}
@media (max-width: 38rem) { .detail-nav__inner { padding-block: 1rem; align-items: flex-start; } .detail-nav__links { justify-content: flex-start; } }
@media (max-width: 29.99rem) {
  .detail-hero { padding-block: 6.75rem 3.5rem; }
  .detail-layout { gap: 1.75rem; }
  .product-gallery__thumb { width: 3.6rem; height: 3.6rem; }
  .detail-copy h2 { margin-top: 1.75rem; }
}

/* ============================================================
   LE PASSEPORT KIRU — /p/xx-xx/
   ------------------------------------------------------------
   La page qu'ouvre le QR d'un sachet. Le § 5 de la spécification
   du client répartit le travail : le plugin pose la structure des
   chapitres, le thème leur donne la charte. Voici la charte.

   D'OÙ ON PART. Le gabarit installé le 29/08/2026 portait sa
   propre feuille en ligne, dans une balise <style> à l'intérieur
   du .php : Georgia, une palette à lui (#7A2E1D), des filets
   pointillés. Ça se lisait bien mais ça ne ressemblait à aucune
   autre page du site — et surtout ça ne bougeait pas quand la
   charte bouge. Tout est repris ici avec les tokens de base.css.

   ON GARDE LE PRÉFIXE .kp. Le gabarit est le seul du thème que
   le client réécrit lui-même sur le serveur. Une portée à part,
   qui ne dépend d'aucune classe de base.css, survit à ses
   réécritures : il peut changer le texte d'un chapitre sans que
   la mise en forme parte avec.
   ============================================================ */

.kp {
  width: min(100% - 2rem, 54rem);
  margin-inline: auto;
  padding-bottom: var(--section-y);
  color: var(--ink);
  line-height: 1.65;
}

/* Le bandeau « exemple » : c'est un avertissement, il doit se voir. */
.kp .exb {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0.6rem 1rem;
  border: var(--stroke-thin);
  border-radius: var(--r-pill);
  background: var(--yellow);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  text-transform: uppercase;
}

/* --- l'en-tête : de quel sachet on parle --- */
.kp header.kh {
  padding: clamp(2rem, 5vw, 3rem) 0 clamp(1.5rem, 3vw, 2rem);
  border-bottom: var(--stroke);
  text-align: center;
}

.kp .kh .k {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.kp .kh h1 {
  margin: 0.5rem 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  line-height: 1.08;
  text-wrap: balance;
}

.kp .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  justify-content: center;
  margin-top: 1rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  color: var(--muted);
}

.kp .meta b { color: var(--ink); }

/* --- la photo du producteur et la carte ---
   Le cadre épais et l'ombre dure sont ce qui rattache ces deux
   blocs au reste du site : partout ailleurs, une image est une
   carte posée sur le papier, pas une image à ras bord. */
.kp .ph,
.kp #kpmap {
  height: clamp(15rem, 42vw, 21rem);
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  border: var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--pop-sm);
}

.kp .ph { background: #cfc9be center 30% / cover no-repeat; }
.kp #kpmap { overflow: hidden; background: #dcd8d0; }

.kp .cap {
  margin: 0.7rem 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  text-align: center;
  color: var(--muted);
}

.kp .cap b { color: var(--ink); }

/* --- un chapitre ---
   Chacun est une carte, comme les plans de Devenir sociétaire.
   Les filets pointillés d'origine faisaient une facture ; ici on
   veut quatorze pièces qu'on feuillette. */
.kp section.ch {
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: var(--stroke-thin);
  border-radius: var(--r);
  background: var(--paper);
}

/* Le numéro du chapitre, en mono comme tous les sur-titres du site. */
.kp .ch .n {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pink);
}

.kp .ch h2 {
  margin: 0.4rem 0 1rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  line-height: 1.15;
}

/* --- les paires libellé / valeur --- */
.kp .kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem 1.6rem;
  font-size: 0.92rem;
}

.kp .kv div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.4rem 0;
  border-bottom: 0.0625rem solid var(--line, rgba(18, 15, 16, 0.12));
}

.kp .kv span:first-child { color: var(--muted); }
.kp .kv span:last-child { font-weight: 700; text-align: right; }

.kp .note {
  margin: 0.9rem 0 0;
  padding-left: 0.9rem;
  border-left: 0.25rem solid var(--pink);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* --- le chapitre économique --- */
.kp .eco {
  width: 100%;
  margin-top: 0.4rem;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.kp .eco td {
  padding: 0.5rem 0.3rem;
  border-bottom: 0.0625rem solid var(--line, rgba(18, 15, 16, 0.12));
}

.kp .eco td:last-child { font-weight: 700; text-align: right; white-space: nowrap; }

/* La ligne du producteur est la raison d'être de la page : elle se voit. */
.kp .eco tr.hl td {
  background: var(--yellow);
  font-weight: 800;
}

/* --- l'empreinte du registre --- */
.kp .hash {
  margin-top: 0.8rem;
  padding: 0.9rem 1rem;
  border-radius: var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  word-break: break-all;
}

/* --- le bouton du titre du sachet --- */
.kp .kp-titre {
  min-height: 3rem;
  padding: 0.7rem 1.5rem;
  border: var(--stroke);
  border-radius: var(--r-pill);
  background: var(--yellow);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--pop-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.kp .kp-titre:hover,
.kp .kp-titre:focus-visible {
  transform: translate(-0.125rem, -0.125rem);
  box-shadow: 0.4375rem 0.4375rem 0 var(--ink);
}

/* --- les deux boutons de partage, en bas à droite --- */
.kp-share {
  position: fixed;
  right: 0.875rem;
  bottom: 0.875rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.kp-share a {
  display: block;
  padding: 0.55rem 1.1rem;
  border: var(--stroke-thin);
  border-radius: var(--r-pill);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: var(--pop-sm);
}

.kp-share .wa { background: var(--green); color: var(--paper); }
.kp-share .ig { background: var(--pink); color: var(--paper); }

@media (max-width: 37.5rem) {
  .kp .kv { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .kp .kp-titre { transition: none; }
  .kp .kp-titre:hover,
  .kp .kp-titre:focus-visible { transform: none; }
}

/* --- le QR de ce Passeport ---
   Il reprend le bloc `.cafe__passport` de base.css, celui de l'accueil et de
   la page Kiru, pour que ce soit visiblement le même objet. Deux différences,
   et les deux comptent :

   1. Il est plus grand. Ailleurs le QR est décoratif et ne sert qu'à faire
      comprendre le geste ; ici il se scanne pour de vrai, depuis un écran.
      33 modules dans 5,5rem font 2,7 px par module et beaucoup de lecteurs
      renoncent ; à 9rem on est à 4,4 px et ça passe de loin.

   2. `[hidden]` doit être réaffirmé. Le gabarit écrit le bloc caché et ne
      l'allume qu'une fois le code dessiné — mais `.cafe__passport` porte
      `display:flex`, qui l'emporte sur le `display:none` de la feuille du
      navigateur. Sans la règle qui suit, le bloc apparaît quand même, vide,
      et c'est précisément ce qu'on voulait éviter. */
.kp .kp-qr { margin: clamp(1.25rem, 3vw, 1.75rem) auto 0; }
.kp .kp-qr__code { width: 9rem; height: 9rem; }
.kp .kp-qr[hidden] { display: none; }