/* Webisoft — TenderOS deck theme (built on reveal.js) */

@font-face {
  font-family: "HelveticaNow Display";
  src: url("fonts/HelveticaNowDisplay-Md.otf") format("opentype");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "HelveticaNow Text";
  src: url("fonts/HelveticaNowText-Regular.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ink: #0B0B0C;
  --bg: #FFFFFF;
  --muted: #6B7280;
  --accent: #DE5849;
  --accent-dark: #B8402F;
  --border: #E2E3E6;
  --panel: #F4F5F7;
  --panel-2: #EDEEF1;
  --green: #059669;
  --blue: #2563EB;
}

.reveal {
  font-family: "HelveticaNow Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 30px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.005em;
}
.reveal .slides { text-align: left; }
.reveal .slides section { height: 100%; }

.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: "HelveticaNow Display", system-ui, sans-serif;
  color: var(--ink);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -0.03em;
  text-transform: none;
  margin: 0 0 0.5em 0;
}
.reveal h1 { font-size: 2.6em; }
.reveal h2 { font-size: 1.9em; }
.reveal h3 { font-size: 1.25em; }
.reveal p { line-height: 1.4; margin: 0 0 0.7em 0; }
.reveal strong { font-weight: 700; color: var(--ink); }
.reveal em { color: var(--accent); font-style: normal; font-weight: 500; }
.reveal a { color: var(--accent); text-decoration: none; }

.reveal ul, .reveal ol { margin: 0 0 0 1em; }
.reveal li { margin: 0.35em 0; line-height: 1.35; }
.reveal ::marker { color: var(--accent); }

/* Layout scaffolding */
.reveal .slides section.pad { padding: 4% 6%; }
.wrap { max-width: 1180px; }
.center { text-align: center; }

.eyebrow {
  font-family: "HelveticaNow Text", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.5em;
  font-weight: 400;
  color: var(--accent);
  margin: 0 0 0.9em 0;
}
.lead { font-size: 1.05em; color: var(--muted); max-width: 22em; }
.muted { color: var(--muted); }
.small { font-size: 0.62em; }
.tiny  { font-size: 0.5em; color: var(--muted); }

/* Accent rule */
.rule { width: 64px; height: 5px; background: var(--accent); border: 0; margin: 0 0 1.1em 0; }

/* Cards / grid */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: 1fr 1fr; }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 26px 26px;
}
.card h3 { font-size: 1.02em; margin-bottom: 0.28em; }
.card p { font-size: 0.72em; color: var(--muted); margin: 0; line-height: 1.4; }
.card .ic { font-size: 1.5em; margin-bottom: 0.35em; display: block; }
.card.accent { background: var(--ink); border-color: var(--ink); }
.card.accent h3, .card.accent p, .card.accent .num { color: #fff; }
.card.accent p { color: #C9CACE; }

/* Stat tiles */
.stat .num {
  font-family: "HelveticaNow Display", sans-serif;
  font-size: 2.4em; font-weight: 700; color: var(--accent);
  line-height: 1; letter-spacing: -0.04em; display: block; margin-bottom: 0.12em;
}
.stat .lbl { font-size: 0.66em; color: var(--muted); line-height: 1.3; }

/* Pipeline steps */
.pipe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.step {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 11px; padding: 14px 12px; position: relative;
}
.step .n {
  font-family: "HelveticaNow Display", sans-serif; font-weight: 700;
  font-size: 0.62em; color: var(--accent);
}
.step .t { font-size: 0.6em; font-weight: 500; margin-top: 3px; line-height: 1.25; }
.step .k { font-size: 0.44em; color: var(--muted); margin-top: 5px; text-transform: uppercase; letter-spacing: 0.08em; }
.step.gate { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.phasebar { display:flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.phase-tag { font-size: 0.5em; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); background: var(--panel-2); border-radius: 999px; padding: 5px 12px; }

/* Chips / legend */
.chips { display:flex; gap: 14px; flex-wrap: wrap; font-size: 0.55em; color: var(--muted); }
.chip { display:inline-flex; align-items:center; gap: 7px; }
.dot { width: 11px; height: 11px; border-radius: 3px; display:inline-block; }
.dot.acc { background: var(--accent); } .dot.grn { background: var(--green); } .dot.pan { background: var(--panel-2); border:1px solid var(--border); }

/* Two-column split hero */
.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; height: 100%; }

/* Cover */
.cover { display:flex; flex-direction: column; justify-content: center; height: 100%; }
.cover .brandline { display:flex; align-items:center; gap: 16px; margin-bottom: 2.4em; }
.cover .brandline img { height: 34px; }
.cover .kicker { font-size: 0.5em; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }

/* Header logo (corner) — square mark, can't overflow */
.corner-logo { position: absolute; top: 30px; right: 38px; width: 30px; height: auto; opacity: 0.9; }
.slidenum { position: absolute; bottom: 22px; right: 40px; font-size: 13px; color: var(--muted); font-family: "HelveticaNow Display"; }

/* progress + controls color */
.reveal .progress { color: var(--accent); height: 4px; }
.reveal .controls { color: var(--accent); }
.reveal .controls button { opacity: 0.5; }

/* callout / quote */
.callout {
  border-left: 5px solid var(--accent);
  background: var(--panel);
  border-radius: 0 12px 12px 0;
  padding: 22px 28px;
}
.callout p { margin: 0; }

/* checklist */
.check li { list-style: none; position: relative; padding-left: 1.5em; }
.check li::before { content: "→"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
.check { margin-left: 0; }

/* CTA slide dark */
section.dark { background: var(--ink); }
section.dark, section.dark h1, section.dark h2, section.dark h3, section.dark p, section.dark strong { color: #fff; }
section.dark .muted, section.dark .lead { color: #B7B8BD; }
section.dark .rule { background: var(--accent); }
section.dark .card { background: #17181B; border-color: #26272B; }
section.dark .card p { color: #B7B8BD; }

.kbd { font-size: 12px; color: var(--muted); }

/* "Fonctionne avec" logo strip, sits bottom-right of the slide content */
.logo-strip {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  margin-top: 3.2em;
}
.logo-strip .small { color: var(--muted); }
.logo-strip img, .logo-strip svg { display: block; }