/*
 * Tikko Stock — la page d'accueil publique.
 *
 * Les polices sont les mêmes que dans l'application, servies depuis ce site :
 * Google Sans, variable, sous-jeu latin, licence SIL Open Font (le
 * texte de la licence est à côté des fichiers). La maquette d'origine embarquait
 * des variantes sous licence commerciale, qui ne pouvaient pas être recopiées
 * ici — et n'avaient pas à l'être, puisque le site les héberge déjà.
 *
 * `font-display: swap` : le texte s'affiche tout de suite dans la police système
 * et bascule quand la nôtre arrive. Une page d'accueil qui reste blanche le temps
 * d'un téléchargement a déjà perdu son visiteur.
 */
@font-face{
  font-family:'Google Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/fonts/google-sans-latin.woff2') format('woff2-variations');
  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{
  --ink:#131154;--ink-2:#0e0c40;--canvas:#ffffff;--surface:#f7f8fa;--line:#e6e8eb;
  --text-2:#687076;--text-3:#6b7378;--accent:#0069c2;--accent-navy:#6bb6ff;
  --wash:#f3f8fd;--wash-line:#c3dcf3;--navy-text:#c9d3f2;
  --gain:#136b36;--todo:#a8480b;--loss:#b3261e;
  --r-btn:8px;--r-card:12px;--r-block:24px;--gap-section:64px;
  --font-head:"Google Sans",system-ui,sans-serif;--font-body:"Google Sans",system-ui,sans-serif;
}
/*
 * L'echelle de l'application (D-252), a partir de la tablette.
 *
 * Sur ordinateur, la page d'accueil et l'application se suivent au clic sur
 * « Se connecter » : l'une a 100 %, l'autre a 80 %, et tout le texte retrecissait
 * d'un cinquieme au moment precis ou l'on entre. Sur telephone la page reste a
 * 100 % — son texte courant tomberait sinon de 18 a 14,4 px, trop petit pour
 * lire un argumentaire.
 *
 * `--filet` rattrape l'arrondi des filets sous le zoom (D-256) : un pixel a
 * 80 % n'est pas peint a 0,8 pixel physique mais arrondi a un seul, et cette
 * page, comme l'application, separe ses surfaces par des filets.
 */
:root{--zoom:1;--filet:calc(1px / var(--zoom))}
@media (min-width:768px){:root{--zoom:.8}}
html{zoom:var(--zoom)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:88px}
body{margin:0;background:var(--canvas);color:var(--ink);font:500 18px/1.56 var(--font-body);-webkit-font-smoothing:antialiased;text-wrap:pretty}
body.menu-open{overflow:hidden}
img,svg{display:block}
p,ul{margin:0}
a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;transition:text-decoration-thickness .15s}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3{margin:0;font-family:var(--font-head);letter-spacing:-.025em;text-wrap:balance}
.display{font-size:56px;font-weight:700;line-height:1.1}
.h2{font-size:40px;font-weight:700;line-height:1.14}
.h3{font-size:28px;font-weight:700;line-height:1.33}
.sub{font-size:22px;font-weight:500;line-height:1.38}
.body-sm{font-size:16px;line-height:1.5}
.caption{font-size:14px;line-height:1.43}
.accent{color:var(--accent)}
.gain{color:var(--gain)}.todo{color:var(--todo)}.loss{color:var(--loss)}
.eyebrow{font-size:14px;font-weight:700;line-height:1.43;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.on-navy .eyebrow{color:var(--accent-navy)}
.wrap{max-width:1248px;margin:0 auto;padding:0 24px}
.section{margin-top:var(--gap-section)}
.section-head{text-align:center;max-width:760px;margin:0 auto}
.section-head h2{margin-top:16px}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;border:1.5px solid var(--ink);border-radius:var(--r-btn);background:var(--ink);color:#fff;font:700 16px/1.4 var(--font-body);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.btn:hover{background:var(--ink-2);border-color:var(--ink-2)}
.btn-2{background:transparent;color:var(--ink);font-weight:600}
.btn-2:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.btn-light{background:#fff;border-color:#fff;color:var(--ink)}
.btn-light:hover{background:var(--wash);border-color:var(--wash)}
.btn-sm{height:40px;padding:0 20px}
/*
 * Le reflet des boutons — le jumeau CSS du trace de l'application (D-254).
 *
 * Deux trainees de lumiere opposees qui font le tour du filet au survol. La
 * teinte suit le PLEIN du bouton, pas la page : blanc sur l'encre, encre sur
 * le blanc. Le bouton de l'accroche porte le vrai trace en WebGL et coupe ce
 * jumeau une fois son canevas pose (`.traced`), jamais avant.
 */
@property --spec-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.btn{position:relative;--spec-line:#fff}
.btn-2{--spec-line:var(--ink)}
.btn-2:hover{--spec-line:#fff}
.btn-light{--spec-line:var(--ink)}
.btn::after{content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .18s ease-out;
  background:conic-gradient(from var(--spec-angle),transparent 0deg,var(--spec-line) 14deg,transparent 34deg,transparent 180deg,var(--spec-line) 194deg,transparent 214deg,transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.btn:hover::after,.btn:focus-visible::after{opacity:1;animation:spec-sweep 2.6s linear infinite}
.btn.traced::after{display:none}
@keyframes spec-sweep{to{--spec-angle:360deg}}
@media (prefers-reduced-motion:reduce){.btn:hover::after,.btn:focus-visible::after{animation:none;--spec-angle:45deg}}
@media (hover:none){.btn::after{display:none}}
/* nav */
.nav{position:sticky;top:0;z-index:20;height:72px;background:#fff;border-bottom:var(--filet) solid var(--line)}
.nav .wrap{height:100%;display:flex;align-items:center;gap:24px}
.nav-logo{display:flex;align-items:center;text-decoration:none;margin-right:8px}
.nav-logo img{height:21px;width:auto}
.nav-links{display:flex;gap:4px;list-style:none;padding:0}
.nav-links a{display:block;padding:8px 12px;border-radius:8px;font-size:16px;font-weight:500;line-height:1.5;color:var(--ink);text-decoration:none}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:12px}
.menu-btn{display:none;width:40px;height:40px;align-items:center;justify-content:center;padding:0;border:1.5px solid var(--ink);border-radius:8px;background:#fff;color:var(--ink);cursor:pointer}
.menu-btn svg{width:24px;height:24px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round}
.menu-btn .ic-close{display:none}
.menu-open .menu-btn .ic-open{display:none}
.menu-open .menu-btn .ic-close{display:block}
.menu{position:fixed;inset:72px 0 0 0;z-index:19;background:#fff;padding:16px 16px 24px;overflow:auto}
.menu ul{list-style:none;padding:0}
.menu li a{display:block;padding:14px 8px;border-bottom:var(--filet) solid var(--line);font-size:18px;font-weight:500;line-height:1.56;text-decoration:none;border-radius:8px}
.menu .btn{width:100%;margin-top:24px}
/* hero */
.hero{position:relative;overflow:clip;padding-top:48px}
.hero-head{position:relative}
.hero-col{position:relative;z-index:1;max-width:808px;margin:0 auto;padding:0 24px;text-align:center}
.hero .lede{max-width:60ch;margin:32px auto 0;color:var(--text-2)}
.cta-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:32px}
.micro{margin-top:16px;color:var(--text-3)}
.illus{display:none;position:absolute;z-index:0;top:50%;translate:0 -50%;width:260px;height:220px}
.illus-l{left:-60px}.illus-r{right:-60px}
@media (min-width:1280px){.illus{display:block}}
/* product mockup */
.mock-wrap{max-width:1088px;margin:64px auto 0;padding:0 24px}
.mock{position:relative;height:560px;overflow:clip;border:var(--filet) solid var(--line);border-radius:var(--r-card);background:#fff;font-size:14px;line-height:1.43;text-align:left}
.mock::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none}
.mock-bar{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:var(--filet) solid var(--line)}
.mock-bar img{height:16px;width:auto}
.mock-bar-r{display:flex;align-items:center;gap:12px}
.mock-ic,.mock-add{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px}
.mock-ic svg,.mock-add svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.mock-add{background:var(--ink);color:#fff}
.mock-main{min-height:504px;padding:32px 40px;background:var(--surface)}
.mock-greet{font-family:var(--font-head);font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.025em}
.mock-date{margin-top:4px;color:var(--text-2)}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:20px}
.kpi{padding:24px;border:var(--filet) solid var(--line);border-radius:var(--r-card);background:#fff}
.kpi-label{color:var(--text-2)}
.kpi-val{margin-top:8px;font-family:var(--font-head);font-size:32px;font-weight:700;line-height:1.2;letter-spacing:-.025em}
.kpi-sub{margin-top:8px;color:var(--text-2)}
.gauge{display:flex;gap:2px;height:6px;margin-top:12px;border-radius:3px;overflow:hidden}
.gauge span{display:block;height:100%}
.queues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:16px}
.queue{padding:24px;border:var(--filet) solid var(--line);border-radius:var(--r-card);background:#fff}
.q-title{font-size:16px;font-weight:600;line-height:1.5}
.q-row{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.q-name{font-size:16px;line-height:1.5}
.q-meta{margin-top:2px;color:var(--text-2)}
.q-btn{flex:none;padding:6px 12px;border:1.5px solid var(--ink);border-radius:8px;font-weight:600;line-height:1.43;white-space:nowrap}
/* platform band */
.band{margin-top:var(--gap-section);text-align:center}
.band-label{color:var(--text-3)}
.band-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px 64px;margin-top:16px;list-style:none;padding:0}
.band-row li{font-size:14px;font-weight:700;line-height:1.43;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
/* navy block */
.block{padding:64px;border-radius:var(--r-block);background:var(--ink);color:#fff}
.block h2{color:#fff}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:32px}
.card{display:flex;flex-direction:column;padding:32px;border:var(--filet) solid transparent;border-radius:var(--r-card);background:#fff;color:var(--ink);transition:border-color .15s}
.card:hover{border-color:var(--accent)}
.card h3{margin-top:16px}
.card .body-sm{margin:16px 0 32px;color:var(--text-2)}
.scene{margin-top:auto;font-size:14px;line-height:1.43}
.scene-row{display:grid;grid-template-columns:104px minmax(0,1fr);gap:12px;padding:8px 0;border-top:var(--filet) solid var(--line)}
.scene-row:last-child{border-bottom:var(--filet) solid var(--line)}
.scene-k{color:var(--text-2)}
.scene-v{font-weight:500}
.scene-title{font-weight:600;padding:8px 0 6px}
.scene-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-top:var(--filet) solid var(--line)}
.scene-line:last-child{border-bottom:var(--filet) solid var(--line)}
.scene-line .q-btn{padding:4px 10px;font-size:14px}
.scene-sum{display:flex;justify-content:space-between;gap:12px;padding:6px 0}
.scene-sum.total{border-top:var(--filet) solid var(--line);font-weight:500}
.scene-sum.result{font-weight:700;font-size:16px}
/* features */
.feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:32px}
.feat{padding-top:24px;border-top:var(--filet) solid var(--line)}
.feat svg{width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin-top:16px}
.feat p{margin-top:12px;color:var(--text-2)}
/* numbers */
.stats{display:grid;grid-template-columns:5fr 7fr;gap:32px;padding:32px;border:2px solid var(--wash-line);border-radius:var(--r-card);background:var(--wash)}
.stats h2{margin-top:16px}
.stats .lede{margin-top:16px;color:var(--text-2)}
.stat-big{margin-top:32px;font-family:var(--font-head);font-size:56px;font-weight:700;line-height:1.1;letter-spacing:-.025em;color:var(--gain);font-variant-numeric:tabular-nums}
.stat-label{margin-top:8px;color:var(--text-2)}
.stat-note{grid-column:1 / -1;color:var(--text-3)}
.chart{position:relative;align-self:center}
.chart svg{width:100%;height:auto}
.chart-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.chart-line.draw{animation:draw .9s ease-out both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.chart-pt{stroke:#fff;stroke-width:2}
.chart-lab{position:absolute;font-size:14px;font-weight:500;line-height:1.43;white-space:nowrap}
.chart-lab.above{translate:-50% calc(-100% - 10px)}
.chart-lab.below{translate:-50% 10px}
.chart-lab.above-end{translate:calc(-100% - 6px) calc(-100% - 6px)}
.chart-ax{position:absolute;left:0;right:0;bottom:0;height:20px;font-size:14px;font-weight:500;line-height:1.43;color:var(--text-3)}
.chart-ax span{position:absolute;translate:-50% 0}
.chart-ax span:last-child{translate:-100% 0}
/* faq */
.faq{display:grid;grid-template-columns:4fr 8fr;gap:32px}
.faq-list{border-top:var(--filet) solid var(--line)}
.faq-item{border-bottom:var(--filet) solid var(--line)}
.faq-item h3{font-family:var(--font-body);letter-spacing:0}
.faq-q{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:20px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:500 18px/1.56 var(--font-body);text-align:left;cursor:pointer;transition:background-color .15s}
.faq-q:hover{background:var(--surface)}
.faq-q svg{flex:none;width:24px;height:24px;fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.faq-q[aria-expanded="true"] svg{rotate:180deg}
.faq-a{padding:0 12px 24px;color:var(--text-2);animation:fade .2s ease-out}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* final call */
.cta-block{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:48px 64px}
.cta-block .lede{margin-top:16px;color:var(--navy-text)}
.cta-block .btn{flex:none}
/* footer */
.footer{margin-top:var(--gap-section);padding:32px 0 40px;border-top:var(--filet) solid var(--line)}
.footer-row{display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer-logo img{height:18px;width:auto}
.footer-sign{color:var(--text-3);text-align:right}
.footer-links{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:24px;list-style:none;padding:0}
.footer-links a{font-size:16px;font-weight:500;line-height:1.5}
/*@css*/
/* entrances */
.rv{transition:opacity .5s ease,transform .5s ease;transition-delay:var(--d,0ms)}
.js .rv:not(.in){opacity:0;transform:translateY(12px)}
@media (prefers-reduced-motion:reduce){
  .js .rv:not(.in){opacity:1;transform:none}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
/* responsive */
@media (max-width:1099px){
  .block{padding:40px}
  .cards{grid-template-columns:minmax(0,1fr);max-width:640px;margin-left:auto;margin-right:auto}
  .kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1023px){
  .nav-links,.nav-login{display:none}
  .menu-btn{display:inline-flex}
  .nav .wrap{gap:12px}
}
@media (max-width:767px){
  :root{--gap-section:48px}
  .wrap,.hero-col,.mock-wrap{padding:0 16px}
  .display{font-size:36px}
  .h2{font-size:32px}
  .cta-row{flex-direction:column;align-items:stretch}
  .mock{height:380px}
  .mock-main{padding:20px}
  .kpis,.queues{grid-template-columns:minmax(0,1fr)}
  .q-row{flex-wrap:wrap}
  .band-row{gap:12px 32px}
  .block{padding:24px;border-radius:16px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card{padding:24px}
  .feats{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:minmax(0,1fr);padding:24px}
  .stat-big{font-size:44px}
  .faq{grid-template-columns:minmax(0,1fr)}
  .cta-block{flex-direction:column;align-items:stretch;padding:24px}
  .footer-row{flex-direction:column;align-items:flex-start}
  .footer-sign{text-align:left}
  /*@css-mobile*/
}

/* ─── Les pages légales ──────────────────────────────────────────────────────
   Deux pages de texte, sans maquette : elles empruntent l'enveloppe de la page
   d'accueil et n'ajoutent que ce qu'il faut pour qu'un long texte se lise. */
.legal{max-width:68ch;margin:0 auto}
.legal h2{font-family:'Google Sans',system-ui,sans-serif;font-size:clamp(22px,3vw,28px);line-height:1.2;letter-spacing:-.02em;margin:48px 0 12px}
.legal h2:first-of-type{margin-top:0}
.legal h3{font-size:17px;font-weight:650;margin:28px 0 8px}
.legal p{color:var(--text-2);margin:0 0 12px}
.legal ul{color:var(--text-2);margin:0 0 12px;padding-left:20px}
.legal li{margin:0 0 6px}
.legal strong{color:var(--ink);font-weight:650}
.legal a{color:var(--accent)}
.legal .updated{font-size:13px;color:var(--text-3);margin-top:40px}