/* Élan Tracker — elan.guik.io */


:root{
  --indigo:#4F4CE0; --indigo-deep:#3F3CCD; --indigo-ink:#2A27A8;
  --bg:#FFFFFF; --tint:#F1F0FF; --surface:#FFFFFF;
  --ink:#17144A; --ink-soft:#3B3870; --line:#D9D7F5; --link:#3F3CCD;
  --night:#17144A; --night-soft:#D5D3FF; --bezel:#15123A;
  --btn-dark:#17144A; --btn-dark-hover:#2A27A8; --shadow:rgba(23,20,74,.25);
  --display:ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:system-ui,-apple-system,"Segoe UI",sans-serif;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F0D2E; --tint:#17144A; --surface:#211E5C;
    --ink:#F1F0FF; --ink-soft:#C9C7F2; --line:#39367F; --link:#B4B2FF;
    --night:#07061C; --bezel:#000000;
    --btn-dark:#4F4CE0; --btn-dark-hover:#3F3CCD; --shadow:rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;font-family:var(--body);font-size:18px;line-height:1.5;color:var(--ink);background:var(--bg)}
img{display:block;max-width:100%;height:auto}
a{color:var(--link)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #F9A26B;outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
h1{font-weight:800;font-size:clamp(3rem,7vw,6.25rem);line-height:.95;letter-spacing:-.02em}
h2{font-weight:800;font-size:clamp(2.25rem,5vw,4rem);line-height:1;letter-spacing:-.02em}
h3{font-weight:700;font-size:1.5rem;line-height:1.15}
p{margin:0}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;z-index:10;background:var(--surface);color:var(--ink);padding:12px 16px;border-radius:12px}

/* Navigation */
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:4px 28px;padding:20px 24px}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;font-family:var(--display);font-weight:700;font-size:1.375rem;color:inherit;text-decoration:none}
.brand img{width:40px;height:40px;border-radius:10px}
.nav a.item{color:inherit;text-decoration:none;font-weight:600;font-size:1rem;padding:12px 0}
.nav a.item:hover,.nav a.item[aria-current]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.lang{position:relative}
.lang summary{list-style:none;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 16px;border-radius:999px;font-weight:600;font-size:.9375rem;background:var(--tint);color:var(--ink)}
.lang summary::-webkit-details-marker{display:none}
.lang summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg)}
.lang ul{position:absolute;right:0;top:calc(100% + 8px);z-index:5;margin:0;padding:8px;list-style:none;min-width:180px;background:var(--surface);color:var(--ink);border-radius:18px;box-shadow:0 18px 48px rgba(23,20,74,.28)}
.lang li a{display:block;padding:11px 14px;border-radius:12px;color:inherit;text-decoration:none;font-weight:600;font-size:1rem}
.lang li a:hover{background:var(--tint)}
.lang li a[aria-current]{background:var(--tint);font-weight:700}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:999px;font-weight:700;font-size:1.125rem;text-decoration:none;background:var(--indigo);color:#fff}
.btn:hover{background:var(--indigo-deep)}
.btn.small{min-height:44px;padding:0 20px;font-size:1rem}
.btn.light{background:#fff;color:var(--indigo-ink)}
.btn.light:hover{background:#EDEBFF}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.7)}
.btn.ghost:hover{background:rgba(255,255,255,.14)}
.btn.dark{background:var(--btn-dark);color:#fff}
.btn.dark:hover{background:var(--btn-dark-hover)}

/* Héros */
.hero{position:relative;min-height:780px;display:flex;flex-direction:column;overflow:hidden;background:var(--indigo);color:#fff}
.hero>.scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center bottom}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(79,76,224,0) 30%,rgba(63,60,205,.82) 58%,rgba(63,60,205,.94) 100%)}
.hero>*{position:relative;z-index:2}
.hero>.scene{position:absolute;z-index:0}
.hero .nav{padding:24px 48px}
.hero .lang summary{background:rgba(255,255,255,.18);color:#fff}
.hero-body{flex:1;display:flex;justify-content:flex-end;align-items:center;padding:40px 48px 96px}
.hero-copy{width:min(620px,48vw);display:flex;flex-direction:column;gap:24px}
.hero-copy .lead{font-size:1.375rem;line-height:1.4;max-width:520px}
.hero-copy .note{font-size:.9375rem}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* Sections */
.section{padding:96px 0}
.section.tint{background:var(--tint)}
.stack{display:flex;flex-direction:column;gap:56px}
.intro{display:flex;flex-direction:column;gap:16px;max-width:760px}
.intro p{font-size:1.25rem;color:var(--ink-soft)}
.eyebrow{font-weight:700;font-size:.9375rem;letter-spacing:.08em;text-transform:uppercase;color:var(--link)}

.phone{width:280px;max-width:100%;border-radius:46px;border:9px solid var(--bezel);background:var(--bezel);overflow:hidden;box-shadow:0 30px 60px var(--shadow)}
.phones{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:56px 40px}
.phones figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:28px}
.phones figcaption{text-align:center;max-width:320px}
.phones figcaption p{margin-top:6px;font-size:1.0625rem;color:var(--ink-soft)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,480px),1fr));gap:24px}
.card{position:relative;height:560px;border-radius:36px;overflow:hidden;padding:40px;color:#17144A}
.card h3{font-weight:800;font-size:2.25rem;line-height:1.05;max-width:300px}
.card p{margin-top:8px;max-width:260px}
.card .phone{position:absolute;right:40px;top:150px;width:250px;border-width:8px;border-radius:42px;box-shadow:0 24px 48px rgba(23,20,74,.22)}
.card.green{background:#DFF5E6}.card.green p{color:#23423A}
.card.peach{background:#FFE8D9}.card.peach p{color:#5A3320}
.card.violet{background:#E6E4FF}.card.violet p{color:#3B3870}
.card.lilac{background:#F3E6FF}.card.lilac p{color:#4A2F6B}

.wrist{background:var(--night);color:#fff}
.wrist .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.wrist .copy{flex:1 1 380px;display:flex;flex-direction:column;gap:16px}
.wrist .copy p{font-size:1.25rem;color:var(--night-soft);max-width:440px}
.wrist .devices{flex:1 1 520px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:32px}
.watch{width:208px;border-radius:52px;border:10px solid #000;background:#000;overflow:hidden;box-shadow:0 0 0 2px #3A377A}
.voice{display:flex;flex-direction:column;gap:20px;width:min(100%,340px)}
.bubble{align-self:flex-start;background:#fff;color:#17144A;border-radius:24px 24px 24px 6px;padding:14px 20px;font-weight:600;font-size:1.0625rem}
.voice img{border-radius:28px}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.fact{background:var(--surface);border-radius:28px;padding:32px}
.fact h3{font-size:1.625rem}
.fact p{margin-top:8px;font-size:1.0625rem;color:var(--ink-soft)}
.more{align-self:flex-start;display:inline-flex;align-items:center;min-height:48px;font-weight:700}

.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:24px}
.plan{border:2px solid var(--line);border-radius:32px;padding:40px;display:flex;flex-direction:column;gap:16px}
.plan h3{font-weight:800;font-size:2rem}
.plan ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:8px;font-size:1.0625rem}
.plan.plus{background:var(--indigo);border-color:var(--indigo);color:#fff}
.plan .fine{margin-top:auto;padding-top:8px;font-size:.9375rem}

.cta{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;background:#6466E8;color:#fff}
.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% center}
.cta-copy{position:relative;width:min(100%,420px);padding:48px 24px 48px 64px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.cta-copy h2{font-size:3rem}

/* Pied de page */
.foot{background:var(--night);color:var(--night-soft);padding:56px 0}
.foot .wrap{display:flex;flex-wrap:wrap;gap:32px 64px;align-items:flex-start}
.foot .who{flex:1 1 260px;display:flex;flex-direction:column;gap:12px;font-size:.9375rem}
.foot .brand{color:#fff;font-size:1.25rem}
.foot .brand img{width:36px;height:36px;border-radius:9px}
.foot nav{display:flex;flex-direction:column;font-size:1rem}
.foot nav.langs{flex-direction:row;flex-wrap:wrap;gap:0 20px;max-width:300px}
.foot a{color:var(--night-soft);padding:10px 0}
.foot a:hover,.foot a[aria-current]{color:#fff}
.foot a[aria-current]{font-weight:700;text-decoration:none}

/* Pages de texte */
.bar{border-bottom:1px solid var(--line)}
.bar .nav{max-width:1200px;margin:0 auto}
.doc-head{background:var(--tint);padding:72px 0}
.doc-head .wrap{display:flex;flex-direction:column;gap:20px}
.doc-head h1{font-size:clamp(2.5rem,6vw,5rem);overflow-wrap:break-word;hyphens:auto}
.doc-head .lead{font-size:1.375rem;line-height:1.45;max-width:820px;color:var(--ink-soft)}
.doc-head .lead strong{color:var(--ink)}
.brief{margin-top:20px;background:var(--surface);border-radius:28px;padding:28px 32px}
.brief h2{font-size:1.5rem;letter-spacing:0;margin-bottom:12px}
.brief ul{margin:0;padding-left:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:8px 48px;font-size:1.0625rem}
.doc{display:flex;flex-wrap:wrap;gap:40px 80px;align-items:flex-start;padding-top:72px;padding-bottom:96px}
.toc{flex:1 1 220px;max-width:300px;display:flex;flex-direction:column;border-left:2px solid var(--line);padding-left:20px;font-size:1rem;font-weight:600}
.toc a{text-decoration:none;padding:9px 0}
.toc a:hover{text-decoration:underline}
.prose{flex:999 1 520px;min-width:0;max-width:760px;line-height:1.6}
.prose h2{font-size:2.125rem;line-height:1.1;letter-spacing:-.01em;margin:56px 0 12px;scroll-margin-top:24px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--body);font-size:1.3125rem;margin:28px 0 8px}
.prose p{margin:0 0 12px}
.prose ul{margin:0 0 12px;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.prose .muted{color:var(--ink-soft);font-size:1rem}
.contact-box{margin-top:56px;background:var(--tint);border-radius:28px;padding:32px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 32px}
.contact-box div{flex:1 1 280px}
.contact-box h2{font-size:1.75rem;line-height:1.1;letter-spacing:0;margin:0 0 6px}
.contact-box p{margin:0;color:var(--ink-soft)}
.faq{display:flex;flex-direction:column;gap:12px;margin-bottom:12px}
.faq details{background:var(--tint);border-radius:20px;padding:0 24px}
.faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;font-weight:700;font-size:1.125rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);font-size:1.75rem;font-weight:500;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{padding-bottom:20px;margin:0}
.support-prose{padding-top:72px;padding-bottom:96px;line-height:1.6}
.support-prose>*{max-width:760px}
.support-prose h2{font-size:2.125rem;line-height:1.1;letter-spacing:-.01em;margin:56px 0 16px}
.support-prose h2:first-child{margin-top:0}
.support-prose p{margin:0 0 16px}
.support-prose .muted{color:var(--ink-soft);font-size:1rem}

/* Écrans étroits : la scène passe au-dessus du texte */
@media (max-width:900px){
  .hero{min-height:0;--scene-h:clamp(340px,58vw,520px)}
  .hero>.scene{position:relative;height:var(--scene-h);object-position:12% bottom}
  .hero::before{background:linear-gradient(180deg,rgba(79,76,224,0) 0,rgba(79,76,224,0) calc(var(--scene-h) - 40px),var(--indigo) calc(var(--scene-h) + 80px))}
  .hero .nav{position:absolute;left:0;right:0;top:0}
  .hero-body{padding:8px 48px 72px;justify-content:flex-start}
  .hero-copy{width:min(100%,620px)}
}

/* Téléphone */
@media (max-width:760px){
  body{font-size:17px}
  .nav,.hero .nav{padding:14px 20px 6px;gap:0 20px}
  .nav a.item.wide{display:none}
  .nav .lang{order:1}
  .nav::after{content:"";order:2;flex-basis:100%}
  .nav a.item{order:3;font-size:.9375rem;padding:10px 0}
  .brand{font-size:1.25rem}
  .hero-body{padding:8px 20px 56px}
  .section{padding:64px 0}
  .phones{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:0 20px 12px;scrollbar-width:none}
  .phones::-webkit-scrollbar{display:none}
  .phones figure{flex:0 0 78%;scroll-snap-align:center}
  .phones .phone{width:100%}
  .wrap{padding:0 20px}
  .card{height:520px;padding:28px}
  .card .phone{right:50%;transform:translateX(50%);top:170px;width:230px}
  .card h3{font-size:1.875rem;max-width:none}
  .card p{max-width:none}
  .cta{min-height:0;flex-direction:column;align-items:stretch}
  .cta>img{position:relative;height:240px;object-position:62% center;order:2}
  .cta-copy{padding:48px 20px 32px;width:100%}
  .plan{padding:28px}
  .doc-head{padding:48px 0}
  .toc{display:none}
  .doc{padding-top:48px;padding-bottom:64px}
}