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

   Direction : premium sombre. Bleu nuit, or, ivoire.
   Tout est carré — rayon 0 partout, boutons compris.
   Aucun dégradé. Aucune capitale. Rien ne clignote.
═══════════════════════════════════════════════════════════ */

/* ── nos deux coupes, auto-hébergées : zéro requête tierce ── */
@font-face {
  font-family: 'BABG Display';
  src: url('../assets/fonts/BABGDisplay-var.woff2') format('woff2-variations');
  font-weight: 320 760;
  font-display: swap;
}
@font-face {
  font-family: 'BABG Text';
  src: url('../assets/fonts/BABGText-var.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-stretch: 90% 100%;
  font-display: swap;
}

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

:root {
  /* palette maison restaurée */
  --ink:     #0B1220;
  --ink-2:   #111B2E;
  --navy:    #1E3A5F;
  --navy-2:  #2D5A87;
  --gold:    #B8924A;
  --gold-lt: #D4B375;
  --sage:    #5C7A6E;
  --ivory:   #F7F4ED;
  --paper:   #FFFFFF;

  /* nuances dérivées — jamais un nouveau hex */
  --on-ink-90: color-mix(in srgb, var(--ivory) 90%, transparent);
  --on-ink-62: color-mix(in srgb, var(--ivory) 62%, transparent);
  --on-ink-42: color-mix(in srgb, var(--ivory) 42%, transparent);
  --line-d:    color-mix(in srgb, var(--ivory) 14%, transparent);
  --line-l:    color-mix(in srgb, var(--ink) 14%, transparent);
  --ink-70:    color-mix(in srgb, var(--ink) 70%, var(--ivory));
  --ink-55:    color-mix(in srgb, var(--ink) 55%, var(--ivory));

  /* type */
  --display: 'BABG Display', Georgia, serif;
  --text:    'BABG Text', ui-sans-serif, system-ui, sans-serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.3125rem;
  --t-lg:   1.6875rem;
  --t-xl:   clamp(2.125rem, 4vw, 3.25rem);
  --t-2xl:  clamp(2.875rem, 7.5vw, 7rem);

  /* espacement */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section: clamp(72px, 8vw, 128px);
  --max: 1280px;
  --gut: clamp(20px, 5vw, 56px);

  /* mouvement — une courbe, deux durées */
  --ease: cubic-bezier(.23, 1, .32, 1);
  --fast:   180ms;   /* retour d'interaction : survol, focus, pression */
  --slow:   320ms;   /* changement d'état : ouverture, bascule */
  --reveal: 620ms;   /* entrée d'un bloc */
  --line:   760ms;   /* montée d'une ligne de titre */
  --draw:   900ms;   /* filet qui se trace */
}

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

body {
  font-family: var(--text);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--on-ink-90);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.num, time { font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; height: auto; }
::selection { background: var(--gold); color: var(--ink); }
:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--gold); color: var(--ink);
  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 ═══════════ */
h1, h2, h3 { font-family: var(--display); font-weight: 420; line-height: 1.02; }
h1 { font-size: var(--t-2xl); font-weight: 560; letter-spacing: -0.03em; }
h2 { font-size: var(--t-xl); letter-spacing: -0.02em; line-height: 1.04; }
h3 { font-size: var(--t-lg); letter-spacing: -0.02em; line-height: 1.12; }
h4 { font-family: var(--text); font-size: var(--t-md); font-weight: 500; letter-spacing: -0.01em; line-height: 1.26; }

p { max-width: 66ch; }
.lead { font-size: var(--t-md); line-height: 1.5; color: var(--on-ink-62); }
.small { font-size: var(--t-sm); color: var(--on-ink-62); }
.fine { font-size: var(--t-xs); color: var(--on-ink-42); line-height: 1.65; }
strong, b { font-weight: 600; }

/* Lien de texte : filet or qui s'allume. Le texte garde sa couleur. */
.lnk { border-bottom: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.lnk:hover { color: var(--gold-lt); border-bottom-color: var(--gold-lt); }

/* ═══════════ BOUTONS — carrés, sans exception ═══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s6);
  border-radius: 0;
  font-family: var(--text); font-size: var(--t-sm); font-weight: 500;
  border: 1px solid var(--gold); background: var(--gold); color: var(--ink);
  cursor: pointer; position: relative; overflow: hidden;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.btn:hover { background: var(--gold-lt); border-color: var(--gold-lt); }

.btn-line { background: transparent; color: var(--ivory); border-color: var(--line-d); }
.btn-line:hover { background: transparent; color: var(--gold-lt); border-color: var(--gold-lt); }

.btn-dark { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.btn-dark:hover { background: var(--navy); border-color: var(--navy); }

.btn-ghost-l { background: transparent; color: var(--ink); border-color: var(--line-l); }
.btn-ghost-l:hover { color: var(--navy); border-color: var(--navy); }

/* ═══════════ EN-TÊTE ═══════════ */
.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(--ink) 86%, transparent);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom-color: var(--line-d);
}
.top-in { max-width: var(--max); margin: 0 auto; padding: var(--s4) var(--gut);
  display: flex; align-items: center; gap: var(--s6); }
.mark { font-family: var(--display); font-size: var(--t-md); font-weight: 560; letter-spacing: -0.02em; color: var(--ivory); }
.mark em { font-style: normal; color: var(--gold); }

.nav { display: flex; gap: var(--s5); margin-left: auto; }
.nav a { font-size: var(--t-sm); color: var(--on-ink-62); 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(--ivory); border-bottom-color: var(--gold); }

.burger { display: none; margin-left: auto; width: 48px; height: 48px;
  align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; }
.burger span { display: block; width: 22px; height: 1px; background: var(--ivory); position: relative; }
.burger span::before, .burger span::after {
  content: ''; position: absolute; left: 0; width: 22px; height: 1px; background: var(--ivory);
  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(--ink); border-bottom: 1px solid var(--line-d); }
.nav-m.open { display: block; }
.nav-m a { display: block; padding: var(--s4) var(--gut);
  font-family: var(--display); font-size: var(--t-md); border-top: 1px solid var(--line-d); }

/* ═══════════ RÉVÉLATION DES TITRES ═══════════
   Masque qui monte, ligne par ligne. Le JS découpe en .ln/.ln-i ;
   sans JS, rien n'est caché — le contenu reste entier. */
.rv .ln { display: block; overflow: hidden; }
.rv .ln-i { display: block; transform: translateY(102%); will-change: transform; }
.rv.in .ln-i { transform: none; transition: transform var(--line) var(--ease); transition-delay: var(--d, 0ms); }

/* Fondu simple pour les blocs non-titres */
.fd { opacity: 0; transform: translateY(18px); will-change: opacity, transform; }
.fd.in { opacity: 1; transform: none;
  transition: opacity var(--reveal) var(--ease), transform var(--reveal) var(--ease); transition-delay: var(--d, 0ms); }

/* Filet qui se trace en tête de section */
.rule { height: 1px; background: var(--line-d); transform: scaleX(0); transform-origin: left; }
.rule.in { transform: scaleX(1); transition: transform var(--draw) var(--ease); }

/* ═══════════ HERO ═══════════ */
.hero { position: relative; min-height: min(96svh, 920px); display: flex; align-items: flex-end; overflow: hidden; }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img, .hero-media video { 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: .66; }
.hero-in { position: relative; z-index: 2; width: 100%; padding: var(--s10) 0 var(--s8); }
.hero h1 { max-width: 15ch; color: var(--ivory); }
.hero .lead { max-width: 44ch; margin-top: var(--s5); color: var(--on-ink-90); }
.hero-act { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s7); }

.figs { display: flex; flex-wrap: wrap; margin-top: var(--s9); border-top: 1px solid var(--line-d); }
.figs div { padding: var(--s5) var(--s7) 0 0; margin-right: var(--s7);
  border-right: 1px solid var(--line-d); }
.figs div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.figs b { display: block; font-family: var(--display); font-size: var(--t-lg); font-weight: 560;
  letter-spacing: -0.02em; color: var(--gold-lt); font-variant-numeric: tabular-nums; }
.figs span { font-size: var(--t-xs); color: var(--on-ink-42); }

/* ═══════════ SECTIONS ═══════════ */
.sec { padding: var(--section) 0; position: relative; }
.sec-light { background: var(--ivory); color: var(--ink); }
.sec-light .lead { color: var(--ink-70); }
.sec-light .small { color: var(--ink-70); }
.sec-light .fine { color: var(--ink-55); }
.sec-light h2, .sec-light h3, .sec-light h4 { color: var(--ink); }

/* ═══════════ PRODUIT — alternance imposée ═══════════
   Yerba : texte à gauche, image à droite.
   Bolo  : image à gauche, texte à droite.
   L'œil zigzague au lieu de descendre droit. */
.prod { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8) var(--s9); align-items: center; }
.prod-txt { min-width: 0; }
.prod-fig { margin: 0; position: relative; overflow: hidden; }
.prod-fig img { width: 100%; border-radius: 0; will-change: transform; }
.prod-fig figcaption { font-size: var(--t-xs); color: var(--on-ink-42); margin-top: var(--s3); max-width: 46ch; }
.sec-light .prod-fig figcaption { color: var(--ink-55); }

/* Inversion : l'image passe en premier dans la grille */
.prod-rev .prod-fig { order: -1; }

.tagline { font-family: var(--display); font-size: var(--t-md); line-height: 1.3;
  letter-spacing: -0.015em; margin-bottom: var(--s5); max-width: 30ch; color: var(--gold-lt); }
.sec-light .tagline { color: var(--navy); }

.state { display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-xs); color: var(--on-ink-62); margin-bottom: var(--s4); }
.sec-light .state { color: var(--ink-55); }
/* Pastille fixe. Rien ne clignote. */
.state::before { content: ''; width: 6px; height: 6px; background: var(--sage); }

/* Caractéristiques : un tableau de définitions au filet, pas des cartes. */
.defs { margin-top: var(--s6); border-top: 1px solid var(--line-d); }
.sec-light .defs { border-top-color: var(--line-l); }
.defs > div { display: grid; grid-template-columns: 12ch 1fr; gap: var(--s5);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line-d); }
.sec-light .defs > div { border-bottom-color: var(--line-l); }
.defs dt { font-weight: 500; font-size: var(--t-sm); }
.defs dd { font-size: var(--t-sm); color: var(--on-ink-62); }
.sec-light .defs dd { color: var(--ink-70); }

/* Le mécanisme de Yerba Tsede EST une séquence en trois temps : la
   numérotation est légitime ici, et nulle part ailleurs sur le site. */
.seq { margin-top: var(--s6); counter-reset: s; list-style: none; }
.seq li { counter-increment: s; display: grid; grid-template-columns: 3ch 1fr; gap: var(--s4);
  padding: var(--s4) 0; border-top: 1px solid var(--line-d); }
.sec-light .seq li { border-top-color: var(--line-l); }
.seq li::before { content: counter(s); font-family: var(--display); font-weight: 560;
  color: var(--gold); font-variant-numeric: tabular-nums; }
.seq b { display: block; font-weight: 500; }
.seq span { font-size: var(--t-sm); color: var(--on-ink-62); }
.sec-light .seq span { color: var(--ink-70); }

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

.acts { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; margin-top: var(--s7); }
.host { font-size: var(--t-xs); color: var(--on-ink-42); }
.sec-light .host { color: var(--ink-55); }

/* ═══════════ MÉTHODE ═══════════ */
.rows { margin-top: var(--s7); border-top: 1px solid var(--line-d); }
.rows > div { display: grid; grid-template-columns: 24ch 1fr; gap: var(--s5) var(--s8);
  padding: var(--s7) 0; border-bottom: 1px solid var(--line-d); }
.rows p { color: var(--on-ink-62); font-size: var(--t-sm); }

/* ═══════════ SOCIÉTÉ ═══════════ */
.facts { margin-top: var(--s6); border-top: 1px solid var(--line-l); max-width: 70ch; }
.facts > div { display: grid; grid-template-columns: 17ch 1fr; gap: var(--s5);
  padding: var(--s3) 0; border-bottom: 1px solid var(--line-l); 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: 560px; display: grid; gap: var(--s4); }
.field { display: grid; gap: var(--s2); }
.field label { font-size: var(--t-sm); font-weight: 500; }
.field input, .field textarea {
  font-family: var(--text); font-size: 1rem;   /* 16px mini : sinon Safari iOS zoome */
  padding: var(--s3) var(--s4); border-radius: 0;
  border: 1px solid var(--line-d); background: var(--ink-2); color: var(--ivory);
  transition: border-color var(--fast) var(--ease);
}
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--gold); }
.field textarea { min-height: 150px; resize: vertical; }
.hp { position: absolute; left: -9999px; }
.msg { font-size: var(--t-sm); min-height: 1.5em; }
.msg.ok { color: var(--sage); }
.msg.err { color: var(--gold-lt); }

/* ═══════════ PIED ═══════════ */
.foot { background: var(--ink-2); border-top: 1px solid var(--line-d); padding: var(--s9) 0 var(--s6); }
.foot-in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s7) var(--s6); }
.foot h5 { font-size: var(--t-xs); font-weight: 500; color: var(--gold); margin-bottom: var(--s3); }
.foot nav { display: grid; gap: var(--s2); justify-items: start; }
.foot nav a { font-size: var(--t-sm); color: var(--on-ink-62);
  border-bottom: 1px solid transparent;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.foot nav a:hover { color: var(--ivory); border-bottom-color: var(--gold); }
.foot-addr { font-size: var(--t-sm); color: var(--on-ink-42); margin-top: var(--s4); line-height: 1.65; }
.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 var(--line-d);
  font-size: var(--t-xs); color: var(--on-ink-42); }
.foot-base span { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════
   PAGES LÉGALES — fond clair, lecture longue
═══════════════════════════════════════════════════════════ */
.doc-page { background: var(--ivory); color: var(--ink); }
.doc-head { padding: calc(92px + var(--section)) 0 var(--section); border-bottom: 1px solid var(--line-l); }
.doc-head h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); max-width: 22ch; color: var(--ink); }
.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: 250px minmax(0, 1fr); gap: var(--s8);
  padding: var(--section) 0; }
.toc { position: sticky; top: 112px; align-self: start; }
.toc h5 { font-size: var(--t-xs); font-weight: 500; color: var(--gold); 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-55); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--navy); }

.doc { max-width: 68ch; }
.doc section { margin-bottom: var(--s8); scroll-margin-top: 112px; }
.doc h2 { font-size: var(--t-lg); margin-bottom: var(--s4); color: var(--ink); }
.doc h3 { font-family: var(--text); font-size: var(--t-md); font-weight: 500; margin: var(--s6) 0 var(--s3); color: var(--ink); }
.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(--line-l); position: relative; }
.doc li:first-child { border-top: 0; }
.doc ol { counter-reset: d; }
.doc ol li { counter-increment: d; }
.doc ol li::before { content: counter(d); position: absolute; left: 0;
  color: var(--gold); font-variant-numeric: tabular-nums; }
.doc a:not(.btn) { border-bottom: 1px solid color-mix(in srgb, var(--navy) 35%, transparent);
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease); }
.doc a:not(.btn):hover { color: var(--navy); border-bottom-color: var(--navy); }

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

.note { margin-top: var(--s5); padding-left: var(--s5); border-left: 2px solid var(--gold);
  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;
  transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.back:hover { color: var(--navy); border-bottom-color: var(--navy); }

.doc-page .top { background: color-mix(in srgb, var(--ivory) 88%, transparent); border-bottom-color: var(--line-l); }
.doc-page .top .mark { color: var(--ink); }
.doc-page .nav a { color: var(--ink-70); }
.doc-page .nav a:hover { color: var(--ink); }
.doc-page .burger span, .doc-page .burger span::before, .doc-page .burger span::after { background: var(--ink); }
.doc-page .nav-m { background: var(--ivory); border-bottom-color: var(--line-l); }
.doc-page .nav-m a { border-top-color: var(--line-l); color: var(--ink); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 1040px) {
  .prod { grid-template-columns: 1fr; gap: var(--s6); }
  .prod-fig, .prod-rev .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(--line-l); }
  .toc ol { grid-template-columns: repeat(2, 1fr); }
  .foot-in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .nav { display: none; }
  .burger { display: flex; }
  .rows > div, .defs > div, .facts > div { grid-template-columns: 1fr; gap: var(--s2); }
  .foot-in { grid-template-columns: 1fr; }
  .figs div { padding-right: var(--s5); margin-right: var(--s5); }
}
@media (max-width: 440px) {
  .toc ol { grid-template-columns: 1fr; }
  .figs { gap: var(--s4) 0; }
  .figs div { border-right: 0; margin-right: 0; }
  .acts .btn { width: 100%; }
}

/* ═══════════ MOUVEMENT RÉDUIT ═══════════
   Coupe les six mouvements. Le contenu reste entier et lisible.
   Ce n'est pas du style, c'est de l'accessibilité. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .rv .ln-i { transform: none !important; }
  .fd { opacity: 1 !important; transform: none !important; }
  .rule { transform: scaleX(1) !important; }
}