/* Coque de l'app membre. Registre ChatGPT : barre latérale claire, fil
   centré, composeur arrondi. Le membre arrive d'un funnel qui lui a vendu
   « une IA qui construit votre site » — l'interface doit tenir cette promesse
   au premier coup d'œil, avant même qu'il lise quoi que ce soit. */
*{box-sizing:border-box}
/* `[hidden]` a la même spécificité qu'une classe : n'importe quel
   `.promo{display:flex}` déclaré plus bas le neutralise silencieusement.
   Le bandeau de boost s'affichait ainsi à des membres sans site. */
[hidden]{display:none !important}
:root{
  --bg:#fff; --panel:#fff; --side:#f9f9f9; --side-ink:#0d0d0d; --side-ink-dim:#8f8f8f;
  --ink:#0d0d0d; --ink-2:#4b545c; --ink-3:#8f8f8f; --line:#e6e6e6; --line-2:#ececec;
  --accent:#1f6f5c; --accent-soft:#e8f2ee; --warn:#8a5a12; --warn-soft:#fdf3e0;
  --radius:12px; --shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Helvetica,Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Georgia,serif;
}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:#f4f4f4;border-radius:5px;padding:1px 5px}

.shell{display:grid;grid-template-columns:260px 1fr;height:100dvh;overflow:hidden}

/* --- barre latérale --- */
.side{background:var(--side);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:10px 8px;min-height:0}
.side-head{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 10px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:15px}
.brand-mark{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--accent);color:#fff;font-size:13px}
#closeSide{display:none}
.side-scroll{flex:1;min-height:0;overflow-y:auto;padding:0 2px}
.side-label{font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--side-ink-dim);padding:8px 8px 6px}
.convos{display:flex;flex-direction:column;gap:1px}
.convo{display:block;width:100%;text-align:left;background:none;border:0;border-radius:9px;
  padding:8px 9px;font-size:13.5px;color:var(--side-ink);overflow:hidden}
.convo:hover{background:#ececec}
.convo.on{background:#ececec}
.convo b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.convo small{color:var(--side-ink-dim);font-size:11.5px}

.side-tools,.side-user{display:flex;flex-direction:column;gap:1px;padding-top:8px}
.side-tools{border-top:1px solid var(--line)}
.side-user{border-top:1px solid var(--line);margin-top:8px}
.tool{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;
  border:0;border-radius:9px;padding:9px;font-size:13.5px;color:var(--side-ink)}
.tool:hover{background:#ececec}
.tool>span:nth-child(2){flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tool-i{width:20px;text-align:center}
.tool-x{color:var(--side-ink-dim);font-size:15px}
.avatar{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:11px;font-weight:600}

/* --- colonne principale --- */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg)}
.topbar{display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;flex:none}
.topbar-title{font-weight:600;font-size:15px}
.icon-btn{background:none;border:0;padding:6px 8px;border-radius:8px;color:var(--ink-2);font-size:15px}
.icon-btn:hover{background:#f2f2f2}
#burger{display:none}
.sound-btn{margin-left:auto}
.sound-btn.off{opacity:.4}
.chip{font-size:12px;font-weight:600;letter-spacing:.03em;padding:3px 10px;
  border-radius:999px;background:var(--accent-soft);color:var(--accent)}

.thread{flex:1;min-height:0;overflow-y:auto;padding:8px 20px;display:flex;flex-direction:column;gap:14px;scroll-behavior:smooth}
.thread>*{width:100%;max-width:760px;margin-inline:auto}

/* --- état vide, à la ChatGPT --- */
.hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:24px 0 40px;animation:fadeUp .45s ease both}
.hero h1{font-size:29px;font-weight:600;letter-spacing:-.02em;margin:0;text-align:center}
.hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:11px;width:100%;max-width:640px}
.hero-card{display:flex;align-items:center;gap:11px;background:var(--panel);border:1px solid var(--line);
  border-radius:13px;padding:15px 16px;text-align:left;font-size:14px;transition:.15s}
.hero-card:hover{border-color:#cfcfcf;background:#fafafa;transform:translateY(-1px)}
.hero-card .hc-i{font-size:16px;opacity:.75}
.msg{width:100%;animation:fadeUp .3s ease both}
.msg.user{display:flex;justify-content:flex-end}
.msg.user .bubble{max-width:min(75%,460px)}
.bubble{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:14px 16px;box-shadow:var(--shadow)}
.msg.user .bubble{background:var(--accent);color:#fff;border-color:transparent;box-shadow:none}
.note{background:var(--warn-soft);border:1px solid #f0e2c4;color:var(--warn);
  border-radius:var(--radius);padding:12px 15px;font-size:14px}

/* --- cartes --- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 4px;font-size:16px}
.card .sub{color:var(--ink-3);font-size:13.5px;margin:0 0 14px}
.kpi{font-size:30px;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-label{font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px}
table.data{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
table.data th{text-align:left;font-weight:500;color:var(--ink-3);font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;padding:0 10px 8px 0}
table.data td{padding:8px 10px 8px 0;border-top:1px solid var(--line)}
table.data td:not(:first-child),table.data th:not(:first-child){text-align:right}
.pill{display:inline-block;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px}
.pill.ok{background:var(--accent-soft);color:var(--accent)}
.pill.wait{background:#f0eee9;color:var(--ink-3)}
.blockers{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.blockers li{font-size:13.5px;color:var(--warn);display:flex;gap:8px}
.blockers li::before{content:"—";color:var(--ink-3)}

.actions{display:flex;flex-wrap:wrap;gap:8px}
.actions button{background:var(--panel);border:1px solid var(--line);border-radius:999px;
  padding:8px 15px;font-size:14px;color:var(--ink-2);box-shadow:var(--shadow)}
.actions button:hover{border-color:var(--accent);color:var(--accent)}
.btn-primary{background:var(--accent);color:#fff;border:0;border-radius:9px;padding:11px 20px;font-weight:600}
.btn-primary:hover{filter:brightness(1.08)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;filter:none}

.cmdlist{display:flex;flex-direction:column;gap:1px}
.cmdlist button{display:flex;gap:12px;background:none;border:0;text-align:left;padding:8px 10px;border-radius:7px}
.cmdlist button:hover{background:var(--accent-soft)}
.cmdlist code{color:var(--accent);font-weight:600;min-width:84px}
.cmdlist span{color:var(--ink-2);font-size:14px}

/* --- progression de création --- */
.bar{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin:14px 0 16px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .5s ease}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.steps li{font-size:14px;color:var(--ink-3);display:flex;gap:9px;align-items:baseline}
.steps li.done{color:var(--ink-2)}
.steps li.cur{color:var(--accent);font-weight:600}

/* --- générateur de logo --- */
.logos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.logopick{padding:0;border:2px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;aspect-ratio:1/1}
.logopick:hover:not(:disabled){border-color:var(--accent)}
.logopick:disabled{opacity:.5;cursor:progress}
.logopick img{width:100%;height:100%;object-fit:contain;display:block}
.logo-cur{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:13.5px;color:var(--ink-3)}
.logo-cur img{width:46px;height:46px;border-radius:10px;border:1px solid var(--line);background:#fff}

/* --- sélecteur de thème --- */
.themes{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.theme{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.theme:hover:not(.on):not(:disabled){border-color:var(--accent)}
.theme.on{border-color:var(--accent);background:var(--accent-soft)}
.theme:disabled{opacity:.55;cursor:progress}
.theme .sw{display:flex;flex:0 0 auto;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.theme .sw i{width:18px;height:34px;display:block}
.theme .tn{flex:1;min-width:0}
.theme .tn b{display:block;font-weight:600}
.theme .tn small{color:var(--ink-3);font-size:13px;line-height:1.4;display:block}

.shoprow{display:flex;align-items:center;gap:14px;padding:13px 0;border-top:1px solid var(--line)}
.shoprow:first-of-type{border-top:0}
.shoprow .n{flex:1;min-width:0}
.shoprow .n b{display:block;font-weight:600}
.shoprow .n small{color:var(--ink-3)}
.shoprow .p{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.shoprow .p s{color:var(--ink-3);font-size:13px;display:block}


/* --- composeur --- */
.composer-wrap{flex:none;padding:6px 20px 12px;background:linear-gradient(to top,var(--bg) 72%,transparent)}
.composer-wrap>*{width:100%;max-width:760px;margin-inline:auto}
.composer{display:flex;align-items:center;gap:6px;background:var(--panel);
  border:1px solid var(--line);border-radius:26px;padding:7px 8px 7px 6px;
  box-shadow:0 2px 10px rgba(0,0,0,.04);transition:.15s}
.composer:focus-within{border-color:#c8c8c8;box-shadow:0 3px 16px rgba(0,0,0,.07)}
.composer input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;padding:8px 4px}
.plus{font-size:19px;line-height:1;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:#f2f2f2;color:var(--ink-2);padding:0}
.plus:hover{background:#e8e8e8}
.send{width:34px;height:34px;border:0;border-radius:50%;background:var(--accent);color:#fff;
  display:grid;place-items:center;font-size:13px;flex:none;transition:.15s}
.send:hover{filter:brightness(1.1)}
.disclaimer{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-size:11.5px;color:var(--ink-3);margin:8px 0 0;padding:0 8px}
.disclaimer .dim{opacity:.8}

/* --- bandeau promotionnel au-dessus du composeur --- */
.promo{display:flex;align-items:center;gap:11px;background:var(--warn-soft);
  border:1px solid #f0e2c4;border-radius:13px;padding:10px 12px;margin-bottom:9px;
  animation:fadeUp .35s ease both}
.promo-i{font-size:17px}
.promo-t{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.promo-t b{font-size:13.5px;color:var(--warn)}
.promo-t small{font-size:12px;color:#a07a3a}
.promo-cta{background:#f0a63c;color:#3a2a08;border:0;border-radius:9px;
  padding:8px 13px;font-size:13px;font-weight:600;white-space:nowrap}
.promo-cta:hover{filter:brightness(1.06)}

/* --- bulle support --- */
.support-fab{position:fixed;right:20px;bottom:20px;z-index:40;border:0;border-radius:999px;
  background:var(--accent);color:#fff;padding:12px 18px;font-size:13.5px;font-weight:600;
  box-shadow:0 6px 22px rgba(31,111,92,.32)}
.support-fab:hover{filter:brightness(1.08);transform:translateY(-1px)}

.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.32);z-index:18}

@keyframes fadeUp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .shell{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:272px;z-index:20;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.14)}
  .side.open{transform:none}
  .scrim.on{display:block}
  #burger,#closeSide{display:block}
  .hero-cards{grid-template-columns:1fr}
  .hero h1{font-size:24px}
  .support-fab{bottom:auto;top:9px;right:12px;padding:8px 13px;font-size:12.5px}
}

/* --- confettis --- */
.confetti{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.confetti i{position:absolute;top:-14px;width:8px;height:13px;border-radius:2px;
  animation:fall linear forwards}
@keyframes fall{
  to{transform:translateY(105vh) rotate(760deg);opacity:.15}
}

/* --- fil d'étapes de la conversation de construction --- */
.onb-steps{display:flex;gap:6px;flex-wrap:wrap;margin:2px 0 6px}
.onb-step{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:var(--ink-3);background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:5px 11px;font-variant-numeric:tabular-nums;transition:.25s}
.onb-step b{font-weight:600}
.onb-step.cur{color:var(--accent);border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 0 0 3px rgba(31,111,92,.09)}
.onb-step.done{color:var(--accent);border-color:#cfe4dc}
.onb-step.just{animation:pop .4s ease}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.14)}100%{transform:scale(1)}}

/* --- félicitation entre deux étapes --- */
.cheer{display:flex;align-items:center;gap:10px;background:var(--accent-soft);
  border:1px solid #cfe4dc;border-radius:12px;padding:11px 14px;color:#155445;
  font-size:14px;font-weight:500;animation:fadeUp .3s ease both}
.cheer .cheer-i{font-size:17px;animation:pop .5s ease}

/* --- console de construction --- */
.buildlog{background:#0e1113;border-radius:12px;padding:14px 15px;margin-top:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
  color:#8fb3a8;max-height:190px;overflow:hidden;position:relative}
.buildlog div{opacity:0;animation:logIn .28s ease forwards;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.buildlog .ok{color:#49d19f}
.buildlog .num{color:#f0a63c;font-weight:600}
@keyframes logIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}

.bar{height:7px;background:#eceae5;border-radius:999px;overflow:hidden;margin:12px 0 14px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#49d19f);
  border-radius:999px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;font-size:13.5px}
.steps li{color:var(--ink-3);display:flex;gap:9px;align-items:center;transition:.3s}
.steps li.cur{color:var(--ink);font-weight:600}
.steps li.done{color:var(--accent)}
.steps li.done span:first-child{animation:pop .4s ease}

/* --- carte de révélation finale --- */
.reveal{border:1px solid #cfe4dc;background:linear-gradient(160deg,var(--accent-soft),#fff 70%);
  animation:fadeUp .5s ease both}
.reveal h3{font-family:var(--serif);font-size:23px;letter-spacing:-.01em}
.tally{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:12px;margin:14px 0}
.tally div{background:rgba(255,255,255,.75);border:1px solid #dfeae6;border-radius:10px;padding:10px 12px}
.tally b{display:block;font-size:21px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tally small{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}