/* =============================================================
   AgriPix — Suite ERP coop · couche marketing
   Extensions par-dessus tokens.css / site.css / components.css
   ============================================================= */

/* ---------- Évite le double bouton CTA sur desktop ---------- */
@media (min-width: 881px) { .nav > .btn-primary { display: none; } }

/* ---------- Hero produit (teinté par module) ---------- */
.hero.compact .hero-inner { padding: clamp(2.5rem,5vw,4rem) 0 clamp(3rem,6vw,5rem); }
.hero .back-link {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--label-l);
  font-weight: var(--weight-medium); color: rgba(255,255,255,0.7); margin-bottom: var(--space-5);
  transition: color var(--dur-short-2);
}
.hero .back-link:hover { color: #fff; }
.hero .back-link svg { width: 16px; height: 16px; }
.hero-status-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-5) 0; }

.hero.tint-green   { background: radial-gradient(at 14% 16%, rgba(143,233,170,0.55) 0%, transparent 46%), radial-gradient(at 86% 12%, rgba(111,184,223,0.4) 0%, transparent 50%), radial-gradient(at 50% 108%, rgba(95,165,107,0.3) 0%, transparent 55%), linear-gradient(150deg, var(--green-800) 0%, var(--green-900) 60%, #0c2614 100%); }
.hero.tint-amber   { background: radial-gradient(at 14% 16%, rgba(248,185,74,0.5) 0%, transparent 46%), radial-gradient(at 86% 12%, rgba(143,233,170,0.32) 0%, transparent 50%), radial-gradient(at 50% 108%, rgba(199,130,19,0.3) 0%, transparent 55%), linear-gradient(150deg, #6b4a0f 0%, var(--earth-900) 55%, #241606 100%); }
.hero.tint-earth   { background: radial-gradient(at 14% 16%, rgba(221,200,168,0.5) 0%, transparent 46%), radial-gradient(at 86% 12%, rgba(248,185,74,0.3) 0%, transparent 50%), radial-gradient(at 50% 108%, rgba(115,84,50,0.4) 0%, transparent 55%), linear-gradient(150deg, var(--earth-800) 0%, var(--earth-900) 55%, #1c130b 100%); }
.hero.tint-sky     { background: radial-gradient(at 14% 16%, rgba(165,212,237,0.55) 0%, transparent 46%), radial-gradient(at 86% 12%, rgba(143,233,170,0.3) 0%, transparent 50%), radial-gradient(at 50% 108%, rgba(24,101,147,0.35) 0%, transparent 55%), linear-gradient(150deg, var(--sky-800) 0%, var(--sky-900) 60%, #061a28 100%); }
.hero.tint-deep    { background: radial-gradient(at 14% 16%, rgba(143,233,170,0.4) 0%, transparent 46%), radial-gradient(at 86% 12%, rgba(111,184,223,0.42) 0%, transparent 50%), radial-gradient(at 50% 108%, rgba(46,125,50,0.3) 0%, transparent 55%), linear-gradient(150deg, var(--green-800) 0%, var(--sky-900) 60%, #061a28 100%); }

/* ---------- Module strip sticky sous le header ---------- */
.module-subnav {
  position: sticky; top: 72px; z-index: var(--z-raised);
  background: rgba(250,249,246,0.82); backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--color-outline-variant);
}
.module-subnav .wrap { display: flex; align-items: center; gap: var(--space-3); height: 60px; overflow-x: auto; }
.module-subnav .ms-label { font-size: var(--label-m); text-transform: uppercase; letter-spacing: 0.12em; font-weight: var(--weight-semibold); color: var(--neutral-400); white-space: nowrap; flex-shrink: 0; }

/* ---------- Mock : composer ComPix ---------- */
.compose { background: var(--color-surface); }
.compose .post {
  background: #fff; border: 1px solid var(--color-outline-variant); border-radius: var(--shape-m);
  padding: var(--space-4); margin-bottom: var(--space-3);
}
.compose .post-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.compose .post-av { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg,var(--green-400),var(--green-700)); flex-shrink: 0; }
.compose .post-line { height: 9px; border-radius: 5px; background: var(--neutral-200); margin-bottom: 7px; }
.compose .draft-tag { display:inline-flex; align-items:center; gap:6px; font-size: var(--label-m); font-weight: var(--weight-semibold); color: var(--sky-700); background: var(--sky-100); padding: 3px 10px; border-radius: var(--shape-full); }

/* ---------- Mock : ligne facture BillPix ---------- */
.invoice-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-outline-variant); font-size: var(--body-m); }
.invoice-row:last-child { border-bottom: none; }
.invoice-row .mono { font-family: var(--font-mono); }
.invoice-total { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); background: var(--green-50); border-radius: var(--shape-m); margin-top: var(--space-3); }

/* ---------- Mock : cotation MarketPix ---------- */
.cotation { display: flex; flex-direction: column; gap: var(--space-2); }
.cotation-row { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--shape-m); background: rgba(255,255,255,0.85); border: 1px solid var(--color-outline-variant); }
.cotation-row .ct-name { font-weight: var(--weight-medium); font-size: var(--body-m); }
.cotation-row .ct-sub { font-size: var(--label-m); color: var(--color-on-surface-variant); font-family: var(--font-mono); }
.cotation-row .ct-price { font-family: var(--font-mono); font-weight: var(--weight-bold); font-size: var(--body-l); }
.cotation-row .ct-delta { font-size: var(--label-m); font-family: var(--font-mono); }

/* ---------- Mock : optimisation PredicPix ---------- */
.predic-map { position: relative; height: 220px; background: linear-gradient(160deg,#eef7fc,#f1f8f3); border: 1px solid var(--color-outline-variant); border-radius: var(--shape-m); overflow: hidden; }
.predic-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- Accent marque suite (les ...Pix) ---------- */
.brand .tag.suite { background: var(--green-100); color: var(--green-700); }

/* ---------- Couleurs par module (gradients squircle) ---------- */
.ico-logipix   { background: linear-gradient(150deg, #5fa56b, #25602a); }
.ico-marketpix { background: linear-gradient(150deg, #f8b94a, #9d6709); }
.ico-silopix   { background: linear-gradient(150deg, #c6a679, #5a4127); }
.ico-compix    { background: linear-gradient(150deg, #6fb8df, #134e72); }
.ico-billpix   { background: linear-gradient(150deg, #3d8a4a, #134e72); }
.ico-predicpix { background: linear-gradient(150deg, #5fa56b, #3d99cc 50%, #ea9d24); }

/* tint helpers for soft backgrounds / dots */
.dot-logipix   { color: var(--green-600); }
.dot-marketpix { color: var(--amber-500); }
.dot-silopix   { color: var(--earth-500); }
.dot-compix    { color: var(--sky-500); }
.dot-billpix   { color: var(--green-700); }
.dot-predicpix { color: var(--sky-600); }

/* ---------- Badge de statut (discret) ---------- */
.statusbadge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--label-m); font-weight: var(--weight-semibold);
  padding: 4px 11px 4px 9px; border-radius: var(--shape-full);
  letter-spacing: 0.01em; white-space: nowrap;
  border: 1px solid transparent;
}
.statusbadge .sd { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.statusbadge.s-test   { background: var(--green-100);  color: var(--green-700);  border-color: rgba(46,125,50,.18); }
.statusbadge.s-test .sd   { background: var(--green-500); box-shadow: 0 0 0 0 rgba(95,165,107,.7); animation: livePulse 2.4s var(--ease-emphasized) infinite; }
.statusbadge.s-dev    { background: var(--sky-100);    color: var(--sky-700);    border-color: rgba(24,101,147,.16); }
.statusbadge.s-dev .sd    { background: var(--sky-500); }
.statusbadge.s-soon   { background: var(--amber-100);  color: var(--amber-700);  border-color: rgba(199,130,19,.18); }
.statusbadge.s-soon .sd   { background: var(--amber-400); }
.statusbadge.s-road   { background: var(--neutral-100); color: var(--neutral-600); border-color: var(--color-outline-variant); }
.statusbadge.s-road .sd   { background: var(--neutral-400); }

/* on dark hero */
.statusbadge.on-dark { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22); color: #fff; backdrop-filter: blur(6px); }
.statusbadge.on-dark.s-test .sd { background: #8fe9aa; }
.statusbadge.on-dark.s-dev .sd  { background: #6fb8df; }
.statusbadge.on-dark.s-soon .sd { background: #f8b94a; }
.statusbadge.on-dark.s-road .sd { background: #c1bdaf; }

/* ---------- Grille des 6 modules ---------- */
.module-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.module-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  background: rgba(255,255,255,0.62); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.7); border-radius: var(--shape-l);
  padding: var(--space-6); box-shadow: var(--elev-1);
  text-decoration: none; color: inherit; position: relative; overflow: hidden;
  transition: transform var(--dur-medium-1) var(--ease-emphasized), box-shadow var(--dur-medium-1) var(--ease-emphasized);
}
.module-card::after {
  content:''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--mc-accent, var(--green-400)); opacity: 0.85;
}
.module-card:hover { transform: translateY(-5px); box-shadow: var(--elev-4); }
.module-card .mc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.module-card .feature-ico { margin-bottom: 0; width: 50px; height: 50px; }
.module-card .mc-name { font-size: var(--title-l); font-weight: var(--weight-bold); letter-spacing: -0.02em; margin: var(--space-2) 0 0; }
.module-card .mc-base { font-size: var(--body-m); color: var(--color-on-surface); font-weight: var(--weight-medium); margin: 0; }
.module-card .mc-desc { font-size: var(--body-m); color: var(--color-on-surface-variant); line-height: 1.55; margin: 0; }
.module-card .mc-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--label-l); font-weight: var(--weight-semibold); color: var(--green-700);
  padding-top: var(--space-2);
}
.module-card .mc-go svg { width: 16px; height: 16px; transition: transform var(--dur-short-2) var(--ease-spring-bouncy); }
.module-card:hover .mc-go svg { transform: translateX(4px); }

/* ---------- Encart synergie (connecté aux autres modules) ---------- */
.synergy {
  display: flex; gap: var(--space-4); align-items: flex-start;
  background: linear-gradient(180deg, rgba(210,234,246,0.5), rgba(220,237,222,0.4));
  border: 1px solid var(--color-outline-variant); border-left: 3px solid var(--sky-400);
  border-radius: var(--shape-m); padding: var(--space-4) var(--space-5);
}
.synergy .sy-ico { flex-shrink: 0; width: 38px; height: 38px; border-radius: var(--shape-m);
  background: linear-gradient(150deg, var(--sky-300), var(--green-500)); color: #fff;
  display: flex; align-items: center; justify-content: center; }
.synergy .sy-ico svg { width: 20px; height: 20px; }
.synergy p { margin: 0; font-size: var(--body-m); color: var(--color-on-surface-variant); line-height: 1.55; }
.synergy strong { color: var(--color-on-surface); font-weight: var(--weight-semibold); }

/* ---------- Bandeau adhérent (capacité transversale) ---------- */
.adherent-band {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: center;
  background: rgba(255,255,255,0.6); backdrop-filter: blur(14px);
  border: 1px dashed var(--color-outline); border-radius: var(--shape-l);
  padding: var(--space-6) var(--space-8);
}
.adherent-band .ab-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.adherent-band .ab-chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--label-l); font-weight: var(--weight-medium);
  background: var(--color-surface-high); border: 1px solid var(--color-outline-variant);
  padding: 5px 12px; border-radius: var(--shape-full); color: var(--color-on-surface-variant);
}

/* ---------- Liste « ce que ça change » numérotée ---------- */
.change-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.change-card {
  background: rgba(255,255,255,0.6); border: 1px solid var(--color-outline-variant);
  border-radius: var(--shape-l); padding: var(--space-6); box-shadow: var(--elev-1);
}
.change-card .cc-num {
  font-family: var(--font-mono); font-size: var(--label-m); font-weight: var(--weight-medium);
  color: #fff; width: 30px; height: 30px; border-radius: var(--shape-s);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4);
}
.change-card h3 { font-size: var(--title-m); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.change-card p { font-size: var(--body-m); color: var(--color-on-surface-variant); line-height: 1.55; margin: 0; }

/* ---------- Problème (contraste, fond sombre léger) ---------- */
.problem-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: var(--space-4); margin-top: var(--space-8); }
.problem-card {
  background: rgba(255,255,255,0.55); border: 1px solid var(--color-outline-variant);
  border-radius: var(--shape-m); padding: var(--space-5);
}
.problem-card .pc-ico { width: 40px; height: 40px; border-radius: var(--shape-m); background: var(--red-50); color: var(--red-500);
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-3); }
.problem-card .pc-ico svg { width: 22px; height: 22px; }
.problem-card h3 { font-size: var(--title-m); font-weight: var(--weight-semibold); margin: 0 0 6px; }
.problem-card p { font-size: var(--body-m); color: var(--color-on-surface-variant); line-height: 1.55; margin: 0; }

/* ---------- Pilier solution ---------- */
.pillars { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-5); margin-top: var(--space-10); }
.pillar { text-align: left; }
.pillar .feature-ico { margin-bottom: var(--space-4); }
.pillar h3 { font-size: var(--title-l); font-weight: var(--weight-semibold); margin: 0 0 var(--space-2); }
.pillar p { font-size: var(--body-l); color: var(--color-on-surface-variant); line-height: 1.55; }

/* ---------- Mini-nav modules (pages produit) ---------- */
.module-strip { display: flex; gap: var(--space-3); flex-wrap: wrap; }
.module-strip a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4); border-radius: var(--shape-full);
  background: rgba(255,255,255,0.6); border: 1px solid var(--color-outline-variant);
  font-size: var(--label-l); font-weight: var(--weight-medium); color: var(--color-on-surface-variant);
  transition: background var(--dur-short-2), color var(--dur-short-2), transform var(--dur-short-2);
}
.module-strip a:hover { background: #fff; color: var(--color-on-surface); transform: translateY(-2px); }
.module-strip a.active { background: var(--green-600); color: #fff; border-color: var(--green-600); }
.module-strip a .ms-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

/* ---------- Cross-link modules en pied de page produit ---------- */
.crosslink-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-4); }
.crosslink {
  display: flex; align-items: center; gap: var(--space-3);
  background: rgba(255,255,255,0.6); border: 1px solid var(--color-outline-variant);
  border-radius: var(--shape-m); padding: var(--space-4); text-decoration: none; color: inherit;
  transition: transform var(--dur-short-2), box-shadow var(--dur-short-2);
}
.crosslink:hover { transform: translateY(-3px); box-shadow: var(--elev-3); }
.crosslink .cl-ico { flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--squircle); color:#fff;
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.crosslink .cl-ico::before { content:''; position:absolute; inset:0 0 auto 0; height:48%; background:linear-gradient(180deg,rgba(255,255,255,0.4),transparent); }
.crosslink .cl-ico svg { width: 22px; height: 22px; position: relative; }
.crosslink .cl-name { font-weight: var(--weight-semibold); font-size: var(--body-l); }
.crosslink .cl-base { font-size: var(--label-l); color: var(--color-on-surface-variant); }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .module-grid { grid-template-columns: repeat(2, 1fr); }
  .change-grid { grid-template-columns: 1fr; }
  .pillars { grid-template-columns: 1fr; }
  .crosslink-grid { grid-template-columns: 1fr 1fr; }
  .adherent-band { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .module-grid { grid-template-columns: 1fr; }
  .crosslink-grid { grid-template-columns: 1fr; }
}