/* EXTRAIT TEL QUEL de lp/index.html : jetons, base, boutons, nav, viseur, sections, nuit, comment ça marche, sources,
avant / avec Kyras, bento, MCP, conformité, questions, pied. NE PAS ÉDITER ICI : la landing fait foi ; régénérer depuis elle. */
@font-face{font-family:'Satoshi';src:url('/fonts/Satoshi-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/Satoshi-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('/fonts/Satoshi-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
/* ── Jetons ─────────────────────────────────────────────────────────────────────────────────────── */
:root{
--paper:#FAFAF7; --white:#FFFFFF;
--ink:#102828; --ink-2:#183A37; --e0:#0B1C1C; --e2:#16302E;
--mint:#80E8C0; --mint-2:#54CF9F; --mint-deep:#10744F; --mint-soft:#E7F8F1; --mint-veil:#F1FAF6;
--iris:#6657D9; --iris-soft:#EEEBFB;
--amber:#A94C1B; --amber-soft:#FBEDE4; --amber-dark:#E3A155;
--rose:#B3403A; --rose-soft:#FBEAE8;
--line:#E6E9E7; --line-2:#D8DEDC; --hair:rgba(16,40,40,.12);
--muted:#5A6B6B; --faint:#5D706D;
--font:'Satoshi',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
--maxw:1200px;
--r-sm:10px; --r-md:16px; --r-lg:24px; --r-xl:32px; --r-pill:999px;
--sh-1:0 1px 2px rgba(16,40,40,.06),0 6px 16px -10px rgba(16,40,40,.14);
--sh-2:0 2px 4px -2px rgba(16,40,40,.08),0 14px 32px -18px rgba(16,40,40,.22),0 36px 80px -40px rgba(16,40,40,.28);
--sh-3:0 3px 6px -3px rgba(16,40,40,.10),0 24px 48px -22px rgba(16,40,40,.28),0 64px 120px -48px rgba(16,40,40,.34);
--nav-h:64px;
--ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
[id]{scroll-margin-top:calc(var(--nav-h) + 40px)}
body{font-family:var(--font);font-weight:500;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;line-height:1.55;font-size:17px;letter-spacing:-.005em;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--mint);color:var(--ink)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--mint-deep);outline-offset:3px;border-radius:6px}
.num{font-variant-numeric:tabular-nums lining-nums}
/* Le squelette : là où un écran recomposé porterait du texte que personne ne lit, une ligne grise
dit « il y a du texte ici » et laisse le chiffre respirer. */
.sk{display:block;height:8px;border-radius:4px;background:var(--line);margin:6px 0}
.sk.w1{width:92%}.sk.w2{width:72%}.sk.w3{width:48%}.sk.w4{width:30%}
.sk.t{height:10px}
.night .sk,.bcard.dark .sk,.acard .sk,.alerte .sk{background:rgba(255,255,255,.14)}
.ex{display:inline-block;font-size:11px;font-weight:700;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:2px 7px;letter-spacing:.02em}
/* Une illustration dessinée à une largeur donnée se RÉDUIT quand la place manque, comme une image :
même ratio, mêmes proportions, jamais re-composée. `.fit` mesure la place, `.fit-in` porte la
largeur de dessin (data-w) et reçoit l'échelle. Sans script : débordement masqué, rien de cassé. */
.fit{position:relative;width:100%;min-width:0;overflow:hidden}
.fit>.fit-in{transform-origin:0 0;will-change:transform}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
@media (min-width:1300px){.wrap{padding:0}}
/* ── Typographie ──────────────────────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-weight:700;letter-spacing:-.028em;line-height:1.06;text-wrap:balance;color:var(--ink)}
h1{font-size:clamp(40px,2.2vw + 30px,66px);font-weight:900;letter-spacing:-.034em;line-height:1.02}
h2{font-size:clamp(30px,1.5vw + 20px,46px)}
h3{font-size:clamp(22px,.6vw + 18px,28px);letter-spacing:-.02em}
.lead{font-size:clamp(17px,.3vw + 15px,20px);line-height:1.55;color:var(--muted);text-wrap:pretty;max-width:62ch}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
/* Le liseré menthe de Kyras et de Hint : un bloc plein, l'encre par-dessus, y compris sur la nuit. */
mark.hl{background:linear-gradient(var(--mint),var(--mint)) 0 62%/100% 80% no-repeat;color:var(--ink);padding:0 .14em;border-radius:.18em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* ── Boutons ──────────────────────────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:700;font-size:16px;border-radius:var(--r-pill);min-height:50px;padding:0 22px;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .22s var(--ease),background .18s,border-color .18s;letter-spacing:-.005em}
.btn:active{transform:translateY(1px)}
.btn .jeton{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;margin-right:-8px;background:rgba(16,40,40,.12);transition:transform .24s var(--ease),background .2s}
.btn:hover .jeton{transform:translateX(3px);background:var(--ink)}
.btn:hover .jeton svg{color:var(--mint)}
.btn-mint{background:var(--mint);color:var(--ink)}
.btn-mint:hover{background:var(--mint-2);transform:translateY(-1px);box-shadow:0 2px 5px -2px rgba(16,40,40,.16),0 12px 24px -12px rgba(84,207,159,.9)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink .jeton{background:rgba(255,255,255,.16)}
.btn-ink:hover{background:var(--ink-2);transform:translateY(-1px);box-shadow:0 12px 24px -14px rgba(16,40,40,.5)}
.btn-ink:hover .jeton{background:var(--mint)}
.btn-ink:hover .jeton svg{color:var(--ink)}
.btn-out{background:var(--white);color:var(--ink);border:1px solid var(--line-2)}
.btn-out:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:var(--sh-1)}
.btn-out .pl{width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;margin-left:-6px}
.btn-out .pl svg{width:11px;height:11px;margin-left:1px}
.btn-out .duree{color:var(--faint);font-weight:500;font-size:14px}
.btn-lg{min-height:56px;padding:0 26px;font-size:17px}
.night .btn-out{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
.night .btn-out:hover{border-color:#fff;box-shadow:none}
.night .btn-out .pl{background:#fff;color:var(--ink)}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ctas.left{justify-content:flex-start}
@media (prefers-reduced-motion:reduce){.btn,.btn .jeton{transition:none}.btn:hover,.btn:hover .jeton{transform:none}}
/* ── Révélation au défilement : masqué seulement sous html.js, filet à 2 s ─────────────────── */
html.js .rise:not(.seen){opacity:0;transform:translateY(16px)}
.rise{transition:opacity .7s var(--ease),transform .9s var(--ease)}
html.js.tout-visible .rise{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html.js .rise:not(.seen){opacity:1;transform:none}.rise{transition:none}}
/* ── Nav flottante ────────────────────────────────────────────────────────────────────────────── */
nav{position:fixed;top:14px;left:0;right:0;z-index:50;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.pill{pointer-events:auto;display:flex;align-items:center;gap:6px;height:var(--nav-h);padding:0 10px 0 22px;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--r-pill);box-shadow:0 0 0 5px rgba(16,40,40,.035),0 10px 30px -18px rgba(16,40,40,.28);width:100%;max-width:1010px}
.pill .brand{display:flex;align-items:center;margin-right:18px}
.pill .brand img{height:28px;width:auto}
.pill .links{display:flex;align-items:center;gap:2px;flex:1;justify-content:center}
.pill .links a{white-space:nowrap;font-size:15px;font-weight:700;color:#4E5F5D;padding:9px 12px;border-radius:var(--r-pill);transition:background .18s,color .18s}
.pill .links a:hover{color:var(--ink);background:#F1F4F2}
.pill .links a.on{color:var(--ink);background:#EDF1EF}
.pill .right{display:flex;align-items:center;gap:6px;margin-left:auto}
.pill .login{white-space:nowrap;font-size:15px;font-weight:700;color:#4E5F5D;padding:9px 12px;border-radius:var(--r-pill)}
.pill .login:hover{color:var(--ink)}
.pill .btn{min-height:44px;padding:0 16px 0 18px;font-size:15px}
.pill .btn .jeton{width:24px;height:24px}
.burger{display:none;width:44px;height:44px;border-radius:50%;place-items:center;background:#F1F4F2;margin-left:6px}
.burger i{position:relative;display:block;width:18px;height:2px;background:var(--ink);border-radius:2px}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s var(--ease),top .25s var(--ease)}
.burger i::before{top:-6px}.burger i::after{top:6px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] i::after{top:0;transform:rotate(-45deg)}
.drawer{display:none;pointer-events:auto;position:fixed;top:88px;left:16px;right:16px;z-index:49;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:10px;flex-direction:column;gap:2px}
.drawer.open{display:flex}
.drawer a{padding:14px 16px;border-radius:12px;font-weight:700;font-size:17px}
.drawer a:hover{background:#F1F4F2}
.drawer .sep{height:1px;background:var(--line);margin:8px 6px}
.drawer .btn{margin-top:6px;justify-content:center}
@media (max-width:900px){
.pill{max-width:none;padding:0 8px 0 18px;height:60px}
.pill .links,.pill .login{display:none}
.burger{display:grid}
.pill .btn .t-long{display:none}
:root{--nav-h:60px}
}
@media (min-width:901px){.pill .btn .t-short{display:none}}
/* ── Le viseur Kyras : les quatre modules du symbole, écartés aux coins d'une zone ─────────────── */
/* Le symbole de Kyras est un viseur : quatre modules en équerre autour d'un œil. La page en reprend les
quatre coins, en carré, pour cadrer ce qu'elle montre (les clients de Hint, le produit au travail) ; le
centre, c'est le contenu. Chemins exacts du symbole (sprite en tête de ), ses couleurs en
diagonale : haut-gauche et bas-droite en encre (clairs sur la nuit), haut-droite et bas-gauche menthe.
Quand la zone entre dans l'écran, les quatre modules se resserrent d'un cran : la mise au point, une
fois. Sans script ou en mouvement réduit, ils sont à leur place d'emblée. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visee{position:absolute;inset:0;pointer-events:none;--vs:40px;--vd:14px;--v-clair:var(--ink);--v-menthe:var(--mint)}
.visee svg{position:absolute;width:var(--vs);height:auto;overflow:visible;transition:transform 1.1s var(--ease),opacity .8s var(--ease)}
.visee .hg{left:0;top:0;fill:var(--v-clair)}
.visee .hd{right:0;top:0;fill:var(--v-menthe)}
.visee .bg{left:0;bottom:0;fill:var(--v-menthe)}
.visee .bd{right:0;bottom:0;fill:var(--v-clair)}
html.js .cadre:not(.net) .visee svg{opacity:.25}
html.js .cadre:not(.net) .visee .hg{transform:translate(calc(var(--vd) * -1),calc(var(--vd) * -1))}
html.js .cadre:not(.net) .visee .hd{transform:translate(var(--vd),calc(var(--vd) * -1))}
html.js .cadre:not(.net) .visee .bg{transform:translate(calc(var(--vd) * -1),var(--vd))}
html.js .cadre:not(.net) .visee .bd{transform:translate(var(--vd),var(--vd))}
@media (prefers-reduced-motion:reduce){html.js .cadre:not(.net) .visee svg{opacity:1;transform:none}.visee svg{transition:none}}
/* ── Sections : un rythme ────────────────────────────────────────────────────────────────────── */
section{position:relative;padding:136px 0}
.sh{max-width:760px;margin:0 auto}
.sh .lead{margin-top:22px}
@media (max-width:760px){section{padding:88px 0}}
/* ── La bande nocturne : le résultat, en grand ───────────────────────────────────────────────── */
.night{margin:0 16px;background:var(--e0);color:#fff;border-radius:40px;padding:120px 0 96px;overflow:clip}
.night h2,.night h3{color:#fff}
.night .lead{color:rgba(255,255,255,.72)}
/* Le viseur de Kyras aux quatre coins de la bande, à la place des règles et des croix de repère : clairs
et menthe comme le symbole sur fond sombre, assez retenus pour rester un repère. */
.night>.visee{inset:60px max(24px,calc(50% - 600px)) 52px;--v-clair:rgba(248,248,248,.74);--v-menthe:rgba(128,232,192,.9)}
@media (min-width:1360px){.night>.visee{inset:60px calc(50% - 640px) 52px}}
@media (max-width:760px){.night>.visee{inset:28px 20px 24px;--vs:26px;--vd:9px}}
.night .glow{position:absolute;left:50%;top:330px;width:1100px;height:600px;transform:translateX(-50%);pointer-events:none;
background:radial-gradient(50% 50% at 50% 40%,rgba(102,87,217,.55),transparent 70%),radial-gradient(40% 40% at 30% 60%,rgba(128,232,192,.35),transparent 70%);filter:blur(40px)}
.night .wrap{position:relative;z-index:1}
@media (max-width:760px){.night{margin:0 8px;border-radius:28px;padding:80px 0 64px}}
/* ── Comment ça marche : trois stations, un seul écran qui change ────────────────────────────── */
.how .steps{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:64px;margin-top:80px;align-items:start}
.how .list{display:flex;flex-direction:column}
.how .step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;padding:24px 0;opacity:.32;transition:opacity .5s var(--ease)}
.how .step.on{opacity:1}
.how .step:first-child{min-height:62vh;justify-content:flex-start;padding-top:56px}
.how .step h3{font-size:clamp(26px,1.4vw + 18px,38px);letter-spacing:-.025em}
.how .step p{margin-top:14px;color:var(--muted);font-size:18px;max-width:44ch;text-wrap:pretty}
.how .device{position:sticky;top:calc(50vh - 250px);height:500px;border-radius:28px;background:#EEF1EF;background-image:radial-gradient(rgba(16,40,40,.13) 1px,transparent 1.2px);background-size:14px 14px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(16,40,40,.05)}
.how .win{position:absolute;left:7%;right:7%;top:52px;bottom:-24px;background:#fff;border-radius:16px 16px 0 0;box-shadow:0 30px 70px -30px rgba(16,40,40,.45),0 0 0 1px var(--line);overflow:hidden}
.how .win .bar{height:40px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 14px;background:#FBFCFB}
.how .win .bar i{width:10px;height:10px;border-radius:50%;background:#E4E8E6}
.how .win .bar .url{margin-left:12px;height:22px;flex:0 0 260px;border-radius:6px;background:#F1F4F2;font-size:11px;color:var(--faint);display:flex;align-items:center;justify-content:space-between;padding:0 10px;font-weight:700}
.how .win .bar .url em{font-style:normal;font-weight:500;opacity:.8}
.how .scr{position:absolute;inset:40px 0 0;padding:22px 24px;opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease);pointer-events:none}
.how .scr.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.how .scr{transition:none}.how .step{transition:none}}
/* Écran 1 : les sources, branchées. */
.src{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.src .s{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;font-weight:700;min-width:0}
.src .s .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.src .s .st i{flex:0 0 7px}
.src .s .st{flex:0 0 auto;white-space:nowrap}
.src .s img{width:22px;height:22px}
.src .s small{display:block;font-size:11px;color:var(--faint);font-weight:500}
.src .s .st{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--mint-deep)}
.src .s .st i{width:7px;height:7px;border-radius:50%;background:var(--mint-2)}
.src .s.wait .st{color:var(--faint)}.src .s.wait .st i{background:var(--line-2)}
.how .ttl{font-size:16px;font-weight:700;margin-bottom:4px}
.how .sub{font-size:13px;color:var(--faint);margin-bottom:16px}
/* Écran 2 : le portrait. */
.portrait{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}
.portrait .ring{position:relative;width:150px;height:150px}
.portrait .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.portrait .ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:30px;font-weight:900;letter-spacing:-.03em}
.portrait ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.portrait li{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.35;padding:8px 10px;border:1px solid var(--line);border-radius:10px}
.portrait li svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;color:var(--mint-deep)}
.portrait li.new{background:var(--mint-veil);border-color:var(--mint-soft)}
/* Écran 3 : le lundi. */
.mail{border:1px solid var(--line);border-radius:14px;overflow:hidden;max-width:420px}
.mail .mh{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:var(--mint-soft);font-size:13px;font-weight:700}
.mail .mh img{width:18px;height:18px}
.mail .mh span{display:flex;align-items:center;gap:8px}
.mail .mb{padding:14px 16px;font-size:13px}
.mail .mb p{color:var(--faint);margin-bottom:10px;font-size:12px}
.mail .mb .li{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--line);font-variant-numeric:tabular-nums}
.mail .mb .li b{font-weight:700}
.mail .mb .li em{font-style:normal;color:var(--mint-deep);font-weight:700;min-width:58px;text-align:right}
.mail .mb .li em.neg{color:var(--amber)}
.mail .mb .li span{flex:1;color:var(--muted)}
@media (max-width:900px){
.how .steps{grid-template-columns:minmax(0,1fr);gap:0}
.how .list{min-width:0}
.how .m-scr{min-width:0;overflow:hidden}
.src{grid-template-columns:1fr}
.portrait{grid-template-columns:1fr;justify-items:center}
.portrait ul{width:100%}
.how .device{display:none}
.how .step{min-height:0;opacity:1;padding:0;text-align:center;align-items:center}
.how .step:first-child{min-height:0;padding-top:0}
.how .step+.step{margin-top:88px}
.how .step p{margin-left:auto;margin-right:auto}
.how .m-scr{display:block;width:100%;margin-top:28px;text-align:left;border-radius:24px;background:#EEF1EF;background-image:radial-gradient(rgba(16,40,40,.13) 1px,transparent 1.2px);background-size:14px 14px;padding:22px 14px 0;box-shadow:inset 0 0 0 1px rgba(16,40,40,.05);overflow:hidden}
.how .m-scr .mwin{background:#fff;border-radius:14px 14px 0 0;box-shadow:0 20px 50px -24px rgba(16,40,40,.45),0 0 0 1px var(--line);padding:22px 24px 24px}
.how .m-scr .fit{border-radius:14px 14px 0 0}
.src{grid-template-columns:1fr 1fr}
.portrait{grid-template-columns:150px 1fr;justify-items:stretch}
}
@media (min-width:901px){.how .m-scr{display:none}}
/* ── Toutes vos sources autour d'une question ──────────────────────────────────────────────────────── */
.constel .field{position:relative;height:640px;margin-top:40px}
.constel .orb{position:absolute;width:64px;height:64px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);display:grid;place-items:center;animation:drift 9s ease-in-out infinite}
.constel .orb img{width:32px;height:32px}
.constel .orb.txt{font-size:12px;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
@keyframes drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.constel .orb:nth-child(2n){animation-duration:11s;animation-delay:-3s}.constel .orb:nth-child(3n){animation-duration:13s;animation-delay:-6s}
@media (prefers-reduced-motion:reduce){.constel .orb{animation:none}}
.constel .ask{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,92%);background:#fff;border:1px solid var(--line);border-radius:22px;box-shadow:var(--sh-3);padding:22px 24px 18px;z-index:2}
.constel .ask::before{content:"";position:absolute;inset:-80px -40px -60px;z-index:-1;background:radial-gradient(50% 55% at 50% 45%,rgba(128,232,192,.5),transparent 70%);filter:blur(24px)}
.constel .ask .q{font-size:22px;font-weight:700;letter-spacing:-.02em;min-height:60px;line-height:1.3}
.constel .ask .q .car{display:inline-block;width:2px;height:1.1em;background:var(--ink);vertical-align:-3px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.constel .ask .foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-size:13px;color:var(--faint);font-weight:700}
.constel .ask .foot .send{width:40px;height:40px;border-radius:50%;background:var(--ink);color:var(--mint);display:grid;place-items:center}
.constel .ask .foot .send svg{width:18px;height:18px}
.constel .ans{position:absolute;left:50%;top:calc(50% + 118px);transform:translateX(-50%);width:min(520px,88%);background:var(--ink);color:#fff;border-radius:18px;padding:16px 18px;font-size:15px;line-height:1.45;box-shadow:var(--sh-3);z-index:1}
.constel .ans b{color:var(--mint);font-weight:900}
.constel .ans small{display:block;margin-top:8px;color:rgba(255,255,255,.6);font-size:12px}
@media (max-width:800px){
.constel .field{height:auto;display:flex;flex-direction:column;gap:20px}
/* Sur mobile les icônes restent des FLOTTANTS (demande de Bastien, 2026-09-19) : posées en rangée pour ne
jamais se chevaucher ni cacher la question, mais elles gardent leur dérive, décalées d'une sur deux pour
dessiner une ondulation plutôt qu'une ligne. Le mouvement réduit les immobilise, comme sur bureau. */
.constel .orbs{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 10px;order:-1;padding:8px 0 14px}
.constel .orb{position:static!important;width:48px;height:48px;border-radius:13px;animation-duration:7s}
.constel .orb:nth-child(2n){margin-top:18px;animation-duration:9s;animation-delay:-2s}
.constel .orb:nth-child(3n){animation-duration:8s;animation-delay:-4s}
.constel .orb img{width:24px;height:24px}
.constel .ask,.constel .ans{position:relative;left:auto;top:auto;transform:none;width:auto}
.constel{overflow-x:clip}
}
@media (min-width:801px){.constel .orbs{position:absolute;inset:0}}
/* ── Avant / avec Kyras : deux moitiés autour d'un bouton qui tourne ─────────────────────────── */
.versus .switch{max-width:820px;margin:72px auto 0;position:relative}
.versus .tabs2{display:grid;grid-template-columns:1fr 120px 1fr;align-items:end;height:74px}
.versus .tabs2 button{height:58px;border:1px solid var(--line);border-bottom:0;background:#fff;border-radius:22px 22px 0 0;font-size:16px;font-weight:700;color:var(--faint);transition:color .2s,background .2s}
.versus .tabs2 button[aria-selected="true"]{color:var(--ink);background:#F3F6F4}
.versus .tabs2 button:hover{color:var(--ink)}
.versus .tabs2.mb{display:none}
.versus .tabs2 .tb{height:58px;border:1px solid var(--line);border-bottom:0;background:#fff;border-radius:22px 22px 0 0;font-size:14px;line-height:1.2;font-weight:700;color:var(--faint);display:grid;place-items:center;padding:0 8px;text-align:center}
.versus .tabs2 .tb.on{background:var(--e2);color:#fff;border-color:var(--e2)}
.versus .knob .k.b{background:var(--ink);border-color:var(--ink)}
.versus .knob .k.b .ring{transform:rotate(180deg)}
.versus .knob .k.b .ring::after{background:var(--mint)}
.versus .knob{position:relative;height:74px;display:grid;place-items:center}
.versus .knob .k{width:112px;height:112px;border-radius:50%;background:#fff;border:1px solid var(--line-2);box-shadow:var(--sh-3),inset 0 -6px 0 rgba(16,40,40,.06);display:grid;place-items:center;transition:background .5s,border-color .5s;position:relative;top:-8px}
.versus .knob .k .sym{width:56px;height:56px;display:grid;place-items:center;position:relative;z-index:1}
.versus .knob .k .sym img,.versus .knob .k .sym svg{width:56px;height:56px}
/* L'anneau porte le repère et tourne ; le symbole, lui, reste droit et regarde. */
.versus .knob .k .ring{position:absolute;inset:0;border-radius:50%;transition:transform .8s var(--ease)}
.versus .knob .k .ring::after{content:"";position:absolute;top:9px;left:50%;width:8px;height:8px;border-radius:50%;background:var(--ink);transform:translateX(-50%);transition:background .5s}
.versus.b .knob .k{background:var(--ink);border-color:var(--ink)}
.versus.b .knob .k .ring{transform:rotate(180deg)}
.versus.b .knob .k .ring::after{background:var(--mint)}
.versus .panels{position:relative;border-radius:0 0 32px 32px;overflow:hidden;box-shadow:var(--sh-3)}
.versus .panel{padding:48px 48px 0;display:grid;grid-template-columns:1fr 1fr;gap:32px;transition:opacity .55s var(--ease),transform .7s var(--ease)}
.versus .panel.a{position:relative;background:#F3F6F4;border:1px solid var(--line);border-top:0;border-radius:0 0 32px 32px}
.versus .panel.b{position:absolute;inset:0;background:var(--e0);color:#fff;opacity:0;transform:translateY(24px);pointer-events:none}
.versus.b .panel.a{opacity:0;transform:translateY(-24px);pointer-events:none}
.versus.b .panel.b{opacity:1;transform:none;pointer-events:auto}
.versus .panel h3{grid-column:1/-1;text-align:center;font-size:clamp(26px,1.6vw + 16px,38px);margin-bottom:4px}
.versus .panel.b h3{color:#fff}
.versus .panel ul{list-style:none;display:flex;flex-direction:column;gap:16px;font-size:17px;font-weight:700;padding-top:6px}
.versus .panel li{display:flex;gap:12px;align-items:flex-start;line-height:1.3}
.versus .panel li svg{width:20px;height:20px;flex:0 0 auto;margin-top:1px}
.versus .panel.a li svg{color:var(--rose)}
.versus .panel.b li svg{color:var(--mint)}
.versus .panel .vis{position:relative;min-height:360px}
@media (prefers-reduced-motion:reduce){.versus .panel,.versus .knob .k,.versus .knob .k .ring{transition:none}}
@media (max-width:760px){
.versus .tabs2{grid-template-columns:1fr 84px 1fr}
.versus .knob .k{width:80px;height:80px}.versus .knob .k .sym,.versus .knob .k .sym img,.versus .knob .k .sym svg{width:44px;height:44px}
.versus .panel{grid-template-columns:1fr;padding:30px 22px 0;gap:22px}
/* Insyder l'a compris pour nous : sur téléphone personne ne bascule. Les deux moitiés se lisent
l'une sous l'autre, chacune sous son en-tête, et la bascule automatique est coupée. */
.versus .panels{min-height:0;overflow:visible;box-shadow:none;border-radius:0}
.versus .tabs2.mb{display:grid;margin-top:56px}
.versus .panel.a,.versus .panel.b{border-radius:0 0 28px 28px;box-shadow:var(--sh-3)}
.versus .panel.b{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto}
.versus.b .panel.a{opacity:1;transform:none;pointer-events:auto}
.versus .tabs2 button{pointer-events:none}
.versus .panel .vis{min-height:0;padding-bottom:26px}
.versus .panel.a .vis{min-height:290px;overflow:hidden}
.mess .tab:nth-child(3),.mess .tab:nth-child(4),.mess .hour{display:none}
.mess .xls{bottom:16px}
.after .alerte{display:none}
.versus .tabs2 button{font-size:14px;line-height:1.2;padding:0 8px}
}
/* Le désordre d'avant : six onglets, un export, une heure tardive. */
.mess{position:relative;height:100%}
.mess .tab{position:absolute;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:10px;font-size:13px;font-weight:700;box-shadow:var(--sh-1)}
.mess .tab img{width:16px;height:16px}
.mess .xls{position:absolute;left:20px;bottom:56px;right:20px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;font-size:12px;box-shadow:var(--sh-2)}
.mess .xls .f{font-weight:700;display:flex;gap:8px;align-items:center}
.mess .xls .f i{width:18px;height:18px;border-radius:4px;background:#1D6F42;display:inline-block}
.mess .xls table{width:100%;border-collapse:collapse;margin-top:8px;font-variant-numeric:tabular-nums}
.mess .xls td{border:1px solid var(--line);padding:4px 6px;color:var(--muted)}
.mess .xls td.err{color:var(--rose);font-weight:700}
.mess .hour{position:absolute;right:20px;bottom:14px;font-size:12px;font-weight:700;color:var(--faint)}
/* Après : le lundi, l'alerte, la source. */
.after{display:flex;flex-direction:column;gap:12px;padding-bottom:40px}
.after .mail{background:#fff;color:var(--ink);max-width:none;box-shadow:var(--sh-2);border:0}
.after .alerte{background:var(--e2);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:14px 16px;font-size:14px;line-height:1.4}
.after .alerte b{display:block;font-size:12px;color:var(--amber-dark);margin-bottom:4px;letter-spacing:.02em}
.after .alerte small{display:block;margin-top:6px;color:rgba(255,255,255,.6);font-size:12px}
/* ── Le bento des fonctionnalités ────────────────────────────────────────────────────────────── */
.bento .head{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:end}
.bento .head h2{font-size:clamp(32px,1.9vw + 18px,54px)}
.bento .head .lead{margin:0 0 4px}
.bento .head .ctas{margin-top:22px}
.bgrid{display:grid;grid-template-columns:2fr 1fr;gap:20px;margin-top:56px}
.bgrid .l{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bgrid .r{display:flex;flex-direction:column;gap:20px}
.bcard{position:relative;border-radius:28px;overflow:hidden;padding:36px 32px 0;text-align:center;display:flex;flex-direction:column;min-height:440px;border:1px solid var(--line)}
.bcard h3{font-size:26px}
.bcard p{margin:10px auto 0;max-width:34ch;color:var(--muted);font-size:16px;line-height:1.5;text-wrap:pretty}
.bcard .vis{margin-top:auto;padding-top:28px;text-align:left}
.bcard.grey{background:#F3F6F4}
.bcard.mint{background:linear-gradient(180deg,#E9F9F1,#CFF1E3)}
.bcard.dark{background:var(--e0);color:#fff;border-color:transparent;flex:1}
.bcard.dark h3{color:#fff}.bcard.dark p{color:rgba(255,255,255,.7)}
.bcard.iris{background:linear-gradient(180deg,#F1EFFC,#E2DDF8)}
.bcard.iris p,.bcard.iris .mix small,.bcard.iris .mixq .src,.bcard.iris .ghost small{color:#4A5A58!important}
.bcard.wide{grid-column:1/-1;min-height:380px;text-align:left;padding:36px 36px 0}
.bcard.wide .vis{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:end}
.bcard.wide p{margin-left:0}
.bcard.small{min-height:260px;padding-bottom:32px}
.bcard.small p{margin-bottom:0}
@media (max-width:960px){.bento .head{grid-template-columns:1fr;gap:16px}.bgrid{grid-template-columns:1fr}.bgrid .l{grid-template-columns:1fr}.bcard.wide .vis{grid-template-columns:1fr}}
/* Vignette du bento : une fenêtre qui déborde en bas, comme sur les cartes insyder. */
.peek{margin:0 -8px -1px;background:#fff;border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:0 -10px 30px -20px rgba(16,40,40,.3);padding:16px 18px 0;overflow:hidden;color:var(--ink)}
.dip .peek{padding-bottom:16px}
.peek.tilt{transform:rotate(-2deg) translateY(10px);margin-left:6px;margin-right:-24px;transform-origin:bottom left}
.peek .t{font-size:13px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.peek .t small{color:var(--faint);font-weight:500;font-size:12px}
/* Le tunnel, tel que portal.js le dessine (parcPageBarreHtml, parcPageMarcheHtml, parcPageChiffreHtml) :
l'en-tête avec le logo de la source, une colonne d'encre au volume écrit dedans, le contour de l'étape
précédente derrière, la marche entre deux colonnes avec sa perte, la pire en ambre, le grand taux dessous. */
.tun{display:grid;grid-template-columns:66px 20px 66px 20px 66px 20px 66px;justify-content:center;margin-top:12px;font-variant-numeric:tabular-nums}
.tun .hd2{display:flex;align-items:center;justify-content:center;gap:5px;font-size:11.5px;font-weight:700;padding-bottom:10px;min-height:34px;line-height:1.2;text-align:center}
.tun .hd2 img{width:14px;height:14px}
.tun .col{position:relative;height:120px;border-bottom:1px solid rgba(16,40,40,.14)}
.tun .col .prev{position:absolute;bottom:0;left:0;right:0;border:1px solid rgba(16,40,40,.22);border-bottom:0;border-radius:6px 6px 0 0}
.tun .col .bar{position:absolute;bottom:0;left:0;right:0;background:var(--ink);border-radius:6px 6px 0 0}
.tun .col .bar b{position:absolute;left:0;right:0;top:5px;text-align:center;font-size:11px;font-weight:700;color:#fff}
.tun .col .bar.out b{top:auto;bottom:calc(100% + 5px);color:var(--ink)}
.tun .gut{position:relative;height:120px;border-bottom:1px solid rgba(16,40,40,.14)}
.tun .gut i{position:absolute;background:rgba(16,40,40,.25)}
.tun .gut.pire i{background:#B4740F}
.tun .gut .h1l{left:-6px;width:16px;height:1px}
.tun .gut .v{left:10px;width:1px}
.tun .gut .h2l{left:10px;width:16px;height:1px}
.tun .gut em{position:absolute;left:-12px;right:-12px;text-align:center;font-style:normal;font-size:10.5px;font-weight:700;color:rgba(16,40,40,.55)}
.tun .gut.pire em{color:#B4740F}
.tun .num2{text-align:center;padding-top:10px}
.tun .num2 b{display:block;font-size:22px;font-weight:900;letter-spacing:-.03em;line-height:1}
.tun .num2 b.dim{color:rgba(16,40,40,.45)}
.tun .num2 small{display:block;font-size:10.5px;font-weight:700;margin-top:4px;color:var(--mint-deep)}
.tun .num2 small.neg{color:var(--amber)}
/* Alerte : la carte sombre. */
.acard{background:var(--e2);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:18px;text-align:left;font-size:14px;line-height:1.4}
.acard .k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--amber-dark);letter-spacing:.02em;margin-bottom:10px}
.acard .k i{width:8px;height:8px;border-radius:50%;background:var(--amber-dark);box-shadow:0 0 0 4px rgba(227,161,85,.2)}
.acard .h5{font-size:17px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.acard .spark{margin:14px 0 10px}
.acard .spark svg{width:100%;height:auto}
.acard .btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.acard .btns span{white-space:nowrap;font-size:12px;font-weight:700;padding:7px 11px;border-radius:var(--r-pill);background:rgba(255,255,255,.1)}
.acard .btns span.p{background:var(--mint);color:var(--ink)}
/* Mix marketing : revendiqué contre mesuré. */
.mix{display:flex;flex-direction:column;gap:12px}
.mix .bar{display:grid;grid-template-columns:150px 1fr 74px;align-items:center;gap:12px;font-size:14px;font-weight:700}
@media (max-width:600px){.mix .bar{grid-template-columns:minmax(0,1fr) 64px;row-gap:8px}.mix .bar i{grid-column:1/-1;height:16px}.mix .bar b{font-size:20px}}
.mix .bar i{display:block;height:34px;border-radius:9px;background:var(--line-2)}
.mix .bar.me i{background:var(--ink)}
.mix .bar.re i{background:repeating-linear-gradient(135deg,#D8DEDC 0 6px,#E9EDEB 6px 12px)}
.mix .bar b{font-size:20px;letter-spacing:-.02em;text-align:right;font-variant-numeric:tabular-nums}
.mix .bar small{color:var(--faint);font-weight:500;display:block;font-size:12px}
.mix .ghost{display:flex;align-items:center;justify-content:space-between;background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;font-size:14px}
.mix .ghost b{font-size:22px;color:var(--amber);letter-spacing:-.02em;white-space:nowrap}
.mixq{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;font-size:15px;line-height:1.45;box-shadow:var(--sh-1)}
.mixq .q{display:inline-block;background:var(--ink);color:#fff;border-radius:14px 14px 14px 4px;padding:9px 14px;font-weight:700;margin-bottom:12px;font-size:14px}
.mixq .a b{color:var(--ink)}
.mixq .a .src{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:12px;color:var(--faint);margin-top:10px;font-weight:700}
.mixq .a .src .p{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.mixq .a .src img{width:14px;height:14px}
/* Réponse sourcée : le chiffre ouvre sa source. */
.chat{display:flex;flex-direction:column;gap:10px;text-align:left}
.chat .u{align-self:flex-end;background:var(--ink);color:#fff;border-radius:16px 16px 4px 16px;padding:10px 14px;font-size:14px;font-weight:700;max-width:86%}
.chat .k{background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;padding:12px 14px;font-size:14px;line-height:1.45;box-shadow:var(--sh-1)}
.chat .k .n{display:inline-block;background:var(--mint-soft);color:var(--ink);font-weight:900;padding:1px 6px;border-radius:6px}
.chat .k .prov{display:block;margin-top:8px;font-size:12px;color:var(--faint);border-top:1px solid var(--line);padding-top:8px}
/* ── MCP : Kyras dans l'assistant que le client a déjà ──────────────────────────────────────── */
.mcp .scene{position:relative;margin-top:64px;border-radius:32px;background:linear-gradient(180deg,#EEF1EF,#E6EBE9);background-image:radial-gradient(rgba(16,40,40,.12) 1px,transparent 1.2px),linear-gradient(180deg,#EEF1EF,#E6EBE9);background-size:14px 14px,auto;padding:150px 0 0 56px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:36px;overflow:hidden;min-height:620px;box-shadow:inset 0 0 0 1px rgba(16,40,40,.05);isolation:isolate}
/* La lumière des hôtes : la terre cuite de Claude, le vert de ChatGPT, l'iris de Kyras, en dérive
lente sous les fenêtres. Une seule couche animée, coupée en mouvement réduit. */
.aurora{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.aurora i{position:absolute;width:640px;height:640px;border-radius:50%;filter:blur(70px);opacity:.72;mix-blend-mode:multiply}
.aurora .a1{left:-10%;top:-30%;background:radial-gradient(circle,rgba(217,119,87,.75),transparent 62%);animation:aur1 22s ease-in-out infinite}
.aurora .a2{left:38%;top:-40%;background:radial-gradient(circle,rgba(16,163,127,.55),transparent 62%);animation:aur2 26s ease-in-out infinite}
.aurora .a3{left:62%;top:10%;background:radial-gradient(circle,rgba(102,87,217,.5),transparent 62%);animation:aur3 30s ease-in-out infinite}
@keyframes aur1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(160px,90px) scale(1.15)}}
@keyframes aur2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-140px,120px) scale(.9)}}
@keyframes aur3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-120px,-60px) scale(1.2)}}
@media (prefers-reduced-motion:reduce){.aurora i{animation:none}}
.hosts-orbs{position:absolute;inset:0;z-index:2;pointer-events:none}
.hosts-orbs .orb{position:absolute;width:64px;height:64px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-2);display:grid;place-items:center;animation:drift 10s ease-in-out infinite}
.hosts-orbs .orb img{width:32px;height:32px}
.hosts-orbs .orb.big{width:84px;height:84px;border-radius:24px;transform:rotate(-8deg);animation-name:driftL}
.hosts-orbs .orb.big img{width:44px;height:44px}
.hosts-orbs .orb.sm{width:54px;height:54px;border-radius:16px}
.hosts-orbs .orb.sm img{width:26px;height:26px}
.hosts-orbs .orb:nth-child(2){animation-duration:12s;animation-delay:-4s}.hosts-orbs .orb:nth-child(3){animation-duration:9s;animation-delay:-2s}.hosts-orbs .orb:nth-child(4){animation-duration:13s;animation-delay:-7s}.hosts-orbs .orb:nth-child(5){animation-duration:11s;animation-delay:-5s}
@keyframes driftL{0%,100%{transform:rotate(-8deg) translateY(0)}50%{transform:rotate(-6deg) translateY(-12px)}}
@media (prefers-reduced-motion:reduce){.hosts-orbs .orb{animation:none}}
.mcp .host-fit,.mcp .art-fit{position:relative;z-index:1}
.host-fit{align-self:end;margin-bottom:-2px;overflow:visible}
.host{background:#fff;border-radius:18px;box-shadow:0 30px 70px -30px rgba(16,40,40,.45),0 0 0 1px var(--line);overflow:hidden;font-size:14px}
.host .bar{display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--line);background:#FBFCFB}
.host .bar i{width:10px;height:10px;border-radius:50%;background:#E4E8E6}
.host .bar .hosts{margin-left:12px;display:flex;gap:2px;background:#F1F4F2;padding:3px;border-radius:9px;font-size:12px;font-weight:700;color:var(--faint)}
.host .bar .hosts span{padding:4px 9px;border-radius:7px}
.host .bar .hosts span.on{background:#fff;color:var(--ink);box-shadow:var(--sh-1)}
.host .bar .conn{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--mint-deep);background:var(--mint-soft);padding:5px 10px;border-radius:var(--r-pill)}
.host .bar .conn img{width:14px;height:14px}
.host .bar .conn i{width:6px;height:6px;border-radius:50%;background:var(--mint-2)}
.host .fil{padding:20px 20px 22px;display:flex;flex-direction:column;gap:14px}
.host .u{align-self:flex-end;background:var(--ink);color:#fff;border-radius:16px 16px 4px 16px;padding:11px 14px;max-width:88%;font-weight:700;line-height:1.4}
.host .a{display:flex;flex-direction:column;gap:10px;line-height:1.45}
.host .tool{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:12px;font-weight:700;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:7px 10px;font-variant-numeric:tabular-nums}
.host .tool img{width:14px;height:14px}
.host .tool em{font-style:normal;color:var(--faint);font-weight:500}
.host .a p b{font-weight:700}
.host .a .doc{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-weight:700;font-size:13px}
.host .a .doc i{width:30px;height:30px;border-radius:8px;background:var(--iris-soft);color:var(--iris);display:grid;place-items:center}
.host .a .doc i svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.host .a .doc small{display:block;font-weight:500;color:var(--faint);font-size:12px}
.host .compose{margin:0 20px 20px;border:1px solid var(--line-2);border-radius:14px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;color:var(--faint);font-size:13px}
.host .compose i{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--mint);display:grid;place-items:center}
.host .compose i svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* L'artefact : le rapport que l'hôte fabrique, qui déborde du plateau comme un vrai document. */
.art-fit{align-self:end;margin:0 -10px -2px 0;overflow:visible}
.art{background:#fff;color:var(--ink);border-radius:16px 0 0 0;box-shadow:0 30px 70px -30px rgba(16,40,40,.5),0 0 0 1px var(--line);padding:26px 28px 28px;min-width:0;font-variant-numeric:tabular-nums}
.art .hd{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.art .hd b{font-size:19px;letter-spacing:-.02em;display:block}
.art .hd small{font-size:12px;color:var(--faint);display:block;margin-top:3px}
.art .hd .tag{font-size:11px;font-weight:700;color:var(--faint);border:1px solid var(--line);border-radius:6px;padding:4px 7px;white-space:nowrap}
.art .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:16px}
.art .kpi{border:1px solid var(--line);border-radius:12px;padding:12px 12px 10px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.art .kpi .l{font-size:11px;color:var(--faint);font-weight:700}
.art .kpi .v{font-size:20px;font-weight:900;letter-spacing:-.02em;margin-top:4px;white-space:nowrap}
.art .kpi .d{font-size:11px;font-weight:700;color:var(--mint-deep);margin-top:2px}
.art .kpi .d.neg{color:var(--amber)}
.art .two{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-top:14px}
.art .box{border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.art .box .t{font-size:12px;font-weight:700;display:flex;justify-content:space-between}
.art .box .t small{color:var(--faint);font-weight:500}
.art .bars{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;align-items:end;height:96px;margin-top:12px}
.art .bars i{display:block;background:var(--ink);border-radius:4px 4px 2px 2px;height:var(--h);transform:scaleY(0);transform-origin:bottom;transition:transform .7s var(--ease)}
.art .bars i.m{background:var(--mint)}
.art .bars i.i{background:var(--iris)}
.art .lg{display:flex;gap:12px;font-size:11px;color:var(--faint);margin-top:8px}
.art .lg i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:0}
.art .rows{margin-top:10px;font-size:12px;display:flex;flex-direction:column;gap:8px}
.art .rows span{display:flex;justify-content:space-between;gap:10px}
.art .rows span b{font-weight:700}
.art .rows span em{font-style:normal;color:var(--amber);font-weight:700}
.art .srcs{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2);font-size:11px;color:var(--faint);line-height:1.5}
.art .srcs b{color:var(--ink)}
.scene.on .art .kpi{opacity:1;transform:none}
.scene.on .art .kpi:nth-child(2){transition-delay:.12s}.scene.on .art .kpi:nth-child(3){transition-delay:.24s}.scene.on .art .kpi:nth-child(4){transition-delay:.36s}
.scene.on .art .bars i{transform:scaleY(1)}
.scene.on .art .bars i:nth-child(2){transition-delay:.06s}.scene.on .art .bars i:nth-child(3){transition-delay:.12s}.scene.on .art .bars i:nth-child(4){transition-delay:.18s}.scene.on .art .bars i:nth-child(5){transition-delay:.24s}.scene.on .art .bars i:nth-child(6){transition-delay:.3s}.scene.on .art .bars i:nth-child(7){transition-delay:.36s}.scene.on .art .bars i:nth-child(8){transition-delay:.42s}
html:not(.js) .art .kpi,html:not(.js) .art .bars i{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.art .kpi,.art .bars i{opacity:1;transform:none;transition:none}}
.mcp .pas{margin:40px auto 0;text-align:center;color:var(--faint);font-size:16px;max-width:60ch}
.mcp .pas b{color:var(--ink);font-weight:700}
@media (max-width:960px){
.mcp .scene{grid-template-columns:1fr;padding:24px 16px 0;gap:24px;min-height:0;border-radius:24px}
/* Même règle que la constellation : les hôtes flottent aussi sur mobile, en rangée ondulée. Le « big »
perd sa rotation (driftL) et prend la dérive droite, la taille est unifiée. */
.hosts-orbs{position:static;display:flex;justify-content:center;gap:14px 12px;flex-wrap:wrap;margin-bottom:4px;padding:6px 0 12px}
.hosts-orbs .orb,.hosts-orbs .orb.big,.hosts-orbs .orb.sm{position:static!important;width:52px;height:52px;border-radius:14px;transform:none;animation-name:drift;animation-duration:7s}
.hosts-orbs .orb:nth-child(2n){margin-top:18px;animation-duration:9s;animation-delay:-2s}
.hosts-orbs .orb:nth-child(3n){animation-duration:8s;animation-delay:-4s}
.hosts-orbs .orb img,.hosts-orbs .orb.big img,.hosts-orbs .orb.sm img{width:26px;height:26px}
.host-fit,.art-fit{margin:0;align-self:auto}
.host{border-radius:16px}
.art{border-radius:16px 16px 0 0}
}
/* Le mouvement réduit garde le dernier mot, y compris sur les règles mobiles ci-dessus qui redonnent la dérive. */
@media (prefers-reduced-motion:reduce){.constel .orb,.hosts-orbs .orb{animation:none!important}}
/* ── Conformité : deux cartes, deux vrais écrans, pas une liste ────────────────────────────────── */
.rgpd{overflow-x:clip}
.dip{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:56px}
.dip .bcard{min-height:520px}
.dip .bcard p{max-width:40ch}
.consent{font-size:13px}
.consent .g{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--faint);font-weight:700}
.consent .g i{display:inline-block;width:18px;height:18px;border-radius:50%;background:conic-gradient(#EA4335 0 25%,#FBBC05 0 50%,#34A853 0 75%,#4285F4 0)}
.consent .h6{font-size:17px;font-weight:700;letter-spacing:-.015em;margin-top:12px;line-height:1.25}
.consent .who{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;color:var(--faint)}
.consent .who i{width:20px;height:20px;border-radius:50%;background:var(--iris-soft);color:var(--iris);display:grid;place-items:center;font-size:10px;font-weight:900;font-style:normal}
.consent ul{list-style:none;margin-top:14px;display:flex;flex-direction:column;gap:8px}
.consent li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:10px}
.consent li img{width:18px;height:18px}
.consent li .lock{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;color:var(--mint-deep);background:var(--mint-soft);padding:4px 8px;border-radius:var(--r-pill);white-space:nowrap}
.consent li .lock svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.consent .btns{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.consent .btns span{font-size:12px;font-weight:700;padding:8px 14px;border-radius:var(--r-pill);border:1px solid var(--line)}
.consent .btns span.p{background:var(--ink);color:#fff;border-color:var(--ink)}
.espace{font-size:13px}
.espace .rw{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line)}
.espace .rw:first-child{border-top:0;padding-top:0}
.espace .rw b{display:block;font-weight:700}
.espace .rw small{display:block;font-size:12px;color:var(--faint);margin-top:1px}
.espace .rw .v{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.espace .rw .v.ok{color:var(--mint-deep)}
.espace .rw .danger{font-size:12px;font-weight:700;color:var(--rose);border:1px solid #EFC9C6;border-radius:var(--r-pill);padding:6px 11px;white-space:nowrap}
.espace .jr{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--paper);font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;display:flex;flex-direction:column;gap:5px}
.espace .jr span{display:flex;justify-content:space-between;gap:10px}
.espace .jr b{color:var(--ink)}
@media (max-width:900px){.dip{grid-template-columns:1fr}.dip .bcard{min-height:0}}
/* ── Questions ───────────────────────────────────────────────────────────────────────────────── */
.faq .grid{display:grid;grid-template-columns:1fr 1.4fr;gap:64px;align-items:start}
.faq .grid>div:first-child{position:sticky;top:120px}
.faq .lead{margin-top:16px}
.faq details{background:#fff;border:1px solid var(--line);border-radius:20px;margin-bottom:12px;overflow:hidden;transition:box-shadow .25s}
.faq details[open]{box-shadow:var(--sh-1)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 26px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;transition:transform .35s var(--ease)}
.faq summary .pm svg{width:14px;height:14px}
.faq summary .pm svg .v{transition:opacity .2s}
.faq details[open] summary .pm{transform:rotate(180deg)}
.faq details[open] summary .pm .v{opacity:0}
.faq details p{padding:0 26px 26px;color:var(--muted);font-size:17px;line-height:1.55;max-width:60ch;text-wrap:pretty}
@media (max-width:860px){.faq .grid{grid-template-columns:1fr;gap:28px}.faq .grid>div:first-child{position:static}.faq summary{padding:20px;font-size:17px}}
/* ── Le pied plein : la nuit bord à bord, et « kyras » en très grand, coupé par le bord ──────────── */
/* Plus de carte blanche qui flotte sur le ciel : le pied est une dalle de nuit qui monte sur l'aube (ses
coins arrondis laissent voir le sable), pleine largeur. En bas, le logotype de Kyras dessiné à la largeur
de la page, ton sur ton, que le bord de l'écran coupe sous la ligne des lettres. Chemins exacts du logo
(sans « by hint ») ; il ne se lit pas, il signe : `aria-hidden`, le logo nommé est en haut du pied. */
body>footer{position:relative;z-index:1;margin-top:-40px;background:var(--e0);color:#fff;border-radius:40px 40px 0 0;padding:104px 0 0;overflow:hidden}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:40px}
footer .about img{height:32px;width:auto}
footer .about p{margin-top:20px;color:rgba(255,255,255,.7);max-width:34ch;text-wrap:pretty}
footer .about .btn{margin-top:28px}
footer .ft{font-size:16px;font-weight:700;margin-bottom:14px;letter-spacing:-.01em;color:#fff}
footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:15px;color:rgba(255,255,255,.68)}
footer ul a{transition:color .18s}
footer ul a:hover{color:var(--mint)}
footer a:focus-visible{outline-color:var(--mint)}
footer .base{margin-top:72px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.6)}
footer .geant{max-width:1440px;margin:64px auto 0;padding:0 24px;margin-bottom:calc(min(100vw - 48px,1392px) * -.098)}
footer .geant svg{display:block;width:100%;height:auto}
footer .geant .lettres,footer .geant .m-clair{fill:rgba(255,255,255,.085)}
footer .geant .m-menthe,footer .geant .oeil{fill:rgba(128,232,192,.22)}
@media (max-width:900px){body>footer{margin-top:-28px;border-radius:28px 28px 0 0;padding-top:72px}footer .cols{grid-template-columns:1fr 1fr}footer .about{grid-column:1/-1}footer .base{margin-top:56px}footer .geant{margin-top:48px;padding:0 16px;margin-bottom:calc((100vw - 32px) * -.098)}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}