/* =====================================================================
   Kahawamatata — composants (thème 0.1.0)
   Mobile d'abord. Tout passe par les jetons --kh- (tokens.css, fonts.css).
   Chargé APRÈS les styles globaux de WordPress : à spécificité égale, ce
   fichier l'emporte. Référence : DESIGN_KAHAWAMATATA.md.
   Sommaire
     0. Socle            7. Proportion 95/5     14. FAQ (accordéon)
     1. Titres, textes    8. Cartes de lecture   15. Encart pro
     2. Liens, boutons    9. Étapes du rituel    16. Pied de page
     3. En-tête, menu    10. Minuteur            17. Barre collante
     4. Bandeau d'état   11. Proverbe (jina)     18. Cartes de format (B)
     5. Héros + arche    12. Coffret             19. Formulaires
     6. Sections         13. Registre (tableau)  20. Glossaire, prononcer,
                                                     WooCommerce, utilitaires
   ===================================================================== */

/* ---------- 0. Socle ---------- */
body {
  background: var(--kh-fond);
  color: var(--kh-texte);
  font-family: var(--kh-police-texte);
  font-size: var(--kh-taille-corps);
  line-height: var(--kh-interligne-corps);
}
::selection { background: var(--kh-voile-cuivre); color: var(--kh-encre); }
.kh-nuit ::selection { background: var(--kh-cuivre-clair); color: var(--kh-nuit); }
.kh-principal { display: block; }
.wp-site-blocks > * + * { margin-block-start: 0; }   /* les sections gèrent leur propre rythme */

/* ---------- 1. Titres et textes ---------- */
:where(h1, h2, h3, h4) {
  font-family: var(--kh-police-titre);
  font-variation-settings: var(--kh-axes-titre);
  text-wrap: balance;
  color: inherit;
}
:where(h3, h4) { font-variation-settings: var(--kh-axes-carte); }
:where(p, li, dd, figcaption) { text-wrap: pretty; }
.kh-display,
.wp-block-heading.kh-display {
  font-size: var(--kh-taille-display);
  line-height: var(--kh-interligne-display);
  letter-spacing: -0.02em;
  font-weight: var(--kh-graisse-titre);
  font-variation-settings: var(--kh-axes-display);
}
.kh-surtitre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kh-esp-2) var(--kh-esp-3);
  font-family: var(--kh-police-texte);
  font-size: var(--kh-taille-libelle);
  font-weight: var(--kh-graisse-action);
  font-stretch: var(--kh-chasse-libelle);
  letter-spacing: var(--kh-approche-libelle);
  line-height: var(--kh-interligne-serre);
  text-transform: uppercase;
  color: var(--kh-texte-secondaire);
}
/* « Karibu » du héros : Fraunces romain (le WONK et l'italique restent au seul proverbe,
   et le fichier italique de 43 Ko n'est pas chargé au-dessus de la ligne de flottaison). */
.kh-surtitre [lang="sw"] {
  font-family: var(--kh-police-titre);
  font-style: normal !important;
  font-weight: var(--kh-graisse-titre);
  font-variation-settings: var(--kh-axes-titre);
  font-size: 1.5em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--kh-accent);
}
.kh-chapo {
  font-size: var(--kh-taille-chapo);
  line-height: 1.55;
  color: var(--kh-texte-secondaire);
  max-width: 60ch;
}
.kh-nuit .kh-chapo { color: var(--kh-texte); }
.kh-petit { font-size: var(--kh-taille-petit); line-height: 1.5; color: var(--kh-texte-secondaire); }
.kh-libelle {
  font-size: var(--kh-taille-libelle);
  font-weight: var(--kh-graisse-action);
  letter-spacing: var(--kh-approche-libelle);
  text-transform: uppercase;
  color: var(--kh-texte-secondaire);
}
.kh-prix {
  font-family: var(--kh-police-texte);
  font-size: var(--kh-taille-prix);
  font-weight: var(--kh-graisse-action);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--kh-texte);
}
/* Le swahili : toujours lang="sw", en italique dans le texte courant (DESIGN, règle de la langue). */
:where(p, li, dd, dt, td, figcaption, summary, cite, h2, h3) [lang="sw"],
:where(dt)[lang="sw"] { font-style: italic; }
/* Rythme : toujours plus d'espace au-dessus d'un titre qu'en dessous. */
:where(.is-layout-flow, .is-layout-constrained) > * + :is(h2, h3).wp-block-heading { margin-block-start: var(--kh-esp-bloc); }
:where(.is-layout-flow, .is-layout-constrained) > :is(h2, h3).wp-block-heading + * { margin-block-start: var(--kh-esp-4); }
.kh-surtitre + :is(h1, h2) { margin-block-start: var(--kh-esp-3) !important; }

/* ---------- 2. Liens et boutons ---------- */
a { color: var(--kh-accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--kh-accent-survol); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--kh-focus); outline-offset: 3px; }

.wp-block-button__link,
.wp-element-button,
.kh-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kh-esp-2);
  min-height: var(--kh-hauteur-action);
  padding: 0 var(--kh-esp-5);
  border: 0;
  border-radius: var(--kh-rayon-action);
  background-color: var(--kh-accent);
  color: var(--kh-sur-accent);
  font-family: var(--kh-police-texte);
  font-size: 1rem;
  font-weight: var(--kh-graisse-action);
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition:
    transform var(--kh-duree-rapide) var(--kh-courbe-sortie),
    box-shadow var(--kh-duree-rapide) var(--kh-courbe-sortie),
    background-color var(--kh-duree-rapide) var(--kh-courbe-standard),
    border-color var(--kh-duree-rapide) var(--kh-courbe-standard);
}
.wp-block-button__link:hover,
.wp-element-button:hover,
.kh-bouton:hover { background-color: var(--kh-accent-survol); color: var(--kh-sur-accent); text-decoration: none; }
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.kh-bouton:focus-visible { outline: 2px solid var(--kh-focus); outline-offset: 3px; }
.wp-block-button__link:active,
.kh-bouton:active { transform: none; box-shadow: none; transition-duration: var(--kh-duree-appui); }

/* Secondaire : bordure, fond transparent. */
.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline,
.kh-bouton--secondaire {
  background-color: transparent;
  color: var(--kh-texte);
  border: 1.5px solid var(--kh-bordure-interactive);
  padding: 0 calc(var(--kh-esp-5) - 1.5px);
}
.is-style-outline > .wp-block-button__link:hover,
.kh-bouton--secondaire:hover { background-color: transparent; color: var(--kh-texte); border-color: var(--kh-texte); }
.kh-bouton--plein { width: 100%; }

@media (hover: hover) and (pointer: fine) {
  .wp-block-button__link:hover,
  .wp-element-button:hover,
  .kh-bouton:hover { transform: var(--kh-levee-survol); box-shadow: var(--kh-ombre-survol-bouton); }
  .wp-block-button__link:active,
  .kh-bouton:active { transform: none; box-shadow: none; }
}
.kh-bouton[disabled],
.kh-bouton[aria-disabled="true"] { background: var(--kh-pierre); color: var(--kh-encre-attenuee); cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- 3. En-tête et menu ---------- */
.kh-entete {
  position: relative;
  z-index: 20;
  background: var(--kh-fond);
  color: var(--kh-texte);
  border-bottom: 1px solid var(--kh-bordure);
  padding-inline: var(--kh-gouttiere);
}
.home .kh-entete { border-bottom-color: var(--kh-trait-nuit); }
.kh-entete__interieur {
  display: flex;
  align-items: center;
  gap: var(--kh-esp-4);
  max-width: var(--kh-largeur-large);
  min-height: var(--kh-hauteur-entete);
  margin-inline: auto;
}
.kh-entete__interieur > * { margin-block: 0 !important; }
.kh-entete__barre { display: contents; }
.kh-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--kh-cible-min);
  margin-inline-end: auto;
  color: var(--kh-texte);
  text-decoration: none;
}
.kh-logo:hover { color: var(--kh-texte); }
.kh-logo svg { width: 34px; height: 34px; flex: none; color: var(--kh-logo-trait); }
.kh-logo__mot {
  font-family: var(--kh-police-titre);
  font-weight: var(--kh-graisse-titre-fort);
  font-variation-settings: "opsz" 36, var(--kh-axes-carte);
  font-size: var(--kh-taille-h4);
  letter-spacing: -0.01em;
  line-height: 1;
}
.kh-nav { display: none; }
.kh-nav__liste { display: flex; gap: var(--kh-esp-1); margin: 0; padding: 0; list-style: none; }
.kh-nav__liste a,
.kh-menu__liste a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kh-cible-min);
  padding-inline: var(--kh-esp-3);
  color: var(--kh-texte);
  font-weight: 500;
  text-decoration: none;
}
.kh-nav__liste a:hover,
.kh-nav__liste a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--kh-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; color: var(--kh-texte); }
.kh-entete__actions { display: flex; align-items: center; gap: var(--kh-esp-2); }
.kh-entete__actions .wp-block-button__link { min-height: var(--kh-cible-min); }
.kh-entete__actions.kh-mode-vitrine { display: none; }

/* Menu mobile : <details> natif, fonctionne sans JavaScript. */
.kh-menu { order: 5; }
.kh-menu > summary {
  display: inline-flex;
  align-items: center;
  gap: var(--kh-esp-2);
  min-height: var(--kh-cible-min);
  padding: 0 var(--kh-esp-3);
  border: 1.5px solid var(--kh-bordure-interactive);
  border-radius: var(--kh-rayon-action);
  font-weight: var(--kh-graisse-action);
  cursor: pointer;
  list-style: none;
}
.kh-menu > summary::-webkit-details-marker { display: none; }
.kh-menu__icone { width: 18px; height: 18px; }
.kh-menu__icone path { transition: transform var(--kh-duree-survol) var(--kh-courbe-sortie), opacity var(--kh-duree-rapide); transform-origin: center; }
.kh-menu[open] .kh-menu__icone .h1 { transform: translateY(4.5px) rotate(45deg); }
.kh-menu[open] .kh-menu__icone .h2 { opacity: 0; }
.kh-menu[open] .kh-menu__icone .h3 { transform: translateY(-4.5px) rotate(-45deg); }
.kh-menu__panneau {
  position: fixed;
  inset: var(--kh-hauteur-entete) 0 0 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--kh-esp-6);
  padding: var(--kh-esp-6) var(--kh-gouttiere) calc(var(--kh-esp-6) + env(safe-area-inset-bottom));
  background: var(--kh-fond);
  color: var(--kh-texte);
  border-top: 1px solid var(--kh-bordure);
  overflow-y: auto;
}
.kh-menu[open] .kh-menu__panneau { animation: kh-fondu var(--kh-duree-rapide) var(--kh-courbe-sortie); }
.kh-menu__liste { margin: 0; padding: 0; list-style: none; }
.kh-menu__liste li + li { border-top: 1px solid var(--kh-bordure); }
.kh-menu__liste a {
  min-height: 64px;
  padding-inline: 0;
  font-family: var(--kh-police-titre);
  font-weight: var(--kh-graisse-titre);
  font-variation-settings: var(--kh-axes-titre);
  font-size: var(--kh-taille-h2);
}
.kh-menu__contact { margin: 0; font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }
.kh-menu__contact a { color: var(--kh-accent); }
.kh-menu__action { margin-block-start: var(--kh-esp-5); }

@media (min-width: 480px) {
  .kh-entete__actions.kh-mode-vitrine { display: flex; }
  .kh-menu__action { display: none; }
}
@media (min-width: 768px) {
  .kh-logo svg { width: 38px; height: 38px; }
  .kh-logo__mot { font-size: var(--kh-taille-h4); }
  .kh-nav { display: block; }
  .kh-menu { display: none; }
}

/* ---------- 4. Bandeau d'état (ne se ferme pas, n'est pas un compte à rebours) ---------- */
.kh-bandeau {
  padding: var(--kh-esp-2) var(--kh-gouttiere);
  border-bottom: 1px solid var(--kh-trait-nuit);
  text-align: center;
}
.kh-bandeau > * { margin-block: 0 !important; }
.kh-bandeau__texte { margin: 0; font-size: var(--kh-taille-petit); line-height: 1.5; color: var(--kh-texte); }
.kh-bandeau__texte a { color: var(--kh-accent); font-weight: var(--kh-graisse-action); }

/* ---------- 5. Héros (le seuil) + arche ---------- */
.kh-heros {
  position: relative;
  isolation: isolate;
  padding-block: var(--kh-esp-6) var(--kh-esp-section);
  overflow: clip;   /* clip et non hidden : laisse fonctionner l'arche collante */
}
/* Le linteau : frise originale (rosace à huit branches + entrelacs), trait cuivre clair, 8 %. */
.kh-heros::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40px;
  z-index: -1;
  opacity: .08;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='40' viewBox='0 0 96 40' fill='none' stroke='%23C98A4B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M40 12h16v16H40z'/%3E%3Cpath d='M48 8.7 59.3 20 48 31.3 36.7 20z'/%3E%3Ccircle cx='48' cy='20' r='3'/%3E%3Cpath d='M59.3 20C72 6 120 6 132.7 20M59.3 20C72 34 120 34 132.7 20M-36.7 20C-24 6 24 6 36.7 20M-36.7 20C-24 34 24 34 36.7 20'/%3E%3Ccircle cx='0' cy='20' r='3'/%3E%3Ccircle cx='96' cy='20' r='3'/%3E%3C/svg%3E") repeat-x 0 0 / 96px 40px;
}
.kh-heros__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--kh-esp-6);
  align-items: center;
}
.kh-heros__grille > * { margin-block: 0 !important; min-width: 0; }
.kh-heros__texte > * + * { margin-block-start: var(--kh-esp-5); }
.kh-heros__texte .kh-display { margin-block-start: var(--kh-esp-3); }
.kh-heros__visuel { order: -1; display: flex; justify-content: center; }
.kh-heros__action { margin-block-start: var(--kh-esp-6) !important; }

/* L'arche : une fois par page au plus. La forme est sur l'image, le cadre
   est un contour décalé qui suit la courbe (comme le chambranle d'une porte). */
.wp-block-image.is-style-kh-arche,
.is-style-kh-arche { position: relative; margin: 0; padding-top: 30px; }
.is-style-kh-arche img,
.wp-block-group.is-style-kh-arche {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--kh-rayon-arche);
  outline: 1.5px solid var(--kh-accent);
  outline-offset: 10px;
  background: var(--kh-chaux);
}
/* Cinq clous au sommet de l'arche (filet de clous). */
.is-style-kh-arche::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 73px;
  height: 5px;
  translate: -50% 0;
  background: radial-gradient(circle closest-side, var(--kh-accent) 94%, transparent) -6px 0 / 17px 5px repeat-x;
}
.is-style-kh-arche figcaption,
.is-style-kh-arche .wp-element-caption {
  margin-block-start: var(--kh-esp-5);
  text-align: center;
  font-size: var(--kh-taille-petit);
  color: var(--kh-texte-secondaire);
}
.kh-heros__image { width: min(100%, calc(42vh * 0.8)); }
.kh-heros__image img { max-height: 42vh; }

/* Téléphone : le H1 doit entrer dans le premier écran (390 × 844). */
@media (max-width: 479px) {
  .kh-heros { padding-block-start: var(--kh-esp-4); }
  .kh-heros__grille { gap: var(--kh-esp-5); }
  .wp-block-image.is-style-kh-arche { padding-top: 20px; }
  .kh-heros__image { width: min(100%, calc(34vh * 0.8)); }
  .kh-heros__image img { max-height: 34vh; outline-offset: 7px; }
  .is-style-kh-arche .wp-element-caption { margin-block-start: var(--kh-esp-3); }
}
@media (min-width: 1024px) {
  .kh-heros { padding-block: var(--kh-esp-8) var(--kh-esp-section); }
  .kh-heros__grille { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--kh-esp-6); }
  .kh-heros__texte { grid-column: 1 / span 5; grid-row: 1; }
  .kh-heros__visuel { grid-column: 7 / span 6; grid-row: 1; order: 0; align-self: start; position: sticky; top: var(--kh-esp-6); }
  .kh-heros__image { width: min(100%, calc(76vh * 0.8), 520px); }
  .kh-heros__image img { max-height: none; }
}

/* ---------- 6. Sections ---------- */
.kh-section { padding-block: var(--kh-esp-section); background: var(--kh-fond); }
.kh-section--pierre { --kh-fond: var(--kh-pierre); background: var(--kh-pierre); }
.kh-section:not(.kh-section--pierre):not(.kh-nuit) + .kh-section:not(.kh-section--pierre):not(.kh-nuit) { border-top: 1px solid var(--kh-bordure); }
.kh-section__tete > * { max-width: var(--kh-largeur-contenu); margin-inline: 0 !important; }
.kh-section__tete > * + * { margin-block-start: var(--kh-esp-4); }
.kh-section__tete .wp-block-heading { margin-block-start: var(--kh-esp-3); }
.kh-section__tete + * { margin-block-start: var(--kh-esp-bloc) !important; }
.kh-section__pied { margin-block-start: var(--kh-esp-bloc) !important; }
.kh-section__pied > * { margin-inline: 0 !important; max-width: var(--kh-largeur-contenu); }

/* Grilles régulières (pas de composition décalée, sauf le proverbe). */
.wp-block-group.kh-grille { display: grid; gap: var(--kh-esp-5); grid-template-columns: minmax(0, 1fr); }
.wp-block-group.kh-grille > * { margin: 0 !important; min-width: 0; }
@media (min-width: 768px) {
  .wp-block-group.kh-grille--2,
  .wp-block-group.kh-grille--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .wp-block-group.kh-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--kh-esp-6); }
  .wp-block-group.kh-grille--7-5 { grid-template-columns: 7fr 5fr; gap: var(--kh-esp-8); align-items: start; }
  .wp-block-group.kh-grille--5-7 { grid-template-columns: 5fr 7fr; gap: var(--kh-esp-8); align-items: center; }
  .kh-questions .wp-block-group.kh-grille--5-7,
  .kh-contact-page .wp-block-group.kh-grille--5-7 { align-items: start; }
}

/* Filet de clous : séparateur éditorial (au plus un par section). */
.kh-clous {
  display: block;
  width: 73px;
  height: 5px;
  border: 0;
  background: radial-gradient(circle closest-side, var(--kh-accent) 94%, transparent) -6px 0 / 17px 5px repeat-x;
}

/* ---------- 7. Proportion 95/5 ---------- */
.kh-proportion { margin: 0; max-width: var(--kh-largeur-large); }
.kh-proportion__barre {
  display: flex;
  height: 14px;
  border: 1px solid var(--kh-encre);
}
.kh-proportion__cafe { flex: 95; background: var(--kh-encre); }
.kh-proportion__iliki { flex: 5; background: var(--kh-cuivre-fonce); border-left: 2px solid var(--kh-lin); }
.kh-proportion figcaption {
  display: flex;
  justify-content: space-between;
  gap: var(--kh-esp-4);
  margin-block-start: var(--kh-esp-3);
  font-size: var(--kh-taille-petit);
  color: var(--kh-texte-secondaire);
}
.kh-proportion figcaption strong {
  display: block;
  font-size: var(--kh-taille-h3);
  font-weight: var(--kh-graisse-action);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--kh-texte);
}
.kh-proportion figcaption span:last-child { text-align: right; }

/* ---------- 8. Cartes de lecture (angles vifs) ---------- */
.wp-block-group.kh-carte {
  padding: var(--kh-esp-5);
  background: var(--kh-surface);
  border: 1px solid var(--kh-bordure);
  border-radius: var(--kh-rayon-lecture);
}
.wp-block-group.kh-carte > * + * { margin-block-start: var(--kh-esp-3); }
.kh-carte__icone { display: block; width: 32px; height: 32px; color: var(--kh-accent); }
.kh-carte__icone svg { width: 32px; height: 32px; }
.kh-carte__icone svg * { vector-effect: non-scaling-stroke; }
.kh-carte .wp-block-heading,
.kh-carte__titre {
  font-size: var(--kh-taille-h4);
  font-weight: var(--kh-graisse-titre-fort);
  line-height: var(--kh-interligne-carte);
  margin-block-start: var(--kh-esp-4) !important;
}
@media (min-width: 1024px) { .wp-block-group.kh-carte { padding: var(--kh-esp-6); } }

/* ---------- 9. Étapes du rituel ---------- */
.kh-etapes { counter-reset: kh-etape; display: grid; gap: var(--kh-esp-5); }
.kh-etapes > * { margin: 0 !important; }
.wp-block-group.kh-etape {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--kh-esp-4);
  padding-block-end: var(--kh-esp-5);
  border-bottom: 1px solid var(--kh-bordure);
}
.wp-block-group.kh-etape > * { grid-column: 2; margin: 0 !important; }
.wp-block-group.kh-etape > * + * { margin-block-start: var(--kh-esp-2) !important; }
.kh-etape .wp-block-heading { font-size: var(--kh-taille-h3); font-weight: var(--kh-graisse-titre-fort); }
.kh-etape .wp-block-heading::before {
  counter-increment: kh-etape;
  content: counter(kh-etape);
  position: absolute;
  margin-inline-start: calc(-56px - var(--kh-esp-4));
  width: 56px;
  font-variation-settings: var(--kh-axes-display);
  font-size: var(--kh-taille-h2);
  line-height: .9;
  color: var(--kh-accent);
}

/* ---------- 10. Minuteur (outil d'usage, pas un compte à rebours commercial) ---------- */
.kh-minuteur {
  padding: var(--kh-esp-5);
  background: var(--kh-surface);
  border: 1px solid var(--kh-bordure);
}
.kh-minuteur > * + * { margin-block-start: var(--kh-esp-4); }
.kh-minuteur__titre { margin: 0; font-size: var(--kh-taille-h4); font-weight: var(--kh-graisse-titre-fort); }
.kh-minuteur__methode[hidden] { display: none; }
.kh-minuteur__etapes { margin: 0; padding-inline-start: 1.25em; }
.kh-minuteur__etapes li { padding-block: 2px; font-variant-numeric: tabular-nums; color: var(--kh-texte-secondaire); }
.kh-minuteur__etapes li.is-courante { color: var(--kh-texte); font-weight: var(--kh-graisse-action); }
.kh-minuteur__etapes li.is-faite { text-decoration: line-through; text-decoration-color: var(--kh-bordure-interactive); }
.kh-minuteur__note { font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }
.kh-minuteur__fin { margin: 0; font-family: var(--kh-police-titre); font-size: var(--kh-taille-h4); font-weight: var(--kh-graisse-titre-fort); color: var(--kh-succes); }
.kh-minuteur__fin[hidden] { display: none; }

/* Onglets (créés par le script quand il y a plusieurs méthodes) */
.kh-onglets { display: flex; flex-wrap: wrap; gap: var(--kh-esp-2); margin: 0; padding: 0; }
.kh-onglets button {
  min-height: var(--kh-cible-min);
  padding: 0 var(--kh-esp-4);
  border: 1.5px solid var(--kh-bordure-interactive);
  border-radius: var(--kh-rayon-action);
  background: transparent;
  color: var(--kh-texte);
  font: inherit;
  font-weight: var(--kh-graisse-action);
  cursor: pointer;
  transition: background-color var(--kh-duree-rapide), border-color var(--kh-duree-rapide);
}
.kh-onglets button[aria-selected="true"] { background: var(--kh-coche-fond); border: 2px solid var(--kh-accent); padding-inline: calc(var(--kh-esp-4) - .5px); }

/* Cadran : anneau 176 px, trait 6 px, progression linéaire en cuivre foncé. */
.kh-minuteur__cadran { display: none; }
.kh-minuteur.is-pret .kh-minuteur__cadran { display: grid; justify-items: center; gap: var(--kh-esp-4); }
.kh-anneau { position: relative; width: 176px; height: 176px; }
.kh-anneau svg { width: 176px; height: 176px; rotate: -90deg; }
.kh-anneau__fond { fill: none; stroke: var(--kh-bordure); stroke-width: 6; }
.kh-anneau__trait { fill: none; stroke: var(--kh-accent); stroke-width: 6; stroke-linecap: butt; transition: stroke-dashoffset 1s linear; }
.kh-anneau__centre { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.kh-anneau__temps { font-size: 2.5rem; font-weight: var(--kh-graisse-action); font-variant-numeric: tabular-nums; line-height: 1; }
.kh-anneau__phase { margin-block-start: var(--kh-esp-2); font-size: var(--kh-taille-libelle); font-weight: var(--kh-graisse-action); letter-spacing: var(--kh-approche-libelle); text-transform: uppercase; color: var(--kh-texte-secondaire); }
.kh-minuteur__commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kh-esp-3); }
.kh-minuteur__options { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--kh-esp-1) var(--kh-esp-4); margin: 0; padding: 0; border: 0; font-size: var(--kh-taille-petit); }
.kh-minuteur__options legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kh-minuteur__options label { display: inline-flex; align-items: center; gap: var(--kh-esp-2); min-height: var(--kh-cible-min); cursor: pointer; }
.kh-minuteur__options input { width: 20px; height: 20px; margin: 0; accent-color: var(--kh-cuivre-fonce); }
.kh-minuteur.is-pret .kh-minuteur__etapes { padding-inline-start: 0; list-style-position: inside; text-align: center; }
@media (min-width: 1024px) { .kh-minuteur { padding: var(--kh-esp-6); } }

/* ---------- 11. Proverbe (jina) : la signature ---------- */
.kh-jina { background: var(--kh-pierre); --kh-fond: var(--kh-pierre); }
.kh-jina__grille > * { margin-inline: 0 !important; }
@media (min-width: 1024px) {
  .kh-jina__grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--kh-esp-6); }
  .kh-jina__grille > * { grid-column: 3 / span 7; }  /* texte décalé sur 7 colonnes : la seule composition décalée */
}
.wp-block-quote.is-style-kh-proverbe,
.is-style-kh-proverbe {
  margin: 0;
  padding: var(--kh-esp-5) 0 0;
  border: 0;
  font-family: var(--kh-police-titre);
  font-style: normal;
}
.wp-block-quote.is-style-kh-proverbe::before {
  content: "";
  display: block;
  width: 73px;
  height: 5px;
  margin-block-end: var(--kh-esp-5);
  background: radial-gradient(circle closest-side, var(--kh-accent) 94%, transparent) -6px 0 / 17px 5px repeat-x;
}
.kh-proverbe__texte {
  margin: 0;
  font-family: var(--kh-police-titre);
  font-style: italic;
  font-weight: var(--kh-graisse-proverbe);
  font-variation-settings: var(--kh-axes-proverbe);
  font-size: var(--kh-taille-proverbe);
  line-height: 1.2;
  color: var(--kh-texte);
}
.is-style-kh-proverbe .kh-proverbe__prononciation { margin-block-start: var(--kh-esp-3); font-family: var(--kh-police-texte); font-style: normal; font-size: var(--kh-taille-petit); letter-spacing: .02em; color: var(--kh-texte-secondaire); }
.is-style-kh-proverbe .kh-proverbe__traduction { margin-block-start: var(--kh-esp-4); font-family: var(--kh-police-texte); font-style: normal; font-size: var(--kh-taille-chapo); line-height: 1.55; }
.is-style-kh-proverbe cite { display: block; margin-block-start: var(--kh-esp-4); font-family: var(--kh-police-texte); font-style: normal; font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }

/* ---------- 12. Coffret ---------- */
.kh-coffret__visuel img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--kh-rayon-lecture); }
.kh-coffret__visuel { margin: 0; }
.kh-coffret .wp-block-list { padding-inline-start: 0; list-style: none; }
.kh-coffret .wp-block-list li { position: relative; padding-inline-start: var(--kh-esp-5); padding-block: var(--kh-esp-1); }
.kh-coffret .wp-block-list li::before { content: ""; position: absolute; left: 4px; top: .78em; width: 5px; height: 5px; border-radius: 50%; background: var(--kh-accent); }

/* ---------- 13. Registre des preuves (tableau, angles vifs) ---------- */
.wp-block-table.kh-registre { margin: 0; overflow-x: auto; }
.wp-block-table.kh-registre table { width: 100%; border-collapse: collapse; background: var(--kh-surface); font-size: var(--kh-taille-petit); }
.wp-block-table.kh-registre th,
.wp-block-table.kh-registre td { padding: var(--kh-esp-3) var(--kh-esp-4); border: 0; border-bottom: 1px solid var(--kh-bordure); text-align: left; vertical-align: top; }
.wp-block-table.kh-registre thead { border: 0; }
.wp-block-table.kh-registre thead th {
  font-size: var(--kh-taille-libelle);
  font-weight: var(--kh-graisse-action);
  letter-spacing: var(--kh-approche-libelle);
  text-transform: uppercase;
  color: var(--kh-texte-secondaire);
  border-bottom: 1.5px solid var(--kh-bordure-interactive);
}
.wp-block-table.kh-registre td:last-child { white-space: nowrap; font-weight: var(--kh-graisse-action); color: var(--kh-texte-secondaire); }
.wp-block-table.kh-registre td:last-child::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-inline-end: 8px; vertical-align: middle; border-radius: 50%; background: currentColor; }
.wp-block-table.kh-registre figcaption { margin-block-start: var(--kh-esp-3); text-align: left; font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }
@media (max-width: 599px) {
  /* Petits écrans : chaque ligne devient un bloc (pas de défilement horizontal à 320 px). */
  .wp-block-table.kh-registre thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .wp-block-table.kh-registre tr { display: block; padding: var(--kh-esp-3) var(--kh-esp-4); border-bottom: 1px solid var(--kh-bordure); }
  .wp-block-table.kh-registre td { display: block; padding: 2px 0; border: 0; }
  .wp-block-table.kh-registre td:first-child { font-weight: var(--kh-graisse-action); color: var(--kh-texte); }
}

/* Tableaux de lecture des pages (dosage, données, cookies) */
.wp-block-table:not(.kh-registre) table { border-collapse: collapse; width: 100%; }
.wp-block-table:not(.kh-registre) :is(th, td) { padding: var(--kh-esp-2) var(--kh-esp-3); border: 0; border-bottom: 1px solid var(--kh-bordure); text-align: left; vertical-align: top; }
.wp-block-table:not(.kh-registre) thead { border: 0; }
.wp-block-table:not(.kh-registre) thead th { border-bottom: 1.5px solid var(--kh-bordure-interactive); font-weight: var(--kh-graisse-action); }
.wp-block-table:not(.kh-registre) figcaption { text-align: left; font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }

/* ---------- 14. FAQ : <details> natifs, réponses toujours dans le DOM ---------- */
.kh-faq { border-top: 1px solid var(--kh-bordure); }
.kh-faq > * { margin-block: 0 !important; }
.wp-block-details { border-bottom: 1px solid var(--kh-bordure); padding: 0; }
.wp-block-details > summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: var(--kh-esp-3) 44px var(--kh-esp-3) 0;
  font-family: var(--kh-police-texte);
  font-size: var(--kh-taille-corps);
  font-weight: var(--kh-graisse-action);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
/* Le « + » en trait 1.5 px, qui tourne de 45° (devient ×). */
.wp-block-details > summary::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 100% no-repeat;
  transition: transform var(--kh-duree-survol) var(--kh-courbe-sortie);
}
.wp-block-details[open] > summary::after { transform: rotate(45deg); }
.wp-block-details > summary:hover { color: var(--kh-accent); }
.wp-block-details > :not(summary) { margin-block: 0 0 var(--kh-esp-4); max-width: var(--kh-mesure); color: var(--kh-texte-secondaire); }
.wp-block-details > :not(summary) + :not(summary) { margin-block-start: var(--kh-esp-3); }
/* Fondu du contenu à l'ouverture (navigateurs récents), jamais de hauteur animée. */
.wp-block-details::details-content {
  opacity: 0;
  transition: opacity var(--kh-duree-rapide) var(--kh-courbe-standard), content-visibility var(--kh-duree-rapide) allow-discrete;
}
.wp-block-details[open]::details-content { opacity: 1; }
.kh-faq__groupe + .kh-faq__groupe { margin-block-start: var(--kh-esp-bloc) !important; }
.kh-sommaire { display: flex; flex-wrap: wrap; gap: var(--kh-esp-2); margin: 0; padding: 0; list-style: none; }
.kh-sommaire a {
  display: inline-flex;
  align-items: center;
  min-height: var(--kh-cible-min);
  padding: 0 var(--kh-esp-4);
  border: 1.5px solid var(--kh-bordure-interactive);
  border-radius: var(--kh-rayon-action);
  color: var(--kh-texte);
  font-size: var(--kh-taille-petit);
  font-weight: var(--kh-graisse-action);
  text-decoration: none;
}
.kh-sommaire a:hover { border-color: var(--kh-texte); }

/* ---------- 15. Encart (professionnels, invitation, CTA) ---------- */
.wp-block-group.kh-encart {
  padding: var(--kh-esp-5);
  background: var(--kh-surface);
  border: 1px solid var(--kh-bordure);
}
.wp-block-group.kh-encart > * + * { margin-block-start: var(--kh-esp-3); }
.kh-encart .wp-block-heading { font-size: var(--kh-taille-h4); font-weight: var(--kh-graisse-titre-fort); margin: 0; }
@media (min-width: 768px) { .wp-block-group.kh-encart { padding: var(--kh-esp-6); } }

/* ---------- 16. Pied de page (nuit profonde) ---------- */
.kh-pied {
  padding: var(--kh-esp-8) var(--kh-gouttiere) calc(var(--kh-esp-6) + env(safe-area-inset-bottom));
  font-size: var(--kh-taille-petit);
  line-height: 1.6;
}
.kh-pied > * { max-width: var(--kh-largeur-large); margin-inline: auto !important; }
.kh-pied__colonnes { display: grid; gap: var(--kh-esp-6); grid-template-columns: minmax(0, 1fr); }
.kh-pied__colonnes > * { margin: 0 !important; }
@media (min-width: 768px) { .kh-pied__colonnes { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--kh-esp-7); } }
.kh-pied__titre { margin: 0 0 var(--kh-esp-3); font-family: var(--kh-police-texte); font-size: var(--kh-taille-libelle); font-weight: var(--kh-graisse-action); letter-spacing: var(--kh-approche-libelle); text-transform: uppercase; color: var(--kh-texte-secondaire); }
.kh-pied p { margin: 0; color: var(--kh-texte-secondaire); }
.kh-pied p + p { margin-block-start: var(--kh-esp-3); }
.kh-pied .kh-logo { margin: 0 0 var(--kh-esp-4); }
.kh-pied__phrase { color: var(--kh-texte) !important; max-width: 34ch; }
.kh-pied__liste { margin: 0; padding: 0; list-style: none; }
.kh-pied__liste a { display: inline-flex; align-items: center; min-height: 32px; color: var(--kh-texte); text-decoration: none; }
.kh-pied__liste a:hover { color: var(--kh-accent); text-decoration: underline; }
.kh-pied address { font-style: normal; color: var(--kh-texte-secondaire); }
.kh-pied address a { color: var(--kh-accent); }
.kh-pied__bas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kh-esp-2) var(--kh-esp-5);
  margin-block-start: var(--kh-esp-7) !important;
  padding-block-start: var(--kh-esp-5);
  border-top: 1px solid var(--kh-bordure);
  color: var(--kh-texte-secondaire);
}
.kh-pied__bas > * { margin: 0 !important; }
.kh-pied__bas ul { display: flex; flex-wrap: wrap; gap: var(--kh-esp-1) var(--kh-esp-4); margin: 0; padding: 0; list-style: none; }
.kh-pied__bas a { display: inline-flex; align-items: center; min-height: 32px; color: var(--kh-accent); }
.kh-pied__proverbe { font-family: var(--kh-police-titre); font-style: italic; font-variation-settings: var(--kh-axes-proverbe); font-size: var(--kh-taille-chapo); color: var(--kh-texte) !important; }

/* ---------- 17. Barre d'achat collante (< 1024 px) ---------- */
.wp-block-group.is-style-kh-barre-achat {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kh-esp-4);
  margin: 0 !important;
  padding: var(--kh-esp-3) var(--kh-esp-4) calc(var(--kh-esp-3) + env(safe-area-inset-bottom));
  background: var(--kh-lin);
  color: var(--kh-encre);
  border-top: 1px solid var(--kh-trait);
  box-shadow: var(--kh-ombre-barre);
  transform: translateY(100%);
  visibility: hidden;
  transition: transform var(--kh-duree-barre) var(--kh-courbe-tiroir), visibility 0s linear var(--kh-duree-barre);
}
.wp-block-group.is-style-kh-barre-achat.is-visible {
  transform: none;
  visibility: visible;
  transition: transform var(--kh-duree-barre) var(--kh-courbe-tiroir), visibility 0s;
}
.is-style-kh-barre-achat > * { margin: 0 !important; }
.is-style-kh-barre-achat p { font-size: var(--kh-taille-petit); line-height: 1.35; }
.is-style-kh-barre-achat .wp-block-buttons { flex: none; }
.is-style-kh-barre-achat .wp-block-button__link { min-height: var(--kh-cible-min); }
body.kh-barre-visible { padding-bottom: 72px; }
html:has(body.kh-barre-visible) { scroll-padding-bottom: 80px; }
@media (min-width: 1024px) {
  .wp-block-group.is-style-kh-barre-achat { display: none; }
  body.kh-barre-visible { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-group.is-style-kh-barre-achat { transform: none; opacity: 0; transition: opacity var(--kh-duree-rapide), visibility 0s linear var(--kh-duree-rapide); }
  .wp-block-group.is-style-kh-barre-achat.is-visible { opacity: 1; transition: opacity var(--kh-duree-rapide), visibility 0s; }
}

/* ---------- 18. Cartes de format (palier B) ---------- */
.wp-block-group.is-style-kh-carte-format,
.kh-format__carte {
  position: relative;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  column-gap: var(--kh-esp-3);
  align-items: start;
  min-height: 88px;
  padding: 16px 20px;
  background: var(--kh-lin);
  color: var(--kh-encre);
  border: 1.5px solid var(--kh-trait-fort);
  border-radius: var(--kh-rayon-action);
  cursor: pointer;
  transition: transform var(--kh-duree-survol) var(--kh-courbe-sortie), box-shadow var(--kh-duree-survol) var(--kh-courbe-sortie), border-color var(--kh-duree-rapide);
}
.wp-block-group.is-style-kh-carte-format { display: block; }
.kh-format { margin: 0; padding: 0; border: 0; display: grid; gap: var(--kh-esp-3); }
.kh-format legend { margin-block-end: var(--kh-esp-3); font-weight: var(--kh-graisse-action); }
.kh-format input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kh-format__indicateur { width: 20px; height: 20px; margin-top: 2px; border: 1.5px solid var(--kh-trait-fort); border-radius: 50%; background: var(--kh-lin); display: grid; place-items: center; }
.kh-format__nom { font-family: var(--kh-police-titre); font-weight: var(--kh-graisse-titre-fort); font-variation-settings: var(--kh-axes-carte); font-size: var(--kh-taille-h4); line-height: var(--kh-interligne-carte); }
.kh-format__detail { display: block; margin-top: 2px; font-size: var(--kh-taille-petit); color: var(--kh-encre-attenuee); }
.kh-format__prix { font-weight: var(--kh-graisse-action); font-variant-numeric: tabular-nums; text-align: right; }
.kh-format__prix small { display: block; font-weight: 400; font-size: var(--kh-taille-libelle); color: var(--kh-encre-attenuee); }
.kh-format__carte:has(input:checked),
.kh-format__carte[aria-current="page"] { background: var(--kh-voile-cuivre); border: 2px solid var(--kh-cuivre-fonce); padding: 15.5px 19.5px; }
.kh-format__carte:has(input:checked) .kh-format__indicateur { background: var(--kh-cuivre-fonce); border-color: var(--kh-cuivre-fonce); }
.kh-format__carte:has(input:checked) .kh-format__indicateur::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kh-lin); }
.kh-format__carte:has(input:focus-visible) { outline: 2px solid var(--kh-nuit); outline-offset: 3px; }
@media (min-width: 480px) { .kh-format__cartes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kh-esp-3); } }
@media (hover: hover) and (pointer: fine) {
  .kh-format__carte:hover,
  .wp-block-group.is-style-kh-carte-format:hover { transform: var(--kh-levee-survol); box-shadow: var(--kh-ombre-survol); border-color: var(--kh-encre); }
}
.kh-quantite { display: inline-flex; align-items: stretch; border: 1.5px solid var(--kh-trait-fort); border-radius: var(--kh-rayon-action); background: var(--kh-lin); }
.kh-quantite button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--kh-encre); font-size: var(--kh-taille-chapo); cursor: pointer; }
.kh-quantite input { width: 56px; border: 0; background: transparent; text-align: center; font: inherit; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.kh-quantite input::-webkit-inner-spin-button { -webkit-appearance: none; }
.kh-reassurance { font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }

/* ---------- 19. Formulaires (Me prévenir, contact) ---------- */
.kh-panneau { padding: var(--kh-esp-5); border: 1px solid var(--kh-trait); }
@media (min-width: 768px) { .kh-panneau { padding: var(--kh-esp-6); } }
.kh-panneau > * + * { margin-block-start: var(--kh-esp-3); }
.kh-prevenir__titre { margin: 0; font-size: var(--kh-taille-h4) !important; font-weight: var(--kh-graisse-titre-fort); line-height: var(--kh-interligne-carte); }
.kh-prevenir__texte { margin: 0; color: var(--kh-texte-secondaire); }
.kh-form { display: grid; gap: var(--kh-esp-4); margin-block-start: var(--kh-esp-5); }
.kh-form > * { margin: 0; }
.kh-champ { display: grid; gap: 6px; }
.kh-champ label { font-weight: var(--kh-graisse-action); font-size: var(--kh-taille-corps); }
.kh-champ input,
.kh-champ select,
.kh-champ textarea {
  width: 100%;
  min-height: var(--kh-hauteur-action);
  padding: 12px 14px;
  background: var(--kh-lin);
  color: var(--kh-encre);
  border: 1.5px solid var(--kh-trait-fort);
  border-radius: var(--kh-rayon-action);
  font: inherit;
  font-size: 1rem;    /* 16 px : pas de zoom automatique sur iOS */
  box-sizing: border-box;
}
.kh-champ textarea { min-height: 160px; resize: vertical; }
.kh-champ :is(input, select, textarea):focus-visible { border-color: var(--kh-nuit); outline: 2px solid var(--kh-nuit); outline-offset: 2px; }
.kh-champ__aide { margin: 0; font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }
.kh-champ__erreur { margin: 0; font-size: var(--kh-taille-petit); font-weight: var(--kh-graisse-action); color: var(--kh-erreur); }
.kh-champ__erreur[hidden] { display: none; }
.kh-champ:has([aria-invalid="true"]) :is(input, select, textarea) { border-color: var(--kh-erreur); }
.kh-case { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--kh-esp-3); align-items: start; }
.kh-case input {
  appearance: none;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 1.5px solid var(--kh-trait-fort);
  border-radius: 4px;
  background: var(--kh-lin);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.kh-case input:checked { background: var(--kh-cuivre-fonce); border-color: var(--kh-cuivre-fonce); }
.kh-case input:checked::after { content: ""; width: 10px; height: 6px; margin-top: -3px; border-left: 2px solid var(--kh-lin); border-bottom: 2px solid var(--kh-lin); rotate: -45deg; }
.kh-case input:focus-visible { outline: 2px solid var(--kh-nuit); outline-offset: 2px; }
.kh-case label { font-size: var(--kh-taille-corps); line-height: 1.5; cursor: pointer; }
.kh-case::before { content: none; }
.kh-pot { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.kh-form__statut:empty { display: none; }
.kh-form__statut,
.kh-message {
  padding: var(--kh-esp-4);
  border: 1.5px solid currentColor;
  font-size: var(--kh-taille-corps);
}
.kh-message--succes { color: var(--kh-succes); background: var(--kh-lin); }
.kh-message--erreur,
.kh-form__statut.is-erreur { color: var(--kh-erreur); background: var(--kh-lin); }
.kh-message strong,
.kh-message .kh-message__titre { display: block; margin-bottom: var(--kh-esp-1); font-family: var(--kh-police-titre); font-size: var(--kh-taille-h4); font-weight: var(--kh-graisse-titre-fort); color: var(--kh-encre); }
.kh-message p { margin: 0; color: var(--kh-encre); }
.kh-message p + p { margin-top: var(--kh-esp-2); }
.kh-prix-lancement { margin: var(--kh-esp-5) 0 0; padding-top: var(--kh-esp-4); border-top: 1px solid var(--kh-trait); font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }
.kh-prix-lancement strong { color: var(--kh-encre); font-variant-numeric: tabular-nums; }
.kh-champ--commande { display: none; }
.kh-form:has(select option[value="commande"]:checked) .kh-champ--commande { display: grid; }
.kh-form .kh-bouton { width: 100%; }
@media (min-width: 480px) { .kh-form .kh-bouton { width: auto; justify-self: start; } }
.kh-form__legal { font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }

/* ---------- 20. Glossaire, prononcer, WooCommerce, utilitaires ---------- */
.kh-glossaire { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--kh-bordure); }
.kh-glossaire > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--kh-esp-4); padding-block: var(--kh-esp-3); border-bottom: 1px solid var(--kh-bordure); }
.kh-glossaire dt { font-family: var(--kh-police-titre); font-weight: var(--kh-graisse-titre-fort); font-size: var(--kh-taille-h4); }
.kh-glossaire dd { margin: 0; grid-column: 1; }
.kh-glossaire .kh-glossaire__son { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.kh-glossaire__pron { font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); letter-spacing: .02em; }
@media (min-width: 768px) { .kh-glossaire { grid-template-columns: 1fr 1fr; column-gap: var(--kh-esp-6); } }

.kh-prononcer {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--kh-cible-min);
  min-width: var(--kh-cible-min);
  padding: 0 var(--kh-esp-3);
  border: 1.5px solid var(--kh-bordure-interactive);
  border-radius: var(--kh-rayon-action);
  background: transparent;
  color: var(--kh-texte);
  font: inherit;
  font-size: var(--kh-taille-petit);
  font-weight: var(--kh-graisse-action);
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  vertical-align: middle;
}
.kh-prononcer[hidden] { display: none; }
.kh-prononcer svg { width: 18px; height: 18px; flex: none; }
.kh-prononcer[aria-pressed="true"] { border-color: var(--kh-accent); }
.kh-prononcer[aria-pressed="true"] .kh-onde { animation: kh-onde .9s var(--kh-courbe-standard) 3 alternate; }
.kh-prononcer__texte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (min-width: 768px) { .kh-prononcer__texte { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } }

/* Mini-panier WooCommerce (palier B) : tiroir lin, angles vifs, voile nuit SANS flou. */
.wc-block-mini-cart__drawer .wc-block-components-drawer,
.wc-block-components-drawer { background: var(--kh-lin); border-radius: 0; box-shadow: var(--kh-ombre-tiroir); }
.wc-block-components-drawer__screen-overlay { background-color: var(--kh-voile-modal) !important; backdrop-filter: none !important; }
.wc-block-mini-cart__badge { background: var(--kh-cuivre-fonce) !important; color: var(--kh-lin) !important; border-radius: 50%; }
.home .wc-block-mini-cart__badge { background: var(--kh-cuivre-clair) !important; color: var(--kh-nuit) !important; }
.wc-block-mini-cart__button { min-height: var(--kh-cible-min); min-width: var(--kh-cible-min); color: var(--kh-texte); }
.wc-block-components-button:not(.is-link) { border-radius: var(--kh-rayon-action); }
.wc-block-mini-cart__footer-checkout,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button { background: var(--kh-cuivre-fonce) !important; color: var(--kh-lin) !important; border-radius: var(--kh-rayon-action) !important; }
.woocommerce-breadcrumb,
.wc-block-breadcrumbs { font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }
.kh-produit__galerie img { border-radius: 0; }

/* ---------- 21. Pages (histoire, préparer, FAQ, contact, légal) ---------- */
.kh-page-tete:not(:has(*)) { display: none; }
.kh-page-tete .wp-block-heading { margin: 0; }
.kh-section--page { padding-block: var(--kh-esp-bloc) var(--kh-esp-section); }
.kh-section--page.kh-section--pierre { padding-block: var(--kh-esp-section); }
.kh-page-tete + .kh-section--page:not(.kh-section--pierre):not(.kh-nuit) { border-top: 0; }

/* Manifeste : le seuil de la page Notre histoire. */
.kh-manifeste { padding-block: var(--kh-esp-section); }
.kh-manifeste__corps > * { max-width: 30em; margin-inline: 0 !important; }
.kh-manifeste__corps > * + * { margin-block-start: var(--kh-esp-5); }
.kh-manifeste__accroche,
.kh-manifeste__texte {
  font-family: var(--kh-police-titre);
  font-weight: var(--kh-graisse-titre);
  font-variation-settings: var(--kh-axes-titre);
  line-height: 1.35;
}
.kh-manifeste__accroche { font-size: var(--kh-taille-h2); line-height: var(--kh-interligne-titre); }
.kh-manifeste__texte { font-size: var(--kh-taille-h4); color: var(--kh-texte); }
.kh-manifeste [lang="sw"] { color: var(--kh-accent); }

.kh-liste-mots li { padding-block: var(--kh-esp-1); }
.kh-liste-mots .kh-prononcer { margin-inline-start: var(--kh-esp-1); }

.kh-sommaire-legal { margin: 0; padding: var(--kh-esp-4) var(--kh-esp-5) var(--kh-esp-4) calc(var(--kh-esp-5) + 1.25em); background: var(--kh-surface); border: 1px solid var(--kh-bordure); font-size: var(--kh-taille-petit); columns: 2 14em; column-gap: var(--kh-esp-6); }
.kh-sommaire-legal li { padding-block: 2px; break-inside: avoid; }
.kh-maj { font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }
.kh-legal code { font-size: .9em; background: var(--kh-pierre); padding: 1px 4px; }

.kh-h2-discret { font-family: var(--kh-police-texte) !important; font-size: var(--kh-taille-libelle) !important; font-weight: var(--kh-graisse-action) !important; letter-spacing: var(--kh-approche-libelle); text-transform: uppercase; color: var(--kh-texte-secondaire); }
.kh-coordonnees { margin: 0; display: grid; gap: var(--kh-esp-4); }
.kh-coordonnees div { display: grid; gap: 2px; }
.kh-coordonnees dt { font-size: var(--kh-taille-libelle); font-weight: var(--kh-graisse-action); letter-spacing: var(--kh-approche-libelle); text-transform: uppercase; color: var(--kh-texte-secondaire); }
.kh-coordonnees dd { margin: 0; font-size: var(--kh-taille-chapo); line-height: 1.45; }
.kh-mesure-large > * { max-width: var(--kh-largeur-contenu); }
.kh-cta { margin-block-start: var(--kh-esp-5) !important; }
.kh-minuteur--page { max-width: 640px; margin-inline: auto; }
.kh-minuteur.is-pret .kh-minuteur__libelle { display: none; }
.kh-minuteur:not(.is-pret) .kh-minuteur__methode + .kh-minuteur__methode { margin-block-start: var(--kh-esp-5); padding-block-start: var(--kh-esp-4); border-top: 1px solid var(--kh-bordure); }
.kh-produit .wp-block-post-title { margin-block-start: 0; }

/* Éléments conditionnels dans du HTML brut (les blocs, eux, sont filtrés côté serveur). */
body:not(.kh-site-vitrine) .kh-si-vitrine,
body:not(.kh-site-boutique) .kh-si-boutique { display: none !important; }

/* Utilitaires */
.kh-visuellement-masque { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Brouillon : retiré du HTML servi par kh-mode-site.php ; ce masquage n'est qu'un filet. */
.kh-brouillon { display: none !important; }
.kh-mesure > * { max-width: var(--kh-mesure); }
.kh-page-tete { padding-block: var(--kh-esp-8) var(--kh-esp-6); }
.kh-page-tete > * + * { margin-block-start: var(--kh-esp-4); }
.kh-maj { font-size: var(--kh-taille-petit); color: var(--kh-texte-secondaire); }
.kh-legal h2 { font-size: var(--kh-taille-h3); font-weight: var(--kh-graisse-titre-fort); }
.kh-legal :is(p, li) { max-width: var(--kh-mesure); }
.kh-avertissement { padding: var(--kh-esp-4) var(--kh-esp-5); background: var(--kh-pierre); border: 1px solid var(--kh-bordure); }

@keyframes kh-fondu { from { opacity: 0; } to { opacity: 1; } }
@keyframes kh-onde { from { opacity: 1; } to { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link,
  .wp-element-button,
  .kh-bouton,
  .kh-format__carte,
  .wp-block-details > summary::after,
  .kh-menu__icone path { transition-property: background-color, border-color, color, opacity; }
  .kh-anneau__trait { transition: none; }
  .kh-menu[open] .kh-menu__panneau { animation-duration: 160ms; }
}