/* ============================================================
   NEXAGRI — Home stylesheet
   Tokens : voir tokens.css (couleurs/typo/radius/espacements).
   Aucune valeur hex en dur ici : tout passe par var(--...).
   Image unique provisoire = assets/tracteur.png.
   ============================================================ */

/* --- Constantes locales ------------------------------------- */
:root {
  --img-tracteur: url("../assets/tracteur.webp");
  --img-welcome:  url("../assets/welcome.webp");
  --header-h: 96px;
  --header-h-shrunk: 60px;
  --container-pad: clamp(24px, 4vw, 64px);
}

/* --- Reset minimal ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
/* `overflow-x: clip` NÉCESSAIRE pour éviter le scroll horizontal
   créé par les éléments en overflow visuel (hero photo, tractor
   CTA) ; `clip` au lieu de `hidden` car `hidden` casserait
   `position: sticky` sur le header. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  /* Sticky footer : si la page n'a pas assez de contenu (ex. actualités vide),
     le main remplit la hauteur restante et le footer reste en bas. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
img { max-width: 100%; display: block; }
a {
  color: inherit;
  text-decoration: none;
}
a:hover, a:focus-visible { text-decoration: underline; }
h1, h2, h3 { margin: 0; line-height: var(--lh-display); font-family: var(--font-display); }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}

/* Smooth scroll natif pour les ancres internes (CTA "Découvrir le produit" etc.).
   `scroll-padding-top` compense la hauteur du header sticky. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}


/* ============================================================
   LOGO SVG — composant inline (header + footer)
   Géométrie : N tronqué, E sans spine à 3 barres (signature
   visuelle Nexagri). Fills pilotés par CSS (tokens).
   ============================================================ */
.logo {
  display: block;
  block-size: auto;
}
/* Couleurs par défaut (variant header) */
.logo__nex  { fill: var(--c-principale); }
.logo__agri { fill: var(--c-secondaire); }

/* Variant footer : NEX en blanc */
.logo--footer .logo__nex { fill: var(--c-blanc); }

/* Tailles */
.logo--header { width: 168px; }
.logo--footer { width: clamp(160px, 18vw, 280px); }


/* ============================================================
   BUTTON — pilule, rect, light/dark
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.85em;
  border: 0;
  cursor: pointer;
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover, .btn:focus-visible { text-decoration: none; }

.btn--pill { padding: 0.95em 1.6em; border-radius: var(--radius-pill); }
.btn--rect { padding: 1em 1.7em; border-radius: 14px; }

/* Variantes — au survol, INVERSION des couleurs.
   Transition rapide et univoque sur fond/texte. */
.btn {
  transition: background-color .22s ease, color .22s ease;
}
.btn--light {
  background: var(--c-secondaire);
  color: var(--c-principale);
}
.btn--light:hover,
.btn--light:focus-visible {
  background: var(--c-principale);
  color: var(--c-blanc);
}
.btn--dark {
  background: var(--c-principale);
  color: var(--c-blanc);
}
.btn--dark:hover,
.btn--dark:focus-visible {
  background: var(--c-secondaire);
  color: var(--c-principale);
}

/* La flèche-cercle interne hérite naturellement de `currentColor`
   mais son fond doit aussi s'inverser */
.btn--dark .btn__arrow {
  background: var(--c-blanc);
  color: var(--c-principale);
}
.btn--dark:hover .btn__arrow,
.btn--dark:focus-visible .btn__arrow {
  background: var(--c-principale);
  color: var(--c-secondaire);
}

/* Flèche fine (ligne + chevron) — bouton « Voir le catalogue complet » */
.btn__arrow-line {
  width: 36px;
  height: 12px;
  margin-left: 0.4em;
  flex: 0 0 auto;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* TODO:CONFIRM états hover/focus — non spécifiés */


/* ============================================================
   HEADER (sticky, fond blanc)
   ============================================================ */
/* Header FIXED + shrink au scroll (classe `.is-shrunk` ajoutée
   par JS au-delà de ~40 px). `fixed` plutôt que `sticky` : ne
   dépend d'aucune contrainte d'overflow ancestrale, garantit
   que la nav reste collée au haut de la fenêtre quoi qu'il
   arrive. Z-index très élevé : passe devant vidéo hero, coverflow
   3D, image tracteur en overflow, etc. */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--c-blanc);
  block-size: var(--header-h);
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  transition: block-size .25s ease, box-shadow .25s ease;
}
/* Le hero a déjà un padding-top qui couvre la hauteur du header,
   donc le contenu n'est PAS masqué par l'header fixe. Les autres
   sections passent sous l'header au scroll — comportement voulu. */
.site-header.is-shrunk {
  block-size: calc(var(--header-h) * 0.5);
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}
.site-header__logo svg { transition: transform .25s ease; transform-origin: left center; }
.site-header.is-shrunk .site-header__logo svg { transform: scale(0.7); }
.site-header__actions .btn { transition: padding .25s ease, font-size .25s ease; }
.site-header.is-shrunk .site-header__actions .btn { padding: 0.5em 1em; }
.site-nav__list { transition: font-size .25s ease; }
.site-header.is-shrunk .site-nav__list { font-size: calc(var(--fs-small) * 0.9); }
.site-header__inner {
  display: flex;
  align-items: center;
  block-size: 100%;
  gap: var(--space-4);
}
.site-header__logo { display: inline-flex; }

.site-nav { margin-left: auto; }
.site-nav__list {
  display: flex;
  gap: var(--space-4);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  font-size: var(--fs-small);
}
.site-nav__list a {
  color: var(--c-principale);
  text-transform: uppercase;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: var(--space-4);
}
.site-header__actions .btn { padding: 0.7em 1.4em; font-size: var(--fs-small); }



/* ============================================================
   HERO — fond vert sombre, H1 blanc à gauche, tracteur à droite
   débordant en bas (sous la limite hero -> blanc).
   ============================================================ */
.hero {
  position: relative;
  isolation: isolate;
  background: var(--c-principale);
  padding-block: clamp(70px, 8vw, 130px) clamp(90px, 11vw, 180px);
  min-block-size: clamp(380px, 58vh, 600px);
  overflow: visible;
  /* Pousse le hero entier (fond + vidéo + overlay + contenu)
     SOUS la nav bar fixée : plus aucun élément du hero ne passe
     derrière l'header. */
  margin-top: var(--header-h);
}
/* Vidéo de fond (muted, autoplay, loop). Le hero entier étant
   poussé sous la nav par `margin-top`, la vidéo peut couvrir
   tout le hero (inset: 0) sans passer derrière la nav. */
.hero__video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  z-index: -2;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: var(--photo-overlay-dark);
  z-index: -1;
  pointer-events: none;
}
/* TODO:CONFIRM overlay hero — opacité exacte */

.hero__content { position: relative; }

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(35px, 4.32vw, 74px);
  color: var(--c-blanc);
  max-width: 16ch;
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}

/* Bouton hero : la couleur du texte par défaut est déjà
   `--c-principale` via `.btn--light`. La règle de hover globale
   inverse en blanc, donc on n'écrase RIEN ici (l'ancien override
   `.hero .btn--light { color: var(--c-principale); }` masquait
   l'inversion blanche au survol — bug corrigé). */

/* Photo tracteur ancrée bas-droite, débordant la bande hero.
   - Largeur réduite de 15 % par rapport à la version précédente.
   - `right` POSITIF pour garder la photo entièrement dans le
     viewport (pas de coupe à droite). */
.hero__photo {
  position: absolute;
  right: clamp(16px, 2vw, 48px);
  bottom: clamp(-180px, -11vw, -90px);
  width: clamp(265px, 30.9vw, 597px);
  max-width: none;
  pointer-events: none;
}


/* ============================================================
   SECTION : Nos gammes de poulies
   ============================================================ */
/* Section compressée pour tenir dans 1080 px de viewport sur
   desktop. Réduction agressive des marges verticales. */
.poulies {
  padding-block: clamp(40px, 4vw, 64px) clamp(24px, 3vw, 48px);
  background: var(--c-blanc);
  text-align: center;
}
.poulies .section-subtitle { margin-bottom: var(--space-2); }
.poulies__models { margin: var(--space-1) 0 var(--space-2); }

.eyebrow {
  font-family: var(--font-base);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  letter-spacing: 0.04em;
  color: var(--c-principale);
  margin: 0 0 var(--space-1);
}

.section-title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 2.25vw, 38px);
  color: var(--c-principale);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.01em;
}
.section-title--left   { text-align: left;  max-width: 18ch; margin-bottom: var(--space-5); }
.section-title--accent { color: var(--c-secondaire); }

.section-subtitle {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
  font-size: var(--fs-body);
}

.poulies__models {
  font-size: clamp(11px, 1.2vw, 18px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  margin: var(--space-1) 0 var(--space-2);
  color: var(--c-principale);
}

/* --- Coverflow (style iTunes) ------------------------------- */
.coverflow {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  perspective: 1600px;
  perspective-origin: center 60%;
  /* Hauteur réduite pour permettre à toute la section de tenir
     dans une fenêtre 1920×1080. */
  block-size: clamp(240px, 22vw, 360px);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Flèches positionnées aux extrémités du coverflow */
.coverflow > .carousel__arrow {
  position: absolute;
  top: 40%;
  z-index: 10;
}
.coverflow > .carousel__arrow--prev { left: 0; }
.coverflow > .carousel__arrow--next { right: 0; }

.coverflow__track {
  position: relative;
  width: 100%;
  block-size: 100%;
  transform-style: preserve-3d;
}
.coverflow__item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(200px, 22vw, 320px);
  transform-origin: center center;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .55s ease;
  will-change: transform, opacity;
}
.coverflow__item img {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 4;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-img);
}
.coverflow__model {
  position: absolute;
  left: 50%;
  bottom: -28px;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

/* Disposition coverflow : profondeur 3D accentuée — les
   items non-sélectionnés sont nettement réduits et éloignés
   pour mettre le slide central en valeur. */
.coverflow__item--center {
  z-index: 5;
  opacity: 1;
  transform: translate(-50%, -50%) translateZ(0) rotateY(0deg) scale(1);
}
.coverflow__item--left {
  z-index: 3;
  opacity: 0.45;
  transform: translate(-150%, -50%) translateZ(-260px) rotateY(48deg) scale(0.62);
}
.coverflow__item--right {
  z-index: 3;
  opacity: 0.45;
  transform: translate(50%, -50%) translateZ(-260px) rotateY(-48deg) scale(0.62);
}
.coverflow__item--far-left {
  z-index: 1;
  opacity: 0.18;
  transform: translate(-260%, -50%) translateZ(-520px) rotateY(58deg) scale(0.38);
}
.coverflow__item--far-right {
  z-index: 1;
  opacity: 0.18;
  transform: translate(160%, -50%) translateZ(-520px) rotateY(-58deg) scale(0.38);
}
/* Slides hors-champ (au-delà des 5 slots visibles) */
.coverflow__item--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) translateZ(-900px) scale(0.25);
}

/* L'image du slide reste devant la spec-card (qui passe en
   arrière-plan, cf. règle suivante). */
.coverflow__item img {
  position: relative;
  z-index: 2;
}

/* Flèches rondes (contour fin, gris) */
.carousel__arrow {
  inline-size: 26px;
  block-size: 26px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--color-text-muted);
  color: var(--c-principale);
  font-size: 14px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}

/* Carte specs foncée (gabarit sans chiffres).
   Positionnée DERRIÈRE l'image du slide centre, dépasse vers
   le bas — le texte vit dans la portion visible sous l'image.
   Animation : translation bas→haut + fade au montage du center. */
.spec-card {
  position: absolute;
  left: 50%;
  /* Le haut de la carte démarre EN BAS de l'image (top: 100%) :
     la carte ne se superpose pas à l'image, le texte ne peut donc
     plus être coupé. Elle s'anime toujours de bas en haut. */
  top: 100%;
  bottom: auto;
  margin-top: -8px;  /* léger chevauchement décoratif (8 px) sous le bord image */
  width: 84%;
  z-index: 1;
  background: var(--color-card-dark);
  color: var(--c-blanc);
  border-radius: var(--radius-card);
  padding: 14px 22px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  /* État par défaut (slides non-center) : invisible et translaté */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 24px);
  transition:
    transform .65s cubic-bezier(.2, .7, .2, 1),
    opacity .45s ease,
    visibility 0s linear .45s;
}
/* Slide center → carte révélée (translateY remis à 0, fade-in) */
.coverflow__item--center .spec-card {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    transform .65s cubic-bezier(.2, .7, .2, 1) .15s,
    opacity .45s ease .15s,
    visibility 0s linear 0s;
}
.spec-card__model {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(12px, 1vw, 16px);
  letter-spacing: 0.04em;
  margin: 0 0 var(--space-1);
}
.spec-card__note {
  margin: 0;
  font-size: var(--fs-small);
  opacity: 0.7;
}

/* Pagination : petits points + barre active large.
   Marge haute généreuse pour laisser passer la spec-card qui
   déborde sous l'image centrale. */
.carousel__dots {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  align-items: center;
  /* marge haute suffisante pour passer sous la spec-card qui
     dépasse maintenant complètement SOUS l'image (top: 100%) */
  margin: clamp(110px, 9vw, 150px) 0 var(--space-2);
}
.carousel__dots button {
  inline-size: 10px;
  block-size: 10px;
  border-radius: 999px;
  background: var(--color-text-muted);
  border: 0;
  padding: 0;
  cursor: pointer;
}
.carousel__dots .is-active {
  inline-size: 56px;
  block-size: 8px;
  border-radius: 999px;
  background: var(--c-secondaire);
}

.poulies__mention {
  max-width: 64ch;
  margin: var(--space-2) auto var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--fs-small);
}

.poulies__cta { margin-top: var(--space-2); }


/* ============================================================
   SECTION : Pourquoi Nexagri — 4 cartes savoir-faire.
   Composition alignée sur le reste du site :
   - en-tête centré (eyebrow + titre + intro), comme la section
     poulies ;
   - 4 cartes vert clair → bascule vert foncé au survol ;
   - chaque carte : indice "01/02/03/04" en filigrane (signature
     industrielle), icône en médaillon, titre, texte.
   ============================================================ */
.reasons {
  padding-block: clamp(56px, 6vw, 96px) clamp(48px, 5vw, 84px);
  background: var(--c-blanc);
}
.reasons__inner { text-align: center; }
.reasons__header {
  max-width: 760px;
  margin: 0 auto clamp(48px, 6vw, 92px);
}
.reasons__intro {
  margin-inline: auto;
  margin-bottom: 0;
  max-width: 54ch;
}

.reason-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 28px);
  align-items: stretch;
  text-align: left;
}

.reason-card {
  position: relative;
  border-radius: var(--radius-card);
  /* padding-top généreux pour laisser le pictogramme respirer en
     haut à droite, padding-right normal (le picto est petit). */
  padding: clamp(40px, 4vw, 56px) var(--space-3) var(--space-4);
  min-height: 240px;
  color: var(--c-blanc);
  display: flex;
  flex-direction: column;
  background: var(--color-card-light);
  overflow: hidden;
  transition: background .3s ease, transform .3s ease;
  cursor: default;
}
.reason-card:hover,
.reason-card:focus-within {
  background: var(--color-card-dark);
  transform: translateY(-4px);
}

/* Pictogramme Material Symbols (Google Icons) en haut à droite,
   blanc, parfaitement visible : signale d'un coup d'œil le sujet
   de la carte (factory / grid / verified / support_agent). */
.reason-card__pictogram {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  inline-size: 32px;
  block-size: 32px;
  color: var(--c-blanc);
  opacity: 0.85;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.reason-card__pictogram svg {
  width: 100%;
  height: 100%;
  display: block;
}
.reason-card:hover .reason-card__pictogram,
.reason-card:focus-within .reason-card__pictogram {
  opacity: 1;
  transform: scale(1.06);
}

.reason-card__title {
  position: relative;
  margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(15px, 1.3vw, 22px);
  letter-spacing: 0.01em;
}
/* Trait d'accent sous le titre : signature graphique commune avec
   les boutons (lignes fines) du reste du site. */
.reason-card__title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  inline-size: 28px;
  block-size: 2px;
  background: var(--c-blanc);
  opacity: 0.55;
  transition: inline-size .3s ease, opacity .3s ease;
}
.reason-card:hover .reason-card__title::after,
.reason-card:focus-within .reason-card__title::after {
  inline-size: 44px;
  opacity: 0.9;
}

.reason-card__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.55;
  position: relative;
  z-index: 1;
}


/* ============================================================
   SECTION : Bienvenue chez Nexagri
   Composition alignée sur le reste du site :
   - photo circulaire à gauche, légèrement décalée et entourée
     d'un anneau d'accent vert clair (signature graphique) ;
   - colonne droite : eyebrow + titre (avec mot accent) + lead +
     paragraphes corps + signature dirigeant en bloc structuré.
   ============================================================ */
.welcome {
  padding-block: clamp(48px, 6vw, 110px);
  background: var(--c-blanc);
}
.welcome__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: center;
}

/* --- Média : photo ronde + anneau d'accent décalé ---------- */
.welcome__media {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 1 / 1;
  justify-self: center;
}
.welcome__photo {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background-image: var(--img-welcome);
  background-size: cover;
  background-position: center;
  z-index: 2;
}
/* Anneau d'accent décalé en arrière-plan : signature visuelle
   reprise des autres sections (trait/accent vert clair). */
.welcome__media::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid var(--c-secondaire);
  transform: translate(18px, 18px);
  z-index: 1;
  pointer-events: none;
}

/* --- Copy : eyebrow + titre + lead + paragraphes + signature */
.welcome__copy { text-align: left; }
.welcome__copy .eyebrow { margin-bottom: var(--space-1); }
.welcome__copy .section-title {
  max-width: 14ch;
  margin-bottom: var(--space-3);
}
.welcome__lead {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(15px, 1.25vw, 21px);
  line-height: 1.4;
  color: var(--c-principale);
  margin: 0 0 var(--space-4);
  max-width: 38ch;
  position: relative;
  padding-left: var(--space-3);
}
/* Trait vertical vert clair (rappel signature : accent stripe) */
.welcome__lead::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  inline-size: 3px;
  background: var(--c-secondaire);
  border-radius: 2px;
}
.welcome__copy > p {
  color: var(--color-text-muted);
  max-width: 56ch;
  margin: 0 0 var(--space-3);
  line-height: 1.6;
}

/* Signature dirigeant : bloc structuré (nom + rôle), filet
   d'accent fin au-dessus pour le séparer du corps. */
.welcome__signature {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid color-mix(in srgb, var(--c-principale) 15%, transparent);
  max-width: 56ch;
}
.welcome__signature-name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(15px, 1.2vw, 20px);
  color: var(--c-principale);
  letter-spacing: -0.005em;
}
.welcome__signature-role {
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-secondaire);
}


/* ============================================================
   BANDE CTA — Obtenez votre devis personnalisé
   Maquette : bande pleine largeur en vert foncé, carte BLANCHE
   arrondie à gauche (~55-60 %), tracteur+enrouleur à droite
   débordant le HAUT de la bande (extend up above the band).
   ============================================================ */
.cta-band {
  position: relative;
  background: var(--color-bg-dark);
  padding-block: clamp(48px, 5vw, 96px) clamp(36px, 4vw, 72px);
  overflow: visible;
  margin-top: clamp(24px, 4vw, 72px); /* espace pour overflow tractor */
}
.cta-band__inner {
  position: relative;
  display: block;
  min-height: 320px;
}
/* Carte blanche : couvre toute la largeur du container (gouttières
   conservées) ; l'image vient SE POSER au-dessus à droite. */
.cta-card {
  background: var(--c-blanc);
  color: var(--c-principale);
  border-radius: var(--radius-card);
  padding: clamp(32px, 4vw, 64px);
  width: 100%;
  /* Texte contraint à gauche : aucune ligne ne peut déborder
     sous la zone occupée par le tracteur (maintenant plus large). */
  padding-right: clamp(54%, 58%, 62%);
  min-height: 320px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.cta-card .btn { align-self: flex-start; }
@media (max-width: 900px) {
  .cta-card { padding-right: clamp(32px, 4vw, 64px); }
}
/* Titre contraint pour qu'il reste à GAUCHE du tracteur et ne
   passe pas derrière l'image (qui occupe environ la moitié
   droite). 14ch ≈ "Obtenez votre" + retour à la ligne. */
.cta-card .section-title {
  margin-bottom: var(--space-2);
  max-width: 14ch;
  word-wrap: break-word;
}
.cta-card p {
  color: var(--color-text-muted);
  font-size: var(--fs-small);
  max-width: 36ch;
  margin-bottom: var(--space-3);
}

/* Tracteur débordant LE HAUT de la bande (s'étire au-dessus
   de la ligne supérieure du bandeau vert). Image inversée
   horizontalement à la demande client. */
.cta-band__photo {
  position: absolute;
  right: 0;
  top: clamp(-140px, -10vw, -80px);
  width: clamp(460px, 46vw, 800px);
  max-width: none;
  pointer-events: none;
  z-index: 2;
  transform: scaleX(-1);
}


/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--c-blanc);
  padding-block: clamp(40px, 4vw, 72px) clamp(30px, 3vw, 50px);
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 0.8fr;
  gap: var(--space-4);
  align-items: start;
}
.footer-col__title {
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  font-size: var(--fs-small);
  color: var(--c-blanc);
  margin: 0 0 var(--space-3);
}
.footer-col p,
.footer-col li {
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--c-blanc);
  opacity: 0.85;
}
.footer-col a:hover,
.footer-col a:focus-visible { color: var(--c-secondaire); text-decoration: none; }

/* Sous-lien discret du footer (ex : "Autres activités") · plus petit, séparé */
.footer-col__sub {
  display: inline-block;
  margin-top: var(--space-2);
  padding-top: var(--space-1);
  border-top: 1px solid color-mix(in srgb, var(--c-blanc) 18%, transparent);
  font-size: calc(var(--fs-small) - 1px);
  opacity: 0.7;
  font-style: italic;
}

.socials { display: flex; gap: var(--space-2); }
.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border-radius: 999px;
  background: var(--c-blanc);
  color: var(--c-principale);
}
.socials svg { inline-size: 22px; block-size: 22px; }

/* Mention "Fabrication française" : petit drapeau BBR à 3 barres
   + texte uppercase. Discret, placé sous la liste socials. */
.footer-fr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--space-4) 0 0;
  font-size: var(--fs-small);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-blanc) 75%, transparent);
}
.footer-fr__flag {
  display: inline-flex;
  inline-size: 18px;
  block-size: 12px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-blanc) 18%, transparent);
}
.footer-fr__flag i { flex: 1; display: block; height: 100%; }
.footer-fr__flag i:nth-child(1) { background: #0055A4; }
.footer-fr__flag i:nth-child(2) { background: #FFFFFF; }
.footer-fr__flag i:nth-child(3) { background: #EF4135; }


/* Logo en tête de la colonne "brand" du footer.
   Taille calée sur celle des titres de colonnes (`.footer-col__title`,
   ~fs-small) : la hauteur du logo correspond à la hauteur de texte
   "NOS PRODUITS" / "ENTREPRISE" pour aligner visuellement les 4 cols. */
.footer-col__logo {
  display: inline-block;
  margin: 0 0 var(--space-3);
  line-height: 0;
}
.footer-col__logo .logo {
  block-size: clamp(16px, 1.6vw, 22px);
  inline-size: auto;
  width: auto;
  height: clamp(16px, 1.6vw, 22px);
}

/* Crédit de création : petit, discret, placé sous la liste de
   liens ENTREPRISE pour rester avec la navigation. */
.footer-col__credit {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: color-mix(in srgb, var(--c-blanc) 55%, transparent);
}
.footer-col__credit a {
  color: var(--c-blanc);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--c-blanc) 30%, transparent);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.footer-col__credit a:hover,
.footer-col__credit a:focus-visible {
  color: var(--c-secondaire);
  border-bottom-color: var(--c-secondaire);
}


/* ============================================================
   RESPONSIVE — non spécifié dans la maquette.
   TODO:CONFIRM responsive — maquette desktop uniquement
   ============================================================ */
@media (max-width: 1100px) {
  .reason-cards { grid-template-columns: repeat(2, 1fr); }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .welcome__grid { grid-template-columns: 1fr; }
  .cta-band__inner { grid-template-columns: 1fr; min-height: 0; }
  .cta-band__photo { position: static; width: 100%; margin: var(--space-3) 0; }
  .hero__photo { width: 36vw; }
  .logo--footer { width: clamp(140px, 28vw, 220px); }
}
@media (max-width: 720px) {
  .reason-cards { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
  .site-nav { display: none; }
  .hero__photo { display: none; }
  .carousel__track { grid-template-columns: 1fr; }
  .carousel__slide--side { display: none; }
  /* Coverflow : sur mobile on n'affiche que l'item central, sinon les
     items latéraux débordent le viewport et créent un scroll horizontal. */
  .coverflow__item--far-left,
  .coverflow__item--left,
  .coverflow__item--right,
  .coverflow__item--far-right,
  .coverflow__item--hidden { display: none; }
  /* Coverflow centré sur mobile : on étire l'item central proprement. */
  .coverflow__item--center {
    width: min(75vw, 280px);
  }
}


/* ============================================================
   CATALOGUE — page index + page famille (catalogue.php)
   Composition fidèle à la maquette `Catalogue Nexagri.png` :
   hero photo + eyebrow + H1 + compteur, bande filtre vert clair,
   grille 3-cols de cards crème, bandeau CTA "Besoin de conseil".
   ============================================================ */

/* --- Hero famille / index ----------------------------------- */
.catalog-hero {
  position: relative;
  isolation: isolate;
  margin-top: var(--header-h);
  min-block-size: clamp(280px, 36vh, 420px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(40px, 5vw, 80px);
  background-color: var(--c-principale);
  background-image: var(--catalog-hero-img);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.catalog-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(39, 63, 29, 0.55) 0%,
    rgba(39, 63, 29, 0.65) 100%
  );
  z-index: 0;
}
.catalog-hero__inner {
  position: relative;
  z-index: 1;
  color: var(--c-blanc);
  /* Trait d'accent vertical vert clair à gauche (signature site) */
  padding-left: var(--space-3);
  border-left: 3px solid var(--c-secondaire);
}
.catalog-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 4.5vw, 72px);
  color: var(--c-blanc);
  margin: var(--space-2) 0 var(--space-2);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.catalog-hero__count {
  margin: 0;
  font-size: var(--fs-body);
  color: color-mix(in srgb, var(--c-blanc) 85%, transparent);
}
.catalog-hero__back {
  color: var(--c-secondaire);
  text-decoration: none;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
}
.catalog-hero__back:hover { text-decoration: underline; }

/* Eyebrow sur fond sombre (variante du `.eyebrow` du reste du site) */
.eyebrow--on-dark {
  color: color-mix(in srgb, var(--c-blanc) 90%, transparent);
  text-transform: uppercase;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  margin: 0;
}

/* --- Bande filtre vert clair (décoratif) -------------------- */
.catalog-filter {
  background: color-mix(in srgb, var(--c-secondaire) 18%, var(--c-blanc));
  padding-block: clamp(20px, 2.5vw, 36px);
}
.catalog-filter__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.catalog-filter__label {
  font-weight: var(--fw-bold);
  color: var(--c-principale);
  font-size: var(--fs-body);
}
.catalog-filter__pill {
  display: inline-block;
  background: var(--c-principale);
  color: var(--c-blanc);
  padding: 0.5em 1.4em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
}

/* --- Section liste produits --------------------------------- */
.catalog-list {
  padding-block: clamp(48px, 6vw, 96px);
  background: var(--c-blanc);
}
.catalog-list__counter {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-body);
  color: var(--color-text);
}
.catalog-list__counter strong {
  font-weight: var(--fw-bold);
  color: var(--c-principale);
}
.catalog-list__intro {
  margin: 0 0 clamp(32px, 4vw, 56px);
  max-width: 72ch;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* Grille 3 colonnes (responsive plus bas) */
.catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 40px);
  align-items: stretch;
}

/* --- Card produit ------------------------------------------- */
.product-card {
  display: flex;
  flex-direction: column;
  border-radius: clamp(18px, 1.6vw, 28px);
  background: var(--c-blanc);
  box-shadow:
    0 1px 2px rgba(39, 63, 29, 0.06),
    0 12px 30px rgba(39, 63, 29, 0.08);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.product-card:hover,
.product-card:focus-within {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(39, 63, 29, 0.08),
    0 18px 40px rgba(39, 63, 29, 0.14);
}

/* Zone média (fond crème, photo centrée en contain) */
.product-card__media {
  background: color-mix(in srgb, var(--c-tertiaire) 70%, var(--c-blanc));
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 1.8vw, 28px);
}
.product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Body de la card (titre + sous-titre + tags + CTA) */
.product-card__body {
  padding: clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}
.product-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 1.6vw, 28px);
  color: var(--c-principale);
  letter-spacing: -0.005em;
  line-height: 1.15;
}
.product-card__subtitle {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--color-text-muted);
}
.product-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--space-1) 0 0;
}
.product-card__tags li {
  display: inline-block;
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--c-principale) 30%, transparent);
  border-radius: var(--radius-pill);
  font-size: 12px;
  letter-spacing: 0.01em;
  color: var(--c-principale);
  white-space: nowrap;
}
.product-card__cta {
  align-self: flex-start;
  margin-top: var(--space-2);
}

/* --- Section "Besoin de conseil pour choisir ?" ------------- */
.catalog-help {
  padding-block: clamp(48px, 5vw, 80px) clamp(64px, 8vw, 128px);
  background: var(--c-blanc);
}
.catalog-help__card {
  position: relative;
  isolation: isolate;
  border-radius: clamp(20px, 2vw, 32px);
  padding: clamp(40px, 5vw, 80px) clamp(32px, 4vw, 64px);
  min-height: clamp(280px, 30vw, 420px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  color: var(--c-blanc);
  overflow: hidden;
  background-color: var(--c-principale);
  background-image:
    linear-gradient(115deg, rgba(39, 63, 29, 0.85) 0%, rgba(39, 63, 29, 0.45) 60%, rgba(39, 63, 29, 0.15) 100%),
    var(--catalog-hero-img, none);
  background-size: cover;
  background-position: center;
}
.catalog-help__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.2vw, 48px);
  margin: 0 0 var(--space-3);
  max-width: 16ch;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--c-blanc);
}
.catalog-help__text {
  margin: 0 0 var(--space-4);
  max-width: 46ch;
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-blanc) 88%, transparent);
}

/* --- Responsive --------------------------------------------- */
@media (max-width: 1100px) {
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .catalog-grid { grid-template-columns: 1fr; }
  .catalog-hero { padding-block: clamp(32px, 8vw, 60px); }
  .catalog-help__card { min-height: auto; }
}


/* ============================================================
   PAGE HERO générique (contact.php + entreprise.php)
   Photo de fond + overlay vert sombre + H1 blanc avec trait
   d'accent vert clair (signature graphique du site).
   ============================================================ */
.page-hero {
  position: relative;
  isolation: isolate;
  margin-top: var(--header-h);
  min-block-size: clamp(220px, 32vh, 360px);
  display: flex;
  align-items: center;
  background-color: var(--c-principale);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-block: clamp(48px, 6vw, 96px);
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(39, 63, 29, 0.74) 0%,
    rgba(39, 63, 29, 0.88) 100%
  );
  z-index: 0;
}
.page-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: var(--c-blanc);
}
.page-hero__inner--left  { align-items: flex-start; text-align: left; }
.page-hero__inner--right { align-items: flex-end;   text-align: right; }
.page-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(36px, 5vw, 80px);
  margin: 0;
  color: var(--c-blanc);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.page-hero__rule {
  display: block;
  inline-size: clamp(120px, 16vw, 220px);
  block-size: 2px;
  background: var(--c-blanc);
}

/* Photos hero spécifiques par page (fallbacks neutres si img absente). */
.page-hero--contact {
  /* TODO:ASSET photo "moissonneuse" du mockup à fournir client.
     En attendant, l'image welcome.webp sert de fond de remplacement. */
  background-image: var(--img-welcome);
}
.page-hero--entreprise {
  /* TODO:ASSET photo "équipe" du mockup à fournir client. */
  background-image: var(--img-welcome);
}


/* ============================================================
   PAGE CONTACT (contact.php)
   ============================================================ */
.contact {
  padding-block: clamp(56px, 6vw, 96px);
  background: var(--c-blanc);
}
.contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
  gap: clamp(40px, 5vw, 96px);
  align-items: start;
}

/* --- Aside coordonnées -------------------------------------- */
.contact__brand {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 1.6vw, 26px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
}
.contact__list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.contact__list > div { display: flex; flex-direction: column; gap: 4px; }
.contact__list dt {
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}
.contact__list dd {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--c-principale);
  line-height: 1.55;
}
.contact__list dd a {
  color: var(--c-principale);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--c-principale) 25%, transparent);
  padding-bottom: 1px;
}
.contact__list dd a:hover { color: var(--c-secondaire); border-bottom-color: var(--c-secondaire); }
.contact__hint { color: var(--color-text-muted); font-size: var(--fs-small); }

.contact__socials { margin-top: var(--space-5); }
.contact__follow {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body);
  color: var(--c-principale);
}
.contact__socials .socials a {
  background: var(--c-principale);
  color: var(--c-blanc);
}
.contact__socials .socials a:hover { background: var(--c-secondaire); color: var(--c-principale); }

/* --- Formulaire -------------------------------------------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
/* Variante : formulaire seul, sans la grille 2-cols (page contact simplifiée). */
.contact--form-only {
  padding-block: clamp(48px, 6vw, 96px);
  background: var(--c-blanc);
}
.contact--form-only .contact-form {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(28px, 3vw, 48px);
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
  border-radius: clamp(14px, 1.2vw, 20px);
  box-shadow: 0 1px 2px rgba(39,63,29,.04);
}
.contact--form-only .contact-form__submit { align-self: center; }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}
.contact-field { display: block; }
.contact-field__label {
  display: none; /* le placeholder fait office de label visuel (cf. maquette) */
}
.contact-field input,
.contact-field textarea {
  width: 100%;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  color: var(--c-principale);
  background: var(--c-secondaire);
  border: 0;
  border-radius: clamp(16px, 1.4vw, 22px);
  padding: clamp(14px, 1.4vw, 22px) clamp(18px, 1.8vw, 28px);
  outline: none;
  transition: background .2s ease, box-shadow .2s ease;
}
.contact-field input::placeholder,
.contact-field textarea::placeholder {
  color: var(--c-principale);
  opacity: 0.85;
  font-weight: var(--fw-bold);
}
.contact-field input:focus,
.contact-field textarea:focus {
  background: color-mix(in srgb, var(--c-secondaire) 85%, var(--c-blanc));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-principale) 25%, transparent);
}
.contact-field--message textarea {
  min-height: clamp(160px, 22vw, 240px);
  resize: vertical;
}
.contact-form__submit {
  align-self: flex-end;
  margin-top: var(--space-2);
}


/* ============================================================
   PAGE ENTREPRISE (entreprise.php)
   ============================================================ */

/* --- 2. Intro paragraphe centré ---------------------------- */
.ent-intro {
  padding-block: clamp(56px, 6vw, 96px) clamp(40px, 5vw, 64px);
  background: var(--c-blanc);
}
.ent-intro__text {
  max-width: 80ch;
  margin: 0 auto;
  text-align: center;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text);
}

/* --- 3. Histoire & Origines : timeline verticale ----------- */
.ent-history {
  padding-block: clamp(40px, 5vw, 80px);
  background: var(--c-blanc);
}
.ent-history__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 4.2vw, 64px);
  color: var(--c-principale);
  text-align: center;
  margin: 0 0 clamp(40px, 5vw, 72px);
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* Liste-timeline (cercles + trait vertical entre items). */
.timeline {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-left: 12px;
}
.timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: var(--space-3);
  padding-block: var(--space-3);
}
/* Trait vertical entre nodes (sauf après le dernier item). */
.timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 23px; /* centré sur le node 48 px */
  top: calc(var(--space-3) + 48px);
  bottom: calc(var(--space-3) * -1);
  inline-size: 2px;
  background: var(--c-secondaire);
}
.timeline__node {
  inline-size: 48px;
  block-size: 48px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-secondaire) 35%, var(--c-blanc));
  border: 2px solid var(--c-secondaire);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-principale);
  position: relative;
  z-index: 1;
}
.timeline__node svg { inline-size: 22px; block-size: 22px; }
.timeline__body {
  padding-top: 8px;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
}
.timeline__body p { margin: 0; }
.ent-history__cta-wrap {
  margin: clamp(32px, 4vw, 56px) 0 0;
  text-align: right;
}

/* --- 4. Nos valeurs : 4 cards vertes claires --------------- */
.ent-values {
  padding-block: clamp(48px, 6vw, 96px);
  background: var(--c-blanc);
}
.ent-values__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.4vw, 48px);
  color: var(--c-principale);
  margin: 0 0 clamp(40px, 5vw, 72px);
  letter-spacing: -0.005em;
}

.value-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(24px, 2.4vw, 40px);
  align-items: stretch;
  padding-top: var(--space-5);
}
.value-card {
  position: relative;
  background: color-mix(in srgb, var(--c-secondaire) 35%, var(--c-blanc));
  border-radius: clamp(18px, 1.6vw, 28px);
  padding: clamp(48px, 4vw, 64px) var(--space-3) var(--space-4);
  color: var(--c-principale);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.value-card__icon {
  position: absolute;
  top: calc(-1 * var(--space-4));
  left: 50%;
  transform: translateX(-50%);
  inline-size: 64px;
  block-size: 64px;
  border-radius: 999px;
  background: var(--c-blanc);
  border: 2px solid var(--c-secondaire);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-principale);
}
.value-card__icon svg { inline-size: 28px; block-size: 28px; }
.value-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(15px, 1.2vw, 20px);
  letter-spacing: -0.005em;
}
.value-card__text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: color-mix(in srgb, var(--c-principale) 85%, transparent);
}

/* --- 5. Les visages derrière la marque --------------------- */
.ent-faces {
  padding-block: clamp(56px, 6vw, 96px);
  background: var(--c-blanc);
}
.ent-faces__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 4.2vw, 60px);
  color: var(--c-principale);
  text-align: center;
  margin: 0 0 clamp(40px, 5vw, 72px);
  letter-spacing: -0.005em;
}

.face-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2vw, 36px);
  margin-bottom: clamp(48px, 6vw, 96px);
}
.face-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.face-card__photo {
  aspect-ratio: 1 / 1;
  border-radius: clamp(18px, 1.6vw, 28px);
  background: color-mix(in srgb, var(--c-tertiaire) 70%, var(--c-blanc));
  display: flex;
  align-items: center;
  justify-content: center;
  color: color-mix(in srgb, var(--c-principale) 30%, transparent);
}
.face-card__photo svg { inline-size: 50%; block-size: 50%; }
.face-card__name {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(15px, 1.2vw, 20px);
  color: var(--c-principale);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.face-card__role {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}

/* Sous-bloc : 2x2 lignes d'icônes check + titre + texte */
.face-bullets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 56px) clamp(40px, 5vw, 96px);
  margin: 0 0 clamp(40px, 5vw, 72px);
}
.face-bullet {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-3);
  align-items: flex-start;
}
.face-bullet__icon {
  inline-size: 56px;
  block-size: 56px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-secondaire) 35%, var(--c-blanc));
  border: 1px solid color-mix(in srgb, var(--c-secondaire) 50%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-principale);
}
.face-bullet__icon svg { inline-size: 26px; block-size: 26px; }
.face-bullet__title {
  margin: 4px 0 6px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(16px, 1.3vw, 22px);
  color: var(--c-principale);
}
.face-bullet__text {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--color-text-muted);
}
.ent-faces__cta-wrap { margin: 0; text-align: center; }


/* --- Responsive page entreprise + contact ------------------ */
@media (max-width: 1100px) {
  .contact__grid { grid-template-columns: 1fr; }
  .value-cards { grid-template-columns: repeat(2, 1fr); }
  .face-cards { grid-template-columns: repeat(2, 1fr); }
  .face-bullets { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .value-cards { grid-template-columns: 1fr; }
  .face-cards { grid-template-columns: 1fr 1fr; }
  .contact-form__row { grid-template-columns: 1fr; }
  .ent-history__cta-wrap { text-align: center; }
}


/* ============================================================
   CATALOGUE — REFONTE v2 (page produit éditoriale)
   La page détail famille n'est plus une grille de N cartes
   répétées par photo ; c'est une page produit :
     1. fam-nav     : chips horizontaux inter-familles
     2. prod-hero   : hero graphique vert + photo produit à droite
     3. prod-intro  : présentation (titre/description/tags/CTA)
     4. prod-gallery: bento asymétrique (photos sans texte répété)
     5. prod-more   : 3 cards cross-sell
     6. catalog-help: bandeau aide (réutilisé)
     7. prod-pager  : précédent/suivant entre familles
   ============================================================ */

/* --- 1. Nav inter-familles (chips horizontaux) -------------- */
.fam-nav {
  position: relative;
  z-index: 1;
  margin-top: var(--header-h);
  background: color-mix(in srgb, var(--c-tertiaire) 60%, var(--c-blanc));
  border-block-end: 1px solid color-mix(in srgb, var(--c-principale) 8%, transparent);
}
.fam-nav__list {
  display: flex;
  gap: 8px;
  padding-block: clamp(12px, 1.2vw, 18px);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--c-secondaire) transparent;
}
.fam-nav__chip {
  display: inline-block;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--c-principale);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--c-principale) 18%, transparent);
  white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  text-decoration: none;
}
.fam-nav__chip:hover {
  background: color-mix(in srgb, var(--c-secondaire) 30%, var(--c-blanc));
  border-color: var(--c-secondaire);
  text-decoration: none;
}
.fam-nav__chip.is-active {
  background: var(--c-principale);
  color: var(--c-blanc);
  border-color: var(--c-principale);
}

/* --- 2. Hero produit (vert plat ou photo BG à droite) ------- */
.prod-hero {
  position: relative;
  isolation: isolate;
  background-color: var(--c-principale);
  color: var(--c-blanc);
  padding-block: clamp(48px, 6vw, 96px) clamp(56px, 7vw, 120px);
  overflow: hidden;
}
/* Variante avec image de fond : la `background-image` est passée
   inline depuis catalogue.php (style="background-image: url('...')"),
   on règle juste le size/position et on désactive la couleur unie
   pour ne pas masquer la photo. */
.prod-hero--with-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: transparent;
}
.prod-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(39, 63, 29, 0.98) 0%,
    rgba(39, 63, 29, 0.88) 55%,
    rgba(39, 63, 29, 0.54) 100%
  );
  z-index: -1;
  pointer-events: none;
}
.prod-hero__grid {
  position: relative;
  display: grid;
  /* Grid plus favorable au média (~57 % de la largeur) pour mettre
     le cutout en avant. */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(32px, 4vw, 80px);
  align-items: center;
}
.prod-hero__copy { display: flex; flex-direction: column; gap: var(--space-2); }
.prod-hero__back {
  color: var(--c-secondaire);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-decoration: none;
}
.prod-hero__back:hover { text-decoration: underline; }
.prod-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(38px, 5.2vw, 80px);
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--c-blanc);
}
.prod-hero__tagline {
  margin: var(--space-2) 0 var(--space-3);
  max-width: 36ch;
  font-size: clamp(16px, 1.3vw, 22px);
  color: color-mix(in srgb, var(--c-blanc) 90%, transparent);
  line-height: 1.45;
}
.prod-hero__france {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-blanc) 80%, transparent);
}
.prod-hero__france .flag-bbr {
  display: inline-flex;
  inline-size: 24px;
  block-size: 16px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-blanc) 22%, transparent);
}
.prod-hero__france .flag-bbr i { flex: 1; display: block; height: 100%; }
.prod-hero__france .flag-bbr i:nth-child(1) { background: #0055A4; }
.prod-hero__france .flag-bbr i:nth-child(2) { background: #FFFFFF; }
.prod-hero__france .flag-bbr i:nth-child(3) { background: #EF4135; }

/* CTA "Découvrir le produit" dans le hero produit · ne pas s'étirer en pleine largeur. */
.prod-hero__cta {
  align-self: flex-start;
  padding: 0.65em 1.4em;
  margin-top: var(--space-2);
}

.prod-hero__media {
  position: relative;
  /* Aspect paysage : container plus large MAIS sans augmenter la
     hauteur du hero. La hauteur reste proche de l'original 5/4. */
  aspect-ratio: 16 / 10;
  background: var(--c-blanc);
  border-radius: clamp(20px, 2vw, 32px);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
  /* Largeur max bumpée pour mettre le cutout en avant. */
  max-inline-size: 720px;
  margin-inline-start: auto;
  inline-size: 100%;
}
.prod-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Quand on a une photo sans fond (cutout) : `contain` pour ne pas
   recadrer le produit. */
.prod-hero__media img.is-cutout {
  object-fit: contain;
}
/* La "carte" qui porte un cutout doit elle-même être invisible :
   pas de fond blanc, pas d'ombre, pas de border-radius — le produit
   flotte directement sur le vert sombre du hero. */
.prod-hero__media:has(img.is-cutout) {
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  overflow: visible;
}

/* --- 3. Présentation / "Le produit" ------------------------- */
.prod-intro {
  padding-block: clamp(64px, 8vw, 128px);
  background: var(--c-blanc);
}
.prod-intro__inner { max-width: 880px; margin: 0 auto; }
.prod-intro__title {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.4vw, 48px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.1;
  max-width: 22ch;
}
.prod-intro__desc {
  margin: 0 0 var(--space-4);
  font-size: clamp(16px, 1.2vw, 19px);
  line-height: 1.7;
  color: var(--color-text);
  max-width: 70ch;
}
.prod-intro__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-5);
  padding-block-start: var(--space-3);
  border-block-start: 1px solid color-mix(in srgb, var(--c-principale) 12%, transparent);
}
.prod-intro__features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-body);
  color: var(--c-principale);
  font-weight: var(--fw-bold);
}
.prod-intro__check {
  inline-size: 24px;
  block-size: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-secondaire) 35%, var(--c-blanc));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-principale);
  flex: 0 0 auto;
}
.prod-intro__check svg { inline-size: 14px; block-size: 14px; }
.prod-intro__cta {
  display: inline-flex;
  margin: var(--space-3) auto 0;
  /* override .btn alignement par défaut pour centrer dans son conteneur block */
  align-self: center;
}
.prod-intro__copy { display: flex; flex-direction: column; }
.prod-intro__copy > * { align-self: stretch; }
.prod-intro__copy .eyebrow,
.prod-intro__copy .prod-intro__title { align-self: start; }
.prod-intro__copy .prod-intro__cta { align-self: center; }

/* --- 4. Galerie BENTO -------------------------------------- */
.prod-gallery {
  padding-block: clamp(48px, 6vw, 96px);
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
}
.prod-gallery__head {
  margin: 0 0 clamp(32px, 4vw, 56px);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.prod-gallery__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.4vw, 48px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.prod-gallery__count {
  margin: 0;
  margin-left: auto;
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Bento : grille 6 colonnes, items en spans variables.
   `grid-auto-flow: dense` remplit les trous laissés par les
   spans irréguliers. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(8px, 0.8vw, 14px);
  grid-auto-flow: dense;
}
.bento__item {
  grid-column: span 2;
  aspect-ratio: 4 / 3;
  border-radius: clamp(10px, 0.9vw, 16px);
  overflow: hidden;
  background: color-mix(in srgb, var(--c-tertiaire) 70%, var(--c-blanc));
  transition: transform .25s ease, box-shadow .25s ease;
}
.bento__item:hover {
  transform: scale(1.015);
  box-shadow: 0 10px 30px rgba(39, 63, 29, 0.18);
}
.bento__item a { display: block; width: 100%; height: 100%; }
.bento__item img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* Variations : un item "featured" tous les 7 (span 3, aspect carré),
   un item "wide" tous les 5 (span 4, aspect 16/9). */
.bento__item:nth-child(7n + 1) {
  grid-column: span 3;
  grid-row: span 2;
  aspect-ratio: 1 / 1;
}
.bento__item:nth-child(5n + 3) {
  grid-column: span 4;
  aspect-ratio: 16 / 9;
}

/* --- 5. Aller plus loin (cross-sell) ----------------------- */
.prod-more {
  padding-block: clamp(48px, 6vw, 96px);
  background: var(--c-blanc);
}
.prod-more__head {
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.prod-more__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.4vw, 48px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.more-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px);
}
.more-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--c-principale);
  border-radius: clamp(18px, 1.6vw, 28px);
  overflow: hidden;
  background: var(--c-blanc);
  box-shadow:
    0 1px 2px rgba(39, 63, 29, 0.06),
    0 12px 30px rgba(39, 63, 29, 0.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
.more-card:hover {
  transform: translateY(-4px);
  text-decoration: none;
  box-shadow:
    0 1px 2px rgba(39, 63, 29, 0.08),
    0 18px 40px rgba(39, 63, 29, 0.14);
}
.more-card__media {
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--c-tertiaire) 70%, var(--c-blanc));
  overflow: hidden;
}
.more-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.more-card__body {
  position: relative;
  padding: clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.more-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 1.4vw, 24px);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.more-card__sub {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.more-card__arrow {
  position: absolute;
  right: clamp(20px, 2vw, 32px);
  top: clamp(20px, 2vw, 32px);
  font-size: 20px;
  color: var(--c-secondaire);
  transition: transform .25s ease;
}
.more-card:hover .more-card__arrow {
  transform: translateX(4px);
}

/* --- 7. Pager précédent / suivant -------------------------- */
.prod-pager {
  background: var(--c-blanc);
  border-block-start: 1px solid color-mix(in srgb, var(--c-principale) 8%, transparent);
}
.prod-pager__inner {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-3);
  padding-block: clamp(32px, 4vw, 56px);
}
.prod-pager__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-decoration: none;
  color: var(--c-principale);
  padding: var(--space-2) var(--space-3);
  border-radius: clamp(10px, 1vw, 14px);
  transition: background .2s ease, transform .2s ease;
  max-width: 42%;
}
.prod-pager__link:hover {
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
  text-decoration: none;
  transform: translateY(-1px);
}
.prod-pager__link--prev { align-items: flex-start; text-align: left; }
.prod-pager__link--next { align-items: flex-end;   text-align: right; margin-left: auto; }
.prod-pager__dir {
  font-size: var(--fs-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-weight: var(--fw-bold);
}
.prod-pager__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(16px, 1.3vw, 22px);
  color: var(--c-principale);
  letter-spacing: -0.005em;
}

/* --- Responsive : refonte catalogue ------------------------ */
@media (max-width: 1100px) {
  .prod-hero__grid { grid-template-columns: 1fr; }
  .prod-hero__media { aspect-ratio: 16 / 10; max-width: 600px; }
  .more-cards { grid-template-columns: repeat(2, 1fr); }
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento__item:nth-child(7n + 1) { grid-column: span 2; grid-row: span 1; aspect-ratio: 4 / 3; }
  .bento__item:nth-child(5n + 3) { grid-column: span 4; aspect-ratio: 2 / 1; }
}
@media (max-width: 720px) {
  .more-cards { grid-template-columns: 1fr; }
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento__item,
  .bento__item:nth-child(7n + 1),
  .bento__item:nth-child(5n + 3) {
    grid-column: span 2;
    aspect-ratio: 4 / 3;
  }
  .prod-pager__inner { flex-direction: column; }
  .prod-pager__link { max-width: 100%; }
  .prod-pager__link--next { margin-left: 0; align-items: flex-start; text-align: left; }
}


/* ============================================================
   CATALOGUE INDEX — REFONTE v2 (8 familles en bento)
   AgriFlex card 2-cols vert sombre (signature produit-phare),
   7 autres en 1x1 sur fond crème.
   ============================================================ */

/* Variante hero pour l'index : compact, photo en background,
   overlay sombre, contenu sur 1 seule colonne. Hauteur réduite
   ~50 % par rapport au hero détail. */
.prod-hero--index {
  position: relative;
  isolation: isolate;
  margin-top: var(--header-h);
  /* Padding divisé par 2 par rapport au .prod-hero standard. */
  padding-block: clamp(24px, 3vw, 48px) clamp(28px, 3.5vw, 60px);
  /* Photo de fond : signature AgriFlex. Centralisée ici pour
     pouvoir la swapper facilement (ou via inline style côté PHP). */
  background-image: url("../assets/products/poulies-agriflex/agriflex-200eh-nexagri-1.webp");
  background-size: cover;
  background-position: center;
  background-color: var(--c-principale);
  overflow: hidden;
}
.prod-hero--index .prod-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(39, 63, 29, 0.94) 0%,
    rgba(39, 63, 29, 0.99) 100%
  );
  z-index: 0;
  pointer-events: none;
}
.prod-hero--index .prod-hero__grid {
  position: relative;
  z-index: 1;
  grid-template-columns: 1fr;
  gap: 0;
}
.prod-hero--index .prod-hero__title {
  /* H1 légèrement réduit pour rester proportionnel au hero compact. */
  font-size: clamp(30px, 4vw, 60px);
}
.prod-hero--index .prod-hero__tagline {
  margin-block: var(--space-1) var(--space-2);
}

/* En-tête section bento */
.fam-bento-wrap {
  padding-block: clamp(64px, 8vw, 120px);
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
}
.fam-bento__head {
  margin: 0 0 clamp(40px, 5vw, 72px);
  max-width: 720px;
}
.fam-bento__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 4vw, 56px);
  color: var(--c-principale);
  letter-spacing: -0.012em;
  line-height: 1.05;
}

/* Grille conventionnelle 3 cols uniforme.
     Row 1 : [card #1] [card #2] [card #3]
     Row 2 : [card #4] [card #5] [card #6]
     Row 3 : [card #7] [card #8]  (rangée incomplète, alignée à gauche)
   AgriFlex garde un eyebrow "Signature Nexagri" pour signaler la
   carte signature sans rompre l'uniformité du grid. */
.fam-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 36px);
}

/* --- Card famille standard (crème, blanche) ---------------- */
.fam-card {
  position: relative;
  border-radius: clamp(20px, 1.8vw, 30px);
  overflow: hidden;
  background: var(--c-blanc);
  box-shadow:
    0 1px 2px rgba(39, 63, 29, 0.06),
    0 16px 36px rgba(39, 63, 29, 0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.fam-card:hover,
.fam-card:focus-within {
  transform: translateY(-6px);
  box-shadow:
    0 1px 2px rgba(39, 63, 29, 0.10),
    0 24px 48px rgba(39, 63, 29, 0.16);
}
.fam-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--c-principale);
}
.fam-card__link:hover { text-decoration: none; }
.fam-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: color-mix(in srgb, var(--c-tertiaire) 70%, var(--c-blanc));
  overflow: hidden;
}
.fam-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.fam-card:hover .fam-card__media img {
  transform: scale(1.04);
}
.fam-card__body {
  padding: clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.fam-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 1.7vw, 30px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.fam-card__sub {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.fam-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-secondaire);
}
.fam-card__cta svg {
  inline-size: 28px;
  block-size: 10px;
  transition: transform .25s ease;
}
.fam-card:hover .fam-card__cta svg { transform: translateX(6px); }

/* Eyebrow "Signature Nexagri" sur la carte AgriFlex (texte vert
   clair, uppercase, fin) — marque la card signature sans rompre
   l'uniformité du grid. */
.fam-card__tag {
  margin: 0 0 4px;
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-secondaire);
  font-weight: var(--fw-bold);
}

/* --- Responsive grille familles ---------------------------- */
@media (max-width: 1100px) {
  .fam-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .fam-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   CATALOGUE — Barre de filtres (catégories + made-in-house)
   ============================================================ */
.cat-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(12px, 1.4vw, 24px);
  margin: 0 0 clamp(20px, 2vw, 32px);
  padding: clamp(14px, 1.4vw, 20px) clamp(18px, 1.8vw, 28px);
  background: color-mix(in srgb, var(--c-blanc) 92%, var(--c-tertiaire));
  border-radius: clamp(14px, 1.2vw, 20px);
  box-shadow: 0 1px 2px rgba(39, 63, 29, 0.04);
}
.cat-filter__group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cat-filter__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--c-principale);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--c-principale) 18%, transparent);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.cat-filter__chip:hover {
  background: color-mix(in srgb, var(--c-secondaire) 25%, var(--c-blanc));
  border-color: var(--c-secondaire);
}
.cat-filter__chip.is-active {
  background: var(--c-principale);
  color: var(--c-blanc);
  border-color: var(--c-principale);
}
.cat-filter__chip.is-active .cat-filter__count {
  color: color-mix(in srgb, var(--c-blanc) 70%, transparent);
}
.cat-filter__count {
  font-size: 11px;
  letter-spacing: 0;
  color: var(--color-text-muted);
  font-weight: var(--fw-regular);
}

.cat-filter__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 9px 16px 9px 12px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--c-principale) 18%, transparent);
  font-family: var(--font-base);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  color: var(--c-principale);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.cat-filter__toggle:hover {
  background: color-mix(in srgb, var(--c-secondaire) 20%, var(--c-blanc));
  border-color: var(--c-secondaire);
}
.cat-filter__toggle.is-active {
  background: var(--c-principale);
  color: var(--c-blanc);
  border-color: var(--c-principale);
}
.cat-filter__toggle.is-active .cat-filter__count {
  color: color-mix(in srgb, var(--c-blanc) 70%, transparent);
}
.cat-filter__flag {
  display: inline-flex;
  inline-size: 20px;
  block-size: 13px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-principale) 25%, transparent);
}
.cat-filter__flag i { flex: 1; display: block; height: 100%; }
.cat-filter__flag i:nth-child(1) { background: #0055A4; }
.cat-filter__flag i:nth-child(2) { background: #FFFFFF; }
.cat-filter__flag i:nth-child(3) { background: #EF4135; }

/* Compteur de familles filtrées */
.cat-filter__counter {
  margin: 0 0 clamp(24px, 2.5vw, 40px);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.cat-filter__counter strong {
  font-weight: var(--fw-bold);
  color: var(--c-principale);
  font-family: var(--font-display);
  font-size: var(--fs-body);
}

/* Helper : carte masquée par le filtre */
.fam-card.is-hidden { display: none !important; }

/* Empty state quand aucun match */
.fam-bento__empty {
  text-align: center;
  padding: clamp(48px, 6vw, 96px) 0;
  color: var(--color-text-muted);
  font-size: var(--fs-body);
  font-style: italic;
}

@media (max-width: 720px) {
  .cat-filter { flex-direction: column; align-items: stretch; }
  .cat-filter__toggle { margin-left: 0; justify-content: center; }
}


/* ============================================================
   ACTUALITÉS — page index (actualites.php)
   Hero compact + "À la une" en grand encart + grille 3-cols.
   ============================================================ */

/* Variant hero actu : reprend page-hero, ajoute couleur de fallback. */
.page-hero--actu {
  background-color: var(--c-principale);
  background-size: cover;
  background-position: center;
}
.page-hero--404 {
  background-color: var(--c-principale);
}

/* Empty state si aucun article publié */
.actu-empty {
  padding-block: clamp(80px, 10vw, 160px);
  background: var(--c-blanc);
  text-align: center;
}
.actu-empty__text {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 22px);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* --- "À la une" : grande card horizontale (photo gauche, copy droite) - */
.actu-featured {
  padding-block: clamp(48px, 6vw, 96px) clamp(32px, 4vw, 56px);
  background: var(--c-blanc);
}
.actu-featured__card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 0;
  border-radius: clamp(20px, 1.8vw, 32px);
  overflow: hidden;
  background: var(--c-blanc);
  box-shadow:
    0 1px 2px rgba(39, 63, 29, 0.06),
    0 24px 56px rgba(39, 63, 29, 0.10);
  text-decoration: none;
  color: var(--c-principale);
  transition: transform .3s ease, box-shadow .3s ease;
}
.actu-featured__card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1px 2px rgba(39, 63, 29, 0.08),
    0 30px 64px rgba(39, 63, 29, 0.16);
  text-decoration: none;
}
.actu-featured__media {
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-tertiaire) 70%, var(--c-blanc));
}
.actu-featured__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.actu-featured__card:hover .actu-featured__media img { transform: scale(1.03); }
.actu-featured__badge {
  position: absolute;
  top: clamp(16px, 1.6vw, 24px);
  left: clamp(16px, 1.6vw, 24px);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--c-principale);
  color: var(--c-blanc);
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.actu-featured__body {
  padding: clamp(32px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
}
.actu-featured__title {
  margin: 4px 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(24px, 2.6vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--c-principale);
}
.actu-featured__intro {
  margin: 0 0 var(--space-3);
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* --- Section "Plus d'actualités" + grille cards ------------ */
.actu-list {
  padding-block: clamp(32px, 4vw, 64px) clamp(64px, 8vw, 128px);
  background: var(--c-blanc);
}
.actu-list__head {
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.actu-list__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 3vw, 42px);
  color: var(--c-principale);
  letter-spacing: -0.005em;
  line-height: 1.1;
}

.actu-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2vw, 36px);
}

/* --- Card actualité standard --------------------------------- */
.actu-card {
  display: flex;
  flex-direction: column;
  border-radius: clamp(18px, 1.6vw, 28px);
  background: var(--c-blanc);
  overflow: hidden;
  box-shadow:
    0 1px 2px rgba(39, 63, 29, 0.06),
    0 16px 36px rgba(39, 63, 29, 0.08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.actu-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 1px 2px rgba(39, 63, 29, 0.10),
    0 22px 48px rgba(39, 63, 29, 0.14);
}
.actu-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: var(--c-principale);
}
.actu-card__link:hover { text-decoration: none; }
.actu-card__media {
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: color-mix(in srgb, var(--c-tertiaire) 70%, var(--c-blanc));
}
.actu-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.actu-card:hover .actu-card__media img { transform: scale(1.03); }
.actu-card__body {
  padding: clamp(20px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

/* Meta : catégorie · date (· min) */
.actu-card__meta {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.actu-card__category {
  color: var(--c-secondaire);
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.actu-card__dot { opacity: 0.6; }

.actu-card__title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(17px, 1.4vw, 24px);
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--c-principale);
}
.actu-card__intro {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.55;
  color: var(--color-text-muted);
  /* Limite à 3 lignes pour homogénéiser les hauteurs de card */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.actu-card__footer {
  margin: auto 0 0;
  padding-top: var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.actu-card__reading { font-style: italic; }
.actu-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-secondaire);
}
.actu-card__cta svg {
  inline-size: 24px;
  block-size: 10px;
  transition: transform .25s ease;
}
.actu-card:hover .actu-card__cta svg { transform: translateX(5px); }


/* ============================================================
   ARTICLE — page détail (actualite.php)
   ============================================================ */

/* Hero article : photo plein cadre + overlay sombre + meta + titre */
.article-hero {
  position: relative;
  isolation: isolate;
  margin-top: var(--header-h);
  min-block-size: clamp(360px, 50vh, 560px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(48px, 6vw, 96px);
  background-size: cover;
  background-position: center;
  background-color: var(--c-principale);
  color: var(--c-blanc);
  overflow: hidden;
}
.article-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(39, 63, 29, 0.30) 0%,
    rgba(39, 63, 29, 0.75) 60%,
    rgba(39, 63, 29, 0.92) 100%
  );
  z-index: 0;
}
.article-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 880px;
}
.article-hero__crumb {
  margin: 0 0 var(--space-3);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--c-blanc) 80%, transparent);
  display: flex;
  gap: 10px;
  align-items: center;
}
.article-hero__crumb a {
  color: var(--c-secondaire);
  text-decoration: none;
}
.article-hero__crumb a:hover { text-decoration: underline; }
.article-hero__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(32px, 4vw, 60px);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--c-blanc);
}
.article-hero__intro {
  margin: 0 0 var(--space-3);
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.5;
  color: color-mix(in srgb, var(--c-blanc) 92%, transparent);
  max-width: 60ch;
}
.article-hero__meta {
  margin: 0;
  font-size: var(--fs-small);
  letter-spacing: 0.03em;
  color: color-mix(in srgb, var(--c-blanc) 80%, transparent);
}

/* Corps article : colonne centrée, typographie éditoriale */
.article-body {
  background: var(--c-blanc);
  padding-block: clamp(48px, 6vw, 96px);
}
.article-body__inner {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.75;
  color: var(--color-text);
}
.article-body__inner p { margin: 0 0 var(--space-3); }
.article-body__inner h2 {
  margin: clamp(32px, 4vw, 56px) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.2;
  color: var(--c-principale);
  letter-spacing: -0.005em;
}
.article-body__inner h3 {
  margin: clamp(24px, 3vw, 40px) 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--c-principale);
}
.article-body__inner blockquote {
  margin: clamp(24px, 3vw, 40px) 0;
  padding: var(--space-3) 0 var(--space-3) clamp(20px, 2vw, 32px);
  border-left: 4px solid var(--c-secondaire);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(17px, 1.3vw, 22px);
  line-height: 1.5;
  color: var(--c-principale);
}
.article-body__inner ul,
.article-body__inner ol {
  margin: 0 0 var(--space-3);
  padding-inline-start: 1.4em;
}
.article-body__inner ul li,
.article-body__inner ol li { margin-bottom: 0.5em; line-height: 1.65; }
.article-body__inner ul { list-style: disc outside; }
.article-body__inner ol { list-style: decimal outside; }
.article-body__inner a {
  color: var(--c-principale);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-bottom: 2px solid var(--c-secondaire);
  padding-bottom: 1px;
  transition: color .2s ease, border-color .2s ease;
}
.article-body__inner a:hover {
  color: var(--c-secondaire);
  border-bottom-color: var(--c-principale);
}
.article-body__inner strong { color: var(--c-principale); }
.article-body__inner img {
  display: block;
  width: 100%;
  height: auto;
  margin: clamp(24px, 3vw, 40px) 0;
  border-radius: clamp(10px, 1vw, 16px);
}

/* Section articles connexes */
.article-related {
  padding-block: clamp(48px, 6vw, 96px);
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
}
.article-related__head { margin: 0 0 clamp(32px, 4vw, 56px); }
.article-related__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 3vw, 42px);
  color: var(--c-principale);
  letter-spacing: -0.005em;
}
.article-related .actu-grid { grid-template-columns: repeat(2, 1fr); }

/* Page 404 article */
.article-404 {
  padding-block: clamp(64px, 8vw, 128px);
  background: var(--c-blanc);
  text-align: center;
}

/* --- Responsive actualités --------------------------------- */
@media (max-width: 1100px) {
  .actu-featured__card { grid-template-columns: 1fr; }
  .actu-featured__media { aspect-ratio: 16 / 9; }
  .actu-grid { grid-template-columns: repeat(2, 1fr); }
  .article-related .actu-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .actu-grid,
  .article-related .actu-grid { grid-template-columns: 1fr; }
  .article-hero { min-block-size: clamp(280px, 40vh, 400px); }
}


/* ============================================================
   HOME COVERFLOW — filtre catégorie (refonte v2)
   Réutilise .cat-filter du catalogue + ajoute helpers pour
   masquer slides/dots hors filtre.
   ============================================================ */

/* Conteneur du filtre dans la section .poulies : marge propre */
.home-filter.cat-filter {
  margin: var(--space-2) auto clamp(24px, 3vw, 48px);
  max-width: 880px;
  /* override pour rester sur fond clair de la section .poulies */
  background: color-mix(in srgb, var(--c-tertiaire) 60%, var(--c-blanc));
}

/* Slides cachés par le filtre : sortis du flux pour que le calcul
   des slots --far-left / --left / --center / etc. ne les compte plus. */
.coverflow__item--filtered-out {
  display: none !important;
}

/* Dots cachés (correspondants aux slides hors-filtre) */
.carousel__dots button.is-hidden {
  display: none !important;
}

/* Empty state si une catégorie est vide */
.coverflow__empty {
  text-align: center;
  padding: clamp(48px, 6vw, 96px) 0;
  color: var(--color-text-muted);
  font-style: italic;
  font-size: var(--fs-body);
}

/* Lien wrappant photo + nom (coverflow__link) — assurer qu'il prend
   tout l'espace du <li> et que le hover sur photo entraîne navigation. */
.coverflow__link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.coverflow__link:hover { text-decoration: none; }

/* CTA dans la spec-card (lien "Voir la fiche →") */
.spec-card__cta {
  margin-top: 8px;
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-secondaire);
  text-decoration: none;
  transition: color .2s ease;
}
.spec-card__cta:hover { color: var(--c-blanc); }


/* ============================================================
   PRODUCT GALLERY — carrousel sobre (page détail produit)
   Remplace l'ancien bento. Une grande photo + arrows discrets
   + compteur + strip de thumbnails cliquables en dessous.
   ============================================================ */
.gallery-slider {
  position: relative;
  background: color-mix(in srgb, var(--c-tertiaire) 70%, var(--c-blanc));
  border-radius: clamp(12px, 1.2vw, 20px);
  overflow: hidden;
  margin-bottom: clamp(16px, 1.6vw, 28px);
}
.gallery-slider__stage {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.gallery-slider__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
}
.gallery-slider__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.gallery-slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Flèches latérales discrètes : cercle blanc semi-opaque,
   apparaît au survol du slider. */
.gallery-slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 999px;
  border: 0;
  background: color-mix(in srgb, var(--c-blanc) 90%, transparent);
  color: var(--c-principale);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity .25s ease, background .2s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.gallery-slider:hover .gallery-slider__nav,
.gallery-slider:focus-within .gallery-slider__nav {
  opacity: 1;
}
.gallery-slider__nav:hover { background: var(--c-blanc); }
.gallery-slider__nav:focus-visible { opacity: 1; outline: 2px solid var(--c-secondaire); outline-offset: 3px; }
.gallery-slider__nav--prev { left: clamp(12px, 1.2vw, 20px); }
.gallery-slider__nav--next { right: clamp(12px, 1.2vw, 20px); }
.gallery-slider__nav svg { inline-size: 22px; block-size: 22px; }

/* Compteur "3 / 12" en bas à droite, sobre */
.gallery-slider__counter {
  position: absolute;
  right: clamp(12px, 1.2vw, 20px);
  bottom: clamp(12px, 1.2vw, 20px);
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--c-principale) 85%, transparent);
  color: var(--c-blanc);
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  z-index: 1;
}

/* Strip de thumbnails (scroll horizontal si nombreux) */
.gallery-thumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--c-secondaire) transparent;
}
.gallery-thumbs li { flex: 0 0 auto; }
.gallery-thumbs__btn {
  inline-size: 80px;
  block-size: 56px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  background: var(--c-tertiaire);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.gallery-thumbs__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.65;
  transition: opacity .2s ease;
}
.gallery-thumbs__btn:hover img { opacity: 0.85; }
.gallery-thumbs__btn:hover { transform: translateY(-1px); }
.gallery-thumbs__btn.is-active {
  border-color: var(--c-secondaire);
}
.gallery-thumbs__btn.is-active img { opacity: 1; }
.gallery-thumbs__btn:focus-visible {
  outline: 2px solid var(--c-secondaire);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .gallery-slider__nav { inline-size: 36px; block-size: 36px; opacity: 1; }
  .gallery-thumbs__btn { inline-size: 64px; block-size: 44px; }
}


/* ============================================================
   PROD-MODELS — mini-carrousel modèles (spécifique AgriFlex)
   Section entre Présentation et Galerie. Coverflow simplifié :
   juste les images + nom de modèle, pas de spec-card.
   ============================================================ */
.prod-models {
  padding-block: clamp(56px, 7vw, 112px);
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
}
.prod-models__head {
  text-align: center;
  margin: 0 0 clamp(32px, 4vw, 56px);
}
.prod-models__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(28px, 3.4vw, 48px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.1;
}

/* Variante mini du coverflow : hauteur plus contenue, items plus
   compacts. Spec-card non rendue sur cette page → rien à hide. */
.coverflow--mini {
  block-size: clamp(280px, 30vw, 420px);
  max-width: 1100px;
  margin: 0 auto;
}
.coverflow--mini .coverflow__item {
  width: clamp(160px, 18vw, 260px);
}
.coverflow--mini .coverflow__model {
  bottom: -34px;
  font-size: clamp(15px, 1.2vw, 20px);
  color: var(--c-principale);
  letter-spacing: 0.05em;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
}
/* Center : nom plus gros */
.coverflow--mini .coverflow__item--center .coverflow__model {
  font-size: clamp(20px, 1.7vw, 28px);
  color: var(--c-secondaire);
}

/* Dots et marges resserrés pour la section */
.prod-models .carousel__dots {
  margin: clamp(56px, 5vw, 80px) 0 0;
}


/* Variante product : le cutout du produit dans le bandeau CTA
   de la page détail. Pas de mirror (chaque produit a sa propre
   orientation, contrairement au tracteur générique de la home). */
/* Variante product : la photo n'est PAS mirrorée (chaque produit a
   sa propre orientation), elle est centrée verticalement à côté
   de la card et dimensionnée pour respirer sans écraser le texte. */
.cta-band--product .cta-band__photo {
  transform: none;
  width: clamp(320px, 38vw, 620px);
  top: 50%;
  translate: 0 -50%;
  right: clamp(16px, 3vw, 56px);
  object-fit: contain;
  filter: drop-shadow(0 14px 32px rgba(0, 0, 0, 0.28));
}
.cta-band--product .cta-card {
  max-width: 60%;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Override : home avait padding-right ~58% pour la silhouette du tracteur.
     Ici la photo est à côté de la card, pas par-dessus : padding normal. */
  padding-right: clamp(32px, 4vw, 64px);
}
.cta-band--product .cta-card .section-title {
  max-width: 20ch;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.1;
}
.cta-band--product .cta-card p { max-width: 44ch; }
@media (max-width: 1100px) {
  .cta-band--product .cta-card {
    max-width: 100%;
    min-height: 0;
    padding: clamp(32px, 4vw, 64px);
  }
  .cta-band--product .cta-band__photo {
    position: static;
    translate: none;
    width: 100%;
    max-width: 460px;
    margin: var(--space-3) auto 0;
    display: block;
  }
}


/* ============================================================
   ENT-CONTEXT — bloc léger distribution + zone d'intervention
   (page Entreprise). Sobre, court, 2 colonnes.
   ============================================================ */
.ent-context {
  padding-block: clamp(48px, 6vw, 96px);
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
}
.ent-context__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
}
.ent-context__block {
  padding: clamp(24px, 2.4vw, 40px);
  background: var(--c-blanc);
  border-radius: clamp(14px, 1.2vw, 20px);
  box-shadow: 0 1px 2px rgba(39,63,29,.04);
}
.ent-context__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 1.5vw, 24px);
  color: var(--c-principale);
  letter-spacing: -0.005em;
}
.ent-context__block p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
}
.ent-context__block strong { color: var(--c-principale); }
@media (max-width: 1100px) {
  .ent-context__grid { grid-template-columns: 1fr; }
}


/* Eyebrow au-dessus du H1 sur les page-hero (entreprise, etc.) */
.page-hero__eyebrow {
  margin: 0 0 var(--space-1);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-secondaire);
  font-weight: var(--fw-bold);
}


/* Citation : nom de l'auteur sous la blockquote, sobre. */
.article-body__inner blockquote cite {
  display: block;
  margin-top: var(--space-1);
  font-style: normal;
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}


/* ============================================================
   PROD-LONG-DESC + PROD-USE-CASES — éditorial page produit.
   Alternance fond crème / blanc avec celle de prod-intro
   pour rythmer la lecture.
   ============================================================ */
.prod-long-desc {
  padding-block: clamp(48px, 6vw, 96px);
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
}
.prod-long-desc__inner { max-width: 880px; margin: 0 auto; }
.prod-long-desc__title {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 2.8vw, 40px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 22ch;
}
.prod-long-desc__body p {
  margin: 0 0 var(--space-3);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
  color: var(--color-text);
  max-width: 70ch;
}
.prod-long-desc__body p:last-child { margin-bottom: 0; }

.prod-use-cases {
  padding-block: clamp(48px, 6vw, 96px);
  background: var(--c-blanc);
}
.prod-use-cases__inner { max-width: 880px; margin: 0 auto; }
.prod-use-cases__title {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 2.8vw, 40px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.prod-use-cases__body p {
  margin: 0 0 var(--space-3);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
  color: var(--color-text);
  max-width: 70ch;
}
.prod-use-cases__body p:last-child { margin-bottom: 0; }


/* ============================================================
   PROD-PILLARS — 2 colonnes : origine France + engagement.
   Communs à toutes les pages produit, placés avant cross-sell.
   ============================================================ */
.prod-pillars {
  padding-block: clamp(64px, 8vw, 112px);
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
}
.prod-pillars__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
}
.prod-pillar {
  padding: clamp(28px, 3vw, 48px);
  background: var(--c-blanc);
  border-radius: clamp(14px, 1.2vw, 20px);
  box-shadow: 0 1px 2px rgba(39,63,29,.04);
}
.prod-pillar__title {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(22px, 2vw, 30px);
  color: var(--c-principale);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.prod-pillar p {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text);
}
.prod-pillar p:last-child { margin-bottom: 0; }
.prod-pillar strong { color: var(--c-principale); }
.prod-pillar__france-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-block-start: var(--space-3);
  padding: 6px 14px;
  background: color-mix(in srgb, var(--c-tertiaire) 60%, var(--c-blanc));
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  color: var(--c-principale);
  letter-spacing: 0.03em;
}
@media (max-width: 900px) {
  .prod-pillars__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   CAT-EDITORIAL — sections éditoriales catalogue index.
   Deux blocs : présentation + comment choisir.
   ============================================================ */
.cat-editorial {
  padding-block: clamp(64px, 8vw, 112px);
  background: var(--c-blanc);
}
.cat-editorial__inner {
  max-width: 880px;
  margin: 0 auto;
  display: grid;
  gap: clamp(48px, 5vw, 80px);
}
.cat-editorial__title {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 2.8vw, 40px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 22ch;
}
.cat-editorial__block p {
  margin: 0 0 var(--space-3);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
  color: var(--color-text);
  max-width: 70ch;
}
.cat-editorial__block p:last-child { margin-bottom: 0; }
.cat-editorial__block strong { color: var(--c-principale); }


/* Accessibilité : masquer visuellement tout en gardant lisible AT. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}


/* ============================================================
   HOME — paragraphe d'intro sous le subtitle du coverflow.
   ============================================================ */
.poulies__lead {
  max-width: 70ch;
  margin: 0 auto var(--space-4);
}
.poulies__lead p {
  margin: 0;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.7;
  color: var(--color-text);
  text-align: center;
}
.poulies__lead strong { color: var(--c-principale); }


/* ============================================================
   ACTU-INTRO — bloc éditorial après le hero actualités.
   ============================================================ */
.actu-intro {
  padding-block: clamp(48px, 6vw, 96px);
  background: var(--c-blanc);
}
.actu-intro__inner { max-width: 760px; margin: 0 auto; }
.actu-intro__title {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 2.8vw, 40px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 22ch;
}
.actu-intro p {
  margin: 0 0 var(--space-3);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
  color: var(--color-text);
  max-width: 70ch;
}
.actu-intro p:last-child { margin-bottom: 0; }
.actu-intro strong { color: var(--c-principale); }


/* ============================================================
   ACTU-LINE — bloc "Ligne éditoriale" en fin de page actualités.
   ============================================================ */
.actu-line {
  padding-block: clamp(48px, 6vw, 96px);
  background: var(--c-blanc);
}
.actu-line__inner { max-width: 760px; margin: 0 auto; }
.actu-line__title {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 2.8vw, 40px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 22ch;
}
.actu-line p {
  margin: 0 0 var(--space-3);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
  color: var(--color-text);
  max-width: 70ch;
}
.actu-line p:last-child { margin-bottom: 0; }
.actu-line strong { color: var(--c-principale); }


/* ============================================================
   ACTU-EMPTY__HINT — complément à l'empty state.
   ============================================================ */
.actu-empty__hint {
  margin: var(--space-3) auto 0;
  max-width: 60ch;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--color-text-muted);
  text-align: center;
}


/* ============================================================
   ACTU-THEMES — grille 4 thématiques éditoriales.
   ============================================================ */
.actu-themes {
  padding-block: clamp(64px, 8vw, 112px);
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
}
.actu-themes__head {
  max-width: 760px;
  margin: 0 auto clamp(40px, 4vw, 64px);
  text-align: center;
}
.actu-themes__title {
  margin: var(--space-1) 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 2.8vw, 40px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.actu-themes__grid {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 2.4vw, 40px);
}
.actu-themes__card {
  padding: clamp(28px, 3vw, 40px);
  background: var(--c-blanc);
  border-radius: clamp(14px, 1.2vw, 20px);
  box-shadow: 0 1px 2px rgba(39,63,29,.04);
}
.actu-themes__sub {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(18px, 1.5vw, 24px);
  color: var(--c-principale);
  letter-spacing: -0.005em;
  line-height: 1.25;
}
.actu-themes__card p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text);
}
@media (max-width: 900px) {
  .actu-themes__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   CONTACT-INTRO — bloc éditorial avant le formulaire.
   ============================================================ */
.contact-intro {
  padding-block: clamp(48px, 6vw, 96px);
  background: var(--c-blanc);
}
.contact-intro__inner { max-width: 760px; margin: 0 auto; }
.contact-intro__title {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(26px, 2.8vw, 40px);
  color: var(--c-principale);
  letter-spacing: -0.01em;
  line-height: 1.15;
  max-width: 22ch;
}
.contact-intro p {
  margin: 0 0 var(--space-3);
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.75;
  color: var(--color-text);
  max-width: 70ch;
}
.contact-intro p:last-child { margin-bottom: 0; }
.contact-intro strong { color: var(--c-principale); }


/* ============================================================
   CONTACT-EXTRA — 2 colonnes "Avant de nous contacter" + engagement.
   ============================================================ */
.contact-extra {
  padding-block: clamp(64px, 8vw, 112px);
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
}
.contact-extra__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.4vw, 40px);
}
.contact-extra__block {
  padding: clamp(28px, 3vw, 48px);
  background: var(--c-blanc);
  border-radius: clamp(14px, 1.2vw, 20px);
  box-shadow: 0 1px 2px rgba(39,63,29,.04);
}
.contact-extra__title {
  margin: var(--space-1) 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--c-principale);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.contact-extra__block p {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text);
}
.contact-extra__block p:last-child { margin-bottom: 0; }
.contact-extra__block strong { color: var(--c-principale); }
.contact-extra__list {
  margin: 0 0 var(--space-3);
  padding-inline-start: var(--space-3);
  display: grid;
  gap: var(--space-2);
}
.contact-extra__list li {
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--color-text);
}
@media (max-width: 1100px) {
  .contact-extra__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .contact-extra__grid { grid-template-columns: 1fr; }
}


/* ============================================================
   ENT-INTRO — paragraphe secondaire centré (page Entreprise).
   ============================================================ */
.ent-intro__text--secondary {
  margin-top: var(--space-3);
  font-size: clamp(15px, 1.05vw, 17px);
  font-weight: var(--fw-regular);
  color: var(--color-text);
  line-height: 1.7;
}


/* ============================================================
   ENT-APPROCHE — section "Notre approche" 3 axes numérotés.
   ============================================================ */
.ent-approche {
  padding-block: clamp(64px, 8vw, 112px);
  background: var(--c-blanc);
}
.ent-approche__inner { max-width: 980px; margin: 0 auto; }
.ent-approche__head { margin-bottom: clamp(40px, 4vw, 64px); }
.ent-approche__lead {
  margin: var(--space-2) 0 0;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.7;
  color: var(--color-text);
  max-width: 65ch;
}
.ent-approche__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: clamp(32px, 4vw, 56px);
}
.ent-approche__item {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: clamp(20px, 2.4vw, 40px);
  align-items: start;
  padding-block: clamp(20px, 2.4vw, 32px);
  border-block-start: 1px solid color-mix(in srgb, var(--c-principale) 12%, transparent);
}
.ent-approche__num {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(36px, 4vw, 56px);
  color: var(--c-secondaire);
  letter-spacing: -0.02em;
  line-height: 1;
}
.ent-approche__copy { min-width: 0; }
.ent-approche__sub {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 1.8vw, 28px);
  color: var(--c-principale);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.ent-approche__item p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text);
}
@media (max-width: 700px) {
  .ent-approche__item {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  .ent-approche__copy { min-width: 0; }
}


/* ============================================================
   ENT-HISTORY__INTRO — paragraphe d'intro de la timeline.
   ============================================================ */
.ent-history__intro {
  margin: 0 auto clamp(40px, 4vw, 64px);
  max-width: 65ch;
  text-align: center;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.7;
  color: var(--color-text);
}


/* ============================================================
   HOME-TERRITOIRE — section "Notre territoire" (avant CTA band).
   2 blocs côte à côte sur fond crème léger.
   ============================================================ */
.home-territoire {
  padding-block: clamp(64px, 8vw, 112px);
  background: color-mix(in srgb, var(--c-tertiaire) 50%, var(--c-blanc));
}
.home-territoire__head {
  max-width: 760px;
  margin: 0 auto clamp(40px, 4vw, 64px);
  text-align: center;
}
.home-territoire__head .section-title {
  margin: var(--space-1) 0 0;
}
.home-territoire__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 4vw, 64px);
}
.home-territoire__block {
  padding: clamp(28px, 3vw, 48px);
  background: var(--c-blanc);
  border-radius: clamp(14px, 1.2vw, 20px);
  box-shadow: 0 1px 2px rgba(39,63,29,.04);
}
.home-territoire__sub {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(20px, 1.8vw, 26px);
  color: var(--c-principale);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.home-territoire__block p {
  margin: 0 0 var(--space-2);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text);
}
.home-territoire__block p:last-child { margin-bottom: 0; }
.home-territoire__block strong { color: var(--c-principale); }
@media (max-width: 900px) {
  .home-territoire__grid { grid-template-columns: 1fr; }
}