/* Pages d'information (inc/info-pages.php ; recette Alain, 2026-10-11) : Livraison, Livraison USA, Retours et les
   quatre pages légales (mentions légales, CGV, confidentialité, cookies). Même allure que les
   articles (kh-article.css) : titre en italique et trait vermillon, chapô, colonne de lecture (≈ 65 caractères par
   ligne, charte §5.3), intertitres en italique, tableau à filets fins, encadré à filet or (détail, jamais une action),
   ligne de contact à la fin ; filets, sous-titres et citations des textes légaux. Sur téléphone, chaque ligne d'un
   tableau devient un petit bloc (kh-info.js). */

/* ---- En-tête ---- */
.kh-info-page .entry-hero .entry-header { min-height: 0; padding: clamp(2rem, 4vw, 3rem) 0 0; }
.kh-info-page .entry-hero h1 { max-width: 24ch; margin: 0 auto; color: var(--kh-sumi); font: italic 400 clamp(2.4rem, 4.4vw, 3.6rem)/1.1 var(--kh-font-display); text-wrap: balance; }
.kh-info-page .entry-hero h1::after { content: ""; display: block; width: min(12rem, 60%); height: 1rem; margin: .8rem auto 0; background: url('../images/trait-pinceau-vermillon.webp') center / contain no-repeat; }
.kh-info-page .content-area { margin-top: clamp(1rem, 2vw, 1.75rem); }
.kh-info-page .content-container { max-width: 1200px; }
.kh-info-page .entry { background: transparent; box-shadow: none; }

/* ---- Colonne de lecture ---- */
.kh-info-page .entry-content > * { max-width: 42rem; margin-inline: auto; }
.kh-info-page .entry-content > :is(p, ul, ol) { margin-top: 0; margin-bottom: 1.1rem; color: var(--kh-sumi); font: 400 1.0625rem/1.8 var(--kh-font-body); }
.kh-info-page .entry-content > :is(ul, ol) li + li { margin-top: .2rem; }
.kh-info-page .entry-content > h2 { margin-top: 2.6rem; margin-bottom: .9rem; color: var(--kh-sumi); font: italic 400 clamp(1.55rem, 2.6vw, 1.95rem)/1.2 var(--kh-font-display); text-wrap: balance; }
/* Textes légaux : sous-titres, filets entre les articles, citations (clause du médiateur…). */
.kh-info-page .entry-content > h3 { margin-top: 1.8rem; margin-bottom: .6rem; color: var(--kh-sumi); font: italic 400 1.35rem/1.3 var(--kh-font-display); }
.kh-info-page .entry-content > hr { margin-block: 2.2rem; border: 0; border-top: 1px solid var(--kh-sumi-20); }
.kh-info-page .entry-content > blockquote { margin-block: 1.5rem; padding: 1rem 1.25rem; border-left: 2px solid var(--kh-gold); background: rgb(255 253 252 / .55); color: var(--kh-sumi); font: 400 1rem/1.7 var(--kh-font-body); }
/* Une clause légale se lit comme le texte : pas la grande italique des citations de Kadence. */
.kh-info-page .entry-content > blockquote :is(p, cite) { font: inherit; font-style: normal; }
.kh-info-page .entry-content > blockquote p { margin: 0 0 .6rem; }
.kh-info-page .entry-content > blockquote p:last-child { margin-bottom: 0; }
.kh-info-page .entry-content a:not(.wp-block-button__link) { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.kh-info-page .entry-content a:not(.wp-block-button__link):is(:hover, :focus-visible) { color: var(--kh-vermillon); }

/* Le chapô, puis l'image d'ouverture (case « Mise en situation » de la médiathèque si elle est générée). */
.kh-info-page .entry-content > p.kh-info-lead { margin-bottom: 2rem; text-align: center; font: italic 400 clamp(1.3rem, 2vw, 1.5rem)/1.5 var(--kh-font-display); text-wrap: balance; }
.kh-info-page .entry-content > figure.kh-info-hero { margin: 0 auto 2.5rem; }
.kh-info-page .kh-info-hero img { display: block; width: 100%; height: auto; }

/* Le bouton d'action de la page, centré (ex. « Renoncer au contrat ici » sur Retours) : vermillon, angles droits. */
.kh-info-page .entry-content > .kh-info-action { display: flex; justify-content: center; margin: 0 auto 2.5rem; }
.kh-info-page .kh-info-action .wp-block-button__link { border-radius: 0; background: var(--kh-vermillon); color: var(--kh-washi); font-family: var(--kh-font-ui); }
/* Survol : vermillon plus sombre, comme .btn-primary (kh-foundations.css), jamais l'or de Kadence (charte). */
.kh-info-page .kh-info-action .wp-block-button__link:is(:hover, :focus-visible) { background: #a02515; color: var(--kh-washi); }
.kh-info-page .kh-info-action .wp-block-button__link:focus-visible { outline: 2px solid var(--kh-sumi); outline-offset: 3px; }

/* L'encadré (ex. la livraison offerte dès 55 €). */
.kh-info-page .entry-content > p.kh-info-note { padding: 1rem 1.25rem; border-left: 2px solid var(--kh-gold); background: rgb(255 253 252 / .55); }

/* La ligne de contact, en dernier. */
.kh-info-page .entry-content > p.kh-info-help { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--kh-sumi-20); text-align: center; font: italic 400 1.25rem/1.5 var(--kh-font-display); }

/* ---- Tableaux ---- */
.kh-info-page .entry-content > figure.wp-block-table { max-width: 46rem; margin: 1.5rem auto; }
.kh-info-page .wp-block-table table { width: 100%; border-collapse: collapse; font: 400 1rem/1.45 var(--kh-font-body); }
.kh-info-page .wp-block-table :is(th, td) { padding: .7rem .6rem; border: 0; border-bottom: 1px solid var(--kh-sumi-20); text-align: left; vertical-align: top; }
.kh-info-page .wp-block-table thead th { border-bottom-color: var(--kh-sumi); color: var(--kh-sumi-70); font: 400 .75rem/1.3 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; }
/* Les prix à droite, sur une ligne : seulement dans un tableau de chiffres (kh-info-figures, posé par kh-info.js quand
   toutes les cases hors de la première colonne sont courtes, ex. Livraison), et sur un écran assez large ; les tableaux
   de texte (confidentialité, cookies) restent en lignes qui se replient. */
@media (min-width: 601px) {
  .kh-info-page .wp-block-table table.kh-info-figures :is(th, td):not(:first-child) { width: 8.5rem; text-align: right; white-space: nowrap; }
}

@media (max-width: 600px) {
  /* Une ligne = un bloc : la destination, puis les prix sous le nom de leur colonne (data-label, kh-info.js), alignés à
     gauche (sélecteurs plus forts que ceux du tableau sur ordinateur). */
  .kh-info-page .wp-block-table table.kh-info-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .kh-info-page .wp-block-table table.kh-info-stack tbody tr { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--kh-sumi-20); }
  .kh-info-page .wp-block-table table.kh-info-stack tbody td { display: block; width: auto; padding: 0; border: 0; text-align: left; white-space: normal; }
  .kh-info-page .wp-block-table table.kh-info-stack tbody td:first-child { grid-column: 1 / -1; margin-bottom: .35rem; }
  .kh-info-page .wp-block-table table.kh-info-stack tbody td:not(:first-child)::before { content: attr(data-label); display: block; color: var(--kh-sumi-70); font: 400 .68rem/1.3 var(--kh-font-ui); letter-spacing: .12em; text-transform: uppercase; }
  /* Tableau de texte : chaque case sur toute la largeur, l'une sous l'autre. */
  .kh-info-page .wp-block-table table.kh-info-stack:not(.kh-info-figures) tbody tr { grid-template-columns: 1fr; row-gap: .5rem; }
}