/* Vectored V6. Light only, one type family, amber as the single accent.
   Ranked by ground, hairline and weight: no filled navy blocks anywhere. */

:root{
  --ink:#14181f;--ink-2:#39414c;--mut:#6d7480;--faint:#98a0ac;
  --line:#e7e1d7;--line-2:#f1ece4;
  --cream:#faf7f2;--cream-2:#f5f0e8;--white:#fff;
  --amber:#c98a1a;--amber-ink:#8f6210;--wash:#fdf4e3;--wash-2:#f7e9cd;
  --green:#2f7d4f;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",system-ui,sans-serif;
  --gut:clamp(18px,4vw,44px);--max:1240px;
  --r:16px;--r-lg:26px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:86px}
body{margin:0;background:var(--cream);color:var(--ink);font:400 17px/1.6 var(--font);
  -webkit-font-smoothing:antialiased;overflow-x:clip}
/* height:auto est obligatoire des lors que les images portent des attributs
   width/height : sans lui, max-width reduit la largeur mais la hauteur reste
   celle de l'attribut, et l'image s'etire. */
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--wash-2)}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.sec{padding-block:clamp(66px,9vw,124px);position:relative;overflow-x:clip}
.sec--tint{background:linear-gradient(180deg,transparent,var(--cream-2) 13%,var(--cream-2) 87%,transparent)}
.sec--white{background:var(--white);border-block:1px solid var(--line)}

h1,h2,h3,h4{margin:0;font-weight:660;letter-spacing:-.032em;line-height:1.06;text-wrap:balance}
h1{font-size:clamp(38px,6.2vw,64px);letter-spacing:-.04em}
h2{font-size:clamp(28px,4vw,42px)}
h3{font-size:clamp(18.5px,1.9vw,22px);letter-spacing:-.02em;line-height:1.3}
p{margin:0}
.lede{font-size:clamp(16.5px,1.6vw,19.5px);color:var(--ink-2);line-height:1.56;max-width:46ch}
.eyebrow + h1,.eyebrow + h2{margin-top:12px}
h2 + p,h2 + .lede,h1 + p,h1 + .lede{margin-top:18px}
.eyebrow{font-size:12px;font-weight:640;letter-spacing:.15em;text-transform:uppercase;color:var(--amber-ink)}
.small{font-size:14px;color:var(--mut)}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--mut)}
.meta b{color:var(--ink);font-weight:620}
.center{text-align:center}
.center .lede{margin-inline:auto}

.btn{display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:999px;font-weight:600;
  font-size:15.5px;border:1px solid transparent;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s}
.btn--pri{background:var(--ink);color:#fff;box-shadow:0 10px 26px -14px rgba(20,24,31,.55)}
.btn--pri:hover{transform:translateY(-2px);box-shadow:0 18px 34px -16px rgba(20,24,31,.6)}
.btn--ghost{border-color:var(--line);background:var(--white)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn:disabled{opacity:.55;cursor:default;transform:none}
.acts{display:flex;flex-wrap:wrap;gap:11px}
.center .acts{justify-content:center}

/* ---------- the bar ---------- */
.bar{position:fixed;top:14px;left:0;right:0;z-index:50;display:flex;justify-content:center;
  padding-inline:var(--gut);pointer-events:none}
.bar__in{pointer-events:auto;display:flex;align-items:center;gap:18px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:saturate(1.8) blur(20px);
  backdrop-filter:saturate(1.8) blur(20px);
  border:1px solid rgba(20,24,31,.07);border-radius:999px;padding:7px 7px 7px 14px;
  box-shadow:0 10px 30px -22px rgba(20,24,31,.45);
  transition:padding .5s var(--ease),box-shadow .4s var(--ease),gap .5s var(--ease),
             background .4s var(--ease)}
/* Sans le flou (Firefox ancien, mode economie), un fond a 62 % laisserait le
   texte de la page passer a travers. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .bar__in{background:rgba(255,255,255,.94)}
}
.bar__mark{display:flex;align-items:center;flex:none}
.mark__img{height:26px;width:auto;display:block}
.bar__mark--foot{margin-bottom:10px}
.bar__mark--foot .mark__img{height:42px}
.bar__nav{display:flex;align-items:center;gap:2px;overflow:hidden;max-width:560px;opacity:1;
  transition:max-width .55s var(--ease),opacity .35s var(--ease)}
.bar__nav a{font-size:14.5px;color:var(--ink-2);padding:8px 12px;border-radius:999px;white-space:nowrap;
  transition:background .25s,color .25s}
.bar__nav a:hover,.bar__nav a.on{background:var(--cream-2);color:var(--ink)}
.bar.scrolled .bar__nav{max-width:0;opacity:0}
.bar.scrolled .bar__in{gap:14px;box-shadow:0 10px 30px -18px rgba(20,24,31,.5)}
/* Le bouton App Store n'est pas dans la barre au depart : il est dans le hero.
   Au premier scroll, celui du hero s'efface vers le haut et celui-ci se pose.
   La marge negative annule le gap du conteneur tant qu'il n'est pas la. */
.bar__cta{background:var(--ink);color:#fff;font-size:14.5px;font-weight:600;border-radius:999px;
  white-space:nowrap;display:flex;align-items:center;gap:7px;overflow:hidden;
  max-width:0;opacity:0;padding:9px 0;margin-left:-18px;
  transform:translateY(-10px) scale(.82);transform-origin:100% 50%;
  transition:max-width .6s var(--ease),opacity .38s var(--ease),transform .65s var(--ease),
             padding .6s var(--ease),margin-left .6s var(--ease)}
.bar.has-cta .bar__cta{max-width:160px;opacity:1;padding:9px 16px;margin-left:0;transform:none}
.burger{display:none;width:38px;height:38px;border:0;background:none;padding:0;cursor:pointer}
.burger i{display:block;width:18px;height:1.5px;background:var(--ink);margin:0 auto;transition:transform .35s var(--ease)}
.burger i+i{margin-top:6px}
.burger[aria-expanded="true"] i:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.sheet{position:fixed;top:70px;left:var(--gut);right:var(--gut);z-index:49;background:var(--white);
  border:1px solid var(--line);border-radius:22px;padding:8px 18px 18px;display:none;
  box-shadow:0 24px 50px -28px rgba(20,24,31,.45)}
.sheet.open{display:block;animation:sh .34s var(--ease) both}
@keyframes sh{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
.sheet a{display:block;padding:13px 0;border-bottom:1px solid var(--line-2);font-size:16.5px}
.sheet a.btn{border-bottom:0;justify-content:center;margin-top:12px}

/* ---------- reveal ---------- */
[data-r]{opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
[data-r].in{opacity:1;transform:none}
[data-r="scale"]{transform:translateY(28px) scale(.968)}
[data-r="scale"].in{transform:none}
[data-r="left"]{transform:translateX(-30px)}
[data-r="right"]{transform:translateX(30px)}
[data-r="left"].in,[data-r="right"].in{transform:none}
.lines span{display:block;overflow:hidden}
.lines span i{display:block;font-style:normal;transform:translateY(108%);
  transition:transform 1.05s var(--ease);transition-delay:var(--d,0ms)}
.lines.in span i{transform:none}

/* ---------- hero ---------- */
.hero{position:relative;padding:128px 0 0;text-align:center;overflow:clip}
.hero::after{content:"";position:absolute;inset:auto 0 0;height:44%;z-index:0;
  background:linear-gradient(180deg,transparent,var(--cream-2))}
.hero__wash{position:absolute;z-index:0;width:min(120vw,1180px);aspect-ratio:1;left:50%;top:-30%;
  translate:-50% 0;background:radial-gradient(circle,rgba(201,138,26,.16),rgba(201,138,26,.04) 44%,transparent 66%);
  transform:scale(.85);opacity:0;transition:transform 1.8s var(--ease),opacity 1.4s ease}
.ready .hero__wash{transform:scale(1);opacity:1}
.hero__c{position:relative;z-index:2;max-width:860px;margin:0 auto}
.hero h1{margin:14px 0 20px}
.hero .lede{margin:0 auto 28px}
.hero .acts{justify-content:center}
.hero .meta{justify-content:center;margin-top:22px}
.hero__stage{position:relative;z-index:1;margin-top:clamp(30px,4.4vw,54px);max-width:1120px;margin-inline:auto;
  padding-inline:var(--gut);transform:translateY(52px) scale(.972);opacity:0;
  transition:transform 1.5s var(--ease),opacity 1.1s ease .18s}
.ready .hero__stage{transform:none;opacity:1}
.hero__stage img{width:100%;filter:drop-shadow(0 46px 72px rgba(20,24,31,.13))}

/* ---------- figures ---------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.fig{background:var(--cream);padding:26px 18px;text-align:center}
.fig b{display:block;font-size:clamp(27px,3.4vw,38px);font-weight:660;letter-spacing:-.032em;line-height:1;
  font-variant-numeric:tabular-nums}
.fig span{display:block;margin-top:8px;font-size:13px;color:var(--mut)}

/* ---------- marquee ---------- */
.marq{overflow:hidden;padding-block:18px;border-block:1px solid var(--line);background:var(--white);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marq__t{display:flex;gap:30px;width:max-content;animation:marq 62s linear infinite}
.marq__t span{font-size:14.5px;color:var(--mut);white-space:nowrap}
.marq__t span b{color:var(--ink);font-weight:620;font-variant-numeric:tabular-nums}
@keyframes marq{to{transform:translateX(-50%)}}

.legacy-note{margin-top:20px;text-align:center;color:var(--mut);font-size:14.5px;max-width:62ch;
  margin-inline:auto}

/* ---------- pinned sequence ---------- */
.seq__stage{position:sticky;top:0;min-height:100svh;display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(20px,4vw,64px);
  align-items:center;align-content:center;padding-block:84px 44px}
.seq__side{position:relative;z-index:2}
.seq__steps{list-style:none;margin:24px 0 0;padding:0}
.seq__steps li{padding:13px 0 13px 20px;border-left:2px solid var(--line);color:var(--faint);cursor:pointer;
  transition:color .45s var(--ease),border-color .45s var(--ease)}
.seq__steps b{display:block;font-weight:620;font-size:18px;letter-spacing:-.02em;color:inherit}
.seq__steps span{display:block;font-size:14.5px;margin-top:2px;opacity:0;max-height:0;overflow:hidden;
  transition:opacity .45s var(--ease),max-height .45s var(--ease)}
.seq__steps li.on{color:var(--ink);border-left-color:var(--amber)}
.seq__steps li.on span{opacity:1;max-height:64px}
.seq__frames{position:relative;height:min(72svh,720px)}
.seq__frames figure{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:translateY(24px) scale(.972);
  /* Sa propre couche : sans elle, animer l'opacite d'une figure repeint
     l'ombre portee de l'image a chaque frame, et la sequence saccade. */
  will-change:opacity,transform;
  transition:opacity .7s var(--ease),transform .8s var(--ease)}
.seq__frames figure.on{opacity:1;transform:none}
.seq__frames img{max-height:100%;width:auto;object-fit:contain;filter:drop-shadow(0 34px 56px rgba(20,24,31,.12))}

/* ---------- split ---------- */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,5vw,72px);align-items:center}
.split+.split{margin-top:clamp(60px,8vw,110px)}
.split--rev .split__media{order:-1}
.split__copy h2{margin:12px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{border:1px solid var(--line);background:var(--white);border-radius:999px;padding:7px 14px;font-size:14px;color:var(--ink-2)}
.chip--amber{background:var(--wash);border-color:#e9d5a9;color:var(--amber-ink);font-weight:600}
.split__media{will-change:transform}   /* la parallaxe la deplace a chaque frame */
.split__media img{width:100%;filter:drop-shadow(0 34px 58px rgba(20,24,31,.12))}

/* ---------- l'animation de l'app, filmee ---------- */
/* Le clip montre deja un telephone : l'encadrer dans un second chassis ferait
   un cadre dans un cadre. La capture est donc rognee de sa barre d'etat et
   posee telle quelle, comme un panneau. */
.filmed{position:relative;width:min(100%,380px);margin-inline:auto;border-radius:26px;
  overflow:hidden;background:#f4f2ee;
  box-shadow:0 34px 62px -34px rgba(14,18,25,.42), 0 0 0 1px rgba(20,24,31,.05)}
.filmed video{display:block;width:100%;height:auto}
.filmed__cap{margin-top:15px;text-align:center;font-size:13.5px;color:var(--mut)}

/* ---------- story ---------- */
.story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(28px,5vw,72px);align-items:start}
.story__body p+p{margin-top:15px}
.story__body p{color:var(--ink-2);max-width:52ch}
.story__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.story__stats div{background:var(--white);padding:22px 20px}
.story__stats b{display:block;font-size:26px;font-weight:660;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.story__stats span{font-size:13px;color:var(--mut)}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.plan{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 24px;
  display:flex;flex-direction:column;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.plan:hover{transform:translateY(-4px);box-shadow:0 24px 44px -28px rgba(20,24,31,.32)}
.plan--hi{background:var(--wash);border-color:#e9d5a9}
.plan__tag{font-size:11.5px;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--amber-ink);
  margin-bottom:8px;min-height:14px}
.plan__p{font-size:32px;font-weight:660;letter-spacing:-.032em;margin:14px 0 2px;font-variant-numeric:tabular-nums}
.plan__p small{font-size:14.5px;font-weight:500;color:var(--mut);letter-spacing:0}
.plan__y{font-size:14px;color:var(--mut)}
.plan ul{list-style:none;padding:0;margin:18px 0 22px;font-size:15px;color:var(--ink-2)}
.plan li{padding-left:22px;position:relative;margin-bottom:9px}
.plan li::before{content:"";position:absolute;left:2px;top:8px;width:9px;height:5px;
  border-left:1.6px solid var(--amber);border-bottom:1.6px solid var(--amber);transform:rotate(-45deg)}
.plan .btn{margin-top:auto;justify-content:center}

/* ---------- faq ---------- */
.faq{max-width:780px;margin-inline:auto}
.q{border-bottom:1px solid var(--line)}
.q__b{width:100%;background:none;border:0;text-align:left;padding:20px 44px 20px 0;cursor:pointer;
  font-size:17px;font-weight:600;letter-spacing:-.015em;position:relative}
.q__b::before,.q__b::after{content:"";position:absolute;right:8px;top:50%;background:var(--amber);
  transition:transform .35s var(--ease)}
.q__b::before{width:13px;height:1.6px;margin-top:-.8px}
.q__b::after{width:1.6px;height:13px;right:13.7px;margin-top:-6.5px}
.q.open .q__b::after{transform:rotate(90deg) scaleX(0)}
.q__a{overflow:hidden;height:0;transition:height .42s var(--ease)}
.q__a p{padding-bottom:20px;color:var(--ink-2);font-size:16px;max-width:64ch}

/* ---------- forms / contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(26px,5vw,64px);align-items:start}
.form{display:grid;gap:14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field{display:flex;flex-direction:column;gap:6px}
.field[hidden]{display:none}
.field label{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--white);border-radius:12px;
  padding:13px 14px;font-size:16px;transition:border-color .25s,box-shadow .25s}
.field select{-webkit-appearance:none;appearance:none;padding-right:42px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23c98a1a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 15px center}
.field select:hover{border-color:#d9d2c6}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(201,138,26,.15)}
.msg{font-size:14.5px;min-height:20px}
.msg.err{color:#a4352b}.msg.ok{color:var(--green)}
.channels{list-style:none;padding:0;margin:0}
.channels li{border-top:1px solid var(--line);padding:15px 0}
.channels li:last-child{border-bottom:1px solid var(--line)}
.channels b{font-weight:620}
.channels span{display:block;font-size:14px;color:var(--mut);margin-top:2px}

.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.row3[hidden]{display:none}
.check{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--ink-2);cursor:pointer;user-select:none}
.check input{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1.5px solid #d8c69f;border-radius:6px;
  background:var(--white);cursor:pointer;position:relative;flex:none;transition:background .2s,border-color .2s}
/* Un chevron fait de deux bordures pivotees a 45 degres ne se centre jamais :
   la rotation se fait autour du centre de la boite, pas du centre de l'encre.
   Un trace SVG, lui, est centre par construction. */
.check input:checked{background-color:var(--amber);border-color:var(--amber);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.6 10.4 8.6 13.4 14.4 6.9' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:100% 100%}
.check input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.hint{font-size:13.5px;color:var(--mut)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding-block:42px 54px;font-size:14.5px;color:var(--mut)}
.foot__in{display:flex;flex-wrap:wrap;gap:22px 34px;justify-content:space-between;align-items:flex-start}
.foot nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.foot a:hover{color:var(--ink)}

/* On a phone the picture stays pinned at the top and the steps scroll under it.
   The other way round, you tap a step and the picture it changes is two screens
   up: that exact fault got the previous build rejected. */
@media (max-width:960px){
  .seq__stage{grid-template-columns:1fr;gap:12px;padding-block:70px 24px;align-content:center}
  .seq__frames{height:min(38svh,320px);order:-1}
  .seq__side h2{font-size:clamp(24px,6vw,30px)}
  .seq__steps{margin-top:14px}
  .seq__steps li{padding:9px 0 9px 16px}
  .seq__steps b{font-size:16.5px}
  .seq__steps li span{font-size:14px}
}
@media (max-width:860px){
  .bar__nav{display:none}
  .burger{display:block}
  .bar__in{width:100%;padding:6px 8px 6px 12px;gap:8px}
  .mark__img{height:24px}
  .bar__cta{margin-left:auto}
  .bar__cta span{display:none}
  .bar.has-cta .bar__cta{max-width:40px;padding:9px 11px;margin-left:auto}
  .badge img{height:46px;width:auto}   /* sans width:auto le badge Apple s'ecrase */
  .hero{padding-top:96px}
  .figs{grid-template-columns:repeat(2,1fr)}
  .split,.story,.contact{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  .split__media{order:-1}
  /* Sauf ici : le titre doit presenter la video, pas la suivre. */
  .split--copy-first .split__media{order:0}
  .plans{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
}
@media (max-width:520px){body{font-size:16px}.fig{padding:20px 12px}}

.qa .seq{height:auto!important}
.qa .seq__stage{position:static!important;min-height:0!important;padding-block:40px}
.qa .seq__frames{height:min(60svh,560px)}
.qa .seq__steps li span{opacity:1;max-height:64px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  [data-r]{opacity:1;transform:none}
  .lines span i{transform:none}
  .hero__stage{opacity:1;transform:none}
}

/* ---------- telephone : le cout des ombres ----------
   Un drop-shadow de 56px sous une image qui bouge se repeint a chaque frame.
   Sur un iPhone c'est ce qui faisait saccader la sequence epinglee et les
   sections en parallaxe. L'ombre est un ornement : elle reste sur grand
   ecran, ou la machine suit, et disparait la ou elle coute le plus. */
@media (max-width:860px){
  .seq__frames img,
  .split__media img{filter:none}
  .hero__stage img{filter:drop-shadow(0 18px 26px rgba(20,24,31,.10))}
}