/* MOHIA v7 · fondations sur le modèle Acctual : fond gris clair, une police, des cartes blanches, un bouton foncé */
:root {
  --bg: #F7F8FB;
  --card: #FFFFFF;
  --tone: #EFF1F6;
  --ink: #15141B;
  --text: #3C3B45;
  --soft: #6B6A76;
  --line: #E6E6EC;
  --violet: #6C4BC4;
  --violet-soft: #EEE9FB;
  --violet-deep: #3B2A78;
  --ok: #1F9D61;
  --warn: #D99A16;
  --bleu: #2F6BFF; --bleu-soft: #E6EEFF;
  --rose: #E5487A; --rose-soft: #FDE7EF;
  --vert: #1F9D61; --vert-soft: #E3F5EC;
  --or: #D99A16; --or-soft: #FCF1DA;
  --ciel: #0098F2; --ciel-soft: #E2F3FE;

  --font: "Open Runde", system-ui, -apple-system, sans-serif;
  --w: 1140px;
  --gap: clamp(96px, 10vw, 150px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* Open Runde (licence SIL OFL, voir fonts/OFL.txt), la police d'Acctual, hébergée chez nous et réduite aux caractères latins */
@font-face { font-family: "Open Runde"; src: url("../fonts/open-runde-500.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Open Runde"; src: url("../fonts/open-runde-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 16px/1.5 var(--font); letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
h1 { font-size: clamp(40px, 4vw, 56px); line-height: 1.143; font-weight: 600; letter-spacing: -0.03em; }
h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.167; font-weight: 600; letter-spacing: -0.03em; }
h3 { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -0.01em; }
.sprite { position: absolute; }
::selection { background: var(--violet); color: #fff; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 6px; }

/* étiquette de section : le mot seul, en violet */
.tag { display: inline-flex; align-items: center; gap: 9px; color: var(--violet); font-size: 16px; font-weight: 600; letter-spacing: -0.005em; }

/* bouton : foncé, entièrement arrondi */
.pill { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 500; font-size: 15px; transition: background-color 200ms ease, transform 200ms var(--ease); }
.pill:hover { background: var(--violet); }
.pill:active { transform: scale(.97); }
.pill--lg { height: auto; min-height: 46px; padding: 11px 22px; font-size: 16px; line-height: 1.3; text-align: center; border-radius: 12px; }

/* icône dans une pastille de couleur */
.ico { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; }
.ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico--bleu { background: var(--bleu-soft); color: var(--bleu); }
.ico--violet { background: var(--violet-soft); color: var(--violet); }
.ico--vert { background: var(--vert-soft); color: var(--vert); }
.ico--rose { background: var(--rose-soft); color: var(--rose); }
.ico--or { background: var(--or-soft); color: var(--or); }
.ico--ciel { background: var(--ciel-soft); color: var(--ciel); }

/* barre du haut */
.nav { position: sticky; top: 10px; z-index: 50; width: min(var(--w), calc(100% - 24px)); margin: 10px auto 0; display: flex; align-items: center; gap: 34px; padding: 8px 8px 8px 16px; border-radius: 14px; transition: background-color 250ms ease, box-shadow 250ms ease; }
.nav.is-stuck { background: rgba(255, 255, 255, .9); box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(21, 20, 27, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav__logo img { height: 26px; width: auto; }
.nav__links { display: flex; gap: 28px; font-size: 15px; font-weight: 500; color: var(--text); }
.nav__links a:hover, .nav__soft:hover { color: var(--ink); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 500; color: var(--text); }

/* apparitions */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* conteneur commun */
.agents, .vitrine, .cout, .methode, .outils, .studio, .faq, .contact { width: min(var(--w), calc(100% - 32px)); margin: 0 auto; }

.nav__burger, .nav__cta { display: none; }
@media (max-width: 860px) {
  .nav__links, .nav__soft, .nav__wa { display: none; }
  .nav { gap: 12px; flex-wrap: wrap; padding: 8px 8px 8px 16px; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 0 var(--line), 0 10px 30px -20px rgba(21, 20, 27, .3); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .nav__burger { display: grid; place-content: center; gap: 6px; width: 42px; height: 42px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; }
  .nav__burger span { display: block; width: 20px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform 250ms var(--ease); }
  .nav.is-open { background: rgba(255, 255, 255, .97); box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgba(21, 20, 27, .35); }
  .nav.is-open .nav__burger span:first-child { transform: translateY(4px) rotate(45deg); }
  .nav.is-open .nav__burger span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .nav.is-open .nav__links { display: flex; flex-direction: column; order: 3; width: 100%; gap: 2px; padding: 6px 8px 10px 0; font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
  .nav.is-open .nav__links a { padding: 8px 0; }
  .nav.is-open .nav__cta { display: flex; margin-top: 10px; font-size: 16px; color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}
/* téléphone : titres de section un peu plus aérés, comme Acctual */
@media (max-width: 760px) { h2 { line-height: 1.25; } }