@font-face{font-family:Outfit;font-weight:400;font-display:swap;src:url(fonts/outfit-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:Outfit;font-weight:500;font-display:swap;src:url(fonts/outfit-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:Outfit;font-weight:700;font-display:swap;src:url(fonts/outfit-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC}
@font-face{font-family:Outfit;font-weight:400;font-display:swap;src:url(fonts/outfit-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+1E00-1EFF}
:root{
  --nuit:#1d0659;--indigo:#2a0a73;--violet:#6a1fc9;--lilas:#a66bf0;--brume:#e6dbf8;--voile:#f5f0fc;
  --encre:#1e1238;--gris:#655a7c;--blanc:#fff;--or:#e9b44c;--vert:#14805e;--rouge:#c62c47;
  --r:10px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--voile);color:var(--encre);font:400 16px/1.55 Outfit,"Segoe UI",system-ui,sans-serif}
h1,h2,h3{line-height:1.2;margin:0}
h1{font-size:2.1rem;font-weight:700;color:var(--indigo)}
h2{font-size:1.15rem;font-weight:700;color:var(--indigo)}
a{color:var(--violet)}
:focus-visible{outline:3px solid var(--or);outline-offset:2px}
small{color:var(--gris)}

.shell{display:grid;grid-template-columns:268px 1fr;height:100vh;height:100dvh}
.side{position:relative;display:flex;flex-direction:column;gap:18px;padding:18px 26px 16px 14px;color:#fff;background:linear-gradient(170deg,var(--indigo),var(--nuit));min-height:0}
/* Bande tissée inspirée des triangles du cuir de Zinder, reliée aux nœuds du logo. */
.side::after{content:"";position:absolute;top:0;bottom:0;right:0;width:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24'%3E%3Cpath d='M0 0l12 12L0 24z' fill='%23a66bf0'/%3E%3Cpath d='M12 0v12L6 6zM12 12v12l-6-6z' fill='%23e9b44c'/%3E%3C/svg%3E")}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700;font-size:1.08rem}
.tile{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:10px;background:#fff}
.tile img{width:36px;height:36px}
.side nav{display:grid;gap:1px}
.side nav a{display:flex;justify-content:space-between;align-items:center;padding:7px 10px;border-radius:7px;color:#e7dcfa;text-decoration:none}
.side nav a:hover{background:#ffffff14}
.side nav a[aria-current]{background:#fff;color:var(--indigo);font-weight:500}
.badge{background:var(--or);color:var(--nuit);border-radius:9px;padding:0 7px;font-size:.8rem}
.convs{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;border-top:1px solid #ffffff24;padding-top:12px}
.new{border:1px dashed #ffffff66;background:none;color:#fff;border-radius:7px;padding:7px;font:inherit;cursor:pointer}
.new:hover{background:#ffffff14}
#convList{list-style:none;margin:0;padding:0;overflow:auto;flex:1}
#convList li{display:flex}
.open{flex:1;min-width:0;text-align:left;background:none;border:0;color:#d9cbf4;font:inherit;font-size:.92rem;padding:5px 8px;border-radius:6px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.open:hover{color:#fff}.open.on{background:#ffffff1f;color:#fff}
.del{background:none;border:0;color:#b9a4e2;cursor:pointer;font-size:1.05rem;padding:0 7px}
.del:hover{color:#fff}
.who{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:.88rem;margin-top:auto}
.who .link{color:#d9cbf4}
.main{min-width:0;min-height:0;overflow:auto}

.btn{display:inline-block;border:1px solid transparent;border-radius:8px;padding:8px 16px;font:500 .97rem Outfit,sans-serif;cursor:pointer;text-decoration:none}
.btn.primary{background:var(--violet);color:#fff}
.btn.primary:hover{background:var(--indigo)}
.btn:disabled{opacity:.55;cursor:wait}
.btn.ghost{background:#fff;border-color:var(--brume);color:var(--indigo)}
.btn.ghost:hover{border-color:var(--lilas)}
.link{background:none;border:0;padding:0;color:var(--violet);font:inherit;font-size:.9rem;cursor:pointer;text-decoration:underline;text-underline-offset:2px}

.chat{display:flex;flex-direction:column;height:100%}
.thread{flex:1;overflow:auto;padding:28px max(24px,calc(50% - 400px)) 12px}
.welcome{padding-top:9vh}
.welcome h1{font-size:clamp(2.6rem,6vw,4.4rem);letter-spacing:-.02em}
.welcome>p{font-size:1.2rem;color:var(--gris);margin:.4em 0 1.4em}
.today{border-left:4px solid var(--or);padding:2px 0 2px 14px;margin-bottom:22px}
.today p{margin:2px 0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button{background:#fff;border:1px solid var(--brume);border-radius:20px;padding:7px 15px;color:var(--indigo);font:inherit;cursor:pointer}
.chips button:hover{border-color:var(--violet)}
.msg{margin:0 0 16px;max-width:100%}
.msg.user{margin-left:auto;width:fit-content;max-width:82%;background:var(--violet);color:#fff;padding:9px 14px;border-radius:14px 14px 3px 14px;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.user p{margin:0}.msg .att{font-size:.85rem;opacity:.85}
.msg.bot{overflow-wrap:anywhere}
.body p{margin:0 0 .65em}.body ul,.body ol{margin:0 0 .7em;padding-left:1.3em}
.body h3{font-size:1.08rem;color:var(--indigo);margin:1em 0 .35em}
.body code{background:var(--brume);padding:1px 5px;border-radius:4px;font:.9em Consolas,Menlo,monospace}
.code{position:relative;margin:0 0 .8em}
.code pre{margin:0;background:var(--nuit);color:#ece4fb;padding:14px;border-radius:var(--r);overflow:auto}
.code code{background:none;padding:0}
.copy{position:absolute;top:7px;right:7px;background:#ffffff24;border:0;color:#fff;border-radius:5px;padding:2px 8px;cursor:pointer;font:inherit;font-size:.8rem}
.steps{list-style:none;padding:0;margin:0 0 10px;font-size:.88rem;color:var(--gris)}
.steps li{padding-left:15px;position:relative}
.steps li::before{content:"";position:absolute;left:2px;top:.55em;width:7px;height:7px;border:2px solid var(--lilas);border-radius:50%}
.sources{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.88rem;margin-bottom:6px}
.sources strong{width:100%}
.approval{border:2px solid var(--or);background:#fff;border-radius:var(--r);padding:14px 16px;margin:0 0 16px}
.approval h3{color:var(--indigo);font-size:1.08rem;margin-bottom:8px}
.approval dl{margin:0 0 12px;display:grid;grid-template-columns:max-content 1fr;gap:3px 12px}
.approval dt{color:var(--gris)}.approval dd{margin:0;min-width:0;overflow-wrap:anywhere}
.approval dd.long{grid-column:1/-1;white-space:pre-wrap;background:var(--voile);padding:9px;border-radius:7px;max-height:300px;overflow:auto}
.actions{display:flex;gap:8px}
.thinking{padding:0 max(24px,calc(50% - 400px)) 6px;color:var(--violet);font-weight:500}
.composer{margin:0 max(16px,calc(50% - 408px)) 16px;background:#fff;border:1px solid var(--brume);border-radius:14px;padding:10px}
.composer:focus-within{border-color:var(--lilas)}
.composer textarea{width:100%;border:0;outline:0;resize:none;font:inherit;background:none;color:inherit;display:block}
.tools{display:flex;justify-content:flex-end;gap:6px;margin-top:6px}
.tools .btn{padding:6px 12px}
.filechip{display:flex;justify-content:space-between;font-size:.9rem;padding:0 2px 6px}
[hidden]{display:none!important}

.page{max-width:1020px;margin:0 auto;padding:30px 24px 50px}
.page.narrow{max-width:700px}
.page>h1,.head{margin-bottom:18px}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.head.sub{margin:26px 0 8px}
.lead{color:var(--gris);margin:-10px 0 18px}
.split{display:grid;grid-template-columns:1fr 300px;gap:26px;align-items:start}
.panel,fieldset{background:#fff;border:1px solid var(--brume);border-radius:var(--r);padding:16px}
.panel{display:grid;gap:10px}
fieldset{margin:0 0 16px;display:grid;gap:10px}
legend{font-weight:700;color:var(--indigo);padding:0 6px}
label{display:grid;gap:3px;font-size:.93rem;font-weight:500}
input,select,textarea{font:inherit;color:inherit}
label input:not([type=checkbox]),label select,label textarea{width:100%;font-weight:400;padding:8px 10px;border:1px solid #cdbfe6;border-radius:7px;background:#fff}
label.check{display:flex;gap:8px;align-items:center;font-weight:400}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hint{font-size:.87rem;color:var(--gris);margin:0}
.empty{color:var(--gris)}
.day{margin:18px 0 6px;font-size:1rem}.day:first-child{margin-top:0}
.day::first-letter{text-transform:uppercase}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:start;background:#fff;border-left:3px solid var(--lilas);border-radius:0 8px 8px 0;padding:10px 12px;margin-bottom:6px}
.row time{font-weight:700;color:var(--violet)}
.row p{margin:0}.meta{font-size:.88rem;color:var(--gris);overflow-wrap:anywhere}
.err{color:var(--rouge);font-size:.9rem}
.site .dot{width:12px;height:12px;border-radius:50%;margin-top:6px;background:#a79cbc}
.site.en_ligne{border-left-color:var(--vert)}.site.en_ligne .dot{background:var(--vert)}
.site.en_panne{border-left-color:var(--rouge)}.site.en_panne .dot{background:var(--rouge)}
.state{font-size:.86rem;color:var(--gris)}
.inline{display:flex;gap:8px;margin-bottom:18px}
.inline input{flex:1;min-width:0;padding:8px 10px;border:1px solid #cdbfe6;border-radius:7px}
.plain{list-style:none;margin:0;padding:0}
.plain li{padding:7px 0;border-bottom:1px solid var(--brume)}
.plain li.new{font-weight:500}
.plain time{color:var(--gris);font-size:.87rem;margin-right:6px}
.mem{display:flex;justify-content:space-between;gap:12px;align-items:center}
.mem span{min-width:0;overflow-wrap:anywhere}
.tablewrap{overflow:auto;background:#fff;border:1px solid var(--brume);border-radius:var(--r)}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{padding:8px 11px;text-align:left;border-bottom:1px solid var(--brume);white-space:nowrap}
th{color:var(--indigo)}.clip{max-width:320px;overflow:hidden;text-overflow:ellipsis}
.notice{border-radius:8px;padding:9px 13px;margin:0 0 12px;font-size:.95rem}
.notice.bad{background:#fbe6ea;color:#8f1630}.notice.good{background:#def3ec;color:#0c5a42}.notice.warn{background:#fbf0d6;color:#6e4e05}

body.auth{display:grid;place-items:center;min-height:100%;padding:16px;background:linear-gradient(170deg,var(--indigo),var(--nuit))}
.auth-box{width:min(380px,100%);background:#fff;border-radius:14px;padding:24px;display:grid;gap:12px}
.auth-box.wide{width:min(520px,100%)}
.auth-box form{display:grid;gap:11px}
.auth-box h1{font-size:1.6rem;text-align:center}
.auth-logo{width:150px;margin:0 auto;height:auto}

/* Fil de travail vivant : les trois nœuds du logo s'allument tour à tour. */
.thinking{display:flex;align-items:center;gap:9px}
.thinking::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--violet);box-shadow:15px 0 0 var(--lilas),30px 0 0 var(--or);margin-right:30px;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.install{margin-top:auto}
.install+.who{margin-top:0}
.center{justify-self:center;text-align:center}
.btn.gold{background:var(--or);color:var(--nuit)}.btn.gold:hover{background:#f2c465}
.btn.light{background:#fff;color:var(--indigo)}
.panel.top{margin-top:18px}
input[readonly]{background:var(--voile)!important;font-size:.85rem}

.voice{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px;text-align:center;color:#fff;background:radial-gradient(circle at 50% 42%,var(--violet),var(--nuit) 68%)}
.orb{display:grid;place-items:center;width:172px;height:172px;border-radius:50%;background:#fff;box-shadow:0 0 0 12px #ffffff24}
.orb img{width:112px;height:112px}
.orb.listening{animation:breathe 1.6s ease-in-out infinite}
.orb.working{animation:breathe .8s ease-in-out infinite}
.orb.speaking{box-shadow:0 0 0 12px #e9b44c88;animation:breathe 1.1s ease-in-out infinite}
@keyframes breathe{50%{transform:scale(1.07);box-shadow:0 0 0 26px #ffffff12}}
.voice-state{font-size:1.5rem;font-weight:700;margin:12px 0 0}
.voice-text{max-width:560px;min-height:3.2em;margin:0;color:#e7dcfa}

body.land{background:var(--nuit);color:#fff;height:auto}
.land-top{display:flex;justify-content:space-between;align-items:center;gap:12px;max-width:1120px;margin:auto;padding:18px 24px}
.land-top .btn{padding:7px 14px}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;max-width:1120px;margin:auto;padding:40px 24px 70px}
.hero h1{color:#fff;font-size:clamp(2.5rem,5.4vw,4.3rem);letter-spacing:-.02em;line-height:1.05}
.hero-text p{font-size:1.2rem;color:#e0d3f7;max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.demo{margin:0;background:var(--voile);color:var(--encre);border-radius:16px;padding:18px;box-shadow:0 0 0 7px #a66bf03d}
.demo figcaption{font-size:.85rem;color:var(--gris);margin-bottom:12px}
.demo>*:not(figcaption){opacity:0;animation:rise .5s ease forwards}
.demo .steps{animation-delay:.9s}.demo .bot{animation-delay:1.9s}.demo .approval{animation-delay:3s;margin:0}
.demo .user{animation-delay:.2s}
.demo .approval p{margin:0;color:var(--gris)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.does,.trust{background:var(--voile);color:var(--encre);padding:54px max(24px,calc(50% - 536px))}
.does h2,.trust h2{font-size:1.9rem}
.does dl{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 34px;margin:26px 0 0}
.does dt{font-weight:700;font-size:1.15rem;color:var(--violet)}
.does dd{margin:2px 0 0}
.trust{background:var(--indigo);color:#fff;padding-block:44px}
.trust h2{color:#fff}.trust p{max-width:44em;margin:10px 0 0;color:#e0d3f7}
.land-foot{text-align:center;padding:20px;color:#d9cbf4}

@media (max-width:820px){
  .hero{grid-template-columns:minmax(0,1fr);gap:30px;padding-top:16px}
  .does dl{grid-template-columns:1fr 1fr}
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .side{min-width:0}
  .side{padding:10px 12px 12px;gap:8px}
  .side::after{top:auto;left:0;width:auto;height:8px;background-size:8px 16px;transform:none;background:linear-gradient(90deg,var(--lilas),var(--or))}
  .side nav{display:flex;overflow:auto;gap:2px}
  .side nav a{white-space:nowrap;padding:5px 9px;font-size:.92rem}
  .convs{display:none}
  .who{position:absolute;top:18px;right:12px;margin:0}.who span{display:none}
  .split{grid-template-columns:1fr}
  .page{padding:20px 16px 40px}
  .welcome{padding-top:3vh}
  .msg.user{max-width:92%}
}
@media (max-width:480px){.does dl{grid-template-columns:1fr}.tools{flex-wrap:wrap}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.demo>*{opacity:1!important}}