/* ═══════════════════════════════════════════════════════════
   DEAJ Pro — Site praticiens (pro.deaj.health)
   Design system partagé : Instrument Serif / Instrument Sans, forêt/or/crème
   ═══════════════════════════════════════════════════════════ */

:root {
  --ink:#1E2B28; --ink-soft:#40514C; --muted:#5C6B66; --muted-2:#8A968F; --muted-3:#98A39E;
  --cream:#F6F3EC; --card:#FFFDF8; --line:#E4DECF; --line-2:#D8C9A8;
  --forest:#14332D; --forest-2:#1B473F; --forest-ink:#EAF0EC; --forest-mut:#A9BDB4;
  --teal:#245B51; --gold:#B98A44; --gold-2:#E4C892; --input-line:#D8D0BE;
  --serif:'Instrument Serif', Georgia, serif;
  --sans:'Instrument Sans', system-ui, -apple-system, sans-serif;
  --maxw:1200px; --pad:32px; --ease:cubic-bezier(0.22,1,0.36,1);
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  margin:0; font-family:var(--sans); color:var(--ink); background:var(--cream);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden;
}
h1,h2,h3,h4 { margin:0; }
p { margin:0; }
img { max-width:100%; display:block; }
a { color:var(--teal); text-decoration:none; transition:color .2s; }
a:hover { color:var(--gold); }
em { font-style:italic; }
.section-inner { max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:600; font-size:16px; border-radius:12px;
  padding:16px 30px; cursor:pointer; border:none; white-space:nowrap;
  transition:background .2s, transform .2s, border-color .2s, color .2s;
}
.btn--primary { background:var(--teal); color:var(--cream); box-shadow:0 2px 5px rgba(20,51,45,.25), 0 14px 28px -14px rgba(20,51,45,.5); }
.btn--primary:hover { background:var(--forest-2); color:var(--cream); transform:translateY(-1px); }
.btn--ghost { background:transparent; color:var(--ink); border:1.5px solid #CFC8B6; }
.btn--ghost:hover { border-color:var(--gold); color:var(--gold); background:var(--card); }
.btn--success { background:var(--teal) !important; color:var(--cream) !important; }

/* ── Eyebrows / section heads ────────────────────────────── */
.eyebrow { font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); }
.eyebrow-badge {
  display:inline-block; background:var(--card); border:1px solid var(--line); border-radius:8px;
  padding:7px 14px; font-size:13px; font-weight:600; color:var(--teal);
}
.section__head { max-width:640px; }
.section__title { font-family:var(--serif); font-weight:400; font-size:48px; line-height:1.1; letter-spacing:-0.01em; margin-top:16px; }
.section__lead { font-size:17px; line-height:1.6; color:var(--muted); margin-top:18px; }

/* ── Header / nav ────────────────────────────────────────── */
.site-header {
  position:sticky; top:0; z-index:50; background:rgba(246,243,236,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.nav { max-width:var(--maxw); margin:0 auto; display:flex; align-items:center; gap:16px; padding:18px var(--pad); }
.nav__logo { font-family:var(--serif); font-size:27px; color:var(--ink); letter-spacing:-0.01em; }
.nav__logo span { color:var(--gold); }
.nav__logo:hover { color:var(--ink); }
.nav__badge {
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--teal); background:#E7EEEA; border-radius:6px; padding:5px 10px;
}
.nav__links { display:flex; gap:28px; margin-left:auto; align-items:center; font-size:15px; font-weight:500; }
.nav__link { color:var(--ink-soft); }
.nav__link:hover { color:var(--gold); }
.nav__link--pro { color:var(--teal); }
.nav__cta {
  background:var(--teal); color:var(--cream); padding:11px 22px; border-radius:12px; font-weight:600;
  box-shadow:0 2px 5px rgba(20,51,45,.2), 0 8px 18px -8px rgba(20,51,45,.35);
}
.nav__cta:hover { background:var(--forest-2); color:var(--cream); }
.nav__burger { display:none; margin-left:auto; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px; z-index:60; }
.nav__burger span { width:24px; height:2px; background:var(--ink); border-radius:2px; transition:transform .25s, opacity .25s; }
.nav__burger.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2) { opacity:0; }
.nav__burger.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── Hero ────────────────────────────────────────────────── */
.hero { position:relative; overflow:hidden; }
.hero__dots {
  position:absolute; inset:0;
  background-image:radial-gradient(rgba(30,43,40,.14) 1px, transparent 1.5px); background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 55% 55% at 28% 8%, black, transparent 75%);
  mask-image:radial-gradient(ellipse 55% 55% at 28% 8%, black, transparent 75%); pointer-events:none;
}
.hero__grid { position:relative; display:grid; grid-template-columns:1fr 0.95fr; gap:80px; align-items:center; padding-top:84px; padding-bottom:110px; }
.hero__title { font-family:var(--serif); font-weight:400; font-size:70px; line-height:1.05; letter-spacing:-0.015em; margin-top:26px; }
.hero__title em { color:var(--gold); }
.hero__lead { font-size:19px; line-height:1.65; color:var(--muted); max-width:520px; margin-top:26px; text-wrap:pretty; }
.hero__cta { display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; }
.hero__proof { display:flex; margin-top:40px; padding-top:28px; border-top:1px solid var(--line); font-size:14.5px; font-weight:500; color:var(--ink-soft); flex-wrap:wrap; }
.hero__proof-item { padding:0 26px; border-left:1px solid var(--line); }
.hero__proof-item:first-child { padding-left:0; border-left:none; }

.hero__visual { position:relative; }
.frame { position:relative; padding:0 18px 18px 0; }
.frame__offset { position:absolute; top:18px; left:18px; right:0; bottom:0; border:1px solid var(--line-2); border-radius:24px; }
.media-slot {
  position:relative; display:grid; place-items:center; text-align:center; padding:24px;
  border-radius:24px; border:1px solid var(--line);
  background:radial-gradient(120% 120% at 20% 15%, rgba(228,200,146,.22), transparent 55%),
             linear-gradient(150deg, #EFE8D8 0%, #E7EEEA 55%, #DCE7E1 100%);
  box-shadow:0 24px 60px -24px rgba(30,43,40,.35);
}
.media-slot--hero { height:560px; }
.media-slot__label { font-size:13.5px; font-weight:600; letter-spacing:.02em; color:var(--muted-2); max-width:60%; }

/* Floating cards (pro) */
.floating-card, .floating-badge { position:absolute; }
.floating-card--dictation {
  top:40px; right:-16px; width:240px; background:var(--card); border:1px solid #EEE8DA; border-radius:16px;
  padding:16px 20px; box-shadow:0 2px 5px rgba(30,43,40,.08), 0 24px 48px -18px rgba(30,43,40,.35);
}
.floating-card__status { display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.floating-card__dot { width:8px; height:8px; border-radius:50%; background:#C0503A; display:inline-block; }
.floating-card__quote { font-size:13.5px; line-height:1.55; color:var(--muted-2); margin-top:10px; font-style:italic; }
.floating-badge--next {
  bottom:36px; left:-44px; background:var(--forest); color:var(--forest-ink); border-radius:16px; padding:16px 22px;
  box-shadow:0 2px 5px rgba(20,51,45,.3), 0 20px 40px -14px rgba(20,51,45,.55);
}
.floating-badge__eyebrow { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-2); }
.floating-badge__strong { font-size:14.5px; font-weight:600; margin-top:6px; }
.floating-badge__muted { font-size:12.5px; color:var(--forest-mut); margin-top:2px; }

/* ── Marquee ─────────────────────────────────────────────── */
.marquee { background:var(--card); border-top:1px solid var(--line); overflow:hidden; padding:20px 0; }
.marquee__track { display:flex; width:max-content; animation:marquee 38s linear infinite; }
.marquee__group { display:flex; align-items:center; gap:44px; padding-right:44px; }
.marquee__item { font-family:var(--serif); font-style:italic; font-size:22px; color:var(--ink-soft); white-space:nowrap; }
.marquee__dot { width:5px; height:5px; background:var(--gold); transform:rotate(45deg); flex-shrink:0; }
@keyframes marquee { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* ── Outils (bento) ──────────────────────────────────────── */
.tools { background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:100px 0; }
.tools__grid { display:grid; grid-template-columns:1.1fr 1fr; grid-template-rows:auto auto; gap:26px; margin-top:56px; }
.tool-card {
  background:var(--cream); border:1px solid var(--line); border-radius:22px; padding:34px 30px;
  display:flex; flex-direction:column; gap:16px;
  box-shadow:0 1px 2px rgba(30,43,40,.05), 0 16px 36px -24px rgba(30,43,40,.3);
  transition:box-shadow .25s, transform .25s, border-color .25s;
}
.tool-card:hover { border-color:var(--line-2); transform:translateY(-3px); box-shadow:0 2px 4px rgba(30,43,40,.06), 0 26px 50px -24px rgba(30,43,40,.35); }
.tool-card--feature { grid-row:1 / 3; }
.tool-card__num { font-family:var(--serif); font-size:52px; color:var(--gold); line-height:1; }
.tool-card h3 { font-size:21px; font-weight:600; }
.tool-card p { font-size:15.5px; line-height:1.6; color:var(--muted); }
.tool-card__tag { margin-top:auto; align-self:flex-start; font-size:12.5px; font-weight:600; color:var(--teal); background:#E7EEEA; border-radius:6px; padding:6px 12px; }

.tool-mock { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; margin-top:6px; }
.tool-mock__head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.tool-mock__label { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); }
.tool-mock__badge { font-size:11.5px; font-weight:600; color:var(--teal); background:#E7EEEA; border-radius:5px; padding:3px 8px; white-space:nowrap; }
.tool-mock__rows { display:grid; gap:14px; margin-top:16px; }
.tool-mock__row span { font-size:12px; font-weight:600; color:var(--muted); display:block; }
.tool-mock__row i { display:block; height:8px; border-radius:99px; background:#EFEAE0; margin-top:6px; }

/* ── Consultation timeline ───────────────────────────────── */
.consult { background:var(--cream); padding:110px 0; }
.consult__grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:80px; align-items:start; }
.consult__intro { position:sticky; top:120px; }
.consult__lead { font-size:17px; line-height:1.65; color:var(--muted); margin-top:20px; max-width:420px; }
.consult__cta { margin-top:32px; padding:15px 28px; font-size:15.5px; }
.timeline { list-style:none; margin:0; padding:0; }
.timeline__step { display:flex; gap:24px; position:relative; padding-bottom:36px; }
.timeline__step:last-child { padding-bottom:0; }
.timeline__step:not(:last-child)::before {
  content:''; position:absolute; left:20px; top:44px; bottom:0; width:1.5px; transform:translateX(-50%); background:var(--input-line);
}
.timeline__marker {
  width:40px; height:40px; border-radius:50%; background:var(--forest); color:var(--gold-2);
  display:grid; place-items:center; font-family:var(--serif); font-size:18px; flex-shrink:0;
}
.timeline__body h3 { font-size:20px; font-weight:600; margin-top:6px; }
.timeline__body p { font-size:15.5px; line-height:1.65; color:var(--muted); margin-top:8px; }

/* ── Citation / approche médicale ────────────────────────── */
.quote { background:var(--forest); color:var(--forest-ink); padding:100px 0; }
.quote__grid { max-width:1040px; margin:0 auto; display:grid; grid-template-columns:auto 1fr; gap:56px; align-items:center; }
.quote__avatar { width:180px; height:180px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 8px rgba(228,200,146,.14), 0 20px 44px -18px rgba(0,0,0,.5); }
.quote__text { font-family:var(--serif); font-size:34px; line-height:1.3; letter-spacing:-0.01em; }
.quote__name { margin-top:24px; font-size:15px; font-weight:600; }
.quote__role { font-size:14px; color:var(--forest-mut); margin-top:2px; }

/* ── CTA (light) ─────────────────────────────────────────── */
.cta--light { background:var(--cream); padding:110px 0; }
.cta__inner { max-width:760px; margin:0 auto; text-align:center; }
.cta__title { font-family:var(--serif); font-weight:400; font-size:52px; line-height:1.08; letter-spacing:-0.01em; margin:18px auto 0; max-width:640px; }
.cta__title--ink { color:var(--ink); }
.cta__lead { font-size:17px; line-height:1.6; margin:18px auto 0; max-width:520px; }
.cta__lead--ink { color:var(--muted); }

/* ── Waitlist (light) ────────────────────────────────────── */
.waitlist { margin-top:36px; }
.waitlist__row { display:flex; justify-content:center; gap:12px; margin-top:0; flex-wrap:wrap; }
.waitlist__row input {
  width:340px; max-width:100%; padding:16px 22px; border-radius:12px; font-size:15.5px; font-family:var(--sans); outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.waitlist--light .waitlist__row input { background:var(--card); border:1px solid var(--input-line); color:var(--ink); }
.waitlist--light .waitlist__row input::placeholder { color:var(--muted-3); }
.waitlist--light .waitlist__row input:focus { border-color:var(--teal); box-shadow:0 0 0 3px rgba(36,91,81,.12); }
.waitlist--light .waitlist__row input.input-error { border-color:#C0503A; box-shadow:0 0 0 3px rgba(192,80,58,.18); }

.waitlist__consent { display:flex; align-items:flex-start; gap:10px; justify-content:center; max-width:460px; margin:18px auto 0; cursor:pointer; text-align:left; }
.waitlist__consent input { position:absolute; opacity:0; width:0; height:0; }
.waitlist__consent-box { width:18px; height:18px; border-radius:5px; flex-shrink:0; margin-top:1px; position:relative; transition:background .2s, border-color .2s; }
.waitlist--light .waitlist__consent-box { border:1px solid var(--input-line); background:var(--card); }
.waitlist--light .waitlist__consent input:checked + .waitlist__consent-box { background:var(--teal); border-color:var(--teal); }
.waitlist--light .waitlist__consent input:checked + .waitlist__consent-box::after {
  content:''; position:absolute; left:5px; top:1px; width:5px; height:10px; border:solid var(--card); border-width:0 2px 2px 0; transform:rotate(45deg);
}
.waitlist--light .waitlist__consent input:focus-visible + .waitlist__consent-box { box-shadow:0 0 0 3px rgba(36,91,81,.25); }
.waitlist__consent-box.consent-error { border-color:#C0503A !important; box-shadow:0 0 0 3px rgba(192,80,58,.25); }
.waitlist--light .waitlist__consent-text { color:var(--muted); }
.waitlist__consent-text { font-size:13px; line-height:1.5; }
.waitlist--light .waitlist__consent-text a { color:var(--teal); }

.waitlist__note { font-size:13px; margin-top:18px; }
.waitlist--light .waitlist__note { color:var(--muted-2); }
.waitlist__feedback { font-size:14px; margin-top:14px; min-height:1em; }
.waitlist--light .waitlist__feedback.is-error { color:#B4402A; }
.waitlist--light .waitlist__feedback.is-success { color:var(--teal); }

/* ── Footer (row) ────────────────────────────────────────── */
.site-footer { background:var(--card); border-top:1px solid var(--line); }
.site-footer--row { padding:56px 0 40px; }
.footer__row { display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.footer__brand-inline { display:flex; align-items:center; gap:12px; }
.footer__logo { font-family:var(--serif); font-size:26px; }
.footer__logo span { color:var(--gold); }
.footer__note { font-size:13px; color:var(--muted-2); }
.footer__links { display:flex; gap:28px; font-size:14.5px; flex-wrap:wrap; }
.footer__links a { color:var(--ink-soft); }
.footer__links a:hover { color:var(--gold); }
.footer__copy { font-size:13px; color:var(--muted-3); }

/* ── Reveal ──────────────────────────────────────────────── */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .75s var(--ease), transform .75s var(--ease); will-change:opacity, transform; }
.reveal.is-visible { opacity:1; transform:none; }

/* ═══════════════ RESPONSIVE ═══════════════ */
@media (max-width:1080px) {
  .hero__grid { grid-template-columns:1fr; gap:56px; }
  .hero__visual { max-width:520px; }
  .tools__grid { grid-template-columns:1fr; grid-template-rows:none; }
  .tool-card--feature { grid-row:auto; }
  .consult__grid { grid-template-columns:1fr; gap:48px; }
  .consult__intro { position:static; }
  .section__title { font-size:40px; }
  .hero__title { font-size:56px; }
  .cta__title { font-size:42px; }
  .quote__text { font-size:28px; }
}

@media (max-width:760px) {
  :root { --pad:20px; }
  .nav__burger { display:flex; }
  .nav__links {
    position:fixed; top:0; right:0; height:100dvh; width:min(80vw,320px);
    flex-direction:column; align-items:flex-start; justify-content:center; gap:22px;
    margin-left:0; padding:40px; background:var(--card); border-left:1px solid var(--line);
    box-shadow:-20px 0 60px -20px rgba(30,43,40,.35); transform:translateX(100%);
    transition:transform .3s var(--ease); font-size:18px;
  }
  .nav__links.is-open { transform:translateX(0); }
  .nav__cta { width:100%; text-align:center; }
  body.nav-open { overflow:hidden; }

  .hero__grid { padding-top:56px; padding-bottom:72px; }
  .hero__title { font-size:42px; }
  .hero__lead { font-size:17px; }
  .hero__proof { flex-direction:column; gap:12px; }
  .hero__proof-item { padding:0; border-left:none; }
  .floating-card--dictation, .floating-badge--next { display:none; }
  .frame { padding:0; }
  .frame__offset { display:none; }
  .media-slot--hero { height:380px; }

  .tools, .consult, .quote, .cta--light { padding:64px 0; }
  .section__title { font-size:32px; }
  .cta__title { font-size:34px; }
  .marquee__item { font-size:18px; }

  .quote__grid { grid-template-columns:1fr; gap:28px; text-align:center; justify-items:center; }
  .quote__avatar { width:130px; height:130px; }
  .quote__text { font-size:24px; }

  .footer__row { flex-direction:column; align-items:flex-start; gap:20px; }
}

@media (max-width:460px) {
  .hero__cta { flex-direction:column; align-items:stretch; }
  .hero__cta .btn { width:100%; }
  .waitlist__row input, .waitlist__row .btn { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  .marquee__track { animation:none; }
}