:root{
  --violet:#7030A0;
  --violet-dark:#4E2170;
  --blue:#00B0F0;
  --navy:#1A1A2E;
  --text:#3D3D4E;
  --caption:#888888;
  --line:#E6E2EA;
  --red:#D62839;
  --red-dark:#A81F2D;
  --paper:#FAF9FB;
  --white:#FFFFFF;
  --font:'Readex Pro',system-ui,sans-serif;
  --r:8px;
  --r-card:12px;
  --rail:238px;
  --mesure:95ch;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  background:var(--paper);
  color:var(--text);
  font-size:14px;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;font-size:inherit;cursor:pointer}
a{color:inherit}
.mono{font-family:ui-monospace,monospace}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ---------- structure ---------- */
.shell{display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh}
.rail{background:var(--navy);color:#fff;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:24px 20px 20px;border-bottom:1px solid rgba(255,255,255,.14)}
.brand .logo{display:flex;align-items:baseline;gap:8px}
.brand .logo b{font-size:22px;font-weight:700;letter-spacing:-.02em;color:#fff}
.brand .logo span{font-size:12px;color:rgba(255,255,255,.6)}
.brand p{margin:8px 0 0;font-size:12px;color:rgba(255,255,255,.6);line-height:1.5}
.nav{padding:16px 12px;flex:1}
.nav button{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:none;border:0;color:rgba(255,255,255,.78);padding:9px 11px;
  border-radius:var(--r);font-size:13.5px;margin-bottom:2px;transition:background .15s,color .15s;
}
.nav button:hover{background:rgba(255,255,255,.08);color:#fff}
.nav button.on{background:var(--violet);color:#fff;font-weight:500}
.nav .ic{width:16px;text-align:center}
.nav .grp{font-size:11px;color:rgba(255,255,255,.4);padding:16px 11px 6px}
.railfoot{padding:16px 20px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:rgba(255,255,255,.6)}
.railfoot strong{color:#fff;font-weight:600;display:block;font-size:13px}

.top{
  background:var(--white);border-bottom:1px solid var(--line);
  padding:0 28px;display:flex;align-items:center;gap:18px;min-height:62px;
  position:sticky;top:0;z-index:20;
}
.crumb{font-size:13px;color:var(--caption);flex:1;min-width:0}
.crumb b{color:var(--navy);font-weight:600}
.who{display:flex;align-items:center;gap:10px}
.who label{font-size:12px;color:var(--caption)}
.who .me{display:flex;flex-direction:column;line-height:1.3;text-align:right}
.who .me b{font-size:13.5px;font-weight:500;color:var(--navy)}
.who .me span,.who .me{font-size:11.5px;color:var(--caption)}
.impers{background:var(--blue);color:#fff;font-size:11.5px;font-weight:500;padding:4px 12px;border-radius:999px;white-space:nowrap}
select{
  font-family:var(--font);font-size:13px;padding:8px 11px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--white);color:var(--text);min-width:250px;
}
.orgtag{font-size:11.5px;padding:4px 10px;border-radius:999px;font-weight:500;white-space:nowrap}
.org-dmf{background:var(--violet);color:#fff}
.org-pre{background:var(--white);color:var(--violet);border:1px solid var(--violet)}
.org-upc{background:var(--navy);color:#fff}

.page{padding:28px 28px 64px;max-width:1300px}
h1{font-size:32px;font-weight:700;color:var(--violet);letter-spacing:-.02em;margin:0 0 6px;line-height:1.25}
h2{font-size:20px;font-weight:600;color:var(--navy);margin:0 0 4px;line-height:1.3}
h3{font-size:15px;font-weight:600;color:var(--violet);margin:0 0 4px;line-height:1.35}
.sub{color:var(--caption);font-size:14px;margin:0 0 24px;max-width:var(--mesure)}
.lead{color:var(--caption);font-size:13px;margin:0 0 14px;max-width:var(--mesure)}
.sec{margin-top:36px}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card)}
.pad{padding:20px}

/* ---------- indicateurs ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.kpi{background:var(--navy);border-radius:var(--r-card);padding:18px 20px;color:#fff}
.kpi .n{font-size:34px;font-weight:700;color:var(--blue);line-height:1.1;letter-spacing:-.02em}
.kpi .l{font-size:12.5px;color:rgba(255,255,255,.72);margin-top:4px}
.kpi.warn .n{color:var(--red)}
.kpi.plain{background:var(--white);border:1px solid var(--line)}
.kpi.plain .n{color:var(--violet)}
.kpi.plain .l{color:var(--caption)}

/* ---------- tableaux ---------- */
table{width:100%;border-collapse:collapse;background:var(--white)}
th{
  text-align:left;font-size:12px;font-weight:500;color:var(--caption);
  padding:13px 16px;border-bottom:1px solid var(--line);white-space:nowrap;
}
td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:13.5px}
tr:last-child td{border-bottom:0}
tr.row{cursor:pointer;transition:background .15s}
tr.row:hover td{background:var(--paper)}
.opname{font-weight:500;color:var(--navy)}
.opmeta{font-size:12px;color:var(--caption);margin-top:2px}

.nat{font-size:11.5px;font-weight:500;padding:3px 9px;border-radius:var(--r);white-space:nowrap;border:1px solid}
.nat-N{color:var(--violet);border-color:var(--violet)}
.nat-R{color:var(--navy);border-color:var(--navy)}
.nat-D{color:var(--navy);border-color:var(--blue)}
.nat-A,.nat-M{color:var(--caption);border-color:var(--line)}

.bar{height:6px;background:var(--line);border-radius:999px;overflow:hidden;min-width:92px}
.bar i{display:block;height:100%;background:var(--violet);border-radius:999px}
.bar.low i{background:var(--red)}
.bar.data i{background:var(--blue)}
.pct{font-size:12px;font-weight:500;margin-top:4px;color:var(--caption)}
.flag{font-size:12px;color:var(--red-dark);font-weight:500}
.flag.none{color:var(--caption);font-weight:400}

/* ---------- carotte de phases ---------- */
.spine{display:flex;gap:6px;overflow-x:auto;padding:6px 0 12px}
.ph{flex:0 0 auto;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:7px;width:108px}
.hex{
  width:90px;height:78px;display:grid;place-items:center;
  clip-path:polygon(25% 2%,75% 2%,100% 50%,75% 98%,25% 98%,0 50%);
  background:var(--line);color:var(--caption);font-size:11.5px;font-weight:500;
  text-align:center;padding:0 10px;line-height:1.25;
}
.ph.done .hex{background:var(--navy);color:#fff}
.ph.now .hex{background:var(--violet);color:#fff;font-weight:600}
.ph.locked .hex{background:var(--paper);color:var(--caption);opacity:.7}
.ph .st{font-size:11px;color:var(--caption)}
.ph.now .st{color:var(--violet);font-weight:500}
.ph.sel .hex{outline:2px solid var(--blue);outline-offset:2px}
.ph:disabled{cursor:default}

/* ---------- documents ---------- */
.two{display:grid;grid-template-columns:1fr 348px;gap:18px;align-items:start}
.doc{display:flex;gap:14px;padding:15px 20px;border-bottom:1px solid var(--line);align-items:flex-start}
.doc:last-child{border-bottom:0}
.doc .code{
  flex:0 0 auto;font-family:ui-monospace,monospace;font-size:11.5px;
  background:var(--paper);color:var(--violet);border:1px solid var(--line);
  padding:3px 7px;border-radius:var(--r);margin-top:2px;min-width:38px;text-align:center;
}
.doc .body{flex:1;min-width:0}
.doc .t{font-weight:500;font-size:14px;color:var(--navy);line-height:1.4}
.doc .d{font-size:12.5px;color:var(--caption);margin-top:4px;max-width:64ch}
.doc .tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px;align-items:center}
.doc .act{flex:0 0 auto;display:flex;flex-direction:column;gap:7px;align-items:flex-end}

.lvl{font-size:11px;font-weight:500;padding:3px 9px;border-radius:var(--r);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;border:1px solid transparent}
.lvl-interne{background:var(--navy);color:#fff}
.lvl-consultation{background:var(--violet);color:#fff}
.lvl-projet{background:var(--white);color:var(--violet);border-color:var(--violet)}
.lvl-public{background:var(--white);color:var(--caption);border-color:var(--line)}
.aud{font-size:11px;color:var(--caption);background:var(--paper);border:1px solid var(--line);padding:3px 9px;border-radius:var(--r)}

.state{font-size:11.5px;font-weight:500;padding:4px 11px;border-radius:999px;white-space:nowrap;border:1px solid}
.s-ok{background:var(--white);color:var(--navy);border-color:var(--navy)}
.s-wait{background:var(--blue);color:#fff;border-color:var(--blue)}
.s-late{background:var(--red);color:#fff;border-color:var(--red)}
.s-todo{background:var(--white);color:var(--caption);border-color:var(--line)}

.btn{
  border:1px solid var(--line);background:var(--white);color:var(--text);
  padding:6px 13px;border-radius:var(--r);font-size:12.5px;font-weight:400;white-space:nowrap;
  transition:border-color .15s,background .15s,color .15s;
}
.btn:hover{border-color:var(--violet);color:var(--violet)}
.btn.pri{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:500}
.btn.pri:hover{background:var(--violet-dark);border-color:var(--violet-dark);color:#fff}
.btn.cta{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:500}
.btn.cta:hover{background:var(--blue);color:#fff}

.masked{
  display:flex;gap:12px;align-items:flex-start;padding:16px 20px;
  background:var(--paper);
  border-top:1px solid var(--line);font-size:12.5px;color:var(--caption);
}
.masked b{color:var(--navy);font-weight:500}
.masked .lock{color:var(--navy)}

.panel{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;margin-bottom:16px}
.panel .note{font-size:12.5px;color:var(--caption);margin:0 0 14px}
.who-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.who-row:last-of-type{border-bottom:0}
.who-row .n{font-weight:500;color:var(--navy)}
.who-row .m{font-size:11.5px;color:var(--caption)}
.linkbox{
  background:var(--paper);border:1px dashed var(--line);border-radius:var(--r);
  padding:11px 12px;font-family:ui-monospace,monospace;font-size:11.5px;
  color:var(--violet);word-break:break-all;margin-top:12px;
}

/* ---------- barre d\u2019outils ---------- */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.toolbar .search{
  flex:1;min-width:240px;font-family:var(--font);font-size:13.5px;padding:10px 14px;
  border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--text);
}
.toolbar .search:focus{border-color:var(--violet);outline:none}
.toolbar select{min-width:180px;width:auto}
.btn.sm{padding:4px 10px;font-size:11.5px}
.btn.sm+.btn.sm{margin-left:6px}

/* ---------- filtres ---------- */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.chip{border:1px solid var(--line);background:var(--white);padding:6px 14px;border-radius:999px;font-size:12.5px;color:var(--text);transition:.15s}
.chip:hover{border-color:var(--violet);color:var(--violet)}
.chip.on{background:var(--violet);border-color:var(--violet);color:#fff;font-weight:500}
.fsep{width:1px;height:22px;background:var(--line);margin:0 5px}

/* ---------- matrice ---------- */
.matrix{overflow-x:auto}
.matrix table{min-width:800px}
.matrix td{text-align:center;font-size:12.5px}
.matrix td:first-child,.matrix th:first-child{text-align:left;font-weight:500;color:var(--navy)}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%}
.d-yes{background:var(--violet)}
.d-part{background:var(--blue)}
.d-no{background:var(--line)}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:12.5px;color:var(--caption);align-items:center}
.legend span{display:inline-flex;align-items:center;gap:7px}

/* ---------- divers ---------- */
.hint{
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--blue);
  border-radius:var(--r-card);padding:16px 18px;font-size:13px;color:var(--text);max-width:var(--mesure);
}
.hint b{font-weight:600;color:var(--navy)}
.empty{padding:48px 24px;text-align:center;color:var(--caption);font-size:13.5px}
.empty b{display:block;color:var(--navy);font-size:16px;font-weight:600;margin-bottom:6px}
.back{background:none;border:0;color:var(--violet);font-size:13px;font-weight:500;padding:0;margin-bottom:14px}
.headrow{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:20px;border-bottom:1px solid var(--line)}

@media (max-width:1040px){.two{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}
@media (max-width:840px){
  .shell{grid-template-columns:1fr}
  .rail{position:static;height:auto}
  .nav{display:flex;flex-wrap:wrap;gap:4px}
  .nav .grp{display:none}
  .nav button{width:auto}
  .railfoot{display:none}
  .top{flex-wrap:wrap;padding:14px 18px;gap:10px}
  .crumb{flex:1 0 100%}
  select{min-width:0;width:100%}
  .page{padding:20px 18px 54px}
  h1{font-size:26px}
}

/* ---------- connexion ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:48px 20px;background:var(--paper)}
.authbox{width:100%;max-width:440px}
.authbrand{display:flex;align-items:baseline;gap:8px;margin-bottom:8px}
.authbrand b{font-size:28px;font-weight:700;color:var(--violet);letter-spacing:-.02em}
.authbrand span{font-size:13px;color:var(--caption)}
.authcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:32px}
.authcard h2{margin-bottom:6px}
.authcard .lead{margin-bottom:22px}
.field{margin-bottom:18px}
.field label{display:block;font-size:12.5px;color:var(--caption);margin-bottom:7px}
.field input,.field select{width:100%;font-family:var(--font);font-size:14px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--text)}
.field input:focus,.field select:focus{border-color:var(--violet);outline:none}
.btnw{width:100%;text-align:center;padding:12px}
.authlink{background:none;border:0;color:var(--violet);font-size:12.5px;padding:0;font-weight:500}
.authfoot{margin-top:18px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.err{color:var(--red-dark);font-size:12.5px;margin:-8px 0 14px;display:flex;gap:7px}
.ok-msg{color:var(--navy);font-size:13px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;margin-bottom:18px}
.pwrules{list-style:none;padding:0;margin:-6px 0 18px;font-size:12px;color:var(--caption)}
.pwrules li{padding:2px 0 2px 18px;position:relative}
.pwrules li::before{content:'';position:absolute;left:4px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--line)}
.pwrules li.good{color:var(--navy)}
.pwrules li.good::before{background:var(--violet)}

/* ---------- courriel et console ---------- */
.mail{border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;background:var(--white)}
.mailhead{background:var(--paper);padding:13px 18px;border-bottom:1px solid var(--line);font-size:12px;color:var(--caption)}
.mailhead b{color:var(--navy);font-weight:500}
.mailbody{padding:26px}
.mailbody h3{margin-bottom:10px}
.mailbody p{font-size:13.5px;margin:0 0 16px}
.codeblock{background:var(--navy);color:#fff;border-radius:var(--r);padding:16px 18px;font-family:ui-monospace,monospace;font-size:11.5px;line-height:1.8;overflow-x:auto;white-space:pre;margin:0}
.codeblock .k{color:var(--blue)}
.badge{font-size:11px;font-weight:500;padding:3px 9px;border-radius:999px;border:1px solid;white-space:nowrap}
.b-actif{color:var(--navy);border-color:var(--navy)}
.b-invite{background:var(--blue);color:#fff;border-color:var(--blue)}
.b-expire{background:var(--red);color:#fff;border-color:var(--red)}
.f-ok{color:var(--navy);border-color:var(--navy);background:var(--white)}
.f-old{background:var(--blue);color:#fff;border-color:var(--blue)}
.f-div{background:var(--violet);color:#fff;border-color:var(--violet)}
.form2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.form2 .full{grid-column:1/-1}



/* ---------- édition de page ---------- */
.spacesel{min-width:0;width:auto;font-size:12.5px;padding:6px 10px}
.pill-draft{background:var(--blue);color:#fff;font-size:11.5px;font-weight:500;padding:4px 11px;border-radius:999px;white-space:nowrap}
.editbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--navy);border-radius:var(--r-card);padding:14px 20px;margin-bottom:20px}
.editbar .lbl{color:#fff;font-size:13px;font-weight:500}
.editbar .note{color:rgba(255,255,255,.7);font-size:12.5px;flex:1;min-width:160px}
.acc.editing details{border-left:3px solid var(--blue)}
.secbar{display:flex;gap:8px;padding:0 22px 18px;flex-wrap:wrap}
.edform{border:1px solid var(--blue);border-radius:var(--r-card);padding:22px;background:var(--paper);margin:4px 22px 22px}
.edform .field{margin-bottom:16px}
.edform textarea{width:100%;font-family:var(--font);font-size:13.5px;line-height:1.6;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--text);resize:vertical}
.edform textarea:focus,.edform input:focus{border-color:var(--violet);outline:none}
.edform .help{font-size:11.5px;color:var(--caption);margin-top:6px}
.edform .prev{max-width:300px;border:1px solid var(--line);border-radius:var(--r);margin-top:10px;display:block}
.edactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.ghost{opacity:.55}

/* ---------- accordéon ---------- */
.acc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.acc details{border-top:1px solid var(--line)}
.acc details:first-of-type{border-top:0}
.acc summary{
  list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;gap:14px;
  font-size:15px;font-weight:500;color:var(--navy);transition:background .15s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:var(--paper)}
.acc summary .sig{
  flex:0 0 auto;width:22px;height:22px;border:1px solid var(--line);border-radius:var(--r);
  display:grid;place-items:center;color:var(--violet);font-size:14px;line-height:1;transition:transform .15s;
}
.acc details[open] summary{background:var(--paper);color:var(--violet)}
.acc details[open] summary .sig{transform:rotate(45deg);border-color:var(--violet)}
.acc summary .cnt{margin-left:auto;font-size:12px;color:var(--caption);font-weight:400}
.accbody{padding:4px 22px 26px}
.accbody p{font-size:13.5px;margin:0 0 14px;max-width:var(--mesure)}
.accbody p:last-child{margin-bottom:0}
.accbody img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.figure{margin:0 0 16px}
.figure figcaption{font-size:12px;color:var(--caption);margin-top:8px;max-width:var(--mesure)}
.accbody .stepline{padding:14px 0;border-bottom:1px solid var(--line)}
.accbody .stepline:last-child{border-bottom:0}
.accbody .flux{border:0;padding:0;background:none}
.contact{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;font-size:13px}
.contact b{color:var(--navy);font-weight:500}

/* ---------- processus ---------- */
.procgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.flux{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);padding:22px}
.flux h3{margin-bottom:8px}
.flux p{font-size:13px;margin:0 0 14px;color:var(--caption)}
.flux ul{list-style:none;padding:0;margin:0}
.flux li{position:relative;padding:6px 0 6px 20px;font-size:13px;border-top:1px solid var(--line)}
.flux li:first-child{border-top:0}
.flux li::before{content:'';position:absolute;left:4px;top:15px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.stepline{display:flex;gap:16px;padding:18px 20px;border-bottom:1px solid var(--line);align-items:flex-start}
.stepline:last-child{border-bottom:0}
.stepline .ph-tag{flex:0 0 168px;font-weight:500;color:var(--violet);font-size:13.5px;padding-top:1px}
.stepline ul{list-style:none;padding:0;margin:0;flex:1}
.stepline li{position:relative;padding:3px 0 3px 18px;font-size:13px}
.stepline li::before{content:'';position:absolute;left:2px;top:12px;width:5px;height:5px;border-radius:50%;background:var(--line)}
.startbar{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;background:var(--navy);border-radius:var(--r-card);padding:20px 24px;margin-top:36px}
.startbar p{margin:0;color:rgba(255,255,255,.78);font-size:13px}
.checkline{display:flex;align-items:center;gap:10px;font-size:13px;color:#fff;cursor:pointer}
.checkline input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
@media (max-width:700px){.stepline{flex-direction:column;gap:6px}.stepline .ph-tag{flex:none}.form2{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- ajustements serveur ---------- */
.nav a{display:flex;align-items:center;gap:10px;width:100%;text-decoration:none;
  color:rgba(255,255,255,.78);padding:9px 11px;border-radius:var(--r);font-size:13.5px;margin-bottom:2px}
.nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.nav a.on{background:var(--violet);color:#fff;font-weight:500}
a.btn{text-decoration:none;display:inline-block}
form{margin:0}
.headrow form{display:inline}

/* ---------- formulaire de piece ---------- */
.cases{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:4px}
.case{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer}
.case input{width:16px;height:16px;accent-color:var(--violet);cursor:pointer}
.help{font-size:11.5px;color:var(--caption);margin-top:6px}
.field textarea{width:100%;font-family:var(--font);font-size:14px;line-height:1.5;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--text);resize:vertical}
.field textarea:focus{border-color:var(--violet);outline:none}
.field input[type=file]{width:100%;font-family:var(--font);font-size:13px;padding:9px 11px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--white)}