/* ==========================================================================
   Sphaigne du Chili — Showcase Site
   Brand: L'Or Vert — Premium Chilean Sphagnum Moss
   Colors derived from product label design
   ========================================================================== */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Brand greens */
  --green-dark: #1b4332;
  --green: #2d6a4f;
  --green-mid: #40916c;
  --green-light: #52b788;
  --green-pale: #b7e4c7;
  --green-bg: #d8f3dc;

  /* Accent pink (from label "Sphagnum Moss" text) */
  --pink: #d63384;
  --pink-light: #e8679a;

  /* Gold (L'Or Vert = The Green Gold) */
  --gold: #c9a227;
  --gold-light: #e0c767;

  /* Neutrals */
  --cream: #faf8f4;
  --cream-dark: #f0ece4;
  --white: #ffffff;
  --text: #1a1a2e;
  --text2: #3d3d56;
  --text3: #6b6b80;
  --border: #e0ddd6;

  /* Layout */
  --nav-h: 72px;
  --max-w: 1200px;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 20px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.10);

  /* Transitions */
  --ease: cubic-bezier(.4,0,.2,1);
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: 'DM Sans', 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--pink); }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 24px; }

/* --- Typography --- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.25; color: var(--green-dark); }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin-bottom: 16px; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.1rem; }

.section-subtitle {
  font-size: 1.1rem;
  color: var(--text3);
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.accent { color: var(--pink); }
.text-green { color: var(--green); }
.text-gold { color: var(--gold); }
.text-center { text-align: center; }

/* --- Navigation ---
   The bespoke .nav* / .nav__* rules were deleted 2026-05-07 when sphaigne
   adopted the canonical _gk_nav.html (see ADR 0026 + the architect
   consultation 2026-05-07-sphaigne-chili-new-shop-pilot-fapi). Brand and
   middle-cluster links are now declared in packages.yaml.Sphaigne-Chili
   (brand_html + nav_pages); all chrome styling lives in gateka-core's
   gk-nav.css. --nav-h is still consumed by hero/banner offsets below. */

/* --- Hero --- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 60px) 0 80px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--green-dark) 0%, #0d2818 100%);
}
.hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .65;
  /* Was `mix-blend-mode: luminosity` — dropped 2026-05-07 because the
     blend mode auto-isolates .hero into its own stacking context, and
     Chromium bug 753075 then lets the isolated context paint over the
     fixed .gk-nav's auth dropdown. `filter: saturate()` desaturates
     without creating a stacking trap (architect verdict 2026-05-07-
     recurring-bug-sphaigne-index-html-has). gk-nav.css now also
     applies `body { isolation: isolate }` as the canonical fix. */
  filter: saturate(.4) brightness(.9);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(27,67,50,.3) 0%, rgba(13,40,24,.7) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.hero__text { color: white; max-width: 800px; margin: 0 auto; }
.hero__text h1 {
  color: white;
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  margin-bottom: 8px;
}
.hero__text h1 .script {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  color: var(--green-pale);
}
.hero__tagline {
  font-size: 1.2rem;
  color: var(--green-pale);
  margin-bottom: 24px;
  font-weight: 300;
}
.hero__desc {
  font-size: 1.05rem;
  line-height: 1.8;
  color: rgba(255,255,255,.85);
  margin-bottom: 32px;
}

.hero__badges {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  justify-content: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .8rem;
  font-weight: 600;
  background: rgba(255,255,255,.12);
  color: white;
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
}
.badge i { color: var(--green-light); font-size: .85rem; }

.hero__ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__label-img {
  max-width: 380px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transform: rotate(2deg);
  transition: transform .4s var(--ease);
}
.hero__label-img:hover { transform: rotate(0deg) scale(1.03); }

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .95rem;
  border: none;
  cursor: pointer;
  transition: all .25s var(--ease);
  text-decoration: none;
}
.btn-primary {
  background: var(--green);
  color: white;
}
.btn-primary:hover { background: var(--green-dark); color: white; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(45,106,79,.3); }
.btn-outline {
  background: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,.4);
}
.btn-outline:hover { border-color: white; color: white; background: rgba(255,255,255,.1); }
.btn-pink { background: var(--pink); color: white; }
.btn-pink:hover { background: #b52872; color: white; transform: translateY(-2px); }

/* --- Sections --- */
section { padding: 96px 0; }
/* ⚠ `:not(.keyfigures)` EST LOAD-BEARING, ce n'est pas une precaution.
   `section:nth-child(even)` a une specificite de (0,1,1) et bat donc
   `.keyfigures` (0,1,0) QUEL QUE SOIT l'ordre dans la feuille — la
   bande de chiffres, posee en rang pair, recevait du blanc a la place
   de son vert fonce. Ses libelles sont en `rgba(255,255,255,.7)` et ses
   valeurs en `--green-pale` : ecrits pour un fond sombre, ils
   devenaient invisibles ou illisibles sur blanc.
   Constate en production le 2026-08-17 (owner, capture a l'appui) ;
   invisible sur beta, dont la page n'a plus cette bande — d'ou
   « the problem of colors is only in prod ».
   L'exclusion se lit et se verifie ; l'alternative (monter la
   specificite de `.keyfigures`) reglerait CE cas et laisserait le
   piege arme pour la prochaine section qui se donne un fond. */
section:nth-child(even):not(.keyfigures) { background: var(--white); }

.section-header {
  text-align: center;
  margin-bottom: 56px;
}
.section-header h2 { position: relative; display: inline-block; }
.section-header h2::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--pink);
  margin: 12px auto 0;
  border-radius: 2px;
}

/* --- Key Figures Bar --- */
.keyfigures {
  background: var(--green-dark);
  padding: 48px 0;
}
.keyfigures__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
  color: white;
}
.keyfigure__value {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--green-pale);
  line-height: 1;
  margin-bottom: 4px;
}
.keyfigure__label {
  font-size: .85rem;
  color: rgba(255,255,255,.7);
  font-weight: 400;
}

/* --- Presentation Section --- */
.presentation__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
/* Comparatif : trois origines côte à côte (Chili / France / Chine). Le
   passage à 1 colonne sous 992px est déjà assuré par la règle
   `.presentation__grid` de la media query (même spécificité, plus bas
   dans le fichier). */
.presentation__grid--three {
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  align-items: start;
}
.presentation__text p {
  margin-bottom: 16px;
  color: var(--text2);
}
.presentation__text p:first-of-type::first-letter {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--green);
  float: left;
  margin-right: 8px;
  line-height: 1;
}

.presentation__img {
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

.feature-list {
  list-style: none;
  margin-top: 24px;
  display: grid;
  gap: 12px;
}
.feature-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.feature-list li i {
  color: var(--green);
  margin-top: 4px;
  font-size: 1rem;
  flex-shrink: 0;
}

/* --- Origin Section --- */
.origin__timeline {
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  gap: 32px;
  margin-top: 48px;
}
.origin__step {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  text-align: center;
  position: relative;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.origin__step:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.origin__step-num {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-weight: 800;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.origin__step h3 { margin-bottom: 8px; color: var(--green-dark); }
.origin__step p { font-size: .95rem; color: var(--text3); }
/* Photos d'étape (collection `process`) : format imposé pour que les
   4 cartes alignent leur pastille numérotée et leur titre — sinon
   chaque photo impose sa hauteur naturelle et la rangée part en
   escalier (owner 2026-07-31). Réserve aussi la place avant l'arrivée
   des images en loading="lazy". */
.origin__step img { aspect-ratio: 4 / 3; object-fit: cover; }

/* --- Uses / Applications --- */
.uses__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.use-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.use-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.use-card__icon {
  width: 64px; height: 64px;
  border-radius: 16px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.use-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.use-card p { font-size: .9rem; color: var(--text3); }

/* --- Comparison Table --- */
.comparison-section { overflow-x: auto; }
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: .95rem;
}
.comparison-table thead th {
  background: var(--green-dark);
  color: white;
  padding: 16px 20px;
  font-weight: 700;
  text-align: left;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.comparison-table thead th:first-child { border-radius: var(--radius) 0 0 0; }
.comparison-table thead th:last-child { border-radius: 0 var(--radius) 0 0; }
.comparison-table thead th.highlight { background: var(--green); }

.comparison-table tbody td {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.comparison-table tbody tr:last-child td { border-bottom: none; }
.comparison-table tbody tr:hover { background: var(--green-bg); }
.comparison-table td:first-child { font-weight: 600; color: var(--green-dark); }
.comparison-table .highlight-col { background: rgba(45,106,79,.04); }
.comparison-table .winner { color: var(--green); font-weight: 700; }
.comparison-table .icon-check { color: var(--green); }
.comparison-table .icon-x { color: #ccc; }

/* --- Technical Data --- */
.tech-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}
.tech-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.tech-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.tech-card__header {
  background: var(--green-dark);
  color: white;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.tech-card__header i { font-size: 1.3rem; color: var(--green-pale); }
.tech-card__header h3 { color: white; font-size: 1rem; }
.tech-card__body { padding: 24px; }
.tech-card__body table {
  width: 100%;
  border-collapse: collapse;
}
.tech-card__body td {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: .9rem;
}
.tech-card__body tr:last-child td { border-bottom: none; }
.tech-card__body td:first-child { color: var(--text3); width: 55%; }
.tech-card__body td:last-child { font-weight: 600; text-align: right; color: var(--green-dark); }

.tech-note {
  background: var(--green-bg);
  border-left: 4px solid var(--green);
  padding: 20px 24px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: 32px;
  font-size: .9rem;
  color: var(--text2);
}
.tech-note strong { color: var(--green-dark); }

/* --- Heavy Metals Table --- */
.metals-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  font-size: .85rem;
  margin-top: 24px;
}
.metals-table thead th {
  background: var(--green-dark);
  color: white;
  padding: 12px 16px;
  font-weight: 600;
  text-align: center;
  font-size: .8rem;
}
.metals-table thead th:first-child { text-align: left; }
.metals-table tbody td {
  padding: 10px 16px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.metals-table tbody td:first-child { text-align: left; font-weight: 600; }
.metals-table tbody tr:hover { background: var(--green-bg); }
.metals-table .safe { color: var(--green); font-weight: 700; }

/* --- Products / E-shop --- */
.products__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
  display: flex;
  flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-card__img {
  background: var(--cream-dark);
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.product-card__img .product-icon {
  font-size: 4rem;
  color: var(--green);
}
.product-card__img img {
  max-width: 100%;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.product-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.product-card__weight {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--pink);
  letter-spacing: .08em;
  margin-bottom: 4px;
}
.product-card__name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--green-dark);
  margin-bottom: 8px;
}
.product-card__specs {
  font-size: .85rem;
  color: var(--text3);
  margin-bottom: 16px;
  flex: 1;
}
.product-card__price {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--green-dark);
  margin-bottom: 16px;
}
.product-card__price .unit {
  font-size: .8rem;
  font-weight: 400;
  color: var(--text3);
}

/* W3 hydration — appended to .product-card__body by the boutique inline
   JS. The wrap holds either the real price (authed) or the lock badge
   (anon) so layout doesn't jump between the two states. */
.product-card__tail {
  padding: 12px 0 0;
  border-top: 1px solid var(--border);
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.product-card__price-wrap { display: flex; flex-direction: column; gap: 4px; }
.product-card__price .price-now { color: var(--green); margin-right: 4px; }
.product-card__price .price-old { font-size: .85rem; font-weight: 500; color: var(--text3); text-decoration: line-through; margin-right: 6px; }
.product-card__price .price-ht { font-size: .65rem; font-weight: 600; color: var(--text3); letter-spacing: .04em; margin-left: 4px; }

/* Wholesale-price lock — shown to anon visitors instead of the real
   price. Pink accent + lock icon signals "gated content"; the auth
   banner above the grid carries the actual CTA. */
.product-card__lock {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(217,70,168,.08);
  color: #b81579;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
}
.product-card__lock i { font-size: .72rem; }

/* Accroche « tarif pro » sous le prix PUBLIC (2026-08-18). Remplace le
   cadenas + prix flouté pour le visiteur anonyme : depuis que le serveur
   ne sert plus les tarifs de gros au public, il n'y avait plus de nombre
   à flouter — la carte affichait un cadenas sur du vide. On montre donc
   le prix de détail, et on NOMME ce qui reste derrière le compte.
   Reprend la géométrie de `.product-card__lock` (même pilule, même
   gouttière) pour que la carte ne bouge pas entre les deux états, et le
   vert du site plutôt que le rose du cadenas — c'est une invitation, pas
   un verrou. */
.product-card__pro {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(45,106,79,.10);
  color: #1b4332;
  font-size: .72rem;
  font-weight: 600;
  cursor: help;
}
.product-card__pro i { font-size: .68rem; }

/* Blurred wholesale price for anon visitors. Keeps card geometry
   identical between anon and authed states so layout doesn't jump on
   sign-in, but the number itself is unreadable. aria-hidden + pointer-
   events:none mean screen readers and copy-paste skip it too. */
.product-card__price--masked {
  filter: blur(6px);
  user-select: none;
  pointer-events: none;
  opacity: .55;
  font-size: 1.05rem;
  line-height: 1.2;
  margin-top: 4px;
}

.product-card__stock {
  font-size: .82rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.product-card__stock--in  { color: var(--green); }
.product-card__stock--out { color: #c33; }
.product-card__loading { font-size: .8rem; color: var(--text3); font-style: italic; }

/* --- Sustainability / Law --- */
.sustainability__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.sustainability__points {
  list-style: none;
  display: grid;
  gap: 20px;
}
.sustainability__points li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.sustainability__points .point-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--green-bg);
  color: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.1rem;
}
.sustainability__points h4 { margin-bottom: 4px; }
.sustainability__points p { font-size: .9rem; color: var(--text3); }
/* Colonne photos (collection éditoriale `ethique_images`) : les photos
   s'empilent, toutes au même format, et la pile fait exactement la
   hauteur de la liste d'engagements (owner 2026-07-31).

   `height:0` + `min-height:100%` est ce qui rend cette égalité vraie :
   sans lui, la colonne annonce la hauteur NATURELLE de ses photos, la
   ligne s'aligne dessus et la pile dépasse le texte — et comme les
   photos sont en loading="lazy", elle le faisait au chargement, en
   décalant tout ce qui suit. À 0 la colonne ne pèse plus sur le calcul
   de la ligne (c'est le texte qui la fixe), puis min-height la ramène
   à cette hauteur. `min-height:0` sur les pistes laisse les 1fr se
   partager le solde ; object-fit recadre. Un ajout/retrait de photo se
   répartit tout seul. */
.sustainability__media {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 16px;
  align-self: stretch;
  height: 0;
  min-height: 100%;
}
.sustainability__media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

/* --- Certifications --- */
.certs__grid {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}
.cert-badge {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px 32px;
  text-align: center;
  min-width: 180px;
  transition: transform .3s var(--ease);
}
.cert-badge:hover { transform: translateY(-4px); }
.cert-badge i { font-size: 2rem; color: var(--green); margin-bottom: 12px; display: block; }
.cert-badge__title { font-weight: 700; font-size: .9rem; color: var(--green-dark); margin-bottom: 4px; }
.cert-badge__desc { font-size: .8rem; color: var(--text3); }

/* --- Footer --- */
/* --- Footer ---
   The legacy .footer / .footer__* names were retired 2026-05-07 along with
   the bespoke nav. New scope is .sph-footer to avoid class-name collisions
   with gateka-core's _legal_footer.html. */
.sph-footer {
  background: linear-gradient(180deg, var(--green-dark) 0%, #122e1f 100%);
  color: rgba(255,255,255,.7);
  padding: 72px 0 28px;
  position: relative;
  overflow: hidden;
}
.sph-footer::before {
  content: '';
  position: absolute; inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(82,183,136,.4) 50%, transparent 100%);
}
.sph-footer__grid {
  display: grid;
  grid-template-columns: 2.2fr 1fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 48px;
}
.sph-footer__brand-logo {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none; color: white;
  margin-bottom: 16px;
}
.sph-footer__brand-logo i { font-size: 1.45rem; color: var(--green-light); align-self: center; }
.sph-footer__brand-logo strong { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.sph-footer__brand-logo em {
  font-size: .82rem; font-style: normal; font-weight: 400;
  letter-spacing: .03em;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
}
.sph-footer__pitch { font-size: .9rem; line-height: 1.65; color: rgba(255,255,255,.72); margin-bottom: 18px; }
.sph-footer__contact { list-style: none; padding: 0; margin: 0; }
.sph-footer__contact li {
  font-size: .82rem; color: rgba(255,255,255,.6);
  padding: 6px 0; display: flex; align-items: center; gap: 10px;
}
.sph-footer__contact i { width: 14px; color: var(--green-light); font-size: .8rem; }
.sph-footer__contact a { color: rgba(255,255,255,.78); text-decoration: none; transition: color .15s; }
.sph-footer__contact a:hover { color: white; text-decoration: underline; }

.sph-footer__col h4 {
  color: white;
  font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
  margin: 0 0 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.sph-footer__links { list-style: none; padding: 0; margin: 0; }
.sph-footer__links li { margin-bottom: 10px; }
.sph-footer__links a {
  display: inline-flex; align-items: center; gap: 8px;
  color: rgba(255,255,255,.62); font-size: .88rem;
  text-decoration: none;
  transition: color .15s, transform .15s;
}
.sph-footer__links a i { font-size: .72rem; color: var(--green-light); width: 14px; }
.sph-footer__links a:hover { color: white; transform: translateX(2px); text-decoration: none; }

.sph-footer__bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 22px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  flex-wrap: wrap;
  font-size: .82rem;
}
.sph-footer__copy { color: rgba(255,255,255,.55); }
.sph-footer__domains { display: inline-flex; gap: 10px; align-items: center; color: rgba(255,255,255,.4); font-size: .78rem; }
.sph-footer__domains a {
  color: rgba(255,255,255,.7); text-decoration: none;
  transition: color .15s;
}
.sph-footer__domains a:hover { color: var(--green-light); text-decoration: underline; }
.sph-footer__platform {
  text-align: center; padding-top: 14px;
  font-size: .72rem; color: rgba(255,255,255,.32);
}
.sph-footer__platform a { color: rgba(255,255,255,.5); text-decoration: none; }
.sph-footer__platform a:hover { color: var(--green-light); text-decoration: underline; }

@media (max-width: 768px) {
  .sph-footer { padding: 56px 0 24px; }
  .sph-footer__grid { grid-template-columns: 1fr; gap: 36px; padding-bottom: 32px; }
  .sph-footer__bottom { justify-content: flex-start; }
}

/* --- Quality Stars --- */
.stars { color: var(--gold); font-size: 1.2rem; letter-spacing: 2px; }
.stars-sm { font-size: .9rem; }

/* --- FAQ Accordion --- */
.faq-list { max-width: 800px; margin: 0 auto; }
details.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  overflow: hidden;
  transition: box-shadow .3s var(--ease);
}
details.faq-item:hover { box-shadow: var(--shadow); }
details.faq-item[open] { border-color: var(--green-light); }
details.faq-item summary {
  padding: 16px 20px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  list-style: none;
}
details.faq-item summary::-webkit-details-marker { display: none; }
details.faq-item summary::before {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: .7rem;
  color: var(--green);
  transition: transform .2s var(--ease);
}
details.faq-item[open] summary::before { transform: rotate(90deg); }
details.faq-item .faq-answer {
  padding: 0 20px 16px;
  color: var(--text2);
  font-size: .95rem;
}

/* --- Responsive --- */
@media (max-width: 992px) {
  .hero__content { grid-template-columns: 1fr; text-align: center; }
  .hero__visual { order: -1; }
  .hero__label-img { max-width: 280px; }
  .hero__badges { justify-content: center; }
  .hero__ctas { justify-content: center; }
  .presentation__grid { grid-template-columns: 1fr; }
  .sustainability__grid { grid-template-columns: 1fr; }
  /* En colonne unique il n'y a plus de texte à côté dont hériter la
     hauteur : sans ça, min-height:100% d'une ligne auto se résout à 0
     et les photos disparaissent. Format fixe à la place. */
  .sustainability__media { height: auto; min-height: 0; }
  .sustainability__media img { height: auto; aspect-ratio: 3 / 2; }
  .keyfigures__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .origin__timeline { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  :root { --nav-h: 64px; }
  section { padding: 64px 0; }

  .uses__grid { grid-template-columns: 1fr; }
  .products__grid { grid-template-columns: 1fr; }
  .keyfigures__grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .footer__bottom { flex-direction: column; gap: 12px; text-align: center; }
  .comparison-table { font-size: .8rem; }
  .comparison-table thead th,
  .comparison-table tbody td { padding: 10px 12px; }
}

@media (max-width: 480px) {
  .hero { min-height: auto; padding: calc(var(--nav-h) + 40px) 0 60px; }
  .hero__label-img { max-width: 220px; }
  .keyfigures__grid { grid-template-columns: 1fr 1fr; }
  .keyfigure__value { font-size: 1.8rem; }
}

/* --- Utility --- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.mt-32 { margin-top: 32px; }
.mb-16 { margin-bottom: 16px; }
.mb-32 { margin-bottom: 32px; }

/* /features admin shell — tone down the chrome so per-card pills/badges
   don't clash with sphaigne's brand greens (PROD badge mint vs accent
   dark-teal). Scoped to sphaigne by virtue of this CSS only being loaded
   on sphaigne pages (via base.html head_extra). */

/* Active shortcut-pill button — was a full-saturation `--accent` fill
   which read as a heavy dark-teal next to the muted PROD pill. Soften
   to a tinted background + accent ink, matching the PROD pill chrome. */
.feat-shortcut-opt.is-on {
  background: color-mix(in srgb, var(--accent, #2d6a4f) 14%, var(--surface, #fff)) !important;
  color: var(--accent, #2d6a4f) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #2d6a4f) 35%, transparent);
}
.feat-shortcut-opt.is-on:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent, #2d6a4f) 22%, var(--surface, #fff)) !important;
}

/* Lifecycle PROD pill — keep its green tone but bridge to sphaigne's
   accent (was a hardcoded teal #15803d). One coherent green across
   the card. */
.feat-lifecycle-badge[data-lifecycle="prod"] {
  background: color-mix(in srgb, var(--accent, #2d6a4f) 14%, transparent) !important;
  color: var(--accent, #2d6a4f) !important;
}

/* Header brand must not wrap. Signed-in, the sphaigne portal header carries
   the 4 site nav_pages (Accueil/Comparatif/Données techniques/Boutique) PLUS
   the 4 pinned shop panes (Catalogue/Historique/Commandes/Marques) — 8 items
   squeeze the brand until "L'Or Vert" breaks onto two lines and the right
   cluster is pushed off the edge. gk-nav.css only pins flex-shrink:0 on the
   brand inside its mobile media query, so desktop needs this. Scoped to
   sphaigne's own stylesheet — no cross-product CSS change. */
.gk-nav-brand { flex-shrink: 0; white-space: nowrap; }
.gk-nav-actions { flex-shrink: 0; }

/* ...and the centre cluster is what gives. Core gk-nav.css spaces links for
   3-4 items (gap 18-28px at wide breakpoints, padding 6px 12px, 14px text);
   at 8 that overflows and clips the right cluster. Tighten the centre so the
   brand and the account/theme buttons always keep their space. Loaded after
   gk-nav.css, so equal-specificity ties resolve here. Sphaigne-scoped. */
@media (min-width: 900px) {
  .gk-nav-center { gap: 2px; min-width: 0; }
  .gk-nav-link { padding: 6px 7px; gap: 6px; font-size: 13px; }
  .gk-nav-link i { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PATINE « lovable » — owner 2026-08-18 : « can you pimp a bit the pages
   effect à la lovable ? »

   Quatre gestes, pas dix : de l'AIR, des angles PLUS DOUX, des ombres
   COLOREES plutot que grises, et une apparition au defilement. Ce qui
   rend une page attachante n'est pas le nombre d'effets, c'est qu'aucun
   ne se fasse remarquer.

   ⚠ AJOUTE EN FIN DE FEUILLE, jamais en modifiant les regles existantes :
   la specificite reste identique, chaque bloc peut etre retire seul, et
   un retour arriere est une suppression de lignes contigues.
   ═══════════════════════════════════════════════════════════════════════ */

/* 1. ANGLES ET OMBRES — une ombre teintee de la couleur de marque parait
      « posee sur » la page ; une ombre grise parait sale. */
.use-card, .tech-card, .product-card, .presentation__img,
.faq-item, .tech-note {
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(27,67,50,.04),
              0 8px 24px -8px rgba(27,67,50,.10);
  transition: transform .28s cubic-bezier(.22,1,.36,1),
              box-shadow .28s cubic-bezier(.22,1,.36,1);
}

/* 2. LEVEE AU SURVOL — 3 px, pas 10. Au-dela ca devient un jouet. */
.use-card:hover, .tech-card:hover, .product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(27,67,50,.05),
              0 18px 40px -12px rgba(27,67,50,.18);
}

/* 3. LES TITRES RESPIRENT. Le soulignement rose existait deja ; il gagne
      a etre plus fin et plus long — un trait epais sous un grand titre
      pese, un trait fin le tient. */
.section-header h2::after { height: 3px; width: 56px; border-radius: 2px; }
.section-header { margin-bottom: 14px; }

/* 4. APPARITION AU DEFILEMENT — via `animation-timeline`, donc SANS
      JavaScript : rien a charger, rien a synchroniser, et le contenu est
      dans le DOM meme si l'animation ne se joue jamais.
      ⚠ Le navigateur qui ne connait pas `animation-timeline` ignore la
      regle entiere et affiche tout normalement — c'est la degradation
      qu'on veut, pas un contenu invisible en attente d'un script. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section > .container > .section-header,
    section > .container > .section-subtitle,
    .use-card, .tech-card, .product-card {
      animation: sph-apparition linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
    @keyframes sph-apparition {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ── Comparatif : le tableau est le contenu, il merite le soin ────────── */

/* Le conteneur porte l'arrondi et l'ombre ; `overflow:hidden` fait suivre
   les coins aux cellules, qu'on ne peut pas arrondir individuellement. */
.comparison-table {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(27,67,50,.05),
              0 10px 30px -12px rgba(27,67,50,.14);
}

/* ⚠ EN-TETE COLLANT — le seul effet de cette page qui soit UTILE et pas
   decoratif. Les tableaux font jusqu'a 25 lignes : sans lui, arrive au
   milieu on ne sait plus quelle colonne est le Chili et laquelle la
   Chine, et il faut remonter. `top: 64px` degage la barre de navigation,
   elle-meme collante. */
.comparison-table thead th {
  position: sticky;
  top: 64px;
  z-index: 2;
}

/* Lecture ligne a ligne : une teinte tres faible, et un survol qui suit
   l'oeil. Sur un tableau large c'est ce qui evite de sauter d'une ligne. */
.comparison-table tbody tr { transition: background-color .16s ease; }
.comparison-table tbody tr:nth-child(even) { background: rgba(27,67,50,.022); }
.comparison-table tbody tr:hover { background: rgba(82,183,136,.10); }

/* La colonne chilienne est la reponse de la page : elle porte deja une
   teinte, on lui donne un liseré vertical plutot qu'un aplat plus fort —
   ca la designe sans ecraser les deux autres, qui doivent rester
   lisibles pour que la comparaison ait un sens. */
.comparison-table td:nth-child(2),
.comparison-table th:nth-child(2) { box-shadow: inset 3px 0 0 var(--green-light,#52b788); }

/* Les trois colonnes d'origine : des cartes, pas des blocs de texte.
   ⚠ Le selecteur `.comparison-section .presentation__text` ne matchait
   RIEN : la grille est `.presentation__grid--three`, elle n'est pas
   imbriquee dans `.comparison-section`. Verifie dans le navigateur
   (borderRadius rendait '-'), pas devine depuis la feuille. */
.presentation__grid--three > .presentation__text {
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 1px 2px rgba(27,67,50,.04),
              0 8px 24px -10px rgba(27,67,50,.10);
  transition: transform .28s cubic-bezier(.22,1,.36,1),
              box-shadow .28s cubic-bezier(.22,1,.36,1);
}
.presentation__grid--three > .presentation__text:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(27,67,50,.05),
              0 18px 40px -12px rgba(27,67,50,.16);
}

/* FAQ : l'ouverture se deroule au lieu de sauter. */
.faq-item { border-radius: 12px; overflow: hidden; }
.faq-item summary { cursor: pointer; transition: background-color .18s ease; }
.faq-item summary:hover { background: rgba(82,183,136,.08); }

@media (prefers-reduced-motion: reduce) {
  .presentation__grid--three > .presentation__text,
  .comparison-table tbody tr { transition: none; }
  .presentation__grid--three > .presentation__text:hover { transform: none; }
}

/* ⚠ HAUTEURS EGALES. Les trois colonnes d'origine ont des textes de
   longueurs tres inegales (la chinoise fait la moitie de la chilienne) :
   en cartes, ca se lisait comme une carte tronquee, pas comme un contenu
   plus court. `align-items: stretch` + `height:100%` les aligne par le
   bas. Constate a l'ecran, pas deduit — la grille ne stretchait pas ses
   enfants parce que la carte n'avait pas de hauteur declaree. */
.presentation__grid--three { align-items: stretch; }
.presentation__grid--three > .presentation__text {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* « n/a » : ni prix, ni promesse. Gris moyen, poids normal, jamais la
   typographie d'un tarif — un chiffre absent ne doit pas avoir l'air d'un
   chiffre. */
.price-na { color: var(--text3, #6b6b80); font-weight: 500; letter-spacing: .02em; }