/* ====== Technopeinture marketing site — global ====== */
@import url('colors_and_type.css');

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Filet anti-débordement horizontal : « clip » (et non « hidden ») pour
   neutraliser tout dépassement latéral sans créer de conteneur de défilement,
   ce qui préserve le position: sticky du header. */
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ====== Layout primitives ====== */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.section { padding: 64px 0; }
@media (min-width: 768px) { .section { padding: 112px 0; } }
.section.tight { padding: 48px 0; }
@media (min-width: 768px) { .section.tight { padding: 80px 0; } }

.section-overline {
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tp-brique-600);
  margin-bottom: 16px;
  display: inline-flex; align-items: center; gap: 10px;
}
.section-overline::before {
  content: ""; width: 24px; height: 1px; background: var(--tp-brique-600);
}
.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-display-md);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--color-fg-brand);
  font-weight: 400;
  margin: 0 0 16px;
  text-wrap: balance;
}
.section-title em { font-style: italic; color: var(--tp-brique-600); }
.section-lead {
  font-size: 17px;
  line-height: 1.55;
  color: var(--color-fg-muted);
  max-width: 56ch;
  text-wrap: pretty;
  margin: 0;
}

/* ====== Buttons (shared with preview/buttons.html) ====== */
.btn {
  --bg: var(--tp-nuit-900); --fg: var(--tp-sable-50);
  --bg-h: var(--tp-nuit-800); --bg-p: var(--tp-nuit-950);
  --border: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 500;
  letter-spacing: -0.005em;
  transition: background var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { background: var(--bg-h); }
.btn:active { background: var(--bg-p); transform: translateY(1px); }
.btn.secondary {
  --bg: var(--tp-sable-50); --fg: var(--tp-nuit-900);
  --bg-h: var(--tp-sable-100); --bg-p: var(--tp-sable-200);
  --border: var(--tp-graphite-100);
}
.btn.accent {
  --bg: var(--tp-brique-600); --fg: var(--tp-sable-50);
  --bg-h: var(--tp-brique-700); --bg-p: var(--tp-brique-800);
}
.btn.ghost {
  --bg: transparent; --fg: var(--tp-nuit-900);
  --bg-h: rgba(17,27,46,0.06); --bg-p: rgba(17,27,46,0.1);
}
.btn.on-dark {
  --bg: var(--tp-sable-50); --fg: var(--tp-nuit-900);
  --bg-h: white; --bg-p: var(--tp-sable-100);
}
.btn.on-dark.ghost {
  --bg: transparent; --fg: var(--tp-sable-50);
  --bg-h: rgba(255,255,255,0.08); --bg-p: rgba(255,255,255,0.14);
  --border: rgba(255,255,255,0.18);
}
.btn .ico { width: 18px; height: 18px; }

/* ====== Lucide icon sizing ====== */
[data-lucide] { width: 20px; height: 20px; stroke-width: 1.5; }

/* ====== Reveal on scroll ====== */
.reveal {
  opacity: 0; transform: translateY(16px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ====== Conversion : barre d'action mobile + WhatsApp flottant ====== */
/* Barre collée en bas sur mobile. z-index < bandeau cookies (qui couvre
   pendant le choix, puis disparaît). */
.tp-actionbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; gap: 1px;
  background: var(--color-border);
  border-top: 1px solid var(--color-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: 0 -4px 16px rgba(43, 38, 32, 0.10);
}
.tp-actionbar-btn {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 3px;
  padding: 9px 4px 8px; min-height: 56px;
  background: var(--color-bg-elevated); color: var(--color-fg);
  font-size: 12px; font-weight: 700; line-height: 1;
}
.tp-actionbar-btn i, .tp-actionbar-btn svg { width: 20px; height: 20px; }
.tp-actionbar-btn--cta { background: var(--color-accent); color: var(--color-action-fg); }
.tp-actionbar-btn:active { filter: brightness(0.94); }

/* Le contenu ne doit pas passer sous la barre fixe (mobile uniquement). */
@media (max-width: 767px) { body { padding-bottom: 60px; } }

/* Barre d'action : mobile uniquement. */
@media (min-width: 768px) { .tp-actionbar { display: none; } }