/* ==========================================================================
   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; }
/* Le tag de deploiement, a cote de la signature. Discret : c'est un repere
   d'exploitation, pas un element de marque — et il n'est rendu qu'a
   l'administrateur du produit (voir la condition dans _footer.html). */
.sph-footer__version { opacity: .55; font-variant-numeric: tabular-nums;
  font-size: .92em; letter-spacing: .02em; }

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

/* ── Bandeau d'accès tarifaire (/boutique) ────────────────────────────────
   `.sph-banner` et `.sph-banner__cta` étaient posés dans boutique.html
   depuis l'origine SANS aucune règle : mesuré le 2026-08-31, zéro
   occurrence dans cette feuille. Les deux appels à l'action rendaient donc
   en liens de texte nus au milieu d'une phrase — d'où « des boutons plus
   explicites ». Ils reçoivent ici la forme qu'ils annonçaient déjà. */
.sph-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  padding: 16px 20px; margin: 0 0 28px;
  border: 1px solid #e0ddd6; border-radius: 12px;
  background: #f7f4ee;
}
.sph-banner > .fas { color: #2d6a4f; font-size: 1.05rem; flex: 0 0 auto; }
.sph-banner__msg { flex: 1 1 260px; font-size: .9rem; line-height: 1.5; color: #1a1a2e; }
.sph-banner__msg strong { display: block; font-weight: 700; }

/* Le couple bouton plein / bouton contour : même gabarit, deux poids. */
.sph-banner__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex: 0 0 auto; padding: 10px 18px; border-radius: 9px;
  font-size: .87rem; font-weight: 600; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
  background: #2d6a4f; color: #fff;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sph-banner__cta:hover { background: #1b4332; color: #fff; }
.sph-banner__cta:focus-visible { outline: 2px solid #2d6a4f; outline-offset: 2px; }
.sph-banner__cta .fas { font-size: .9em; }

.sph-banner__cta--ghost {
  background: transparent; color: #2d6a4f; border-color: #cfd8d2;
}
.sph-banner__cta--ghost:hover {
  background: rgba(45,106,79,.08); color: #1b4332; border-color: #2d6a4f;
}

@media (max-width: 640px) {
  .sph-banner { padding: 14px 16px; }
  .sph-banner__cta { flex: 1 1 100%; }
}

/* ── Verrou optique du bloc de marque ────────────────────────────────────
   `.gk-nav-brand` centre l'icone sur le LOCKUP entier (mot-marque + la
   sous-ligne « par L'Or Vert »). Mesure du 2026-08-31 en 1440 : centre de
   l'icone a 49, centre du mot-marque a 42.8 — l'icone tombe 6px SOUS la
   ligne que l'oeil lit comme le logo, parce que la sous-ligne de 10px tire
   le centre du bloc vers le bas. Mathematiquement centre, visuellement
   decale : c'est ce que l'owner voyait.

   On remonte l'icone vers le centre optique du mot-marque. La valeur suit la
   sous-ligne : (hauteur sous-ligne 10.4 + ecart 2) / 2 ~= 6px. Regle portee
   par la FEUILLE et non par le `brand_html`, qui est de la donnee. */
.gk-nav-brand > svg {
  /* ⚠ ON ALIGNE L'ENCRE, PAS LA BOITE — et on donne au signe sa taille.
     Mesure au grossissement x4 : dans une boite de 30px, le dessin n'occupe
     que 20.3px (haut 5.9px de marge, bas 3.8px), il est donc DECENTRE dans
     sa propre boite de ~1px vers le bas. Centrer les boites — ce que fait
     `align-items: center` — laissait donc l'encre a 50.1 quand le bloc de
     marque est a 49.
     Et surtout : 20px d'encre contre un bloc de 34px, le signe ne tenait pas
     son rang a cote de deux lignes de texte ; sa masse (les feuilles) se
     lisait en haut et sa tige pendait le long de « PAR L'OR VERT ».
     38px de boite portent ~26px d'encre, et le decalage compense l'asymetrie
     du trace. Trois iterations a l'oeil avant de mesurer l'encre : c'etait
     la mesure qui manquait, pas la patience. */
  /* MISE A JOUR 2026-09-01 — le signe a change (feuille pleine de Font
     Awesome, owner). Le `-1.3px` compensait l'asymetrie du BRIN d'avant ;
     applique au nouveau trace il faisait deborder l'encre de 1px au-dessus
     de la barre. Mesure : encre a 48.5, bloc de marque a 51.
     Le decalage est desormais porte par le dessin lui-meme — son `viewBox`
     centre l'encre dans sa propre boite (packages.yaml `brand_html`) — donc
     la CSS n'a plus de nombre magique a maintenir pour un signe qu'elle ne
     connait pas. Changer de logo ne demande plus de toucher a ce fichier. */
  position: relative; top: 0;
  width: 38px; height: 38px; flex-shrink: 0;
}
/* top: 0 — le CENTRE, mesure. L'ancre est en `align-items: center`, donc
   sans decalage l'icone tombe a 34-64 et son milieu a 49, exactement
   celui du bloc de marque. Les valeurs essayees avant : -6px la faisait
   SORTIR du bloc par le haut (28 contre 32), -2px la laissait a fleur du
   bord (haut 32, milieu 47) — alignee sur le mot-marque, mais lue comme
   collee en haut. L'owner a demande l'alignement vertical : c'est le
   milieu du bloc, pas celui de la premiere ligne. */
/* -2px, pas -6px : a -6 l'icone sortait du bloc de marque par le HAUT
   (haut de l'icone 28, haut du bloc 32) et se lisait comme decollee de
   la barre. -2 la garde DANS le bloc tout en la remontant vers le
   centre optique du mot-marque, entre le centre geometrique du lockup
   (49) et celui du mot-marque (42.8). Owner 2026-08-31. */

/* ── Barre du telephone : rendre « Se connecter » atteignable ──────────
   Mesure du 2026-09-01 en 360 px sur beta.sphaigne-chili.com : marque 213 px
   (dont 164 pour le seul mot-marque), burger 16, actions 144 — soit un bord
   droit a 389 pour un ecran de 360. Le bouton de connexion sortait de
   l'ecran : sur la capture de l'owner il n'en reste qu'un liseré vert.
   Retirer la bascule de theme a rendu 36 px (nav_theme_toggle: false), il en
   manquait encore 29.

   On reduit le MOT-MARQUE, on ne le cache pas : « Sphaigne du Chili » est le
   nom du site, et l'owner a deja refuse qu'on efface un logo pour gagner de
   la place (2026-05-09, « stop compressing logo »). La feuille garde sa
   taille. Regle posee dans la feuille de SPHAIGNE et non dans gk-nav.css :
   aucun autre produit n'a ce mot-marque ni ce probleme.
   ───────────────────────────────────────────────────────────────────── */
@media (max-width: 430px) {
  .gk-nav-brand > span { font-size: 13px !important; }
  /* La sous-ligne porte un `font-size` EN LIGNE (.6rem) depuis
     `brand_html` : une declaration de feuille ne la touche pas sans
     `!important`, et sa hauteur compte dans la barre. */
  .gk-nav-brand > span > span:last-child { font-size: 8.5px !important;
    letter-spacing: .08em !important; }
}