/* ==========================================================================
   NotarIA — site vitrine (landing + ressources)
   Feuille partagée par public/index.html et public/ressources/*.html.
   ========================================================================== */

/* Polices hébergées sur le site (sous-ensemble latin) : évite deux connexions vers Google au chargement. */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url(/assets/fonts/inter.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Plus Jakarta Sans'; font-style:normal; font-weight:600 800; font-display:swap; src:url(/assets/fonts/plus-jakarta-sans.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'Instrument Serif'; font-style:italic; font-weight:400; font-display:swap; src:url(/assets/fonts/instrument-serif-italic.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-400.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-500.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root{
  --indigo:#1800ad;
  --indigo-600:#2410c9;
  --indigo-light:#4b3fe0;
  --indigo-deep:#0f0070;
  --lilac:#bdb6ff;
  --tint:#eeecfe;
  --tint-2:#e2ddfb;

  --night:#07061a;
  --night-2:#0d0b2b;
  --night-3:#14113d;

  --ink:#0b0b1e;
  --ink-2:#2b2b40;
  --muted:#5c5c72;
  --faint:#9797a8;
  --paper:#ffffff;
  --paper-2:#f7f6fd;
  --line:rgba(11,11,30,.08);
  --line-strong:rgba(11,11,30,.14);
  --line-dark:rgba(255,255,255,.1);

  --green:#22c55e;
  --amber:#f59e0b;
  --red:#ef4444;

  --shadow-sm:0 1px 2px rgba(11,11,30,.04), 0 4px 14px -6px rgba(24,0,173,.16);
  --shadow-md:0 18px 44px -16px rgba(24,0,173,.3);
  --shadow-lg:0 40px 90px -30px rgba(24,0,173,.45);

  --display:'Plus Jakarta Sans', system-ui, sans-serif;
  --body:'Inter', system-ui, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
  --serif:'Instrument Serif', Georgia, serif;

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --section-y:clamp(84px, 11vw, 140px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas{ display:block; max-width:100%; }
img{ height:auto; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; }
button{ font:inherit; color:inherit; cursor:pointer; background:none; border:none; }
input,textarea,select{ font:inherit; color:inherit; }
::selection{ background:var(--indigo); color:#fff; }

:focus-visible{ outline:2px solid var(--indigo-light); outline-offset:3px; border-radius:6px; }

.wrap{ width:100%; max-width:1200px; margin:0 auto; padding:0 32px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link{
  position:absolute; left:16px; top:-60px; z-index:200;
  background:var(--indigo); color:#fff; padding:10px 16px; border-radius:10px; font-weight:600;
}
.skip-link:focus{ top:16px; }

.serif{ font-family:var(--serif); font-style:italic; font-weight:400; letter-spacing:-.01em; }

/* ---------- typographie de section ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:12px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--indigo);
  margin-bottom:20px;
}
.eyebrow::before{ content:""; width:24px; height:1px; background:currentColor; }
.on-dark .eyebrow, .eyebrow.light{ color:var(--lilac); }

.h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(34px, 4.4vw, 56px);
  line-height:1.04;
  letter-spacing:-.035em;
  color:var(--ink);
}
.h2 .serif{ font-size:1.08em; letter-spacing:-.02em; color:var(--indigo); padding-right:.06em; }
.on-dark .h2{ color:#fff; }
.on-dark .h2 .serif{ color:var(--lilac); }
.section-lead{ margin-top:20px; font-size:18px; line-height:1.65; color:var(--muted); max-width:38em; }
.on-dark .section-lead{ color:rgba(255,255,255,.66); }
.section-head{ max-width:760px; margin-bottom:clamp(48px, 6vw, 72px); }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head.center .eyebrow{ justify-content:center; }
.section-head.center .section-lead{ margin-left:auto; margin-right:auto; }

.section{ padding:var(--section-y) 0; position:relative; }
.on-dark{ background:var(--night); color:#fff; }

/* ---------- boutons ---------- */
.btn{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 26px;
  border-radius:999px;
  font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:-.005em;
  white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn svg{ width:16px; height:16px; transition:transform .35s var(--ease); }
.btn:hover svg{ transform:translateX(4px); }
.btn:active{ transform:scale(.98); }
.btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .8s var(--ease);
}
.btn:hover::after{ transform:translateX(120%); }
.btn-primary{
  background:var(--indigo); color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 14px 30px -12px rgba(24,0,173,.65);
}
.btn-primary:hover{ background:var(--indigo-600); transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.25) inset, 0 20px 40px -14px rgba(24,0,173,.75); }
.btn-light{ background:#fff; color:var(--ink); box-shadow:0 14px 34px -14px rgba(0,0,0,.55); }
.btn-light:hover{ transform:translateY(-2px); }
.btn-light::after{ background:linear-gradient(105deg, transparent 30%, rgba(24,0,173,.12) 50%, transparent 70%); }
.btn-ghost{ color:#fff; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.04); backdrop-filter:blur(8px); }
.btn-ghost:hover{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.08); }
.btn-outline{ color:var(--ink); border:1px solid var(--line-strong); background:#fff; }
.btn-outline:hover{ border-color:var(--indigo); color:var(--indigo); transform:translateY(-2px); }
.btn-outline::after{ background:linear-gradient(105deg, transparent 30%, rgba(24,0,173,.08) 50%, transparent 70%); }
.btn-block{ width:100%; }
.play-dot{
  width:26px; height:26px; margin-left:-12px; border-radius:50%;
  display:grid; place-items:center; background:rgba(255,255,255,.14);
}
.play-dot svg{ width:10px; height:10px; transform:none !important; }

/* ---------- apparitions au défilement ---------- */
.js .reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
.js .stagger > *{ opacity:0; transform:translateY(24px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.js .stagger.in > *{ opacity:1; transform:none; }
.js .stagger.in > *:nth-child(2){ transition-delay:.08s; }
.js .stagger.in > *:nth-child(3){ transition-delay:.16s; }
.js .stagger.in > *:nth-child(4){ transition-delay:.24s; }
.js .stagger.in > *:nth-child(5){ transition-delay:.32s; }
.js .stagger.in > *:nth-child(6){ transition-delay:.40s; }
.js .stagger.in > *:nth-child(7){ transition-delay:.48s; }

/* ==========================================================================
   En-tête
   ========================================================================== */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background:linear-gradient(90deg, var(--indigo-light), var(--lilac));
  transform-origin:0 50%; transform:scaleX(var(--progress, 0));
  pointer-events:none;
}
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:14px 20px 0;
  transition:padding .4s var(--ease);
}
.site-header .bar{
  max-width:1200px; margin:0 auto; height:64px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 10px 0 22px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.8);
  backdrop-filter:saturate(1.6) blur(16px);
  -webkit-backdrop-filter:saturate(1.6) blur(16px);
  box-shadow:var(--shadow-sm);
  transition:background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.brand{ display:flex; align-items:center; flex-shrink:0; }
.brand img{ height:30px; width:auto; }
.brand .logo-on-dark{ display:none; }
.main-nav{ display:flex; align-items:center; gap:4px; }
.main-nav a{
  position:relative; padding:8px 14px; border-radius:999px;
  font-size:14.5px; font-weight:500; color:var(--muted);
  transition:color .2s ease, background-color .2s ease;
}
.main-nav a:hover{ color:var(--ink); background:rgba(11,11,30,.04); }
.main-nav a[aria-current="page"]{ color:var(--indigo); }
.nav-actions{ display:flex; align-items:center; gap:8px; }
.nav-login{ padding:8px 14px; font-size:14.5px; font-weight:600; color:var(--ink); border-radius:999px; transition:background-color .2s ease; }
.nav-login:hover{ background:rgba(11,11,30,.05); }
.nav-actions .btn{ height:44px; padding:0 20px; font-size:14px; }

/* au-dessus du hero sombre, avant défilement */
.site-header.is-dark .bar{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); box-shadow:none; }
.site-header.is-dark .logo-on-dark{ display:block; }
.site-header.is-dark .logo-on-light{ display:none; }
.site-header.is-dark .main-nav a{ color:rgba(255,255,255,.72); }
.site-header.is-dark .main-nav a:hover{ color:#fff; background:rgba(255,255,255,.08); }
.site-header.is-dark .nav-login{ color:#fff; }
.site-header.is-dark .nav-login:hover{ background:rgba(255,255,255,.08); }
.site-header.is-dark .nav-toggle{ color:#fff; border-color:rgba(255,255,255,.2); }

.nav-toggle{
  display:none; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line-strong);
  align-items:center; justify-content:center; position:relative; z-index:2;
}
.nav-toggle span{ position:absolute; width:18px; height:1.6px; background:currentColor; border-radius:2px; transition:transform .4s var(--ease), opacity .2s ease; }
.nav-toggle span:nth-child(1){ transform:translateY(-5px); }
.nav-toggle span:nth-child(3){ transform:translateY(5px); }
.menu-open .nav-toggle span:nth-child(1){ transform:rotate(45deg); }
.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
.menu-open .nav-toggle span:nth-child(3){ transform:rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:90;
  background:var(--night);
  color:#fff;
  padding:110px 24px 32px;
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility 0s linear .4s;
}
.menu-open .mobile-menu{ opacity:1; visibility:visible; transition:opacity .4s var(--ease); }
.mobile-menu nav{ display:flex; flex-direction:column; }
.mobile-menu nav a{
  font-family:var(--display); font-weight:700; font-size:30px; letter-spacing:-.03em;
  padding:12px 0; border-bottom:1px solid var(--line-dark);
  opacity:0; transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.menu-open .mobile-menu nav a{ opacity:1; transform:none; }
.menu-open .mobile-menu nav a:nth-child(2){ transition-delay:.04s; }
.menu-open .mobile-menu nav a:nth-child(3){ transition-delay:.08s; }
.menu-open .mobile-menu nav a:nth-child(4){ transition-delay:.12s; }
.menu-open .mobile-menu nav a:nth-child(5){ transition-delay:.16s; }
.menu-open .mobile-menu nav a:nth-child(6){ transition-delay:.20s; }
.mobile-menu .menu-ctas{ margin-top:auto; display:grid; gap:12px; }
.menu-open .site-header .bar{ background:transparent; border-color:transparent; box-shadow:none; }
.menu-open .site-header .logo-on-dark{ display:block; }
.menu-open .site-header .logo-on-light{ display:none; }
.menu-open .site-header .nav-toggle{ color:#fff; border-color:rgba(255,255,255,.2); }
.menu-open{ overflow:hidden; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--night); color:#fff;
  padding:164px 0 0;
}
.hero-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.aurora{ position:absolute; border-radius:50%; opacity:.75; }
.aurora.a1{ width:720px; height:560px; left:-180px; top:-200px; background:radial-gradient(closest-side, rgba(42,20,214,.95), rgba(42,20,214,.45) 45%, transparent); animation:drift1 22s ease-in-out infinite alternate; }
.aurora.a2{ width:640px; height:640px; right:-200px; top:-60px; background:radial-gradient(closest-side, rgba(90,60,255,.9), rgba(90,60,255,.4) 42%, transparent); opacity:.55; animation:drift2 26s ease-in-out infinite alternate; }
.aurora.a3{ width:900px; height:420px; left:20%; bottom:-260px; background:radial-gradient(closest-side, rgba(24,0,173,.95), rgba(24,0,173,.45) 45%, transparent); animation:drift3 30s ease-in-out infinite alternate; }
@keyframes drift1{ to{ transform:translate(140px, 90px) scale(1.15); } }
@keyframes drift2{ to{ transform:translate(-120px, 120px) scale(.9); } }
@keyframes drift3{ to{ transform:translate(-160px, -40px) scale(1.1); } }
.hero-grid-lines{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:72px 72px;
  background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 20%, transparent 75%);
}
.spotlight{
  position:absolute; inset:0;
  background:radial-gradient(520px circle at var(--mx, 70%) var(--my, 30%), rgba(120,100,255,.16), transparent 60%);
  transition:background .2s ease;
}
.hero-noise{
  position:absolute; inset:0; opacity:.07; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-inner{
  display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center;
  padding-bottom:120px;
}
.pill{
  display:inline-flex; max-width:100%; align-items:center; gap:10px;
  padding:5px 14px 5px 5px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-size:13.5px; color:rgba(255,255,255,.8);
  margin-bottom:28px;
  transition:background-color .25s ease, border-color .25s ease;
}
.pill:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.22); }
.pill b{
  font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 9px; border-radius:999px; background:var(--indigo-light); color:#fff;
}
.pill svg{ width:14px; height:14px; opacity:.7; }
.hero h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(44px, 5.6vw, 78px);
  line-height:1.0; letter-spacing:-.04em; word-spacing:.08em;
}
.hero h1 .serif{
  font-size:1.1em; letter-spacing:-.025em;
  background:linear-gradient(92deg, #d8d3ff 0%, #a79cff 45%, #ffffff 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  padding-right:.08em;
}
.w{ display:inline-block; overflow:hidden; vertical-align:top; padding:0 .02em .1em; margin-bottom:-.1em; }
.w > span{ display:inline-block; transform:translateY(110%); animation:wordUp .8s var(--ease) forwards; animation-delay:calc(var(--i, 0) * 40ms + 40ms); }
@keyframes wordUp{ to{ transform:none; } }
.hero .lead{
  margin-top:28px; max-width:33em;
  font-size:clamp(17px, 1.4vw, 19.5px); line-height:1.65; color:rgba(255,255,255,.7);
}
.hero-in{ opacity:0; transform:translateY(14px); animation:fadeUp .7s var(--ease) forwards; animation-delay:var(--d, .3s); }
@keyframes fadeUp{ to{ opacity:1; transform:none; } }
.hero-actions{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; }
.hero-checks{ margin-top:36px; display:flex; flex-wrap:wrap; gap:10px 26px; font-size:14px; color:rgba(255,255,255,.62); }
.hero-checks li{ display:flex; align-items:center; gap:8px; }
.hero-checks svg{ width:16px; height:16px; color:var(--lilac); }

/* ---------- démo d'appel en direct ---------- */
.call-stage{ position:relative; padding:52px 0 72px; }
.callcard{
  position:relative; z-index:1;
  max-width:470px; margin-left:auto;
  border-radius:28px;
  padding:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(22px); backdrop-filter:blur(22px);
  box-shadow:0 50px 120px -40px rgba(5,0,60,.95), inset 0 1px 0 rgba(255,255,255,.14);
}
.callcard::before{
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:conic-gradient(from var(--angle, 0deg), transparent 0 70%, rgba(189,182,255,.9) 85%, transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spin-border 6s linear infinite;
}
@property --angle{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes spin-border{ to{ --angle:360deg; } }
.call-head{ display:flex; align-items:center; gap:12px; padding:4px 4px 16px; border-bottom:1px solid rgba(255,255,255,.08); }
.call-avatar{
  width:44px; height:44px; border-radius:14px; flex-shrink:0;
  background:linear-gradient(140deg, var(--indigo-light), var(--indigo-deep));
  display:grid; place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25);
}
.call-avatar img{ width:20px; height:auto; }
.call-id{ flex:1; min-width:0; }
.call-id strong{ display:block; font-size:15px; font-weight:600; letter-spacing:-.01em; }
.call-id span{ display:block; font-size:12.5px; color:rgba(255,255,255,.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.call-timer{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.85);
  padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.06);
}
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 0 0 rgba(34,197,94,.6); animation:live 1.8s ease-out infinite; }
@keyframes live{ 0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); } 100%{ box-shadow:0 0 0 10px rgba(34,197,94,0); } }
.call-wave{ height:56px; margin:14px 0 6px; }
.call-wave canvas{ width:100%; height:100%; }
.speaker-label{
  display:flex; justify-content:space-between;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.4);
  padding:0 2px 8px;
}
.speaker-label [data-speaker]{ transition:color .3s ease; }
.speaker-label .active{ color:var(--lilac); }
.transcript{
  height:252px; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end; gap:10px;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 56px);
          mask-image:linear-gradient(to bottom, transparent 0, #000 56px);
}
.msg{
  max-width:86%; padding:10px 14px; border-radius:18px;
  font-size:14px; line-height:1.5;
  animation:msgIn .55s var(--ease) both;
}
.msg .who{ display:block; margin-bottom:2px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; }
.msg.client{ align-self:flex-start; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.08); border-bottom-left-radius:6px; }
.msg.agent{ align-self:flex-end; background:linear-gradient(135deg, var(--indigo-light), var(--indigo)); border-bottom-right-radius:6px; box-shadow:0 12px 30px -14px rgba(75,63,224,.9); }
.msg .caret{ display:inline-block; width:2px; height:1em; margin-left:2px; vertical-align:-2px; background:currentColor; animation:blink 1s steps(2) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@keyframes msgIn{ from{ opacity:0; transform:translateY(12px) scale(.98); } to{ opacity:1; transform:none; } }
.typing{ display:inline-flex; gap:4px; padding:4px 0; }
.typing i{ width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.5; animation:typing 1.2s ease-in-out infinite; }
.typing i:nth-child(2){ animation-delay:.15s; }
.typing i:nth-child(3){ animation-delay:.3s; }
@keyframes typing{ 0%,60%,100%{ transform:none; opacity:.35; } 30%{ transform:translateY(-4px); opacity:.9; } }
.call-foot{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08); }
.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px;
  font-size:12px; font-weight:500; color:rgba(255,255,255,.75);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08);
  transition:background-color .4s ease, color .4s ease, border-color .4s ease;
}
.tag svg{ width:13px; height:13px; }
.tag.done{ background:rgba(34,197,94,.14); border-color:rgba(34,197,94,.35); color:#bbf7d0; }
.tag.ai{ color:var(--lilac); }

.fcards{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.fcard{
  position:absolute;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px 12px 12px; border-radius:18px;
  background:#fff; color:var(--ink);
  box-shadow:0 30px 60px -20px rgba(0,0,30,.6), 0 0 0 1px rgba(11,11,30,.04);
  opacity:0; transform:translateY(18px) scale(.94);
  transition:opacity .6s var(--ease), transform .8s var(--ease);
  max-width:300px;
}
.fcard.show{ opacity:1; transform:none; }
.fcard .ic{ width:38px; height:38px; flex-shrink:0; border-radius:12px; display:grid; place-items:center; background:var(--tint); color:var(--indigo); }
.fcard .ic svg{ width:18px; height:18px; }
.fcard .ic.green{ background:#dcfce7; color:#15803d; }
.fcard small{ display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }
.fcard strong{ display:block; font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.35; }
.fcard p{ font-size:12.5px; color:var(--muted); line-height:1.45; }
.fc-fiche{ top:-4px; left:-64px; }
.fc-rdv{ top:27%; left:-72px; }
.fc-sms{ bottom:0; right:-36px; max-width:280px; align-items:flex-start; }

/* ---------- bandeau défilant des motifs ---------- */
.topics{
  position:relative; background:var(--night); color:rgba(255,255,255,.5);
  border-top:1px solid var(--line-dark);
  padding:26px 0;
}
.topics-label{ text-align:center; font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.38); margin-bottom:18px; }
.marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track{ display:flex; width:max-content; animation:marquee 48s linear infinite; }
.marquee:hover .marquee-track{ animation-play-state:paused; }
.marquee ul{ display:flex; align-items:center; gap:44px; padding-right:44px; }
.marquee li{ display:flex; align-items:center; gap:44px; font-family:var(--display); font-weight:600; font-size:20px; letter-spacing:-.02em; white-space:nowrap; color:rgba(255,255,255,.7); }
.marquee li::after{
  content:""; width:22px; height:8px; opacity:.35;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 20'%3E%3Cpath d='M2 16C10 16 12 4 20 4' stroke='%23bdb6ff' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M22 16C30 16 32 4 40 4' stroke='%23bdb6ff' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3Cpath d='M42 16C50 16 52 4 58 4' stroke='%23bdb6ff' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
@keyframes marquee{ to{ transform:translateX(-50%); } }

/* ==========================================================================
   Chiffres
   ========================================================================== */
.stats{ display:grid; grid-template-columns:repeat(4, 1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat{ padding:44px 28px; border-left:1px solid var(--line); }
.stat:first-child{ border-left:none; padding-left:0; }
.stat .num{
  font-family:var(--display); font-weight:800;
  font-size:clamp(34px, 3.9vw, 56px); line-height:1; letter-spacing:-.05em; white-space:nowrap;
  color:var(--ink); font-variant-numeric:tabular-nums;
}
.stat .num em{ font-style:normal; color:var(--indigo); }
.stat .lbl{ margin-top:14px; font-size:15px; color:var(--muted); line-height:1.5; max-width:20em; }

/* ==========================================================================
   Constat
   ========================================================================== */
.statement{
  font-family:var(--display); font-weight:700;
  font-size:clamp(28px, 3.6vw, 50px); line-height:1.16; letter-spacing:-.035em;
  max-width:24em;
}
.statement .sw{ opacity:.14; transition:opacity .35s ease, color .35s ease; }
.statement .sw.on{ opacity:1; }
.statement .sw.hl.on{ color:var(--indigo); }
.no-js .statement .sw, .reduced .statement .sw{ opacity:1; }

.pains{ margin-top:clamp(56px, 7vw, 88px); display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.pain{
  position:relative; overflow:hidden;
  padding:32px 28px 30px; border-radius:24px;
  background:var(--paper-2); border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), background-color .3s ease;
}
.pain:hover{ transform:translateY(-6px); background:#fff; box-shadow:var(--shadow-md); }
.pain-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:34px; }
.pain .ic{ width:48px; height:48px; border-radius:14px; display:grid; place-items:center; background:#fff; color:var(--indigo); border:1px solid var(--line); }
.pain .ic svg{ width:22px; height:22px; }
.pain .n{ font-family:var(--mono); font-size:12.5px; color:var(--faint); }
.pain h3{ font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.02em; }
.pain p{ margin-top:10px; font-size:15px; color:var(--muted); line-height:1.6; }

/* ---------- calculateur ---------- */
.roi{
  margin-top:24px;
  position:relative; overflow:hidden; isolation:isolate;
  display:grid; grid-template-columns:1.1fr .9fr; gap:56px;
  padding:clamp(28px, 4vw, 52px);
  border-radius:32px;
  background:linear-gradient(140deg, var(--night-3), var(--night) 70%);
  color:#fff;
}
.roi::before{ content:""; position:absolute; z-index:-1; width:620px; height:620px; right:-220px; top:-280px; border-radius:50%; background:radial-gradient(circle, rgba(90,60,255,.5), transparent 65%); }
.roi h3{ font-family:var(--display); font-weight:800; font-size:clamp(24px, 2.4vw, 32px); letter-spacing:-.03em; line-height:1.15; }
.roi > div > p{ margin-top:12px; color:rgba(255,255,255,.62); font-size:15.5px; max-width:30em; }
.field-range{ margin-top:30px; }
.field-range .row{ display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:12px; }
.field-range label{ font-size:14.5px; color:rgba(255,255,255,.82); }
.field-range output{ white-space:nowrap; font-family:var(--mono); font-size:15px; color:#fff; padding:3px 10px; border-radius:8px; background:rgba(255,255,255,.08); }
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:6px; outline:none;
  background:linear-gradient(90deg, var(--lilac), var(--indigo-light)) 0/var(--fill, 50%) 100% no-repeat, rgba(255,255,255,.12);
}
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background:#fff; border:5px solid var(--indigo-light); box-shadow:0 4px 14px rgba(0,0,0,.4); cursor:grab; transition:transform .2s ease; }
input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.12); }
input[type=range]::-moz-range-thumb{ width:14px; height:14px; border-radius:50%; background:#fff; border:5px solid var(--indigo-light); box-shadow:0 4px 14px rgba(0,0,0,.4); cursor:grab; }
input[type=range]:focus-visible{ outline:2px solid var(--lilac); outline-offset:6px; }
.roi-result{
  align-self:stretch; display:flex; flex-direction:column; justify-content:center;
  padding:32px; border-radius:24px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1);
}
.roi-result small{ font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.roi-big{ margin-top:10px; font-family:var(--display); font-weight:800; font-size:clamp(44px, 5vw, 68px); line-height:1; letter-spacing:-.05em; font-variant-numeric:tabular-nums; }
.roi-big .per{ font-size:.4em; letter-spacing:-.01em; font-weight:600; color:rgba(255,255,255,.55); }
.bars{ margin-top:28px; display:grid; gap:14px; }
.bar-row{ display:grid; gap:7px; font-size:13px; color:rgba(255,255,255,.7); }
.bar-row .lbl{ display:flex; justify-content:space-between; }
.bar-row .lbl b{ font-family:var(--mono); font-weight:500; color:#fff; }
.bar-track{ height:10px; border-radius:10px; background:rgba(255,255,255,.07); overflow:hidden; }
.bar-fill{ height:100%; border-radius:10px; transition:width .8s var(--ease); }
.bar-fill.loss{ background:linear-gradient(90deg, #f87171, #fb923c); }
.bar-fill.cost{ background:linear-gradient(90deg, var(--lilac), var(--indigo-light)); min-width:6px; }
.roi-note{ margin-top:22px; font-size:12.5px; color:rgba(255,255,255,.45); line-height:1.5; }

/* ==========================================================================
   Fonctionnement — récit au défilement + téléphone
   ========================================================================== */
.story{ display:grid; grid-template-columns:1fr 1fr; gap:80px; }
.story-steps{ position:relative; padding-left:34px; }
.story-steps::before{ content:""; position:absolute; left:6px; top:12vh; bottom:12vh; width:1px; background:var(--line-strong); }
.story-steps .progress-line{ position:absolute; left:6px; top:12vh; width:1px; height:calc((100% - 24vh) * var(--story, 0)); background:linear-gradient(var(--indigo-light), var(--indigo)); transition:height .2s linear; }
.sstep{
  position:relative; min-height:76vh;
  display:flex; flex-direction:column; justify-content:center;
  opacity:.28; transition:opacity .6s var(--ease);
}
.sstep.on{ opacity:1; }
.sstep::before{
  content:""; position:absolute; left:-34px; top:50%; width:13px; height:13px; margin-top:-7px;
  border-radius:50%; background:#fff; border:1.5px solid var(--line-strong);
  transition:border-color .4s ease, background-color .4s ease, box-shadow .4s ease;
}
.sstep.on::before{ background:var(--indigo); border-color:var(--indigo); box-shadow:0 0 0 6px var(--tint); }
.sstep .idx{ font-family:var(--mono); font-size:12.5px; color:var(--indigo); letter-spacing:.1em; }
.sstep h3{ margin-top:14px; font-family:var(--display); font-weight:800; font-size:clamp(26px, 2.6vw, 36px); letter-spacing:-.035em; line-height:1.1; }
.sstep p{ margin-top:16px; font-size:17px; line-height:1.7; color:var(--muted); max-width:28em; }
.sstep ul{ margin-top:20px; display:grid; gap:10px; }
.sstep li{ display:flex; gap:10px; font-size:15px; color:var(--ink-2); }
.sstep li svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--indigo); }

.phone-col{ position:relative; overflow-x:clip; }
.phone-sticky{ position:sticky; top:calc(50vh - 330px); height:660px; display:grid; place-items:center; }
.phone-glow{ position:absolute; width:520px; height:520px; border-radius:50%; background:radial-gradient(circle, rgba(75,63,224,.28), transparent 68%); }
.phone{
  position:relative; width:316px; height:644px; border-radius:54px;
  background:linear-gradient(145deg, #2a2840, #0b0b1e 40%);
  padding:11px;
  box-shadow:0 0 0 1.5px #3a3852, 0 60px 120px -40px rgba(24,0,173,.55), 0 30px 60px -30px rgba(0,0,0,.5), inset 0 0 2px rgba(255,255,255,.3);
}
.phone::before{ content:""; position:absolute; right:-3px; top:150px; width:3px; height:70px; border-radius:0 3px 3px 0; background:#2a2840; }
.phone .screen{ position:relative; width:100%; height:100%; border-radius:44px; overflow:hidden; background:#000; }
.island{ position:absolute; z-index:5; top:11px; left:50%; width:96px; height:28px; margin-left:-48px; border-radius:20px; background:#000; }
.status-bar{ position:absolute; z-index:4; top:0; left:0; right:0; height:50px; display:flex; justify-content:space-between; align-items:center; padding:0 30px 0 34px; font-size:13px; font-weight:600; }
.status-bar .sb-icons{ display:flex; gap:5px; align-items:center; }
.status-bar .sb-icons i{ display:block; width:16px; height:10px; border-radius:3px; border:1.5px solid currentColor; opacity:.9; }
.status-bar .sb-icons b{ display:block; width:3px; height:10px; background:currentColor; border-radius:1px; }
.scr{ position:absolute; inset:0; opacity:0; transform:scale(1.03); transition:opacity .7s var(--ease), transform .9s var(--ease); }
.phone[data-step="1"] .scr-1, .phone[data-step="2"] .scr-2, .phone[data-step="3"] .scr-3, .phone[data-step="4"] .scr-4{ opacity:1; transform:none; }

/* écran appel */
.scr-call{ background:radial-gradient(120% 70% at 50% 0%, #3a2be0 0%, #13105a 55%, #07061a 100%); color:#fff; display:flex; flex-direction:column; align-items:center; padding:86px 22px 34px; text-align:center; }
.scr-call .caller-sub{ font-size:13px; color:rgba(255,255,255,.6); }
.scr-call .caller-name{ margin-top:6px; font-family:var(--display); font-weight:700; font-size:24px; letter-spacing:-.02em; line-height:1.15; }
.scr-call .caller-time{ margin-top:6px; font-family:var(--mono); font-size:13px; color:rgba(255,255,255,.7); }
.ring-wrap{ position:relative; margin:40px 0 0; width:120px; height:120px; display:grid; place-items:center; }
.ring-wrap .ring{ position:absolute; inset:0; border-radius:50%; border:1px solid rgba(255,255,255,.4); animation:ringOut 2.4s ease-out infinite; }
.ring-wrap .ring:nth-child(2){ animation-delay:.8s; }
.ring-wrap .ring:nth-child(3){ animation-delay:1.6s; }
@keyframes ringOut{ from{ transform:scale(.7); opacity:.9; } to{ transform:scale(1.9); opacity:0; } }
.ring-wrap .core{ position:relative; width:96px; height:96px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(140deg, var(--indigo-light), var(--indigo)); box-shadow:0 20px 40px -10px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.3); }
.ring-wrap .core img{ width:40px; }
.scr-chip{ margin-top:34px; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.14); font-size:12.5px; }
.scr-chip .live-dot{ width:7px; height:7px; }
.call-btns{ margin-top:auto; display:grid; grid-template-columns:repeat(3, 1fr); gap:18px 26px; }
.call-btns span{ width:60px; height:60px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.14); }
.call-btns span svg{ width:22px; height:22px; }
.call-btns .hang{ grid-column:2; background:#ef4444; }
.mini-wave{ display:flex; gap:4px; align-items:center; height:34px; margin-top:28px; }
.mini-wave i{ width:4px; border-radius:4px; background:#fff; height:30%; animation:eq 1.1s ease-in-out infinite; }
.mini-wave i:nth-child(2n){ animation-delay:.15s; } .mini-wave i:nth-child(3n){ animation-delay:.3s; } .mini-wave i:nth-child(5n){ animation-delay:.45s; }
@keyframes eq{ 0%,100%{ height:20%; } 50%{ height:100%; } }
.captions{ margin-top:22px; width:100%; display:grid; gap:8px; text-align:left; }
.cap{ font-size:12.5px; line-height:1.45; padding:9px 12px; border-radius:14px; background:rgba(255,255,255,.1); }
.cap.agent{ background:rgba(189,182,255,.22); margin-left:22px; }
.cap b{ display:block; font-family:var(--mono); font-weight:500; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; opacity:.6; margin-bottom:2px; }
.chips-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; justify-content:center; }
.chips-row span{ font-size:11px; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.12); }

/* écran SMS */
.scr-sms{ background:#fff; color:var(--ink); display:flex; flex-direction:column; }
.sms-head{ padding:56px 16px 12px; text-align:center; border-bottom:1px solid #eee; background:#f8f8fb; }
.sms-head .av{ width:46px; height:46px; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:linear-gradient(140deg, var(--indigo-light), var(--indigo)); }
.sms-head .av img{ width:20px; }
.sms-head strong{ display:block; margin-top:6px; font-size:12.5px; font-weight:600; }
.sms-body{ flex:1; padding:16px 14px; display:flex; flex-direction:column; gap:8px; background:#fff; }
.sms-time{ text-align:center; font-size:11px; color:#8e8e98; margin-bottom:4px; }
.bubble{ max-width:84%; padding:10px 13px; border-radius:18px; font-size:13px; line-height:1.42; background:#e9e9ef; border-bottom-left-radius:6px; }
.scr-3 .bubble{ opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease); }
.phone[data-step="3"] .scr-3 .bubble{ opacity:1; transform:none; transition-delay:.45s; }
.phone[data-step="3"] .scr-3 .bubble + .bubble{ transition-delay:1.1s; }
.cal-card{ padding:0; overflow:hidden; background:#fff; border:1px solid #e6e6ee; }
.cal-card .cal-top{ background:var(--indigo); color:#fff; padding:8px 12px; font-size:11px; font-family:var(--mono); letter-spacing:.06em; }
.cal-card .cal-main{ padding:10px 12px; }
.cal-card .cal-main strong{ display:block; font-size:14px; }
.cal-card .cal-main span{ font-size:12px; color:var(--muted); }

/* écran plateforme */
.scr-app{ background:var(--paper-2); color:var(--ink); padding:56px 14px 14px; display:flex; flex-direction:column; gap:10px; }
.scr-app .app-title{ display:flex; justify-content:space-between; align-items:center; padding:0 4px 4px; }
.scr-app .app-title strong{ font-family:var(--display); font-size:18px; letter-spacing:-.02em; }
.scr-app .app-title img{ height:16px; }
.notif{ background:#fff; border-radius:16px; padding:12px; box-shadow:var(--shadow-sm); border:1px solid var(--line); opacity:0; transform:translateY(-14px); transition:opacity .5s var(--ease), transform .6s var(--ease); }
.phone[data-step="4"] .notif{ opacity:1; transform:none; transition-delay:.4s; }
.notif .n-head{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--faint); font-family:var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.notif .n-head i{ width:8px; height:8px; border-radius:50%; background:var(--indigo); }
.notif strong{ display:block; margin-top:6px; font-size:14px; }
.notif p{ margin-top:4px; font-size:12px; color:var(--muted); line-height:1.45; }
.notif .badges{ display:flex; gap:6px; margin-top:8px; }
.badge{ display:inline-flex; align-items:center; gap:5px; padding:3px 8px; border-radius:999px; font-size:10.5px; font-weight:600; white-space:nowrap; }
.badge.green{ background:#ecfdf5; color:#047857; box-shadow:inset 0 0 0 1px #a7f3d0; }
.badge.indigo{ background:#eef2ff; color:#4338ca; box-shadow:inset 0 0 0 1px #c7d2fe; }
.badge.amber{ background:#fffbeb; color:#92400e; box-shadow:inset 0 0 0 1px #fde68a; }
.badge.orange{ background:#fff7ed; color:#c2410c; box-shadow:inset 0 0 0 1px #fed7aa; }
.badge.slate{ background:#f1f5f9; color:#475569; box-shadow:inset 0 0 0 1px #e2e8f0; }
.mini-list{ background:#fff; border-radius:16px; border:1px solid var(--line); overflow:hidden; }
.mini-list div{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-top:1px solid var(--line); font-size:12px; }
.mini-list div:first-child{ border-top:none; }
.mini-list .av{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:10.5px; font-weight:700; color:#fff; flex-shrink:0; }
.mini-list .who{ flex:1; min-width:0; }
.mini-list .who b{ display:block; font-weight:600; font-size:12.5px; }
.mini-list .who span{ color:var(--faint); font-size:11px; }

/* ==========================================================================
   Plateforme — maquette du tableau de bord
   ========================================================================== */
.platform{ overflow:hidden; isolation:isolate; }
.platform::before{
  content:""; position:absolute; z-index:-1; left:50%; top:22%; width:1100px; height:700px; margin-left:-550px;
  background:radial-gradient(ellipse at center, rgba(75,63,224,.4), rgba(75,63,224,.15) 40%, transparent 66%);
}
.platform .hero-grid-lines{ -webkit-mask-image:radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent 75%); mask-image:radial-gradient(ellipse 60% 50% at 50% 0%, #000, transparent 75%); z-index:-1; }
.browser-wrap{ position:relative; perspective:2200px; }
.browser{
  position:relative;
  max-width:1120px; margin:0 auto;
  border-radius:20px; overflow:hidden;
  background:#fff; color:var(--ink);
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 80px 160px -40px rgba(0,0,0,.9), 0 40px 80px -40px rgba(75,63,224,.6);
  transform-origin:50% 0%;
  transform:rotateX(calc(var(--tilt, 1) * 22deg)) scale(calc(1 - var(--tilt, 1) * .08)) translateY(calc(var(--tilt, 1) * 30px));
  will-change:transform;
}
.chrome{ display:flex; align-items:center; gap:14px; padding:12px 16px; background:#f3f2fa; border-bottom:1px solid var(--line); }
.chrome .dots{ display:flex; gap:7px; }
.chrome .dots i{ width:11px; height:11px; border-radius:50%; background:#d9d7e6; }
.chrome .dots i:nth-child(1){ background:#ff6159; } .chrome .dots i:nth-child(2){ background:#ffbd2e; } .chrome .dots i:nth-child(3){ background:#28c941; }
.chrome .url{ flex:1; max-width:380px; margin:0 auto; display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 14px; border-radius:8px; background:#fff; font-size:12.5px; color:var(--muted); border:1px solid var(--line); }
.chrome .url svg{ width:12px; height:12px; color:var(--green); }
.chrome .spacer{ width:47px; }
.app{ display:grid; grid-template-columns:220px 1fr; min-height:560px; }
.app-side{ border-right:1px solid var(--line); padding:20px 14px; display:flex; flex-direction:column; gap:4px; background:#fff; }
.app-side img{ height:24px; width:auto; margin:0 8px 22px; align-self:flex-start; }
.app-side a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; font-size:13.5px; font-weight:500; color:var(--muted); }
.app-side a svg{ width:17px; height:17px; }
.app-side a.active{ background:var(--tint); color:var(--indigo); font-weight:600; }
.app-side a .count{ margin-left:auto; font-family:var(--mono); font-size:11px; padding:1px 7px; border-radius:999px; background:var(--indigo); color:#fff; }
.app-side .side-foot{ margin-top:auto; display:flex; align-items:center; gap:10px; padding:10px; border-radius:12px; background:var(--paper-2); font-size:12px; }
.app-side .side-foot .av{ width:30px; height:30px; border-radius:50%; background:linear-gradient(140deg, var(--indigo-light), var(--indigo)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:11px; }
.app-side .side-foot b{ display:block; font-size:12.5px; }
.app-side .side-foot span{ color:var(--faint); }
.app-main{ background:var(--paper-2); padding:26px 28px; min-width:0; }
.app-top{ display:flex; justify-content:space-between; align-items:flex-end; gap:16px; }
.app-top small{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }
.app-top h4{ margin-top:4px; font-family:var(--display); font-weight:800; font-size:24px; letter-spacing:-.03em; }
.app-top .agent-on{ display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:#047857; background:#ecfdf5; padding:7px 12px; border-radius:999px; box-shadow:inset 0 0 0 1px #a7f3d0; white-space:nowrap; }
.kpis{ margin-top:20px; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.kpi{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:14px 16px; }
.kpi .k-top{ display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--muted); }
.kpi .k-top span:last-child{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--tint); color:var(--indigo); }
.kpi .k-top svg{ width:15px; height:15px; }
.kpi .k-num{ margin-top:10px; font-family:var(--display); font-weight:800; font-size:28px; letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums; }
.kpi .k-num.bump{ animation:bump .6s var(--ease); }
@keyframes bump{ 30%{ transform:scale(1.18); color:var(--indigo); } }
.kpi .k-sub{ margin-top:6px; font-size:11.5px; color:var(--faint); }
.kpi.warn .k-top span:last-child{ background:#fff7ed; color:#c2410c; }
.kpi.danger .k-top span:last-child{ background:#fef2f2; color:#dc2626; }
.kpi.ok .k-top span:last-child{ background:#ecfdf5; color:#047857; }
.calls{ margin-top:16px; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; }
.calls-head{ display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); }
.calls-head b{ font-size:14px; }
.calls-head span{ font-size:12.5px; color:var(--indigo); font-weight:600; }
.call-row{
  display:grid; grid-template-columns:minmax(0, 1.4fr) minmax(0, 1.7fr) auto 84px 78px; gap:14px; align-items:center;
  padding:12px 18px; border-top:1px solid var(--line); font-size:13px;
}
.call-row:first-of-type{ border-top:none; }
.call-row.new{ animation:rowIn .9s var(--ease); background:linear-gradient(90deg, var(--tint), transparent 70%); }
@keyframes rowIn{ from{ opacity:0; transform:translateY(-12px); } }
.call-row .person{ display:flex; align-items:center; gap:10px; min-width:0; }
.call-row .av{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0; }
.call-row .person b{ display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.call-row .person div span{ display:block; font-size:11.5px; color:var(--faint); font-family:var(--mono); }
.call-row .summary{ color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.call-row .summary b{ color:var(--ink); font-weight:600; }
.prio{ display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); white-space:nowrap; }
.prio i{ width:8px; height:8px; border-radius:50%; background:#cbd5e1; }
.prio.urgente{ color:#b91c1c; font-weight:700; } .prio.urgente i{ background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18); }
.prio.haute{ color:#c2410c; font-weight:600; } .prio.haute i{ background:#f97316; }
.call-row time{ font-family:var(--mono); font-size:12px; color:var(--faint); text-align:right; white-space:nowrap; }

.callouts{ position:absolute; inset:0; pointer-events:none; }
.callout{
  position:absolute; display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:14px;
  background:rgba(13,11,43,.82); color:#fff; border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  font-size:13px; font-weight:500; white-space:nowrap;
  box-shadow:0 20px 40px -20px rgba(0,0,0,.7);
  opacity:0; transform:translateY(10px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.callout svg{ width:16px; height:16px; color:var(--lilac); }
.browser-wrap.in .callout{ opacity:1; transform:none; }
.browser-wrap.in .callout:nth-child(2){ transition-delay:.25s; }
.browser-wrap.in .callout:nth-child(3){ transition-delay:.5s; }
.co-1{ left:-24px; top:30%; }
.co-2{ right:-24px; top:16%; }
.co-3{ right:6%; bottom:-22px; }

.platform-feats{ margin-top:clamp(64px, 8vw, 100px); display:grid; grid-template-columns:repeat(4, 1fr); gap:32px; }
.pf .ic{ width:44px; height:44px; border-radius:12px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--lilac); }
.pf .ic svg{ width:20px; height:20px; }
.pf h3{ margin-top:18px; font-family:var(--display); font-weight:700; font-size:17.5px; letter-spacing:-.015em; }
.pf p{ margin-top:8px; font-size:14.5px; line-height:1.6; color:rgba(255,255,255,.58); }

/* ==========================================================================
   Fonctionnalités — bento
   ========================================================================== */
.bento-section{ background:var(--paper-2); }
.bento{ display:grid; grid-template-columns:repeat(6, 1fr); gap:18px; }
.cell{
  --x:50%; --y:50%;
  position:relative; overflow:hidden; isolation:isolate;
  grid-column:span 2;
  display:flex; flex-direction:column;
  min-height:360px; padding:30px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.cell::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:0; transition:opacity .4s ease;
  background:radial-gradient(420px circle at var(--x) var(--y), rgba(75,63,224,.09), transparent 60%);
}
.cell:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.cell:hover::before{ opacity:1; }
.cell.wide{ grid-column:span 4; }
.cell.full{ grid-column:span 6; min-height:0; }
.cell h3{ font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.025em; line-height:1.2; }
.cell p{ margin-top:10px; font-size:15px; line-height:1.6; color:var(--muted); max-width:30em; }
.cell .viz{ position:relative; flex:1; margin-bottom:26px; min-height:150px; display:flex; align-items:center; justify-content:center; }
.cell.dark{ background:linear-gradient(150deg, var(--night-3), var(--night)); color:#fff; border-color:transparent; }
.cell.dark p{ color:rgba(255,255,255,.62); }

/* vocabulaire */
.words{ position:absolute; inset:0; overflow:hidden; -webkit-mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image:linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); display:flex; flex-direction:column; justify-content:center; gap:12px; }
.words-row{ display:flex; gap:10px; width:max-content; animation:marquee 36s linear infinite; }
.words-row.rev{ animation-direction:reverse; animation-duration:42s; }
.words-row span{ padding:9px 16px; border-radius:999px; font-size:14px; font-weight:500; white-space:nowrap; background:var(--paper-2); border:1px solid var(--line); color:var(--ink-2); }
.words-row span.hi{ background:var(--indigo); border-color:var(--indigo); color:#fff; }
.words-row span.soft{ background:var(--tint); border-color:var(--tint-2); color:var(--indigo); }

/* horloge 24/7 */
.clock{ position:relative; width:168px; height:168px; }
.clock svg{ width:100%; height:100%; overflow:visible; }
.clock .hand{ transform-origin:84px 84px; animation:spin 12s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.clock .center-txt{ position:absolute; inset:0; display:grid; place-items:center; text-align:center; }
.clock .center-txt b{ font-family:var(--display); font-weight:800; font-size:34px; letter-spacing:-.04em; display:block; line-height:1; }
.clock .center-txt span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.55); }

/* agenda */
.cal{ width:100%; max-width:280px; display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; }
.cal .d{ font-family:var(--mono); font-size:10.5px; text-align:center; color:var(--faint); padding-bottom:4px; }
.cal .s{ height:26px; border-radius:7px; background:var(--paper-2); border:1px solid var(--line); }
.cal .s.busy{ background:repeating-linear-gradient(45deg, #ecebf5 0 5px, #f6f5fb 5px 10px); }
.cal .s.pick{ position:relative; background:var(--paper-2); }
.cal .s.pick::after{ content:"14:30"; position:absolute; inset:-1px; border-radius:7px; display:grid; place-items:center; font-family:var(--mono); font-size:10px; color:#fff; background:var(--indigo); box-shadow:0 8px 18px -6px rgba(24,0,173,.6); transform:scale(0); animation:pick 4s var(--ease) infinite; }
@keyframes pick{ 0%,18%{ transform:scale(0); } 30%,85%{ transform:scale(1); } 100%{ transform:scale(0); } }

/* SMS */
.sms-viz{ width:100%; max-width:290px; display:grid; gap:8px; }
.sms-viz .bubble{ font-size:13px; }
.sms-viz .typing-b{ width:58px; padding:12px 14px; border-radius:18px; border-bottom-left-radius:6px; background:#e9e9ef; color:#8e8e98; animation:typeHide 5s ease infinite; }
.sms-viz .msg-b{ animation:msgShow 5s ease infinite; }
@keyframes typeHide{ 0%,30%{ opacity:1; } 36%,100%{ opacity:0; height:0; padding:0; margin:-4px 0; } }
@keyframes msgShow{ 0%,32%{ opacity:0; transform:translateY(8px); } 40%,92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.sms-viz .meta{ font-size:11px; color:var(--faint); padding-left:6px; }

/* urgences */
.triage{ width:100%; max-width:300px; display:grid; gap:8px; }
.triage div{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:var(--paper-2); border:1px solid var(--line); font-size:13px; }
.triage div b{ flex:1; font-weight:600; }
.triage .urgent{ background:#fff; border-color:#fecaca; box-shadow:0 10px 24px -14px rgba(239,68,68,.6); animation:pulseRed 2.6s ease-in-out infinite; }
@keyframes pulseRed{ 50%{ box-shadow:0 10px 24px -10px rgba(239,68,68,.75), 0 0 0 4px rgba(239,68,68,.08); } }
.triage .arrow{ font-size:11.5px; color:#b91c1c; font-weight:600; display:flex; align-items:center; gap:4px; }
.triage .arrow svg{ width:12px; height:12px; }

/* installation */
.install{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.timeline{ position:relative; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.timeline::before{ content:""; position:absolute; top:19px; left:12%; right:12%; height:2px; background:var(--line-strong); }
.timeline::after{ content:""; position:absolute; top:19px; left:12%; height:2px; width:0; background:linear-gradient(90deg, var(--indigo-light), var(--indigo)); transition:width 2.2s var(--ease) .3s; }
.in .timeline::after, .timeline.in::after{ width:76%; }
.tl{ position:relative; text-align:center; }
.tl i{ position:relative; z-index:1; width:40px; height:40px; margin:0 auto; border-radius:50%; display:grid; place-items:center; background:#fff; border:2px solid var(--line-strong); font-family:var(--mono); font-style:normal; font-size:12px; color:var(--muted); transition:all .5s var(--ease); }
.in .tl i{ border-color:var(--indigo); color:#fff; background:var(--indigo); }
.in .tl:nth-child(2) i{ transition-delay:.8s; } .in .tl:nth-child(3) i{ transition-delay:1.4s; } .in .tl:nth-child(4) i{ transition-delay:2s; }
.tl b{ display:block; margin-top:14px; font-size:14px; font-weight:600; }
.tl span{ display:block; margin-top:4px; font-size:12.5px; color:var(--muted); line-height:1.45; }

/* ==========================================================================
   Conçu avec un notaire
   ========================================================================== */
.collab{
  position:relative; overflow:hidden; isolation:isolate;
  border-radius:36px;
  padding:clamp(40px, 7vw, 96px);
  background:linear-gradient(135deg, var(--indigo) 0%, var(--indigo-deep) 60%, var(--night) 100%);
  color:#fff;
  display:grid; grid-template-columns:1.3fr .7fr; gap:48px; align-items:center;
}
.collab::before{
  content:""; position:absolute; inset:0; z-index:-1; opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M4 32C20 32 24 8 40 8' stroke='white' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M44 32C60 32 64 8 80 8' stroke='white' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M84 32C100 32 104 8 116 8' stroke='white' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:120px 40px;
  -webkit-mask-image:linear-gradient(115deg, transparent 40%, #000);
          mask-image:linear-gradient(115deg, transparent 40%, #000);
}
.collab blockquote{ font-family:var(--display); font-weight:700; font-size:clamp(30px, 3.8vw, 54px); line-height:1.08; letter-spacing:-.04em; }
.collab blockquote .serif{ font-size:1.1em; color:var(--lilac); }
.collab p{ margin-top:24px; font-size:17px; line-height:1.7; color:rgba(255,255,255,.72); max-width:34em; }
.collab-mark{ justify-self:center; position:relative; width:min(260px, 100%); }
.collab-mark img{ width:100%; height:auto; opacity:.95; filter:drop-shadow(0 30px 60px rgba(0,0,0,.4)); animation:floaty 7s ease-in-out infinite; }
@keyframes floaty{ 50%{ transform:translateY(-14px) rotate(-2deg); } }
.collab-points{ margin-top:32px; display:flex; flex-wrap:wrap; gap:10px; }
.collab-points span{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); font-size:13.5px; }
.collab-points svg{ width:15px; height:15px; color:var(--lilac); }

/* ==========================================================================
   Tarifs
   ========================================================================== */
.pricing{ display:grid; grid-template-columns:1fr 1.08fr; gap:20px; max-width:980px; margin:0 auto; align-items:stretch; }
.plan{
  position:relative; display:flex; flex-direction:column;
  padding:40px 36px; border-radius:30px;
  background:#fff; border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease);
}
.plan:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); }
.plan.featured{ background:linear-gradient(160deg, var(--night-3), var(--night) 75%); color:#fff; border-color:transparent; box-shadow:var(--shadow-lg); overflow:hidden; isolation:isolate; }
.plan.featured::before{ content:""; position:absolute; z-index:-1; width:400px; height:400px; right:-140px; top:-180px; border-radius:50%; background:radial-gradient(circle, rgba(90,60,255,.55), transparent 65%); }
.plan .tag-top{ display:flex; justify-content:space-between; align-items:center; }
.plan .kind{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--indigo); }
.plan.featured .kind{ color:var(--lilac); }
.plan .reco{ font-size:12px; font-weight:600; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); }
.plan h3{ margin-top:16px; font-family:var(--display); font-weight:800; font-size:26px; letter-spacing:-.03em; }
.plan .desc{ margin-top:8px; font-size:15px; color:var(--muted); }
.plan.featured .desc{ color:rgba(255,255,255,.6); }
.price{ margin-top:28px; display:flex; align-items:baseline; gap:10px; }
.price b{ font-family:var(--display); font-weight:800; font-size:60px; line-height:1; letter-spacing:-.05em; }
.price span{ font-size:15px; color:var(--muted); }
.plan.featured .price span{ color:rgba(255,255,255,.6); }
.plan ul{ margin:30px 0 34px; padding-top:28px; border-top:1px solid var(--line); display:grid; gap:14px; }
.plan.featured ul{ border-color:rgba(255,255,255,.1); }
.plan li{ display:flex; gap:12px; font-size:15px; line-height:1.5; }
.plan li svg{ width:20px; height:20px; flex-shrink:0; padding:3px; border-radius:50%; background:var(--tint); color:var(--indigo); }
.plan.featured li svg{ background:rgba(189,182,255,.16); color:var(--lilac); }
.plan .btn{ margin-top:auto; }
.install-fee{
  max-width:980px; margin:20px auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:24px 40px; flex-wrap:wrap;
  padding:28px 36px; border-radius:26px;
  background:var(--paper-2); border:1px solid var(--line);
}
.install-fee .fee-text{ flex:1 1 320px; }
.install-fee .kind{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--indigo); }
.install-fee b{ display:block; margin-top:6px; font-family:var(--display); font-weight:800; font-size:21px; letter-spacing:-.025em; }
.install-fee p{ margin-top:6px; font-size:14.5px; color:var(--muted); max-width:40em; }
.install-fee .price{ margin-top:0; }
.install-fee .price b{ font-size:44px; margin-top:0; }
.reassure{ margin-top:36px; display:flex; flex-wrap:wrap; justify-content:center; gap:12px 34px; font-size:14px; color:var(--muted); }
.reassure span{ display:flex; align-items:center; gap:8px; }
.reassure svg{ width:16px; height:16px; color:var(--indigo); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-grid{ display:grid; grid-template-columns:.8fr 1.2fr; gap:72px; align-items:start; }
.faq-aside{ position:sticky; top:120px; }
.faq-aside .contact-card{ margin-top:32px; padding:24px; border-radius:22px; background:var(--paper-2); border:1px solid var(--line); }
.faq-aside .contact-card b{ display:block; font-family:var(--display); font-size:17px; letter-spacing:-.015em; }
.faq-aside .contact-card p{ margin:6px 0 18px; font-size:14.5px; color:var(--muted); }
.faq-list{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  list-style:none; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:26px 0;
  font-family:var(--display); font-weight:700; font-size:clamp(17px, 1.5vw, 20px); letter-spacing:-.02em; line-height:1.35;
  transition:color .2s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--indigo); }
.faq-item .plus{ position:relative; width:34px; height:34px; flex-shrink:0; border-radius:50%; border:1px solid var(--line-strong); transition:transform .4s var(--ease), background-color .3s ease, border-color .3s ease; }
.faq-item .plus::before, .faq-item .plus::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1.6px; margin:-.8px 0 0 -6px; background:currentColor; border-radius:2px; transition:transform .4s var(--ease); }
.faq-item .plus::after{ transform:rotate(90deg); }
.faq-item[open] .plus{ background:var(--indigo); border-color:var(--indigo); color:#fff; transform:rotate(180deg); }
.faq-item[open] .plus::after{ transform:rotate(0deg); }
.faq-item .answer{ padding:0 56px 26px 0; font-size:16px; line-height:1.75; color:var(--muted); }
.faq-item[open] .answer{ animation:fadeUp .5s var(--ease) both; }
.faq-item .answer a{ color:var(--indigo); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ==========================================================================
   Ressources (cartes)
   ========================================================================== */
.res-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.res-head .section-head{ margin-bottom:0; }
.res-grid{ margin-top:56px; display:grid; grid-template-columns:repeat(3, 1fr); gap:22px; }
.res-card{
  display:flex; flex-direction:column; border-radius:24px; overflow:hidden;
  background:#fff; border:1px solid var(--line);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s ease;
}
.res-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }
.res-thumb{
  position:relative; overflow:hidden; aspect-ratio:16/9;
  display:flex; align-items:flex-end; padding:20px;
  background:linear-gradient(140deg, var(--indigo-light), var(--indigo) 50%, var(--indigo-deep));
  color:#fff;
}
.res-thumb.t2{ background:linear-gradient(140deg, #1d1a4f, var(--night)); }
.res-thumb.t3{ background:linear-gradient(140deg, #ece9ff, #d9d3ff); color:var(--indigo); }
.res-thumb::before{
  content:""; position:absolute; inset:0; opacity:.16;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M4 32C20 32 24 8 40 8' stroke='white' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M44 32C60 32 64 8 80 8' stroke='white' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M84 32C100 32 104 8 116 8' stroke='white' stroke-width='5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-size:90px 30px;
  transition:transform 1.2s var(--ease);
}
.res-thumb.t3::before{ filter:invert(14%) sepia(90%) saturate(6000%) hue-rotate(245deg); opacity:.12; }
.res-card:hover .res-thumb::before{ transform:translateX(-30px); }
.res-thumb .big-ic{ position:absolute; right:20px; top:20px; width:52px; height:52px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.res-thumb.t3 .big-ic{ background:rgba(255,255,255,.7); border-color:#fff; }
.res-thumb .big-ic svg{ width:24px; height:24px; }
.res-thumb .cat{ position:relative; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.2); }
.res-thumb.t3 .cat{ background:#fff; border-color:#fff; }
.res-body{ flex:1; display:flex; flex-direction:column; padding:24px 24px 26px; }
.res-body h3{ font-family:var(--display); font-weight:700; font-size:19px; line-height:1.3; letter-spacing:-.02em; }
.res-body p{ margin-top:10px; font-size:14.5px; color:var(--muted); line-height:1.6; flex:1; }
.res-meta{ margin-top:20px; display:flex; justify-content:space-between; align-items:center; font-size:13px; color:var(--faint); }
.res-meta .go{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--indigo); }
.res-meta .go svg{ width:14px; height:14px; transition:transform .35s var(--ease); }
.res-card:hover .res-meta .go svg{ transform:translateX(4px); }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact{ position:relative; overflow:hidden; isolation:isolate; }
.contact .aurora.a1{ left:auto; right:-200px; top:auto; bottom:-300px; }
.contact .aurora.a2{ left:-300px; right:auto; top:-200px; opacity:.4; }
.contact-grid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:72px; align-items:center; }
.contact h2{ font-family:var(--display); font-weight:800; font-size:clamp(38px, 5vw, 68px); line-height:1; letter-spacing:-.045em; }
.contact h2 .serif{ font-size:1.1em; color:var(--lilac); }
.contact .section-lead{ max-width:28em; }
.contact-list{ margin-top:40px; display:grid; gap:14px; }
.contact-list a, .contact-list div{ display:flex; align-items:center; gap:14px; font-size:15.5px; color:rgba(255,255,255,.85); }
.contact-list .ic{ width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:var(--lilac); }
.contact-list svg{ width:18px; height:18px; }
.contact-list a:hover{ color:#fff; }
.form-card{
  position:relative;
  padding:clamp(26px, 3.4vw, 40px); border-radius:30px;
  background:#fff; color:var(--ink);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.8);
}
.form-card h3{ font-family:var(--display); font-weight:800; font-size:22px; letter-spacing:-.025em; }
.form-card > p{ margin-top:6px; font-size:14.5px; color:var(--muted); }
.form-grid{ margin-top:26px; display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-grid .full{ grid-column:1 / -1; }
.fld label{ display:block; margin-bottom:7px; font-size:13px; font-weight:600; color:var(--ink-2); }
.fld input, .fld textarea, .fld select{
  width:100%; padding:13px 14px; border-radius:12px;
  background:var(--paper-2); border:1px solid var(--line-strong);
  font-size:15px; color:var(--ink);
  transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.fld input::placeholder, .fld textarea::placeholder{ color:var(--faint); }
.fld input:focus, .fld textarea:focus, .fld select:focus{ outline:none; background:#fff; border-color:var(--indigo-light); box-shadow:0 0 0 4px rgba(75,63,224,.14); }
.fld textarea{ min-height:110px; resize:vertical; }
.form-foot{ margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; }
.form-foot small{ font-size:12.5px; color:var(--faint); max-width:24em; line-height:1.5; }
.form-foot small a{ text-decoration:underline; }
.form-success{
  display:none; margin-top:18px; align-items:center; gap:10px;
  padding:14px 16px; border-radius:14px;
  background:#ecfdf5; color:#065f46; font-size:14.5px; box-shadow:inset 0 0 0 1px #a7f3d0;
}
.form-error{
  display:none; margin-top:18px; align-items:flex-start; gap:10px;
  padding:14px 16px; border-radius:14px;
  background:#fef2f2; color:#991b1b; font-size:14.5px; box-shadow:inset 0 0 0 1px #fecaca;
}
.form-error.show{ display:flex; animation:fadeUp .5s var(--ease) both; }
.form-error svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; }
.form-error a{ font-weight:600; text-decoration:underline; }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-card button[disabled]{ opacity:.7; cursor:wait; }
.form-success.show{ display:flex; animation:fadeUp .5s var(--ease) both; }
.form-success svg{ width:18px; height:18px; flex-shrink:0; }

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer{ background:#05041a; color:rgba(255,255,255,.6); padding:88px 0 36px; position:relative; overflow:hidden; }
.foot-top{ display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:48px; }
.foot-brand img{ height:34px; width:auto; }
.foot-brand p{ margin-top:18px; font-size:14.5px; line-height:1.7; max-width:24em; }
.foot-col h4{ font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:18px; }
.foot-col ul{ display:grid; gap:11px; }
.foot-col a{ font-size:14.5px; color:rgba(255,255,255,.72); transition:color .2s ease; }
.foot-col a:hover{ color:#fff; }
.foot-word{
  margin-top:72px; user-select:none; pointer-events:none;
  font-family:var(--display); font-weight:800; letter-spacing:-.06em; line-height:.8;
  font-size:clamp(80px, 17.5vw, 248px); text-align:center; white-space:nowrap;
  background:linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0) 85%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.foot-bottom{ margin-top:10px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; color:rgba(255,255,255,.45); }
.foot-bottom nav{ display:flex; gap:22px; }
.foot-bottom a:hover{ color:#fff; }

/* ==========================================================================
   Pages ressources
   ========================================================================== */
.page-hero{
  position:relative; overflow:hidden; isolation:isolate;
  padding:170px 0 72px;
  background:linear-gradient(180deg, var(--paper-2), #fff);
  border-bottom:1px solid var(--line);
}
.page-hero::before{
  content:""; position:absolute; z-index:-1; inset:0;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 75%);
          mask-image:radial-gradient(ellipse 70% 80% at 50% 0%, #000, transparent 75%);
}
.page-hero::after{ content:""; position:absolute; z-index:-1; width:700px; height:500px; right:-200px; top:-200px; border-radius:50%; background:radial-gradient(circle, rgba(75,63,224,.16), transparent 65%); }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13.5px; color:var(--muted); margin-bottom:28px; }
.crumbs a:hover{ color:var(--indigo); }
.crumbs svg{ width:14px; height:14px; color:var(--faint); }
.page-hero h1{ font-family:var(--display); font-weight:800; font-size:clamp(36px, 4.8vw, 62px); line-height:1.05; letter-spacing:-.04em; max-width:18em; }
.page-hero h1 .serif{ color:var(--indigo); font-size:1.08em; }
.page-hero .lead{ margin-top:22px; font-size:19px; line-height:1.65; color:var(--muted); max-width:40em; }
.art-meta{ margin-top:30px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; font-size:14px; color:var(--muted); }
.art-meta .cat{ font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--indigo); padding:6px 11px; border-radius:999px; background:var(--tint); }
.art-meta span{ display:inline-flex; align-items:center; gap:6px; }
.art-meta svg{ width:15px; height:15px; }

.article-layout{ display:grid; grid-template-columns:minmax(0, 1fr) 280px; gap:80px; padding-top:40px; padding-bottom:var(--section-y); }
.prose{ max-width:720px; font-size:18px; line-height:1.8; color:var(--ink-2); }
.prose > * + *{ margin-top:1.15em; }
.prose > h2:first-child{ margin-top:1.4em; }
.prose h2{ margin-top:2.2em; font-family:var(--display); font-weight:800; font-size:clamp(25px, 2.4vw, 31px); line-height:1.2; letter-spacing:-.03em; color:var(--ink); scroll-margin-top:110px; }
.prose h3{ margin-top:1.8em; font-family:var(--display); font-weight:700; font-size:21px; letter-spacing:-.02em; color:var(--ink); }
.prose strong{ color:var(--ink); font-weight:650; }
.prose a:not(.btn){ color:var(--indigo); font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
.prose ul, .prose ol{ display:grid; gap:.55em; padding-left:0; }
.prose ul li{ position:relative; padding-left:28px; }
.prose ul li::before{ content:""; position:absolute; left:4px; top:.72em; width:10px; height:2px; border-radius:2px; background:var(--indigo); }
.prose ol{ counter-reset:n; }
.prose ol li{ position:relative; padding-left:40px; counter-increment:n; }
.prose ol li::before{ content:counter(n); position:absolute; left:0; top:.15em; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-family:var(--mono); font-size:12.5px; background:var(--tint); color:var(--indigo); }
.prose .callout-box{ margin-top:2em; padding:24px 26px; border-radius:20px; background:var(--paper-2); border:1px solid var(--line); border-left:3px solid var(--indigo); font-size:16.5px; line-height:1.7; }
.prose .callout-box b{ display:block; font-family:var(--display); color:var(--ink); margin-bottom:6px; }
.prose table{ width:100%; border-collapse:collapse; font-size:15.5px; margin-top:1.6em; }
.prose th, .prose td{ text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.prose th{ font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--paper-2); }
.prose .disclaimer{ font-size:14.5px; color:var(--muted); font-style:italic; }
.toc{ position:sticky; top:120px; align-self:start; }
.toc h2{ font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--faint); margin-bottom:16px; }
.toc ol{ display:grid; gap:4px; border-left:1px solid var(--line); }
.toc ol a{ display:block; padding:6px 0 6px 16px; margin-left:-1px; border-left:2px solid transparent; font-size:14px; line-height:1.45; color:var(--muted); transition:color .2s ease, border-color .2s ease; }
.toc ol a:hover{ color:var(--ink); }
.toc ol a.active{ color:var(--indigo); border-color:var(--indigo); font-weight:600; }
.toc .toc-cta{ margin-top:32px; padding:22px; border-radius:20px; background:linear-gradient(150deg, var(--night-3), var(--night)); color:#fff; }
.toc .toc-cta b{ display:block; font-family:var(--display); font-size:17px; letter-spacing:-.015em; line-height:1.3; }
.toc .toc-cta p{ margin:8px 0 16px; font-size:13.5px; color:rgba(255,255,255,.65); line-height:1.55; }
.toc .toc-cta .btn{ height:42px; font-size:13.5px; padding:0 18px; }

.cta-band{
  position:relative; overflow:hidden; isolation:isolate;
  margin-top:3em; padding:40px; border-radius:28px;
  background:linear-gradient(140deg, var(--indigo), var(--indigo-deep) 60%, var(--night));
  color:#fff;
}
.cta-band::before{ content:""; position:absolute; z-index:-1; width:400px; height:400px; right:-120px; top:-200px; border-radius:50%; background:radial-gradient(circle, rgba(189,182,255,.4), transparent 65%); }
.cta-band b{ display:block; font-family:var(--display); font-weight:800; font-size:clamp(24px, 2.6vw, 30px); line-height:1.15; letter-spacing:-.03em; }
.cta-band p{ margin:12px 0 24px; color:rgba(255,255,255,.72); font-size:16.5px; line-height:1.65; }
.cta-band .actions{ display:flex; flex-wrap:wrap; gap:12px; }

.related{ padding:var(--section-y) 0; background:var(--paper-2); border-top:1px solid var(--line); }

.res-filter{ display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; }
.res-filter button{ padding:10px 18px; border-radius:999px; border:1px solid var(--line-strong); background:#fff; font-size:14px; font-weight:600; color:var(--muted); transition:all .25s ease; }
.res-filter button:hover{ border-color:var(--indigo); color:var(--ink); }
.res-filter button[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.res-card[hidden]{ display:none; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1180px){
  .fc-rdv{ left:-12px; }
  .fc-fiche{ left:0; }
  .fc-sms{ right:0; }
  .co-1{ left:12px; } .co-2{ right:12px; }
}
@media (max-width:1024px){
  .main-nav{ display:none; }
  .nav-login{ display:none; }
  .nav-toggle{ display:flex; }
  .hero-inner{ grid-template-columns:minmax(0, 1fr); gap:24px; padding-bottom:88px; }
  .callcard{ margin:0 auto; }
  .call-stage{ max-width:560px; width:100%; margin:0 auto; }
  .fc-fiche{ left:-8px; top:6px; } .fc-rdv{ left:-8px; } .fc-sms{ right:-8px; }
  .stats{ grid-template-columns:repeat(2, 1fr); }
  .stat{ padding:34px 24px; }
  .stat:nth-child(odd){ border-left:none; padding-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--line); }
  .pains{ grid-template-columns:1fr; }
  .roi{ grid-template-columns:1fr; gap:32px; }
  .story{ grid-template-columns:1fr; gap:24px; }
  .phone-col{ order:-1; }
  .phone-sticky{ position:relative; top:auto; height:auto; padding:10px 0; }
  .story-steps::before, .story-steps .progress-line{ display:none; }
  .story-steps{ padding-left:0; display:grid; gap:12px; }
  .sstep{ min-height:0; padding:22px 22px 24px; border-radius:22px; border:1px solid var(--line); background:#fff; opacity:.55; cursor:pointer; }
  .sstep.on{ border-color:var(--indigo); box-shadow:var(--shadow-sm); }
  .sstep::before{ display:none; }
  .sstep h3{ font-size:22px; margin-top:8px; }
  .sstep p{ font-size:15.5px; margin-top:8px; }
  .sstep ul{ display:none; }
  .platform-feats{ grid-template-columns:repeat(2, 1fr); }
  .bento{ grid-template-columns:repeat(2, 1fr); }
  .cell, .cell.wide{ grid-column:span 1; }
  .cell.wide{ grid-column:span 2; }
  .cell.full{ grid-column:span 2; }
  .install{ grid-template-columns:1fr; gap:36px; }
  .collab{ grid-template-columns:1fr; }
  .collab-mark{ display:none; }
  .faq-grid{ grid-template-columns:1fr; gap:40px; }
  .pricing{ grid-template-columns:minmax(0, 1fr); max-width:560px; }
  .faq-aside{ position:static; }
  .res-grid{ grid-template-columns:repeat(2, 1fr); }
  .contact-grid{ grid-template-columns:1fr; gap:48px; }
  .foot-top{ grid-template-columns:1fr 1fr; }
  .foot-brand{ grid-column:1 / -1; }
  .article-layout{ grid-template-columns:1fr; gap:0; }
  .toc{ display:none; }
}
@media (max-width:760px){
  .app{ grid-template-columns:1fr; min-height:0; }
  .app-side{ display:none; }
  .app-main{ padding:18px 16px; }
  .kpis{ grid-template-columns:repeat(2, 1fr); }
  .call-row{ grid-template-columns:minmax(0, 1fr) auto; }
  .call-row .summary, .call-row .prio, .call-row time{ display:none; }
  .callouts{ display:none; }
  .chrome .url{ font-size:11px; }
  .browser{ transform:none; }
}
@media (max-width:640px){
  .wrap{ padding:0 20px; }
  .site-header{ padding:10px 12px 0; }
  .site-header .bar{ height:58px; padding:0 7px 0 18px; }
  .brand img{ height:26px; }
  .nav-actions .btn{ display:none; }
  .hero{ padding-top:124px; }
  .hero h1{ font-size:clamp(38px, 11vw, 52px); }
  .hero-actions .btn{ flex:1 1 100%; }
  .callcard{ padding:16px; border-radius:24px; }
  .transcript{ height:236px; }
  .msg{ font-size:13.5px; }
  .fcards{ position:relative; inset:auto; display:grid; gap:10px; margin-top:14px; }
  .fcard{ position:relative; inset:auto; max-width:none; }
  .fc-fiche{ display:none; }
  .stats{ grid-template-columns:1fr 1fr; }
  .stat{ padding:26px 14px 26px 16px; }
  .stat .lbl{ font-size:13.5px; }
  .phone{ transform:scale(.88); margin:-38px 0; }
  .platform-feats{ grid-template-columns:1fr; gap:28px; }
  .bento{ grid-template-columns:1fr; }
  .cell, .cell.wide, .cell.full{ grid-column:span 1; min-height:0; padding:24px; }
  .cell .viz{ min-height:170px; }
  .timeline{ grid-template-columns:1fr 1fr; row-gap:28px; }
  .timeline::before, .timeline::after{ display:none; }
  .collab{ border-radius:28px; padding:36px 24px; }
  .plan{ padding:32px 24px; }
  .price b{ font-size:50px; }
  .faq-item .answer{ padding-right:0; }
  .res-grid{ grid-template-columns:1fr; }
  .form-grid{ grid-template-columns:1fr; }
  .foot-top{ grid-template-columns:1fr 1fr; gap:36px; }
  .page-hero{ padding:130px 0 52px; }
  .prose{ font-size:17px; }
  .cta-band{ padding:30px 24px; }
}

/* ---------- performance sur mobile et tablette ----------
   Les effets décoratifs continus (halos qui dérivent, bordure tournante, flou d'arrière-plan)
   coûtent cher aux processeurs graphiques des téléphones : on les fige ou on les remplace. */
@media (max-width:1024px), (pointer:coarse){
  .aurora, .collab-mark img{ animation:none; }
  .callcard::before{ animation:none; background:linear-gradient(135deg, rgba(189,182,255,.6), transparent 40%); }
  .hero-noise{ display:none; }
  .spotlight{ display:none; }
  .site-header .bar{ background:rgba(255,255,255,.96); -webkit-backdrop-filter:none; backdrop-filter:none; }
  .site-header.is-dark .bar{ background:rgba(13,11,43,.72); }
  .menu-open .site-header .bar{ background:transparent; }
  .callcard{ -webkit-backdrop-filter:none; backdrop-filter:none; background:linear-gradient(180deg, #1c1856, #110e3a); }
  .btn-ghost, .callout, .res-thumb .big-ic{ -webkit-backdrop-filter:none; backdrop-filter:none; }
  .words-row{ animation-duration:60s; }
  .words-row.rev{ animation-duration:70s; }
}

/* ---------- mouvement réduit ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; transition-delay:0s !important; }
  .w > span, .hero-in{ transform:none; opacity:1; }
  .marquee-track, .words-row{ animation:none !important; }
  .browser{ transform:none !important; }
}

/* icônes du sprite SVG */
.i{ width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }