/* ============================================================
   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;
}
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);
}


/* ============================================================
   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; }

.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; }
}