/**
 * lyophilises.css — Comparatif plats lyophilisés + pages-marques, BS5 Randozone.
 * Chargée par article/comparatif-plats-lyophilises.php et par le template des
 * pages-marques (article/plats-lyophilises-template-bs5.php). Pas par sur-le-blog,
 * qui est passé sur categorie.css.
 *
 * Dépend de rz-bs5.css (tokens --rz-*). Restyle en BS5 le contenu éditorial hérité
 * des pages BS3 (classes BS3 réutilisées verbatim : .article-text, .img-responsive,
 * .table, .popup-gallery, .encart-lien…), scopé sous .lyo-content pour éviter toute
 * collision.
 *
 * TITRES : aucun style de h2..h6 ici. Le conteneur porte `lyo-content art-body` et
 * le design des titres vient du socle (rz-bs5.css, bloc .art-body), comme sur
 * /actualite-bs5.php.
 */

/* ═══════════════════════════════════════════════════════════
   @mutualisable — sidebar menu catégories (.cat-menu)
   Dupliqué de categorie.css. Ne pas charger categorie.css ici.
   ═══════════════════════════════════════════════════════════ */
.cat-menu {
  background: var(--rz-surface); border: 1px solid var(--rz-border);
  border-radius: 14px; padding: 1rem 1.1rem;
}
.cat-menu-title {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 700; font-size: .95rem; letter-spacing: -.01em;
  color: var(--rz-ink); margin: 0 0 .55rem;
}
.cat-menu ul { list-style: none; margin: 0; padding: 0; }
.cat-menu li { margin: 0; }
.cat-menu a, .cat-menu li.current > span {
  display: block; padding: .42rem .55rem; border-radius: 8px;
  font-size: .9rem; line-height: 1.3; text-decoration: none;
}
.cat-menu a { color: var(--rz-ink); }
.cat-menu a:hover { background: var(--rz-surface-2); color: var(--rz-blue); }
.cat-menu li.current > span {
  font-weight: 700; color: var(--rz-primary);
  border-left: 3px solid var(--rz-primary); border-radius: 0 8px 8px 0;
  background: color-mix(in oklch, var(--rz-primary) 7%, transparent);
}

/* @mutualisable — promo « Guide pratique » (dupliqué de categorie.css) */
.cat-guide-promo {
  display: block; margin: 1.75rem 0 0; overflow: hidden;
  border: 1px solid var(--rz-border); border-radius: 16px;
  text-decoration: none; color: inherit; background: var(--rz-surface);
  transition: border-color .15s, box-shadow .18s;
}
.cat-guide-promo:hover {
  border-color: color-mix(in oklch, var(--rz-blue) 50%, white);
  box-shadow: 0 16px 38px -26px rgba(20,40,80,.55);
}
.cat-guide-promo img { width: 100%; height: auto; display: block; }
.cat-guide-promo figcaption { padding: .8rem 1.1rem; font-size: .85rem; line-height: 1.5; color: var(--rz-inksoft); }

/* ═══════════════════════════════════════════════════════════
   Contenu éditorial (prose héritée BS3) — scopé .lyo-content
   ═══════════════════════════════════════════════════════════ */
.lyo-content { font-size: 1rem; line-height: 1.72; color: var(--rz-ink); }
.lyo-content h1 {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 700; letter-spacing: -.02em; line-height: 1.08; color: var(--rz-ink); margin: 0 0 .6rem;
}
/* h2 à h6 : AUCUN style ici. Le design des titres de corps d'article (h2 en
   accent chaud, h3 en bleu profond, h4 souligné court, rythme vertical) vient
   du socle via .art-body — le conteneur porte donc `class="lyo-content art-body"`.
   Ne pas réintroduire de .lyo-content h2/h3/h4 : ça repasserait devant le socle
   (même spécificité, feuille chargée après) et ferait diverger cette page des
   actualités. */
.lyo-content h2 a { color: inherit; text-decoration: none; }
.lyo-content h2 a:hover { text-decoration: underline; text-underline-offset: 2px; }
.lyo-content p { margin: 0 0 1rem; }
.lyo-content a { color: var(--rz-blue); text-decoration: underline; text-underline-offset: 2px; }
.lyo-content strong { font-weight: 700; }
.lyo-content ul { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.lyo-content li { margin: 0 0 .35rem; }
.lyo-content .introduction {
  font-size: 1.1rem; line-height: 1.6; color: var(--rz-inksoft);
  font-weight: 500; margin: 0 0 1.3rem;
}

/* Images héritées (.img-responsive) */
.lyo-content img, .lyo-content .img-responsive { max-width: 100%; height: auto; border-radius: 12px; }
.lyo-content figure { margin: 0 0 1.3rem; }
.lyo-content figure img { display: block; width: 100%; }
.lyo-content figcaption {
  font-size: .82rem; color: var(--rz-inksoft); margin-top: .45rem; font-style: italic; text-align: center;
}
.lyo-content .popup-gallery { margin: 0 0 1.3rem; }
.lyo-content .popup-gallery a { display: block; }
.lyo-content .text-center { text-align: center; }
.lyo-content .text-center img { margin-inline: auto; }

/* Utilitaire d'espacement BS3 conservé (le seul encore présent dans le HTML) */
.lyo-content .mb20 { margin-bottom: 1.25rem; }

/* Tableaux nutritionnels (.table.table-bordered.table-striped) */
.lyo-content .table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.4rem;
  font-size: .92rem; background: var(--rz-surface);
  border: 1px solid var(--rz-border); border-radius: 12px; overflow: hidden;
}
.lyo-content .table th, .lyo-content .table td {
  padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--rz-border);
}
.lyo-content .table thead th {
  background: var(--rz-surface-2); font-weight: 700; color: var(--rz-ink);
  font-family: 'Work Sans', system-ui, sans-serif;
}
.lyo-content .table.table-striped tbody tr:nth-child(even) {
  background: color-mix(in oklch, var(--rz-surface-2) 55%, transparent);
}
.lyo-content .table tbody tr:last-child td { border-bottom: 0; }

/* Encart « voir le site de la marque » */
.lyo-content .encart-lien {
  background: color-mix(in oklch, var(--rz-primary) 8%, transparent);
  border: 1px solid color-mix(in oklch, var(--rz-primary) 22%, transparent);
  border-radius: 12px; padding: .8rem 1.1rem; margin: 0 0 1.3rem;
  font-weight: 600; color: var(--rz-ink);
}

/* Encart partenaire (héritage .alert.alert-warning) — style « rz-card » du
   catalogue BS5 : bordure 1px complète, coins arrondis, ombre douce, eyebrow.
   Tokens --rz-* uniquement -> s'adapte au thème clair/sombre. */
.lyo-content .alert-warning {
  display: flow-root; position: relative;
  background: var(--rz-surface);
  border: 1px solid var(--rz-border);
  border-radius: 16px;
  box-shadow: 0 22px 50px -42px rgba(20, 40, 80, .55);
  padding: 1.15rem 1.35rem; margin: 0 0 1.4rem;
  font-size: .92rem; line-height: 1.6; color: var(--rz-inksoft);
}
.lyo-content .alert-warning::before {
  content: "Partenariat";
  display: block; margin-bottom: .5rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rz-primary);
}
.lyo-content .alert-warning strong { color: var(--rz-ink); font-weight: 700; }
.lyo-content .alert-warning a {
  color: var(--rz-blue); font-weight: 600; text-decoration: underline; text-underline-offset: 2px;
}
.lyo-content .alert-warning .imgr {
  float: right; width: 92px; max-width: 32%;
  margin: .1rem 0 .7rem 1rem; padding: .45rem;
  background: var(--rz-surface-2); border: 1px solid var(--rz-border); border-radius: 12px;
}

/* Bloc signature / publication (getPublicationBlock -> div.publication2).
   Style « Ligne éditoriale » (V1) du catalogue BS5 : carte bordurée + badge
   icône « person » + auteur en lien + date de mise à jour en gras. */
.lyo-content .publication2 {
  position: relative; display: flow-root;
  background: var(--rz-surface); border: 1px solid var(--rz-border);
  border-radius: 14px; margin: 0 0 1.5rem;
  padding: 1rem 1.25rem 1rem calc(1.25rem + 38px + .9rem);
  font-size: .93rem; line-height: 1.6; color: var(--rz-inksoft);
}
.lyo-content .publication2::before {
  content: ""; position: absolute; left: 1.25rem; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 10px; background-color: color-mix(in oklch, var(--rz-primary) 12%, transparent);
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%232b6299' d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/></svg>");
  background-repeat: no-repeat; background-position: center; background-size: 20px 20px;
}
.lyo-content .publication2 .publi-author a {
  color: var(--rz-blue); font-weight: 600; text-decoration: none;
}
.lyo-content .publication2 .publi-author a:hover { text-decoration: underline; text-underline-offset: 2px; }
.lyo-content .publication2 .publi-date { color: var(--rz-ink); font-weight: 600; }
.lyo-content .publication2 strong { color: var(--rz-ink); font-weight: 600; }

/* Menu marques en fin d'article (plats-lyophilises-menu.php) */
.lyo-brandmenu {
  background: var(--rz-surface-2); border: 1px solid var(--rz-border);
  border-radius: 14px; padding: 1.1rem 1.3rem; margin: 2rem 0 0;
}
.lyo-brandmenu h2 {
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 700; font-size: 1.15rem;
  margin: 0 0 .7rem; color: var(--rz-ink); border: 0; padding: 0;
}
.lyo-brandmenu ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.lyo-brandmenu li { margin: 0 0 .45rem; break-inside: avoid; }
.lyo-brandmenu a { color: var(--rz-blue); text-decoration: none; font-size: .92rem; }
.lyo-brandmenu a:hover { text-decoration: underline; }
@media (max-width: 560px) { .lyo-brandmenu ul { columns: 1; } }

/* ═══════════════════════════════════════════════════════════
   Grille des cards marques (hub comparatif)
   ═══════════════════════════════════════════════════════════ */
.lyo-brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.lyo-brand-card {
  display: flex; flex-direction: column; gap: .45rem;
  background: var(--rz-surface); border: 1px solid var(--rz-border);
  border-radius: 14px; padding: 1.1rem 1.2rem; text-decoration: none; color: inherit;
  transition: border-color .15s, box-shadow .18s;
}
.lyo-brand-card:hover {
  border-color: color-mix(in oklch, var(--rz-blue) 50%, white);
  box-shadow: 0 14px 32px -24px rgba(20,40,80,.55);
}
/* Titre (h3) : neutralise le design h3 du socle (.art-body) pour garder un
   titre de card compact. Doit rester plus spécifique que .art-body h3. */
.lyo-content .lyo-brand-card > h3 {
  margin: 0; padding: 0; border: 0;
  font-family: 'Work Sans', system-ui, sans-serif; font-weight: 700;
  font-size: 1.08rem; letter-spacing: -.01em; line-height: 1.15; color: var(--rz-ink);
}
/* Texte (p) */
.lyo-content .lyo-brand-card > p { margin: 0; font-size: .87rem; color: var(--rz-inksoft); line-height: 1.55; }
.lyo-content .lyo-brand-card > p a { color: var(--rz-blue); font-weight: 600; text-decoration: none; }
.lyo-content .lyo-brand-card:hover > p a { text-decoration: underline; text-underline-offset: 2px; }

/* ═══════════════════════════════════════════════════════════
   Encadré partenariat (div.partenariat-lyophilise) — mise en avant
   Carte à dégradé primaire + eyebrow + logo partenaire sur chip blanc.
   ═══════════════════════════════════════════════════════════ */
.lyo-content .partenariat-lyophilise {
  display: grid; grid-template-columns: 1fr minmax(150px, 210px);
  gap: .35rem 1.6rem; align-items: center;
  background: linear-gradient(115deg,
    color-mix(in oklch, var(--rz-primary) 10%, var(--rz-surface)) 0%,
    var(--rz-surface) 62%);
  border: 1px solid color-mix(in oklch, var(--rz-primary) 24%, var(--rz-border));
  border-radius: 18px; padding: 1.5rem 1.7rem; margin: 1.6rem 0;
  box-shadow: 0 22px 50px -42px rgba(20, 40, 80, .55);
}
.lyo-content .partenariat-lyophilise::before {
  content: "En partenariat avec";
  grid-column: 1 / -1;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--rz-primary);
}
.lyo-content .partenariat-lyophilise > p { margin: 0; }
.lyo-content .partenariat-lyophilise > p:first-of-type {
  grid-column: 1; grid-row: 2; color: var(--rz-ink); line-height: 1.65; font-size: .93rem;
}
.lyo-content .partenariat-lyophilise > p:last-of-type {
  grid-column: 2; grid-row: 2; display: flex; justify-content: center;
}
.lyo-content .partenariat-lyophilise > p:last-of-type img {
  width: 100%; max-width: 210px; height: auto;
  background: #fff; border: 1px solid var(--rz-border); border-radius: 12px;
  padding: .75rem; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .25);
}
.lyo-content .partenariat-lyophilise a { color: var(--rz-blue); font-weight: 600; }
@media (max-width: 640px) {
  .lyo-content .partenariat-lyophilise { grid-template-columns: 1fr; }
  .lyo-content .partenariat-lyophilise > p:first-of-type,
  .lyo-content .partenariat-lyophilise > p:last-of-type { grid-column: 1; grid-row: auto; }
  .lyo-content .partenariat-lyophilise > p:last-of-type { justify-content: flex-start; }
}