/* Home Nutrition Magazine : compléments de mise en page aux classes Tailwind du thème (préfixe bh-nm4k-). */

.bh-nm4k-home section[id] { scroll-margin-top: calc(var(--header-total, 104px) + 1rem); }

/* Hero : photo à gauche, texte à droite, hauteur de l'écran sous le header */
.bh-nm4k-hero {
  width: 100%;
  min-height: calc(100svh - var(--header-total, 104px));
  display: flex;
  align-items: center;
  padding-block: 1rem;
}
.bh-nm4k-hero-grille {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  align-items: center;
}
.bh-nm4k-hero-media { margin: 0; height: 26svh; }
.bh-nm4k-hero-texte { min-width: 0; }
@media (max-width: 639px) {
  .bh-nm4k-hero-tags { display: none; }
  .bh-nm4k-hero h1 { font-size: 1.75rem; line-height: 1.2; }
  .bh-nm4k-hero-texte > p { margin-top: 0.75rem; }
  .bh-nm4k-hero-boutons { margin-top: 1.25rem; }
}
@media (min-width: 768px) {
  .bh-nm4k-hero { padding-block: 2rem; }
  .bh-nm4k-hero-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 2rem; }
}
@media (min-width: 1024px) {
  .bh-nm4k-hero-grille { gap: 3.5rem; }
  .bh-nm4k-hero-media { height: calc(100svh - var(--header-total, 104px) - 4rem); max-height: 46rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .bh-nm4k-hero-media { height: calc(100svh - var(--header-total, 104px) - 4rem); max-height: none; }
}
@media (min-width: 640px) and (max-width: 767px) {
  .bh-nm4k-hero-media { height: 34svh; }
}

/* Étapes de l'étiquette : pastilles numérotées reliées par un trait (HowItWorks) */
.bh-nm4k-etapes-grille { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .bh-nm4k-etapes-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.bh-nm4k-etapes-liste { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: 1.75rem; }
.bh-nm4k-etapes-liste::before {
  content: ""; position: absolute; left: 1.25rem; top: 1.25rem; bottom: 1.25rem; width: 2px;
  background: var(--color-border, #e4dcf7);
}
.bh-nm4k-etape { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.bh-nm4k-etape-num {
  position: relative; z-index: 1; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--color-primary, #7c3aed); color: #fff; font-weight: 700;
}
.bh-nm4k-etapes-visuel { margin: 0; aspect-ratio: 16 / 10; max-height: 26rem; }
.bh-nm4k-etapes-visuel img { transition: opacity 0.18s ease; }
.bh-nm4k-etapes-visuel img.kv-change { opacity: 0.2; }

/* Bento : une grande carte et trois moyennes */
.bh-nm4k-bento-grille { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
.bh-nm4k-bento-img { aspect-ratio: 16 / 9; max-height: 15rem; }
@media (min-width: 768px) {
  .bh-nm4k-bento-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  /* une grande carte en tête, deux moyennes, une large en pied : aucune colonne sous 300 px */
  .bh-nm4k-bento-grande, .bh-nm4k-bento-grille > :nth-child(4) { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
  .bh-nm4k-bento-grande .bh-nm4k-bento-img, .bh-nm4k-bento-grille > :nth-child(4) .bh-nm4k-bento-img { height: 100%; max-height: 18rem; }
}

/* Interrupteur pilule (PricingTable du thème) pour la bascule et les onglets */
.bh-nm4k-interrupteur {
  display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; padding: 0.25rem;
  border-radius: 999px; background: var(--color-surface, #f7f4fc); border: 1px solid var(--color-border, #e4dcf7);
}
.bh-nm4k-interrupteur button { color: var(--color-text-muted, #4c4772); background: transparent; }
.bh-nm4k-interrupteur button.kv-actif,
.bh-nm4k-interrupteur button[aria-selected="true"] {
  background: var(--color-background, #fefcff); color: var(--color-text, #1e1b4b);
  box-shadow: 0 1px 3px rgb(30 27 75 / 0.12);
}
.bh-nm4k-bascule .kv-en-avant { outline: 2px solid var(--color-primary, #7c3aed); outline-offset: -2px; }

/* Quiz : une affirmation visible sans JS aussi */
.bh-nm4k-quiz [data-quiz]:not(.kv-pret) .bh-nm4k-question + .bh-nm4k-question { margin-top: 1.5rem; }

/* Photos de blocs : jamais plus hautes que 480 px */
.bh-nm4k-checklist-photo { margin: 0; aspect-ratio: 4 / 3; max-height: 30rem; }
.bh-nm4k-methode-photo { aspect-ratio: 16 / 6; max-height: 20rem; }
.bh-nm4k-saison-img { aspect-ratio: 16 / 10; max-height: 22rem; }

/* Lottie */
.bh-nm4k-lottie { width: 100%; max-width: 18rem; aspect-ratio: 1; }

/* Équipe : 5 auteurs, aucune carte seule sur sa rangée */
.bh-nm4k-equipe-grille { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .bh-nm4k-equipe-grille { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .bh-nm4k-equipe-grille > * { grid-column: span 2; }
  .bh-nm4k-equipe-grille > :nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 1024px) { .bh-nm4k-equipe-grille { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .bh-nm4k-equipe-grille > *, .bh-nm4k-equipe-grille > :nth-child(4) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .bh-nm4k-home * { transition: none !important; }
}

/* Quiz : boutons lisibles quel que soit le mode (couleurs du thème, pas les --c-* qui s'inversent) */
/* Boutons du thème : rounded-md, secondaire bordé (Vrai/Faux), primaire plein (Suivante) */
.bh-nm4k-quiz [data-quiz] .kv-bouton,
.bh-nm4k-quiz [data-quiz] button { color: var(--color-text, #1e1b4b); background: var(--color-background, #fefcff); border: 1px solid var(--color-border, #e4dcf7); border-radius: 0.375rem; padding: 0.625rem 1.25rem; font-weight: 500; min-height: 44px; transform: none; transition: background-color .2s, color .2s, border-color .2s; }
.bh-nm4k-quiz [data-quiz] .kv-choix .kv-bouton:hover { background: var(--color-surface, #f7f4fc); transform: none; }
.bh-nm4k-quiz [data-quiz] .kv-bouton.kv-choisi { background: var(--color-primary, #7c3aed); border-color: var(--color-primary, #7c3aed); color: #fff; }
.bh-nm4k-quiz [data-quiz] .kv-suivante,
.bh-nm4k-quiz [data-quiz] .kv-encore { background: var(--color-primary, #7c3aed); border-color: var(--color-primary, #7c3aed); color: #fff; box-shadow: 0 1px 2px rgba(30, 27, 75, .08); }
.bh-nm4k-quiz [data-quiz] .kv-suivante:hover:not(:disabled),
.bh-nm4k-quiz [data-quiz] .kv-encore:hover { background: var(--color-primary-dark, #5b21b6); border-color: var(--color-primary-dark, #5b21b6); transform: none; }
.bh-nm4k-quiz [data-quiz] .kv-suivante:disabled { opacity: .55; cursor: not-allowed; }
/* Progression : barre fine arrondie, fond primary/10, remplissage primary */
.bh-nm4k-quiz .kv-quiz-prog { gap: 0; height: 6px; border-radius: 9999px; background: rgba(124, 58, 237, .1); overflow: hidden; }
.bh-nm4k-quiz .kv-quiz-prog span { height: 6px; border: 0; background: transparent; }
.bh-nm4k-quiz .kv-quiz-prog span::after { background: var(--color-primary, #7c3aed); }
.bh-nm4k-quiz [data-quiz] { color: var(--color-text, #1e1b4b); max-width: 48rem; margin-inline: auto; }

/* Étapes : les étapes inactives restent lisibles ; l'active = pastille pleine + fond et bordure primary */
.bh-nm4k-etapes [data-etape] { opacity: 1; transform: none; padding: 0.75rem; margin: -0.75rem; border-radius: 0.5rem; border: 1px solid transparent; transition: background-color .3s ease, border-color .3s ease; }
.bh-nm4k-etapes [data-etape] h3 { color: var(--color-text, #1e1b4b); }
.bh-nm4k-etapes [data-etape] p { color: var(--color-text-muted, #4c4772); }
.bh-nm4k-etapes [data-etapes]:has(.kv-actif) [data-etape]:not(.kv-actif) .bh-nm4k-etape-num { background: var(--color-background, #fefcff); color: var(--color-primary-dark, #5b21b6); box-shadow: inset 0 0 0 2px var(--color-primary, #7c3aed); }
.bh-nm4k-etapes [data-etape].kv-actif { opacity: 1; transform: none; background: var(--color-background, #fefcff); border-color: var(--color-primary, #7c3aed); }
.bh-nm4k-etapes [data-etape].kv-actif .bh-nm4k-etape-num { background: var(--color-primary, #7c3aed); border-color: var(--color-primary, #7c3aed); color: #fff; }

/* Lottie : image de repli visible sans JS, avant chargement et en mouvement réduit */
.bh-nm4k-lottie { position: relative; }
.bh-nm4k-lottie-repli { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0.5rem; }
.bh-nm4k-lottie:has(svg) .bh-nm4k-lottie-repli { display: none; }

/* Derniers décryptages : liste éditoriale, une carte par ligne */
.bh-nm4k-derniers-liste { max-width: 900px; margin-inline: auto; }
@media (min-width: 640px) { .bh-nm4k-derniers-vignette { width: 14rem; } .bh-nm4k-derniers-liste > a { align-items: center; } }

/* Calculateur : colonne de saisie assez large en mobile (texte de repère > 300 px) */
@media (max-width: 639px) {
  [data-usine-bloc="calculateur-sucre"] form[data-calcul] > div { padding-inline: 0.75rem; }
}

/* Quiz : la section prend toute la largeur (la classe générique .bh-nm4k-quiz de da.css la bridait à 46rem) ;
   seule la carte [data-quiz] reste centrée à l'intérieur */
section.bh-nm4k-quiz[data-usine-bloc="quiz-vrai-faux"] { max-width: none; margin-inline: 0; display: block; }