/* >>> HTE alimentation-betail */
/* ==========================================================================
   Lacadée Agro-Industrie — custom.css (UN SEUL fichier pour tout le site)
   Préfixe : hx-   ·   Breakpoints Elementor : 1024 px (tablette) / 767 px (mobile)
   Import : Mammouth H-TIC → Importer mes JSON → champ CSS, SANS fichier JSON (bloc « custom »).
   Les couleurs, tailles, espacements, fonds et arrondis des sections sont réglés dans le JSON (natif Elementor) ;
   ce fichier ne contient que ce qu'Elementor ne sait pas faire : polices, formes décoratives, listes (pastilles / cartes /
   étapes), bouton à pastille, composition de photos, habillage de la FAQ, animation d'apparition.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap");

:root {
  /* Palette relevée sur la maquette */
  --hx-ink: #12281C;        /* vert très foncé : textes */
  --hx-forest: #16301F;     /* fond des sections sombres */
  --hx-green: #2E7D50;      /* vert d'accent */
  --hx-yellow: #F6CD14;     /* jaune maïs */
  --hx-pale: #FCFDB2;       /* jaune pâle */
  --hx-cream: #FFFEF0;      /* fond clair */
  --hx-soft: #FFF9B8;       /* titres sur fond sombre */
  --hx-font-head: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --hx-font-body: "Figtree", system-ui, sans-serif;
  --hx-radius: 28px;
  --hx-shadow: 0 22px 50px rgba(18, 40, 28, .14);
}

/* ---------- Typographie (portée par des classes, jamais par un sélecteur nu) ---------- */
.hx-h1 .elementor-heading-title,
.hx-h2 .elementor-heading-title,
.hx-h3 .elementor-heading-title {
  font-family: var(--hx-font-head) !important;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
.hx-h1 .elementor-heading-title { font-weight: 700 !important; }
.hx-text,
.hx-text p,
.hx-text li,
.hx-btn .elementor-button { font-family: var(--hx-font-body) !important; }
.hx-text p { margin: 0 0 1em; }
.hx-text p:last-child { margin-bottom: 0; }
.hx-text strong { font-weight: 700; }
.hx-lead p { margin: 0; }
.hx-text a { color: var(--hx-green); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.hx-text a:hover { color: var(--hx-ink); }
.hx-sec--dark .hx-text a,
.hx-band__in .hx-text a { color: var(--hx-yellow); }
.hx-sec--dark .hx-text a:hover,
.hx-band__in .hx-text a:hover { color: #fff; }

/* Petit trait jaune au-dessus des titres (repris du filet sous « MAÏS · QUALITÉ · EXPERTISE ») */
.hx-h1 .elementor-heading-title::before,
.hx-h2 .elementor-heading-title::before {
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  margin-bottom: 20px;
  border-radius: 3px;
  background: var(--hx-yellow);
}
.hx-h1 .elementor-heading-title::before { width: 84px; height: 6px; margin-bottom: 26px; }
.hx-sec--pale .hx-h2 .elementor-heading-title::before { background: var(--hx-green); }
.hx-band__in .hx-h2 .elementor-heading-title::before { margin-inline: auto; }
.hx-h2--card .elementor-heading-title::before { width: 40px; height: 4px; margin-bottom: 14px; }

/* ---------- Sections ---------- */
.hx-sec { position: relative; overflow: hidden; }
.hx-hero { background-position: center center; background-size: cover; }
.hx-hero .hx-h1 .elementor-heading-title { text-shadow: 0 2px 28px rgba(0, 0, 0, .3); }
.hx-hero .hx-text { font-size: 1.15rem; }
.hx-hero--home .hx-text { font-size: 1.2rem; }
.hx-h1--home .elementor-heading-title { max-width: 22ch; }
.hx-hero::after {              /* voile bas du héros : raccord avec la section suivante */
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 120px;
  background: linear-gradient(to top, rgba(11, 42, 23, .55), rgba(11, 42, 23, 0));
  pointer-events: none;
}
.hx-hero .hx-stack { position: relative; z-index: 1; }

/* Colonnes collantes : le titre / la photo restent visibles pendant la lecture */
.hx-sticky { position: sticky; top: 110px; align-self: flex-start; }

/* ---------- Photos ---------- */
.hx-photo img { display: block; width: 100%; height: auto; object-fit: cover; }
.hx-photo--split img { aspect-ratio: 4 / 5; border-radius: var(--hx-radius); box-shadow: var(--hx-shadow); position: relative; z-index: 1; }
.hx-photo--round img { border-radius: var(--hx-radius) var(--hx-radius) 90px var(--hx-radius); }
.hx-photo--card img { aspect-ratio: 16 / 10; border-radius: 0; box-shadow: none; }
.hx-photo--strip img { aspect-ratio: 3 / 4; border-radius: var(--hx-radius); box-shadow: var(--hx-shadow); }
.hx-photo--inset img { aspect-ratio: 1 / 1; border-radius: 24px; border: 8px solid var(--hx-cream); box-shadow: var(--hx-shadow); }

/* Bloc jaune décalé derrière la photo */
.hx-media { position: relative; }
.hx-media::before {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -20px;
  width: 58%;
  height: 52%;
  border-radius: var(--hx-radius);
  background: var(--hx-yellow);
  z-index: 0;
}
.hx-sec--dark .hx-media::before { background: var(--hx-green); }
.hx-sec--pale .hx-media::before { background: #fff; }

/* Composition de deux photos (accueil) */
.hx-compose { position: relative; }
.hx-compose::before {
  content: "";
  position: absolute;
  right: -20px;
  top: -20px;
  width: 46%;
  height: 40%;
  border-radius: var(--hx-radius);
  background: var(--hx-yellow);
  z-index: 0;
}
.hx-compose .hx-photo--inset { position: absolute; left: -56px; bottom: -48px; width: 46%; z-index: 2; }

/* Bandeau de 3 photos : la photo du milieu est décalée */
.hx-strip__mid { margin-top: 56px; }

/* ---------- Cartes (sous-parties d'une section, familles de produits) ---------- */
.hx-card { position: relative; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease; }
.hx-card:not(.hx-card--family)::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--hx-yellow);
}
.hx-card:hover { transform: translateY(-6px); box-shadow: var(--hx-shadow); }
.hx-card--family { box-shadow: 0 18px 44px rgba(0, 0, 0, .28); }
.hx-card--family .hx-photo { width: 100%; }

/* ---------- Bandeau d'appel à l'action (photo + voile sombre, arrondi) ---------- */
.hx-band .hx-band__in { overflow: hidden; }
.hx-band .hx-h2 .elementor-heading-title { text-align: center; }
.hx-band .hx-text { margin-inline: auto; }

/* ---------- Bouton « lien à pastille » (maquette : ● DÉCOUVRIR NOS PRODUITS) ---------- */
.hx-btn .elementor-button { letter-spacing: .02em; transition: color .2s ease, transform .2s ease; }
.hx-btn .elementor-button-text { display: inline-flex; align-items: center; gap: .65em; }
.hx-btn .elementor-button-text::before {
  content: "–";
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background: var(--hx-yellow);
  color: var(--hx-ink);
  font-weight: 700;
  line-height: 1;
  transition: transform .25s ease;
}
.hx-btn .elementor-button:hover .elementor-button-text::before { transform: scale(1.18) rotate(90deg); }
.hx-btn--solid .elementor-button { box-shadow: 0 10px 28px rgba(0, 0, 0, .25); }
.hx-btn--solid .elementor-button-text::before { display: none; }
.hx-btn--solid .elementor-button:hover { transform: translateY(-2px); background: #ffd93a !important; }

/* ---------- Puces : pastilles jaunes (liste courte) ---------- */
.hx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.hx-chips li {
  margin: 0;
  padding: .65em 1.35em;
  border-radius: 28px;
  background: var(--hx-yellow);
  color: var(--hx-ink);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.3;
  text-transform: uppercase;
}
.hx-chips li strong { font-weight: 700; }
.hx-p { display: none; }        /* ponctuation de fin de puce : reste dans le texte, masquée à l'affichage */

/* ---------- Puces : cartes (liste longue) ---------- */
.hx-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hx-cards li {
  margin: 0;
  padding: 22px 26px;
  background: #fff;
  border-left: 5px solid var(--hx-yellow);
  border-radius: 16px;
  box-shadow: 0 8px 26px rgba(18, 40, 28, .08);
  line-height: 1.5;
}
.hx-sec--dark .hx-cards li { background: rgba(255, 255, 255, .08); box-shadow: none; color: var(--hx-cream); }
.hx-card .hx-cards { grid-template-columns: minmax(0, 1fr); }
.hx-card .hx-cards li { background: var(--hx-cream); box-shadow: none; }
.hx-markets .hx-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------- Étapes numérotées (liste -> « 01. ——— Titre ») ---------- */
.hx-numlist { list-style: none; counter-reset: hx-n; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 48px; }
.hx-numlist li {
  counter-increment: hx-n;
  position: relative;
  margin: 0;
  padding-top: 60px;
  font-family: var(--hx-font-head);
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--hx-green);
}
.hx-numlist li::before {
  content: counter(hx-n, decimal-leading-zero) ".";
  position: absolute;
  top: 0;
  left: 0;
  font-weight: 500;
  font-size: 1.5rem;
}
.hx-numlist li::after { content: ""; position: absolute; top: .85rem; left: 3.5rem; right: 0; height: 1px; background: var(--hx-green); }

/* ---------- Cartes d'étapes (paragraphes « 1. … ») ---------- */
.hx-step { transition: transform .25s ease, box-shadow .25s ease; }
.hx-step:hover { transform: translateY(-4px); box-shadow: var(--hx-shadow); }
.hx-step__txt p { margin: 0; }
.hx-step__txt strong { font-family: var(--hx-font-head); font-size: 1.15rem; color: var(--hx-green); }

/* ---------- Mise en page : rangées, listes, détails ---------- */
.hx-cards-grid { align-items: stretch; }
.hx-cards-grid .hx-card { align-self: stretch; }
.hx-families .hx-card--family > .e-con:last-child { flex: 1; }
.hx-story .hx-compose { margin-bottom: 28px; }
.hx-strip__i { min-width: 0; }
.hx-row > .e-con-inner > .e-con,
.hx-stack > .e-con-inner > .e-con { min-width: 0; }
.hx-steps { align-items: stretch; }
.hx-steps-n { padding-top: 8px; }
.hx-ul { width: 100%; }
.hx-ul--cards .elementor-widget-container,
.hx-ul--chips .elementor-widget-container,
.hx-ul--steps .elementor-widget-container { width: 100%; }
.hx-rule .elementor-divider { padding: 0; }
.hx-join .hx-text strong { color: var(--hx-green); }
.hx-stack .hx-text { max-width: 80ch; }

/* ---------- FAQ (accordéon natif Elementor, présenté en cartes) ---------- */
.hx-faq {
  --n-accordion-item-title-space-between: 14px;
  --n-accordion-border-style: solid;
  --n-accordion-border-width: 0;
  --n-accordion-border-color: rgba(18, 40, 28, .12);
  --n-accordion-border-radius: 20px;
  --n-accordion-title-normal-color: var(--hx-ink);
  --n-accordion-title-hover-color: var(--hx-green);
  --n-accordion-title-active-color: var(--hx-green);
  --n-accordion-icon-size: 16px;
}
.hx-faq .e-n-accordion-item {
  background: #fff;
  border: 1px solid rgba(18, 40, 28, .12);
  border-radius: 20px;
  padding: 0 26px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.hx-faq .e-n-accordion-item[open] { border-color: var(--hx-green); box-shadow: 0 14px 34px rgba(18, 40, 28, .1); }
.hx-faq .e-n-accordion-item-title { padding: 22px 0; gap: 20px; cursor: pointer; }
.hx-faq .e-n-accordion-item-title-text {
  font-family: var(--hx-font-head);
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--hx-ink);
}
.hx-faq .e-n-accordion-item[open] .e-n-accordion-item-title-text,
.hx-faq .e-n-accordion-item-title:hover .e-n-accordion-item-title-text { color: var(--hx-green); }
.hx-faq .e-n-accordion-item-title-icon { color: var(--hx-green); }
.hx-faq .e-n-accordion-item > .e-con { padding-inline: 0; }
.hx-sec--faq .e-n-accordion { width: 100%; }
.hx-faq,
.hx-faq .e-n-accordion { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Accessibilité ---------- */
.hx-btn .elementor-button:focus-visible,
.hx-faq .e-n-accordion-item-title:focus-visible,
.hx-text a:focus-visible {
  outline: 3px solid var(--hx-yellow);
  outline-offset: 3px;
  border-radius: 6px;
}
.hx-sec--cream .hx-btn .elementor-button:focus-visible,
.hx-sec--pale .hx-btn .elementor-button:focus-visible { outline-color: var(--hx-green); }

/* ---------- Apparition au scroll (active seulement si le JS a posé .hx-js sur <html>) ---------- */
.hx-js .hx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .75s ease, transform .75s ease; }
.hx-js .hx-reveal.hx-in { opacity: 1; transform: none; }
body.elementor-editor-active .hx-reveal { opacity: 1 !important; transform: none !important; }

/* ---------- Tablette ---------- */
@media (max-width: 1024px) {
  .hx-sticky { position: relative; top: auto; }
  .hx-numlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-markets .hx-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-photo--split img { aspect-ratio: 16 / 9; }
  .hx-media::before { right: -10px; bottom: -10px; }
  .hx-compose .hx-photo--inset { left: 16px; bottom: -36px; width: 36%; }
  .hx-compose::before { right: -10px; top: -10px; }
  .hx-stripwrap .hx-row > .e-con-inner { flex-direction: row !important; flex-wrap: nowrap; gap: 16px; }
  .hx-stripwrap .hx-row > .e-con-inner > .e-con { width: 32% !important; }
  .hx-strip__mid { margin-top: 32px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .hx-stripwrap .hx-row > .e-con-inner { flex-direction: column !important; }
  .hx-stripwrap .hx-row > .e-con-inner > .e-con { width: 100% !important; }
  .hx-strip__mid { margin-top: 0; }
  .hx-photo--strip img { aspect-ratio: 16 / 10; }
  .hx-numlist,
  .hx-cards,
  .hx-markets .hx-cards { grid-template-columns: minmax(0, 1fr); }
  .hx-numlist li { font-size: 1.45rem; }
  .hx-chips li { font-size: .85rem; padding: .6em 1.1em; }
  .hx-hero .hx-text,
  .hx-hero--home .hx-text { font-size: 1.05rem; }
  .hx-process { border-top-left-radius: 56px !important; }
  .hx-photo--split img { aspect-ratio: 4 / 3; }
  .hx-faq .e-n-accordion-item { padding: 0 18px; }
  .hx-faq .e-n-accordion-item-title-text { font-size: 1.05rem; }
  .hx-h1 .elementor-heading-title::before { width: 64px; margin-bottom: 18px; }
  .hx-band__in { border-radius: 28px !important; }
  .hx-compose .hx-photo--inset { width: 42%; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .hx-js .hx-reveal { opacity: 1; transform: none; transition: none; }
  .hx-btn .elementor-button,
  .hx-btn .elementor-button-text::before,
  .hx-step,
  .hx-card { transition: none; }
  .hx-step:hover,
  .hx-card:hover,
  .hx-btn--solid .elementor-button:hover { transform: none; }
}
/* <<< HTE alimentation-betail */