/* Concept : un coffre-fort de contrats en colonne mobile (440 px max). Thème clair, fond blanc bleuté.
   Chaque contrat se lit comme une fiche : conditions en clair, résiliation, points d'attention, dates. */
:root{
  --canvas:#E2E8F0;
  --bg:#F1F5F9;
  --surface:#FFFFFF;
  --surface-2:#E8EEF5;
  --fg:#1F2937;
  --muted:#56637A;
  --line:#E2E8F0;
  --accent:#2563EB;
  --accent-fg:#FFFFFF;
  --accent-soft:#E0F2FE;
  --ok:#047857;--ok-bg:#D1FAE5;
  --warn:#B45309;--warn-bg:#FEF3C7;
  --bad:#B91C1C;--bad-bg:#FEE2E2;
  --c1:#2563EB;--c2:#10B981;--c3:#F59E0B;
  --font-display:'Poppins','Avenir Next','Segoe UI',system-ui,sans-serif;
  --font-body:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
html,body{height:100%}
body{background:var(--canvas);color:var(--fg);font:15px/1.45 var(--font-body);-webkit-text-size-adjust:100%}
*,*::before,*::after{box-sizing:border-box}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1,h2,h3,p,dl,dd,ul,ol{margin:0}
ul,ol{padding:0}

#app{height:100%;max-width:440px;margin:0 auto;display:flex;flex-direction:column;background:var(--bg)}
@media (min-width:480px){#app{border-inline:1px solid var(--line)}}

.demo{font:500 11px/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:7px 16px;background:var(--warn-bg);color:var(--warn)}
.top{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;color:var(--accent);font:700 21px/1 var(--font-display);letter-spacing:-.01em}
.brand span.word{color:var(--fg)}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font:600 12px var(--font-body);letter-spacing:.02em}

#screen{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden}
#screen.chatmode{overflow:hidden}
.pad{padding:16px;display:flex;flex-direction:column;gap:22px}

nav#nav{display:grid;grid-template-columns:repeat(5,1fr);background:var(--surface);border-top:1px solid var(--line);padding:6px 2px 8px}
nav#nav button{display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;padding:4px 0;color:var(--muted);font:600 11.5px var(--font-body);cursor:pointer;min-height:48px}
nav#nav button .pillbg{display:grid;place-items:center;width:46px;height:28px;border-radius:999px}
nav#nav button[aria-current="page"]{color:var(--accent)}
nav#nav button[aria-current="page"] .pillbg{background:var(--accent-soft)}

.ico{display:inline-grid;place-items:center;flex:none}
.ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
.ico.sm svg{width:14px;height:14px}

.eyebrow{font:500 11px/1.2 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.sm{font-size:13.5px}
.xs{font-size:12px}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.fine{font:400 11.5px/1.45 var(--font-mono);color:var(--muted)}

h1.hello{font:700 32px/1.05 var(--font-display);letter-spacing:-.02em;text-wrap:balance}
h1.page{font:700 26px/1.1 var(--font-display);letter-spacing:-.015em}
h2.sec{font:700 18px/1.2 var(--font-display);letter-spacing:-.005em;text-wrap:balance}
.sechead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.block{display:flex;flex-direction:column;gap:12px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:14px}
.watch{background:var(--bad-bg);border-color:transparent;padding:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.watch.soft{background:var(--accent-soft)}
.watch h2{font:700 19px/1.2 var(--font-display);color:var(--fg);text-wrap:balance}
.watch .eyebrow{color:var(--bad)}
.watch.soft .eyebrow{color:var(--accent)}

.btn{font:600 14px var(--font-body);padding:10px 16px;border-radius:10px;border:1px solid transparent;cursor:pointer;min-height:44px}
.btn.primary{background:var(--accent);color:var(--accent-fg)}
.btn.ghost{background:var(--surface);border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.55;cursor:not-allowed}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font:500 13px var(--font-body);padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);cursor:pointer;min-height:36px;text-align:left}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}

.ibox{width:40px;height:40px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:12px;padding:12px;width:100%;text-align:left;cursor:pointer}
.row .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.row .main strong{font-weight:600;overflow-wrap:anywhere}
.row .side{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.hit{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.hit b{color:var(--fg);font-weight:600}

.pill{display:inline-flex;align-items:center;gap:4px;font:600 12px/1.2 var(--font-body);padding:3px 9px 3px 6px;border-radius:999px;white-space:nowrap;flex:none;max-width:100%}
.pill .ico svg{width:13px;height:13px;stroke-width:2.2}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.bad{background:var(--bad-bg);color:var(--bad)}
.pill.neutral{background:var(--surface-2);color:var(--muted)}

/* Coût */
.sum{padding:16px;display:flex;flex-direction:column;gap:14px}
.sum .big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sum .big strong{font:700 34px/1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bar{display:flex;height:10px;border-radius:999px;overflow:hidden;background:var(--surface-2);gap:2px}
.bar i{display:block;height:100%}
.legend{display:flex;flex-direction:column;gap:8px}
.legend div{display:flex;align-items:center;gap:10px;font-size:13.5px}
.legend .sw{width:10px;height:10px;border-radius:3px;flex:none}
.legend .lbl{flex:1;min-width:0}
.legend .cnt{color:var(--muted)}
.engage{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line);padding-top:12px}

/* Dates */
.dates{display:flex;flex-direction:column;gap:10px}
.drow{display:flex;align-items:center;gap:12px;padding:10px 12px;width:100%;text-align:left;cursor:pointer}
.drow.static{cursor:default}
.dchip{width:46px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;background:var(--surface-2);padding:6px 0}
.dchip b{font:700 19px/1 var(--font-display);font-variant-numeric:tabular-nums}
.dchip span{font:500 10.5px/1.2 var(--font-mono);letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.drow .main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.drow .main strong{font-weight:600;font-size:14.5px;overflow-wrap:anywhere}

/* Recherche */
.searchbox{display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);min-height:46px}
.searchbox .ico{color:var(--muted)}
.searchbox input{flex:1;min-width:0;border:0;background:transparent;font:16px var(--font-body);color:var(--fg);padding:10px 0;outline:none}
.searchbox:focus-within{border-color:var(--accent)}
.searchbox input::placeholder{color:var(--muted)}
.catgroup{display:flex;flex-direction:column;gap:10px}
.empty{padding:20px 16px;text-align:center}

/* Fiche contrat */
.back{display:inline-flex;align-items:center;gap:4px;background:none;border:0;color:var(--accent);font:600 14px var(--font-body);padding:4px 0;cursor:pointer;align-self:flex-start;min-height:36px}
.dhead{display:flex;align-items:center;gap:12px}
.dhead .t{flex:1;min-width:0}
.dhead h1{font:700 23px/1.1 var(--font-display);letter-spacing:-.01em;overflow-wrap:anywhere}
.banner{padding:12px 14px;border-radius:12px;background:var(--accent-soft);font-size:13.5px}
.exit{padding:16px;display:flex;flex-direction:column;gap:12px}
.exit .head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14px}
.kv dt{font:500 10.5px/1.6 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:2px}
.kv dd{overflow-wrap:anywhere}
.cond{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.cond>div{padding:12px 14px;display:flex;flex-direction:column;gap:3px}
.cond>div+div{border-top:1px solid var(--line)}
.cond .k{font:500 10.5px/1.2 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.cond .v{overflow-wrap:anywhere}
.cond .s{font:400 11px/1.3 var(--font-mono);color:var(--muted)}
.list{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.list>*+*{border-top:1px solid var(--line)}
.attn li{list-style:none;display:flex;gap:10px;padding:11px 14px;align-items:flex-start}
.attn .ico{color:var(--warn);margin-top:1px}
.attn span{overflow-wrap:anywhere}
.gar summary{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;list-style:none}
.gar summary::-webkit-details-marker{display:none}
.gname{flex:1;min-width:0;font-weight:600;font-size:14.5px;overflow-wrap:anywhere}
.gar .chev{color:var(--muted);transition:transform .15s}
.gar[open] .chev{transform:rotate(90deg)}
.gbody{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.gdl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13.5px}
.gdl dt{color:var(--muted)}
.gdl dd{overflow-wrap:anywhere}
.gnote{font-size:13.5px}
.excl li{list-style:none;display:flex;gap:10px;padding:11px 14px;align-items:flex-start}
.excl .ico{color:var(--bad);margin-top:1px}
ol.steps{list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:s}
ol.steps li{display:flex;gap:12px;align-items:flex-start;counter-increment:s}
ol.steps li::before{content:counter(s);flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font:600 12px var(--font-mono)}
ol.steps li span{padding-top:1px}
.doc{display:flex;align-items:center;gap:10px;padding:11px 14px;color:var(--muted)}
.doc span.n{flex:1;min-width:0;color:var(--fg)}
.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 3px transparent}}

/* Ajout */
.tiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.tile{padding:12px 8px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;font-size:12.5px;color:var(--muted);border:1px dashed var(--line);border-radius:12px;background:var(--surface)}
.tile.on{border:1px solid var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600}
textarea#ctext{width:100%;min-height:180px;resize:vertical;font:15px/1.45 var(--font-body);padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--fg)}
textarea#ctext:focus{border-color:var(--accent);outline:none}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.msgline{padding:10px 12px;border-radius:10px;font-size:13.5px}
.msgline.err{background:var(--bad-bg);color:var(--bad)}
.msgline.info{background:var(--surface-2);color:var(--fg)}

/* Assistant */
.chat{display:flex;flex-direction:column;height:100%}
.chat .notice{padding:8px 16px;border-bottom:1px solid var(--line);background:var(--surface)}
.log{flex:1;min-height:0;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px}
.msg{display:flex;max-width:92%;min-width:0}
.msg.user{align-self:flex-end}
.msg.bot{align-self:flex-start}
.bubble{padding:10px 13px;border-radius:14px;min-width:0;overflow-wrap:anywhere}
.user .bubble{background:var(--accent);color:var(--accent-fg);border-bottom-right-radius:4px}
.bot .bubble{background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bubble p{width:100%}
.bubble ul{display:flex;flex-direction:column;gap:4px;padding-left:18px;width:100%}
.bubble .note{font:400 11.5px/1.4 var(--font-mono);color:var(--muted)}
.srcs{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding-top:2px}
.src{font:500 12px var(--font-body);padding:4px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);color:var(--fg);cursor:pointer}
.src:hover{border-color:var(--accent);color:var(--accent)}
.wait{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px}
.typing{display:inline-flex;gap:4px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1.2s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
@media (prefers-reduced-motion:reduce){.typing i{animation:none;opacity:.6}.gar .chev{transition:none}.flash{animation:none;box-shadow:0 0 0 3px var(--accent)}}
.qrow{display:flex;gap:8px;overflow-x:auto;padding:8px 12px;border-top:1px solid var(--line);background:var(--bg)}
.qrow .chip{flex:none}
.composer{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line);background:var(--surface)}
.composer input{flex:1;min-width:0;font:16px var(--font-body);padding:10px 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--fg)}
.composer input::placeholder{color:var(--muted)}
.composer button{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;cursor:pointer;flex:none}
.composer button:disabled,.composer input:disabled{opacity:.55;cursor:not-allowed}

/* Comparer */
.cmp{padding:16px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.cmphead{display:flex;justify-content:space-between;gap:12px;align-items:baseline;width:100%}
.switch{padding:14px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.offer{padding:14px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.ohead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;width:100%}
.otitle{display:flex;flex-direction:column;gap:2px;min-width:0}
.otitle strong{overflow-wrap:anywhere}
.oprice{display:flex;flex-direction:column;align-items:flex-end;flex:none}
.pc{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px;width:100%}
.pc li{display:flex;gap:8px;align-items:flex-start}
.pc li span:last-child{overflow-wrap:anywhere;min-width:0}
.pc.pro .ico{color:var(--ok)}
.pc.con .ico{color:var(--warn)}
.pc .ico{margin-top:2px}
.offer .btn{align-self:stretch}

/* Dossiers */
.row.picked{border-color:var(--accent);background:var(--accent-soft)}
.fields{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:4px}
.field .lbl{font:500 12.5px/1.3 var(--font-body);color:var(--muted)}
.field input,.field select,.field textarea,textarea.ta{width:100%;font:16px/1.4 var(--font-body);padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--fg)}
.field input:focus,.field select:focus,.field textarea:focus,textarea.ta:focus{border-color:var(--accent);outline:none}
.field input:disabled,.field select:disabled,.field textarea:disabled,textarea.ta:disabled{background:var(--surface-2);color:var(--muted)}
textarea.ta{min-height:320px;resize:vertical;font-size:14px;line-height:1.5}
.dready{padding:14px;display:flex;flex-direction:column;gap:10px}
.rhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.miss{list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13.5px}
.miss li{display:flex;gap:8px;align-items:flex-start;color:var(--warn)}
.miss li .ico{margin-top:2px}
.piece{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px}
.pchk{display:flex;gap:10px;align-items:flex-start;min-width:0;flex:1;cursor:pointer}
.pchk input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent);flex:none}
.ptxt{display:flex;flex-direction:column;min-width:0;gap:1px;overflow-wrap:anywhere}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.minibtn{display:inline-flex;align-items:center;gap:4px;position:relative;font:600 12.5px var(--font-body);padding:6px 10px;border:1px solid var(--accent);color:var(--accent);border-radius:999px;cursor:pointer;flex:none;background:var(--surface)}
.minibtn:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.btn.withicon{display:inline-flex;align-items:center;justify-content:center;gap:6px}
.actions .btn{flex:1 1 auto}
.sub{font:500 11px/1.2 var(--font-mono);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);padding-top:4px}

/* Charte : bleu, vert, orange · Poppins et Inter · cartes arrondies */
.card,.list,.cond{box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 22px -14px rgba(37,99,235,.28)}
.card,.list,.cond{border-radius:16px}
.btn{border-radius:12px}
h1.hello{font-size:28px;line-height:1.1}
h1.page{font-size:24px}
h2.sec{font-size:17px}
.fine,.sub,.eyebrow,.dchip span,.cond .k,.kv dt{letter-spacing:.04em}
.brand svg{width:30px;height:30px;display:block}
.brand{gap:9px}
.ibox{border-radius:12px}
.ibox.assur{background:#DBEAFE;color:#2563EB}
.ibox.energie{background:#D1FAE5;color:#047857}
.ibox.abo{background:#FEF3C7;color:#B45309}
.hero{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:16px;border:0;border-radius:20px;color:#fff;cursor:pointer;background:linear-gradient(120deg,#1D4ED8 0%,#2563EB 48%,#0E8F83 100%);box-shadow:0 14px 26px -14px rgba(37,99,235,.7)}
.hero .logo{width:50px;height:50px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none}
.hero .logo svg{width:30px;height:30px;display:block}
.hero .t{display:flex;flex-direction:column;gap:2px;min-width:0}
.hero .t strong{font:700 22px/1.1 var(--font-display)}
.hero .t span{font-size:14px;opacity:.95}
.hero>.ico{margin-left:auto}
.hero>.ico svg{stroke:#fff}
.tiles2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile2{display:flex;flex-direction:column;gap:10px;align-items:flex-start;text-align:left;padding:14px;border:1px solid transparent;border-radius:16px;cursor:pointer;min-width:0}
.tile2.assur{background:#E8F0FE}
.tile2.energie{background:#E3F6EE}
.tile2.abo{background:#FDF1DA}
.tile2 .ibox{background:#fff}
.tile2 strong{font:600 14px/1.25 var(--font-body);overflow-wrap:anywhere}
.tile2 .p{font-size:13px;color:var(--muted)}
.tile2:hover{border-color:var(--accent)}
/* ---- Ajouts bêta ---- */
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.field label{font:600 13px var(--font-body);color:var(--fg)}
.field input,.field select,.field textarea{font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--fg);width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.field .hint{font-size:12px;color:var(--muted)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--fg);margin:8px 0 14px}
.check input{margin-top:3px;width:18px;height:18px;flex:none}
.avatar{border:0;cursor:pointer}
.btn.danger{color:var(--bad);border-color:var(--bad);background:transparent}
.hero-login{text-align:center;padding:28px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-login svg{width:56px;height:56px}
.devlink{word-break:break-all;font:12px var(--font-mono);background:var(--surface-2);padding:10px;border-radius:10px}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:10px}