/* Typography, contrast and motion form the second layer of the visual system. */
:root{--blue:#0969dc;--nuit:#191c22;--t1:#191c22;--t2:#5d626b;--t3:#737984}
h1,h2,.wordmark{font-family:'Outfit',Inter,sans-serif}.hero h1{font-weight:700;letter-spacing:-.058em}.hero h1 span{color:#1265c9;font-weight:500}.hero .eyebrow{color:#405065;font-weight:600;letter-spacing:.045em}.hero-description{color:#525b68}.hero{background:linear-gradient(180deg,#fff 58%,#f0f3f8 100%)}.site-nav{position:relative;z-index:2}.wordmark{font-size:32px;letter-spacing:-.07em}.hero-actions .bouton{background:#191c22;box-shadow:0 5px 14px #191c221a}.hero-actions .bouton:hover{background:#2c3546}.bouton{font-weight:600;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.bouton:hover{transform:translateY(-2px);box-shadow:0 8px 18px #0969dc20}.bouton:active{transform:translateY(0)}.bouton span,.text-link span{display:inline-block;transition:transform .2s ease}.bouton:hover span,.text-link:hover span{transform:translate(2px,-2px)}.product-preview{border-color:#d6dde8;box-shadow:0 34px 65px -28px #17284040,0 2px 5px #17284008}.preview-rail{background:#1d2532;color:#a9b4c7}.preview-brand{color:#fff}.preview-selected{background:#354154;color:#fff;box-shadow:inset 3px 0 0 #8ab8ff}.preview-person span{background:#39475d;color:#fff}.preview-summary{background:#edf3fc;border:1px solid #e1eaf8}.preview-top h2{font-weight:650}.preview-row strong{font-weight:600}.project-dot{background:#536bb4}.project-dot.green{background:#2b8d74}.progress span{background:#536bb4}.preview-decision{padding:20px 14px;margin-inline:-14px}.decision-dot{background:#b87917}.preview-footer{font-size:10px}.features article{padding:30px 26px 32px;background:#f5f6f8;border-radius:18px;transition:transform .22s,box-shadow .22s}.features{gap:20px}.features article:hover{transform:translateY(-4px);box-shadow:0 16px 28px -20px #1d25324a}.feature-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:#e1eafa;color:#355b9d;margin-bottom:30px}.feature-icon-1{background:#e3eee9;color:#28664e}.feature-icon-2{background:#f4ead9;color:#8a6428}.features h3{font-weight:650;font-size:23px}.features p{line-height:1.75}.section-intro h2 span{color:#555e6d;font-weight:400}.flow-section{background:#171c25;color:#fff;padding:88px max(32px,calc((100vw - 1096px)/2));display:grid;grid-template-columns:1fr 1.3fr;gap:36px;align-items:center;overflow:hidden}.flow-copy .eyebrow{font-size:10px;letter-spacing:.11em;color:#9eaec6;display:flex;align-items:center;gap:9px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#92b9f8}.flow-copy h2{font-size:clamp(34px,3.6vw,47px);line-height:1.1}.flow-copy h2 span{color:#90b7f4;font-weight:450}.flow-copy>p:not(.eyebrow){color:#a6b1c3;font-size:15px;margin:26px 0 28px;line-height:1.9}.flow-link{font-size:12px;color:#d0e1ff;line-height:1.6;display:block;max-width:270px}.flow-link span{margin-left:7px}.flow-art{height:370px;position:relative;width:620px;transform-origin:left center}.flow-lines{position:absolute;inset:0;width:620px;height:370px}.flow-source{position:absolute;left:0;display:flex;align-items:center;gap:12px;width:180px;padding:15px 12px;border:1px solid #3b4351;background:#232a37;border-radius:13px;font-size:12px;z-index:1;box-shadow:0 8px 24px #0002}.flow-source small{display:block;font-size:9px;color:#9aa9bf;margin-top:5px}.source-one{top:32px}.source-two{top:146px}.source-three{top:264px}.source-symbol{height:34px;width:34px;display:grid;place-items:center;border-radius:9px;font-size:22px}.violet{background:#38334e;color:#b2a5ff}.cyan{background:#213e47;color:#80d1db}.amber{background:#423a2e;color:#e5bd7b}.flow-core{padding-bottom:11px;position:absolute;left:304px;top:142px;width:76px;height:76px;display:grid;place-items:center;background:#f6f8fb;border:5px solid #303f56;border-radius:22px;color:#1b2535;font-family:'Outfit',sans-serif;font-weight:600;font-size:53px;line-height:1;box-shadow:0 0 0 12px #33435d21}.flow-result{position:absolute;left:451px;top:86px;background:#f7f9fd;color:#1d2532;width:178px;border-radius:15px;padding:19px 17px;box-shadow:0 18px 34px #0003}.result-kicker{font-size:8px;letter-spacing:.08em;color:#5f7290;font-weight:600;margin-bottom:19px}.result-kicker>span{width:5px;height:5px;border-radius:50%;display:inline-block;margin-right:4px;background:#7096d2}.flow-result strong{font-family:'Outfit',sans-serif;font-size:20px;font-weight:600;letter-spacing:-.03em;line-height:1.1;display:block}.flow-result p{font-size:10px;color:#687589;line-height:1.6;margin:14px 0 18px}.result-action{display:flex;justify-content:space-between;color:#2f65ba;background:#e5edf9;padding:8px;border-radius:6px;font-size:10px;font-weight:500}.flow-caption{position:absolute;bottom:-17px;right:0;font-size:9px;color:#8391a7}.flow-packet{stroke-dasharray:var(--flow-dashes,14 260);stroke-dashoffset:14;stroke-linecap:round;opacity:0}.mobile-story{margin-top:76px;margin-bottom:clamp(48px,6vw,88px);background:#f1efeb}.mobile-story h2{font-weight:650}.phone-example{border-color:#222a37;box-shadow:0 24px 50px -20px #222a3740;transform:rotate(3deg);transition:transform .4s}.phone-example:hover{transform:rotate(0deg)}.phone-grip{background:#222a37}.phone-note{background:#eaf0fa}.phone-note>span:first-child{color:#47678f}.phone-note strong{font-weight:650}.phone-action{font-weight:600}.phone-tabs{margin-top:auto}.phone-task{padding-bottom:24px}.privacy h2{font-weight:650}.privacy h2 span{color:#547c72;font-weight:450}.privacy-columns article{border-top:2px solid #d7dfdc;padding-top:22px}.privacy-columns article:nth-child(2){border-color:#d4deed}.privacy-columns article:nth-child(3){border-color:#e8ded0}.formule{transition:transform .22s,box-shadow .22s}.formule:hover{transform:translateY(-4px);box-shadow:0 14px 30px -20px #1c2b4240}.formule--vedette{border-color:var(--ligne);box-shadow:none}.formule h3{font-weight:650}.formule .prix{font-weight:650;letter-spacing:-.055em}.formule--vedette .bouton{background:#1d2532}.closing{background:#1d2532;color:#fff}.closing .eyebrow,.closing .quiet{color:#a8b7cf}.closing h2{font-weight:600}.closing .bouton{background:#f4f7fc;color:#1d2532}.closing .bouton:hover{background:#dce8fa}.faq-list summary{font-weight:600}.faq-list details[open] summary{color:#245cac}
@media(max-width:1200px){.flow-section{grid-template-columns:1fr 1fr}.flow-art{transform:scale(.78);margin-right:-136px}.flow-copy h2{font-size:39px}}
@media(max-width:900px){.flow-section{grid-template-columns:1fr;padding:64px 40px;gap:15px}.flow-art{transform:none;margin:0 auto}.flow-copy{max-width:620px;margin:0 auto;width:100%}.flow-copy h2{font-size:45px}.flow-copy>p:not(.eyebrow){margin:20px 0}.flow-copy>p br{display:none}.flow-link{max-width:none}.mobile-story{margin-top:0}.features article{padding:24px 20px}}
@media(max-width:600px){.hero h1{font-size:clamp(43px,11.6vw,65px);letter-spacing:-.06em}.hero-description{font-size:16px}.hero .eyebrow{letter-spacing:.015em}.product-preview{margin-top:44px}.features{gap:14px}.features article{padding:28px}.feature-icon{margin-bottom:22px}.flow-section{padding:58px 24px 26px;gap:0}.flow-copy h2{font-size:36px}.flow-art{transform:scale(.5);height:230px;width:620px;margin-top:0;transform-origin:left center;margin-bottom:-25px}.flow-caption{bottom:-90px;right:auto;left:0;font-size:16px}.flow-source{font-size:19px;width:190px}.flow-source small{font-size:13px}.flow-result strong{font-size:24px}.flow-result p{font-size:14px}.result-kicker{font-size:11px}.result-action{font-size:14px}.flow-result{top:66px}.mobile-story{padding-top:64px;padding-bottom:64px}.phone-example{transform:rotate(2deg)}.preview-row strong{font-size:12px}.preview-footer{font-size:9px}.site-nav nav{display:flex;flex:none}.site-nav nav a:not(:last-child){display:none}.site-nav nav a{font-size:12px}.site-nav{gap:24px}}
@media(prefers-reduced-motion:no-preference){
 .hero-entering .hero > :is(.eyebrow,h1,.hero-description,.hero-actions,.quiet,.product-preview-real){opacity:0;translate:0 22px}
 .hero-running .hero > .eyebrow{animation:headline-in .85s .05s cubic-bezier(.22,1,.36,1) both}
 .hero-running .hero > h1{animation:headline-in 1.15s .2s cubic-bezier(.22,1,.36,1) both}
 .hero-running .hero > .hero-description{animation:headline-in 1.1s .4s cubic-bezier(.22,1,.36,1) both}
 .hero-running .hero > .hero-actions{animation:headline-in 1s .55s cubic-bezier(.22,1,.36,1) both}
 .hero-running .hero > .quiet{animation:headline-in 1s .65s cubic-bezier(.22,1,.36,1) both}
 .hero-entering .hero > .hero-streams{opacity:0}
 .hero-running .hero > .hero-streams{animation:hero-streams-in 1.3s .7s ease both}
 /* Individual translate preserves the phone rotation and responsive diagram scale. */
 .motion-ready .scroll-reveal{
  opacity:0;translate:0 24px;
  transition:opacity 1.05s cubic-bezier(.22,1,.36,1),translate 1.2s cubic-bezier(.22,1,.36,1),transform .3s ease,box-shadow .3s ease;
  transition-delay:var(--reveal-delay,0ms),var(--reveal-delay,0ms),0ms,0ms;
 }
 .motion-ready .scroll-reveal.in-view{opacity:1;translate:none}
 .motion-ready .product-preview-real.scroll-reveal{transition-duration:1.3s,1.45s,.3s,.3s}
 .motion-ready .scroll-reveal:focus-within{opacity:1;translate:none;transition-delay:0ms}
 .flow-art.flow-ready .flow-packet{animation:signal-travel var(--flow-duration,3s) linear infinite;animation-play-state:paused}
 .flow-art.flow-ready.flow-running .flow-packet{animation-play-state:running}
 .flow-art.flow-ready .two{animation-delay:-.6s}
 .flow-art.flow-ready .three{animation-delay:-1.2s}
 .flow-art.flow-ready .four{animation-delay:-1.8s}
 .product-preview.in-view .progress span{transform-origin:left;animation:progress-in 1s .25s both}
 @keyframes headline-in{from{opacity:0;translate:0 22px}to{opacity:1;translate:none}}
 @keyframes hero-streams-in{from{opacity:0}to{opacity:1}}
 @keyframes signal-travel{0%{stroke-dashoffset:var(--flow-start,14);opacity:0}10%,90%{opacity:1}100%{stroke-dashoffset:var(--flow-end,-200);opacity:0}}
 @keyframes progress-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
 /* Large illustrations follow the scroll itself; text keeps its short reveal.
    Native view timelines run without a scroll handler or a synthetic scroller. */
 @supports (animation-timeline:view()) and (animation-range:entry 0% cover 30%) and (overflow:clip){
  /* Clip decoration without creating an inner scroll container: the view
     timeline must follow the page, not an overflow-hidden section. */
  .motion-ready :is(.hero,.flow-section,.mobile-story){overflow:clip}
  .motion-ready .scroll-reveal:is(.flow-art,.phone-scene,.architecture-map){
   animation:visual-arrival auto cubic-bezier(.22,1,.36,1) both;
   animation-timeline:view();
   animation-range:entry 0% cover 30%;
   transition:transform .4s ease,box-shadow .3s ease;
  }
  .motion-ready .product-preview-real.scroll-reveal{
   animation:preview-depth auto linear both;
   animation-timeline:view();
   animation-range:entry 0% cover 42%;
  }
  .motion-ready .scroll-reveal:focus-within{animation:none;scale:none}
  @keyframes visual-arrival{from{opacity:.12;translate:0 40px;scale:.96}to{opacity:1;translate:none;scale:1}}
  @keyframes preview-depth{from{scale:.975}to{scale:1}}
 }
 .motion-ready .scroll-reveal.anchor-reveal{opacity:1;translate:none;scale:none;animation:none;transition:none}
}
@media(max-width:600px) and (prefers-reduced-motion:no-preference){
 .motion-ready .scroll-reveal{translate:0 18px}
 .motion-ready .scroll-reveal.in-view,.motion-ready .scroll-reveal:focus-within{translate:none}
}
@media print{
 .hero-entering .hero > :is(.eyebrow,h1,.hero-description,.hero-actions,.quiet,.product-preview-real){opacity:1;translate:none;animation:none}
 .motion-ready .scroll-reveal{opacity:1;translate:none;scale:none;transition:none;animation:none}
 .hero-streams{display:none}
}
@media(prefers-reduced-motion:reduce){.phone-example{transform:none}.flow-packet{stroke-dashoffset:0;stroke-dasharray:none;opacity:.6}}

/* Primary site actions use the same pill shape as the app. */
.bouton{border-radius:999px}

/* Soft pigment washes live around the interface; the headline stays clear. */
.hero{position:relative;isolation:isolate;padding-top:52px}
.hero-streams{position:absolute;left:0;width:100%;pointer-events:none;z-index:-1;mask-image:linear-gradient(to bottom,transparent,#000 24px,#000 calc(100% - 40px),transparent)}
.hero .product-preview-real{margin-top:100px}
@media(forced-colors:active){.hero-streams{display:none}}