/* ═══════════════════════════════════════════════════════════
   BABG Tech — v3
   Écrit contre DESIGN.md. Toute valeur ici doit s'y retrouver.

   Les quatre interdits qui structurent cette feuille :
     aucun dégradé · aucune capitale · deux rayons (0 ou pilule)
     un seul moment de mouvement non déclenché
═══════════════════════════════════════════════════════════ */

/* ── police : notre coupe, auto-hébergée ── */
@font-face {
  font-family: 'BABG Grotesk';
  src: url('../assets/fonts/BABGGrotesk-var.woff2') format('woff2-variations');
  font-weight: 360 760;
  font-stretch: 88% 118%;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* couleur — quatre valeurs, pas de cinquième */
  --paper:  #FFFFFF;
  --ink:    #000000;
  --rail:   #D8D6D2;
  --signal: #1B3BFF;

  /* gris dérivés de l'encre, jamais un nouveau hex */
  --ink-70: color-mix(in srgb, var(--ink) 70%, var(--paper));
  --ink-55: color-mix(in srgb, var(--ink) 55%, var(--paper));
  --ink-40: color-mix(in srgb, var(--ink) 40%, var(--paper));

  /* type — échelle modulaire 1.25, base 17px */
  --t-xs:   0.8125rem;   /* 13 */
  --t-sm:   0.9375rem;   /* 15 */
  --t-base: 1.0625rem;   /* 17 */
  --t-md:   1.3125rem;   /* 21 */
  --t-lg:   1.6875rem;   /* 27 */
  --t-xl:   2.625rem;    /* 42 */
  --t-2xl:  clamp(3.5rem, 8vw, 6.5rem);

  /* espacement — 4 8 12 16 24 32 48 64 96 128, jamais 14 ni 18 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;

  --section: clamp(64px, 7vw, 112px);
  --max: 1240px;
  --gut: clamp(20px, 5vw, 56px);

  /* formes — deux rayons, aux extrêmes */
  --r-0: 0;
  --r-pill: 999px;

  /* mouvement — une courbe, deux durées */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --fast: 180ms;
  --slow: 320ms;
}

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }

body {
  font-family: 'BABG Grotesk', ui-sans-serif, system-ui, sans-serif;
  font-variation-settings: 'wght' 400, 'wdth' 100;
  font-size: var(--t-base);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Tout chiffre s'aligne. Non négociable sur un site qui parle d'argent —
   et notre zéro est barré par construction, pas par feature CSS. */
.num, time, td.num, .fig { font-variant-numeric: tabular-nums; }

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; height: auto; }

::selection { background: var(--signal); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: var(--s3) var(--s5); font-size: var(--t-sm);
}
.skip:focus { left: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* ═══════════ TYPE ═══════════
   Tracking négatif uniquement sur le display. Jamais positif. */
h1, h2, h3, h4 { font-weight: 400; line-height: 1.04; }
h1 {
  font-size: var(--t-2xl);
  font-variation-settings: 'wght' 620, 'wdth' 106;
  letter-spacing: -0.028em;
}
h2 {
  font-size: var(--t-xl);
  font-variation-settings: 'wght' 620, 'wdth' 104;
  letter-spacing: -0.024em;
  line-height: 1.06;
}
h3 {
  font-size: var(--t-lg);
  font-variation-settings: 'wght' 560, 'wdth' 102;
  letter-spacing: -0.018em;
  line-height: 1.14;
}
h4 {
  font-size: var(--t-md);
  font-variation-settings: 'wght' 540;
  letter-spacing: -0.014em;
  line-height: 1.24;
}

p { max-width: 68ch; }
.lead { font-size: var(--t-md); line-height: 1.5; letter-spacing: -0.014em; color: var(--ink-70); }
.small { font-size: var(--t-sm); color: var(--ink-55); }
.fine { font-size: var(--t-xs); color: var(--ink-55); line-height: 1.6; }

strong, b { font-variation-settings: 'wght' 560; font-weight: 400; }

/* Lien de texte : soulignement au filet, signal au survol. Pas de
   changement de couleur du texte — la couleur reste l'encre. */
.lnk {
  border-bottom: 1px solid var(--rail);
  transition: border-color var(--fast) var(--ease);
}
.lnk:hover { border-bottom-color: var(--signal); }

/* ═══════════ BOUTONS ═══════════
   Pilule, pas de flèche collée au texte, rien ne clignote. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 var(--s5);
  border-radius: var(--r-pill);
  font-size: var(--t-sm);
  font-variation-settings: 'wght' 540;
  border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper);
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover { background: var(--signal); border-color: var(--signal); }

.btn-line { background: transparent; color: var(--ink); border-color: var(--rail); }
.btn-line:hover { background: transparent; color: var(--signal); border-color: var(--signal); }

.btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-light:hover { background: var(--signal); border-color: var(--signal); color: var(--paper); }

/* Bouton secondaire posé sur un média : filet clair, fond transparent.
   Dérivé de --paper, pas un blanc écrit en dur. */
.btn-onimage {
  background: transparent;
  color: var(--paper);
  border-color: color-mix(in srgb, var(--paper) 45%, transparent);
}
.btn-onimage:hover { background: var(--signal); border-color: var(--signal); color: var(--paper); }

/* ═══════════ EN-TÊTE ═══════════
   Filet de 1px, et le flou d'arrière-plan au défilement — le seul
   emprunt direct à Apple, qui l'utilise 70 fois sur sa page. */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background var(--slow) var(--ease), border-color var(--slow) var(--ease);
}
.top.stuck {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--rail);
}
.top-in {
  max-width: var(--max); margin: 0 auto;
  padding: var(--s4) var(--gut);
  display: flex; align-items: center; gap: var(--s6);
}
.mark {
  font-size: var(--t-md);
  font-variation-settings: 'wght' 620, 'wdth' 104;
  letter-spacing: -0.03em;
}
.nav { display: flex; gap: var(--s5); margin-left: auto; }
.nav a {
  font-size: var(--t-sm); color: var(--ink-70);
  padding: var(--s2) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.nav a:hover { color: var(--ink); border-bottom-color: var(--signal); }

.burger {
  display: none; margin-left: auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
}
.burger span { display: block; width: 22px; height: 1px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1px; background: var(--ink);
  transition: transform var(--fast) var(--ease);
}
.burger span::before { top: -6px; } .burger span::after { top: 6px; }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }

.nav-m { display: none; background: var(--paper); border-bottom: 1px solid var(--rail); }
.nav-m.open { display: block; }
.nav-m a {
  display: block; padding: var(--s4) var(--gut);
  font-size: var(--t-md); font-variation-settings: 'wght' 500;
  border-top: 1px solid var(--rail);
}

/* ═══════════ HERO ═══════════
   Média plein cadre, titre dessus. C'est la structure d'Apple, de Tesla
   et d'opendue : une idée, pas trois. */
.hero { position: relative; min-height: min(92svh, 860px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Voile uni, pas un dégradé : une couleur à une opacité. */
.hero-veil { position: absolute; inset: 0; z-index: 1; background: var(--ink); opacity: .52; }
.hero-in { position: relative; z-index: 2; width: 100%; padding: var(--s9) 0 var(--s7); color: var(--paper); }
.hero h1 { max-width: 20ch; }
.hero .lead { color: color-mix(in srgb, var(--paper) 82%, transparent); margin-top: var(--s5); max-width: 46ch; }
.hero-act { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

/* Chiffres du hero : un relevé, aligné au filet. */
.hero-figs {
  display: flex; flex-wrap: wrap; gap: 0;
  margin-top: var(--s8);
  border-top: 1px solid color-mix(in srgb, var(--paper) 30%, transparent);
}
.hero-figs div {
  padding: var(--s4) var(--s6) 0 0;
  margin-right: var(--s6);
  border-right: 1px solid color-mix(in srgb, var(--paper) 18%, transparent);
}
.hero-figs div:last-child { border-right: 0; margin-right: 0; }
.hero-figs b {
  display: block; font-size: var(--t-lg); font-weight: 400;
  font-variation-settings: 'wght' 560; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.hero-figs span { font-size: var(--t-xs); color: color-mix(in srgb, var(--paper) 62%, transparent); }

/* ═══════════ LE RAIL ═══════════
   L'endroit où on prend un risque. Un filet vertical qui descend la
   page, avec un repère qui avance au défilement. C'est le sujet rendu
   visible : de la valeur qui traverse, et les points où elle est tenue.
   C'est le SEUL mouvement non déclenché de la page. */
.railed { position: relative; }
.railed::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 1px; background: var(--rail);
}
.rail-dot {
  position: absolute; left: -3px; top: 0;
  width: 7px; height: 7px; border-radius: var(--r-pill);
  background: var(--signal);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .rail-dot { display: none; } }

.stop { padding: var(--section) 0; border-bottom: 1px solid var(--rail); }
.stop:last-child { border-bottom: 0; }
.stop > .inner { padding-left: var(--s7); }

/* ═══════════ PRODUIT ═══════════ */
.prod { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7) var(--s8); align-items: start; }
.prod-fig { margin: 0; }
.prod-fig img { width: 100%; border-radius: var(--r-0); }
.prod-fig figcaption { font-size: var(--t-xs); color: var(--ink-40); margin-top: var(--s3); max-width: 44ch; }

.prod h2 { margin-bottom: var(--s4); }
.prod .claim { font-size: var(--t-md); letter-spacing: -0.014em; margin-bottom: var(--s5); max-width: 34ch; }
.prod p { color: var(--ink-70); }

.live {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); color: var(--ink-70);
  margin-bottom: var(--s4);
}
.live::before {
  content: ''; width: 6px; height: 6px; border-radius: var(--r-pill);
  background: var(--signal);
  /* Fixe. Rien ne clignote. */
}

/* Les caractéristiques sont un tableau de définitions, pas des cartes.
   Un filet encode l'information ; une carte arrondie avec une ombre
   molle ne fait que décorer. */
.defs { margin-top: var(--s6); border-top: 1px solid var(--rail); }
.defs > div {
  display: grid; grid-template-columns: 13ch 1fr; gap: var(--s5);
  padding: var(--s4) 0; border-bottom: 1px solid var(--rail);
}
.defs dt { font-variation-settings: 'wght' 540; font-size: var(--t-sm); }
.defs dd { font-size: var(--t-sm); color: var(--ink-70); }

/* Le mécanisme de Yerba Tsede EST une séquence en trois temps : la
   numérotation est donc légitime ici, et nulle part ailleurs. */
.seq { margin-top: var(--s6); counter-reset: s; }
.seq li {
  counter-increment: s; list-style: none;
  display: grid; grid-template-columns: 3ch 1fr; gap: var(--s4);
  padding: var(--s4) 0; border-top: 1px solid var(--rail);
}
.seq li::before {
  content: counter(s); font-variation-settings: 'wght' 560;
  font-variant-numeric: tabular-nums; color: var(--signal);
}
.seq b { display: block; font-variation-settings: 'wght' 540; }
.seq span { font-size: var(--t-sm); color: var(--ink-70); }

.warn {
  margin-top: var(--s6); padding-left: var(--s5);
  border-left: 2px solid var(--ink);
  font-size: var(--t-xs); line-height: 1.65; color: var(--ink-70);
  max-width: 64ch;
}

.acts { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s6); }
.host { font-size: var(--t-xs); color: var(--ink-40); }

/* ═══════════ PRINCIPES ═══════════
   Des lignes au filet. Pas de numérotation : quatre principes ne sont
   pas une séquence. */
.rows { margin-top: var(--s7); border-top: 1px solid var(--rail); }
.rows > div {
  display: grid; grid-template-columns: 22ch 1fr; gap: var(--s5) var(--s8);
  padding: var(--s6) 0; border-bottom: 1px solid var(--rail);
}
.rows h4 { letter-spacing: -0.014em; }
.rows p { color: var(--ink-70); font-size: var(--t-sm); }

/* ═══════════ SOCIÉTÉ ═══════════ */
.facts { margin-top: var(--s6); border-top: 1px solid var(--rail); max-width: 72ch; }
.facts > div {
  display: grid; grid-template-columns: 18ch 1fr; gap: var(--s5);
  padding: var(--s3) 0; border-bottom: 1px solid var(--rail);
  font-size: var(--t-sm);
}
.facts dt { color: var(--ink-55); }
.facts dd { font-variant-numeric: tabular-nums; }

/* ═══════════ CONTACT ═══════════ */
.form { margin-top: var(--s6); max-width: 540px; display: grid; gap: var(--s4); }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--t-sm); font-variation-settings: 'wght' 520; }
.field input, .field textarea {
  font: inherit; font-size: 1rem;      /* 16px minimum : sinon Safari iOS zoome */
  padding: var(--s3) var(--s4);
  border: 1px solid var(--rail); border-radius: var(--r-0);
  background: var(--paper); color: var(--ink);
  transition: border-color var(--fast) var(--ease);
}
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--signal); }
.field textarea { min-height: 140px; resize: vertical; }
.hp { position: absolute; left: -9999px; }
.msg { font-size: var(--t-sm); min-height: 1.5em; }
.msg.ok { color: var(--signal); }
.msg.err { color: var(--ink); border-left: 2px solid var(--ink); padding-left: var(--s3); }

/* ═══════════ PIED ═══════════ */
.foot { background: var(--ink); color: var(--paper); padding: var(--s9) 0 var(--s6); margin-top: 0; }
.foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s7) var(--s6); }
.foot .mark { color: var(--paper); }
.foot h5 {
  font-size: var(--t-xs); font-weight: 400;
  font-variation-settings: 'wght' 540;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
  margin-bottom: var(--s3);
}
.foot nav { display: grid; gap: var(--s2); justify-items: start; }
.foot nav a {
  font-size: var(--t-sm); color: color-mix(in srgb, var(--paper) 78%, transparent);
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.foot nav a:hover { color: var(--paper); border-bottom-color: var(--paper); }
.foot-addr { font-size: var(--t-sm); color: color-mix(in srgb, var(--paper) 62%, transparent); margin-top: var(--s4); line-height: 1.6; }
.foot-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s3);
  margin-top: var(--s8); padding-top: var(--s5);
  border-top: 1px solid color-mix(in srgb, var(--paper) 20%, transparent);
  font-size: var(--t-xs); color: color-mix(in srgb, var(--paper) 50%, transparent);
}
.foot-base span { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   PAGES LÉGALES
═══════════════════════════════════════════════════════════ */
.doc-head { padding: calc(88px + var(--section)) 0 var(--section); border-bottom: 1px solid var(--rail); }
.doc-head h1 { font-size: clamp(2.5rem, 6vw, 4.25rem); max-width: 24ch; }
.doc-meta { display: grid; gap: var(--s2); margin-top: var(--s6); font-size: var(--t-sm); color: var(--ink-55); }
.doc-meta span { font-variant-numeric: tabular-nums; }

.doc-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--s8); padding: var(--section) 0; }
.toc { position: sticky; top: 104px; align-self: start; }
.toc h5 { font-size: var(--t-xs); font-weight: 400; font-variation-settings: 'wght' 540; color: var(--ink-55); margin-bottom: var(--s3); }
.toc ol { list-style: none; counter-reset: t; display: grid; gap: var(--s1); }
.toc li { counter-increment: t; }
.toc a {
  display: grid; grid-template-columns: 3ch 1fr; gap: var(--s2);
  font-size: var(--t-sm); color: var(--ink-70); padding: var(--s1) 0;
  transition: color var(--fast) var(--ease);
}
.toc a::before { content: counter(t); color: var(--ink-40); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--signal); }

.doc { max-width: 68ch; }
.doc section { margin-bottom: var(--s8); scroll-margin-top: 104px; }
.doc h2 { font-size: var(--t-lg); margin-bottom: var(--s4); }
.doc h3 { font-size: var(--t-md); margin: var(--s6) 0 var(--s3); font-variation-settings: 'wght' 540; }
.doc p { margin-top: var(--s4); color: var(--ink-70); }
.doc ul, .doc ol { margin-top: var(--s4); padding-left: 0; list-style: none; }
.doc li { color: var(--ink-70); padding: var(--s2) 0 var(--s2) var(--s5); border-top: 1px solid var(--rail); }
.doc li:first-child { border-top: 0; }
.doc ol { counter-reset: d; }
.doc ol li { counter-increment: d; position: relative; }
.doc ol li::before { content: counter(d); position: absolute; left: 0; color: var(--ink-40); font-variant-numeric: tabular-nums; }
.doc a:not(.btn) { border-bottom: 1px solid var(--rail); transition: border-color var(--fast) var(--ease); }
.doc a:not(.btn):hover { border-bottom-color: var(--signal); }

.table-x { overflow-x: auto; margin-top: var(--s5); }
.doc table { width: 100%; border-collapse: collapse; min-width: 520px; }
.doc th, .doc td { text-align: left; padding: var(--s3) var(--s4) var(--s3) 0; border-bottom: 1px solid var(--rail); font-size: var(--t-sm); vertical-align: top; }
.doc th { color: var(--ink-55); font-weight: 400; font-variation-settings: 'wght' 520; }
.doc td { color: var(--ink-70); }

.note { margin-top: var(--s5); padding-left: var(--s5); border-left: 2px solid var(--ink); font-size: var(--t-sm); color: var(--ink-70); }
.back { display: inline-block; font-size: var(--t-sm); color: var(--ink-55); margin-bottom: var(--s5); border-bottom: 1px solid transparent; }
.back:hover { color: var(--signal); border-bottom-color: var(--signal); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1000px) {
  .prod { grid-template-columns: 1fr; gap: var(--s6); }
  .prod-fig { order: -1; }
  .doc-body { grid-template-columns: 1fr; gap: var(--s6); }
  .toc { position: static; padding-bottom: var(--s4); border-bottom: 1px solid var(--rail); }
  .toc ol { grid-template-columns: repeat(2, 1fr); }
  .foot-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav { display: none; }
  .burger { display: flex; }
  .stop > .inner { padding-left: var(--s5); }
  .rows > div, .defs > div, .facts > div { grid-template-columns: 1fr; gap: var(--s2); }
  .foot-in { grid-template-columns: 1fr; }
  .hero-figs div { padding-right: var(--s5); margin-right: var(--s5); }
}
@media (max-width: 420px) {
  .toc ol { grid-template-columns: 1fr; }
  .hero-figs { gap: var(--s4) 0; }
  .hero-figs div { border-right: 0; margin-right: 0; }
}

/* ═══════════ MOUVEMENT RÉDUIT ═══════════
   Coupe tout. Le contenu reste entièrement lisible sans aucune animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}