/* =====================================================================================
   REVUE DESIGN DES TROIS SITES : feuille commune v1.3 portée sur kj-uk (25/10/2026)
   Source : kj-design.css v1.3 du FR (en ligne le 21/10, recopiée à l'identique au US et au pro).
   Mêmes classes, mêmes valeurs ; seuls les sélecteurs sont ramenés au DOM kj-uk (inc/content.php).
   Ici uniquement ce que le moteur ne sait pas faire en réglage, presque toujours derrière une
   classe posée par la « Classe additionnelle » du gabarit : sans la classe, aucun effet.
   Non porté : Smile et chat (absents du réseau), étagère téléphone (retirée au FR le 21/10).
   ===================================================================================== */

/* --- Texte sur photo (classe kj-band sur une carte image) : le voile ne couvre que la bande
   basse où se trouve le texte, le haut de la photo reste intact. Nom en 26-32 px (texte large
   au sens WCAG : 3:1 suffit). kj-band--cta : bande plus haute quand un bouton est sur la photo. */
.kj-band .image-card__filter {
  background: linear-gradient(to top, rgb(0 0 0 / .64) 0%, rgb(0 0 0 / .42) 20%, rgb(0 0 0 / .14) 36%, transparent 48%);
}
.kj-band--cta .image-card__filter {
  background: linear-gradient(to top, rgb(0 0 0 / .66) 0%, rgb(0 0 0 / .5) 22%, rgb(0 0 0 / .22) 44%, transparent 62%);
}
.kj-band .image-card__content .text-block > * { text-shadow: 0 1px 12px rgb(0 0 0 / .25); }
.kj-band .image-card__content .text-block.h4 > * { font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem); line-height: 1.2; }
/* Hauteur FIXE des cartes photo d'une même rangée (hubs, univers de l'accueil), comme au pro : le moteur kj-uk pose une
   hauteur minimale, si bien qu'un titre sur 2 lignes ou un bouton plus haut agrandissait sa carte et décalait le texte
   du dessous (retour Joachim 25/10, Lunch et Jarred Cooking). Ici toutes les cartes d'une rangée ont la hauteur du
   réglage (« grande » 540 px, « moyenne » 440 px = 2:3 sur les hubs à 4 cartes, comme La cuisine en bocal du pro). */
/* flex: none obligatoire : la carte est en flex: 1 1 0 dans sa colonne, une base nulle annule la hauteur (incident 25/10 18h45) */
.image-card.kj-band { flex: none; height: calc(var(--h-m, 300px) + 2 * var(--card-padding, 20px)); min-height: 0; }
@media (min-width: 750px) { .image-card.kj-band { height: calc(var(--h, 400px) + 2 * var(--card-padding, 20px)); } }

/* --- Fiche produit : infos sous le bouton d'achat (classe kj-info) ---------------------
   Date de livraison, Promesse K&J, frais de port : une info par ligne de 28 px, sans filet.
   Seule la Promesse (kj-info--link) se touche : chevron à droite, cible de 44 px qui déborde
   de 8 px dans l'écart entre les lignes sans les écarter. */
.kj-info {
  display: flex !important;
  align-items: center;
  min-height: 28px;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
.kj-info p { margin: 0; }
.kj-inline-trigger.kj-info--link > .button {
  width: 100%;
  max-width: none;
  min-height: 44px;
  margin-block: -8px;
  justify-content: flex-start;
  text-align: left;
}
.kj-inline-trigger.kj-info--link > .button::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 6px 0 auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
}

/* --- Cibles tactiles de 44 px sans changer le dessin ------------------------------------
   Icônes d'en-tête (32 px dessinés) : zone invisible de 6 px autour. Formats : 44 px de haut.
   Liens du pied de page au téléphone : hauteur de ligne suffisante au doigt. */
.kj-iconbtn::before { content: ''; position: absolute; inset: -6px; }
.kj-variant span { min-height: 44px; }
@media (width < 750px) {
  .fs-footer a:not(.fs-logo a) { display: inline-block; padding-block: 6px; }
}

/* --- Fil d'Ariane au téléphone (classe kj-crumbs) : un seul lien « ‹ niveau parent » sur une
   ligne de 44 px au lieu du chemin complet. Ordinateur et balisage lu par Google inchangés. */
@media (width < 750px) {
  .kj-crumbs .breadcrumbs__item { display: none; }
  .kj-crumbs .breadcrumbs__item:nth-last-child(2) { display: flex; }
  .kj-crumbs .breadcrumbs__item:nth-last-child(2)::after { content: none !important; }
  .kj-crumbs .breadcrumbs__item:nth-last-child(2) .breadcrumbs__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    text-decoration: none;
  }
  .kj-crumbs .breadcrumbs__item:nth-last-child(2) .breadcrumbs__link::before {
    content: '';
    width: .45em;
    height: .45em;
    border: solid currentColor;
    border-width: 0 0 1.5px 1.5px;
    transform: rotate(45deg);
  }
}

/* --- Pied de page au téléphone : menus sur 2 colonnes (réglage du gabarit) ; le bloc marque
   (classe kj-footer-brand) garde toute la largeur. */
@media (width < 750px) {
  .fs-footer__content > .kj-footer-brand { grid-column: 1 / -1; }
}

/* --- Focus clavier visible ----------------------------------------------------------- */
:is(a, button, summary, [role="button"], input, select, textarea):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* =====================================================================================
   Lot C (fiches) : éléments de la fiche FR propres au portage kj-uk
   ===================================================================================== */

/* --- Accordéons de la fiche : marge interne « moyenne » (FR 21/10) et titres en gras (FR 07/10) */
.kj-accs { margin-top: var(--mt, 0); }
.kj-acc summary { font-weight: var(--acc-fw, 500); }
.kj-accs--medium .kj-acc summary { padding-block: 20px; }
.kj-accs--medium .kj-acc__content { padding-bottom: 20px; }
.kj-accs--large .kj-acc summary { padding-block: 28px; }
.kj-accs--large .kj-acc__content { padding-bottom: 28px; }

/* --- Idées recettes du Journal (FR blocks/kj-recettes-bocal.liquid) : cartes empilées, photo 72 px, titre 16 px, chevron */
.kj-recette-bocal { padding: 8px 0; width: 100%; }
.kj-recette-bocal__label { display: block; color: #595959; font-size: 0.9375rem; line-height: 1.45; margin-bottom: 8px; }
.kj-recette-bocal__links { display: flex; flex-direction: column; gap: 8px; }
.kj-recette-bocal__card { display: flex; align-items: center; gap: 14px; min-height: 72px; border: 1px solid #E6E1DC; color: inherit; text-decoration: none; background: #fff; }
.kj-recette-bocal__card:hover { border-color: #b9b1aa; }
.kj-recette-bocal__img { width: 72px; height: 72px; object-fit: cover; flex: none; display: block; background: #f3eee9; }
.kj-recette-bocal__title { flex: 1; font-size: 1rem; line-height: 1.375; padding: 8px 0; }
.kj-recette-bocal__chev { flex: none; margin-right: 12px; }

/* --- Bande « photos et textes » au format de la fiche A3 du pro (FR 2026-10-05-b) : texte de Karine en 17 px (16 px
   téléphone) ; fiche sans photo d'ambiance : la carte texte prend toute la largeur au lieu de laisser un trou. */
.kj-arg-texte p { font-size: 17px; line-height: 1.65; max-width: 68ch; }
.kj-arg-texte strong { font-weight: 600; }
@media (width < 750px) { .kj-arg-texte p { font-size: 16px; } }
.kj-pt-ligne:not(:has(> .fs-image)) > .fs-group { --w: 100% !important; flex-basis: 100% !important; }

/* --- Mention Ecocert lisible (FR : #888 -> #595959, 7:1) */
.kj-ingredients__cert { color: #595959; opacity: 1; }

/* =====================================================================================
   Lot F (Journal) : cartes d'article et lecture (FR blog.json / article.json et feuille commune, 21/10)
   ===================================================================================== */

/* --- Cartes d'article (liste du Journal et « More from the journal ») : titre en h5 au-dessus de l'extrait, extrait
   coupé à 3 lignes (FR : text_style h5, truncate 3). */
.kj-article h3 { font-size: var(--font-h5--size); line-height: 1.35; }
.kj-article p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Lecture des articles : colonne de 720 px (environ 70 caractères par ligne), corps 17 px (16 px au téléphone),
   interligne 1,6 ; intertitres de Karine exclus. */
.kj-article-page__col { max-width: 720px; }
.kj-article-page__body > :is(p, ul, ol):not(.h1, .h2, .h3, .h4, .h5, .h6) { font-size: 17px; line-height: 1.6; }
@media (width < 750px) {
  .kj-article-page__body > :is(p, ul, ol):not(.h1, .h2, .h3, .h4, .h5, .h6) { font-size: 16px; }
}