/* Nutrition.fr — home page. Every rule is scoped to .nf-home so the rest of the site is untouched. */
.nf-home {
  --nf-green-900: #173f2a;
  --nf-green-800: #1e5235;
  --nf-ink: #1d2a22;
  --nf-muted: #3d4b43;
  --nf-cream: #faf6ef;
  --nf-card: #f3ece1;
  --nf-sage: #e2ebd8;
  --nf-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --nf-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family: var(--nf-sans);
  color: var(--nf-ink);
  overflow-x: clip;
}

.nf-home *,
.nf-home *::before,
.nf-home *::after {
  box-sizing: border-box;
}

.nf-home .nf-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.nf-home .nf-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.nf-home .nf-section-title {
  margin: 0;
  font-family: var(--nf-serif);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--nf-green-900);
}

/* Astra underlines content links (.ast-single-post .entry-content a); buttons and cards must not be. */
.nf-home a.nf-btn.nf-btn,
.nf-home a.nf-idea__link.nf-idea__link {
  text-decoration: none;
}

/* Buttons */
.nf-home .nf-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border: 2px solid var(--nf-green-800);
  border-radius: 10px;
  font-family: var(--nf-sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.nf-home .nf-btn--primary {
  background: var(--nf-green-800);
  color: #fff;
}

.nf-home .nf-btn--primary:hover {
  background: var(--nf-green-900);
  border-color: var(--nf-green-900);
  color: #fff;
}

.nf-home .nf-btn--secondary,
.nf-home .nf-btn--ghost {
  background: #fff;
  color: var(--nf-green-900);
}

.nf-home .nf-btn--secondary:hover,
.nf-home .nf-btn--ghost:hover {
  background: #eef4ea;
  color: var(--nf-green-900);
}

.nf-home .nf-btn:focus-visible,
.nf-home .nf-idea__link:focus-visible,
.nf-home .nf-medial__link:focus-visible {
  outline: 3px solid #2f7a4c;
  outline-offset: 3px;
}

.nf-home .nf-btn[aria-disabled="true"] {
  cursor: progress;
  opacity: 0.75;
}

/* 1. First screen */
.nf-home .nf-hero {
  position: relative;
  display: flex;
  align-items: center;
  /* Same ratio as the photo: never cropped on desktop, so the dish always stays right of the text column. */
  aspect-ratio: 2240 / 701;
  max-height: 640px;
  background: #fff;
  isolation: isolate;
}

.nf-home .nf-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}

.nf-home .nf-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Keeps the text area white even when the image is cropped on narrower desktops. */
.nf-home .nf-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.96) 34%, rgba(255, 255, 255, 0.7) 46%, rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.nf-home .nf-hero__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px;
}

.nf-home .nf-hero__content {
  max-width: min(640px, 50vw);
}

.nf-home .nf-hero__title {
  margin: 0 0 18px;
  font-family: var(--nf-serif);
  font-size: clamp(2.1rem, 1.1rem + 2.9vw, 3.45rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--nf-green-900);
}

.nf-home .nf-hero__lead {
  margin: 0 0 28px;
  font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem);
  line-height: 1.45;
  color: var(--nf-muted);
}

.nf-home .nf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* 2. Ideas for today */
.nf-home .nf-ideas {
  padding: 48px 0 56px;
  background: var(--nf-cream);
}

.nf-home .nf-ideas__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 24px;
}

.nf-home .nf-ideas__more {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.95rem;
}

.nf-home .nf-ideas__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: opacity 0.2s ease;
}

.nf-home .nf-ideas__list[aria-busy="true"] {
  opacity: 0.7;
}

.nf-home .nf-idea {
  margin: 0;
  min-width: 0;
}

.nf-home .nf-idea__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: 14px;
  background: var(--nf-card);
  box-shadow: 0 1px 2px rgba(29, 42, 34, 0.06), 0 6px 18px rgba(29, 42, 34, 0.07);
  color: var(--nf-ink);
  text-decoration: none;
}

.nf-home .nf-idea__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e8e0d3;
}

.nf-home .nf-idea__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.nf-home .nf-idea__link:hover .nf-idea__media img {
  transform: scale(1.03);
}

.nf-home .nf-idea__title {
  display: block;
  padding: 14px 18px 16px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.nf-home a.nf-idea__link:hover .nf-idea__title {
  color: var(--nf-green-800);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nf-home .nf-ideas__error {
  margin: 16px 0 0;
  color: #8a2b1f;
  font-weight: 600;
}

.nf-home .nf-ideas__empty a {
  color: var(--nf-green-800);
}

/* 3. Médial band (the calculator itself follows in its own Elementor block, #medial-imc) */
.nf-home .nf-medial {
  padding: 28px 0;
  background: var(--nf-sage);
}

.nf-home .nf-medial__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}

.nf-home .nf-medial__text {
  margin: 6px 0 0;
  color: var(--nf-muted);
}

.nf-home .nf-medial__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--nf-green-900);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Tablet and mobile: text and actions first, dish below. */
@media (max-width: 1099px) {
  .nf-home .nf-hero {
    display: block;
    aspect-ratio: auto;
    max-height: none;
  }

  .nf-home .nf-hero::before {
    content: none;
  }

  .nf-home .nf-hero__media {
    position: static;
    z-index: auto;
  }

  .nf-home .nf-hero__img {
    height: clamp(190px, 52vw, 360px);
    object-position: 45% 50%;
  }

  .nf-home .nf-hero__inner {
    padding: 28px 20px 24px;
  }

  .nf-home .nf-hero__content {
    max-width: 680px;
  }
}

@media (max-width: 767px) {
  .nf-home .nf-wrap {
    padding: 0 16px;
  }

  .nf-home .nf-hero__inner {
    padding: 22px 16px 20px;
  }

  .nf-home .nf-hero__title {
    margin-bottom: 12px;
  }

  .nf-home .nf-hero__lead {
    margin-bottom: 20px;
  }

  .nf-home .nf-hero__actions {
    flex-direction: column;
    gap: 10px;
  }

  .nf-home .nf-hero__actions .nf-btn {
    width: 100%;
  }

  .nf-home .nf-ideas {
    padding: 32px 0 40px;
  }

  /* Native horizontal scrolling with a peek of the next card. */
  .nf-home .nf-ideas__list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 80%;
    gap: 14px;
    margin: 0 -16px;
    padding: 2px 16px 10px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    -webkit-overflow-scrolling: touch;
  }

  .nf-home .nf-idea {
    scroll-snap-align: start;
  }

  .nf-home .nf-medial__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nf-home .nf-idea__media img,
  .nf-home .nf-ideas__list,
  .nf-home .nf-btn {
    transition: none;
  }
}

/* Protein calculator shortcut (between ideas and Médial band). */
.nf-home .nf-tool{background:#fff;padding:8px 0 48px}
.nf-home .nf-tool__card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--nf-sage);border-radius:22px;padding:30px 34px}
.nf-home .nf-tool__kicker{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--nf-green-800)}
.nf-home .nf-tool__title{margin:0 0 10px;font-family:var(--nf-serif);font-size:clamp(24px,3vw,32px);line-height:1.15;color:var(--nf-green-900)}
.nf-home .nf-tool__text{margin:0 0 18px;color:var(--nf-muted);font-size:16px;line-height:1.5}
.nf-home .nf-tool__ex{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.nf-home .nf-tool__ex li{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;background:#fff;border-radius:14px;padding:12px 16px;box-shadow:0 4px 14px rgba(23,63,42,.06)}
.nf-home .nf-tool__ex b{color:var(--nf-green-900);font-size:18px;white-space:nowrap}
.nf-home .nf-tool__st{color:#a86f00;letter-spacing:1px;white-space:nowrap}.nf-home .nf-tool__st span{color:#d5d5d5}
.nf-home .nf-tool__src{margin:10px 0 0;font-size:12px;color:var(--nf-muted)}
@media (max-width:767px){.nf-home .nf-tool{padding:4px 0 36px}.nf-home .nf-tool__card{grid-template-columns:1fr;gap:18px;padding:22px 18px;border-radius:18px}.nf-home .nf-tool__ex li{padding:10px 12px;gap:10px}.nf-home .nf-tool__ex b{font-size:16px}}
#medial-imc .medial-box--prot{border:2px solid #0e5a44}
#medial-imc .medial-prot-val{font-size:28px;font-weight:700;color:#0e5a44;margin:6px 0}
#medial-imc a.medial-prot-link{display:inline-block;margin-top:6px;padding:10px 16px;border-radius:12px;background:#e8f3ee;color:#0e5a44;font-weight:700;text-decoration:none}