:root{
  --bg:#FBFBFC; --surface:#FFFFFF; --surface2:#F3F3F6;
  --line:#EAEAEF; --line2:#DCDCE4;
  --txt:#15151A; --muted:#70707D; --faint:#A4A4B0;
  --ink:#101015; --ink2:#26262E;
  --crystal1:#5B7FB8; --crystal-soft:#EDF2FA; --crystal-soft2:#F2EDFA;
  --ok:#1F8A55; --ok-soft:#E9F6EF; --warn:#A9821F; --warn-soft:#FBF4E1; --danger:#B54545; --danger-soft:#FAEDED;
  --r:16px; --r2:12px;
  --spring:cubic-bezier(.34,1.4,.4,1);
  --ease:cubic-bezier(.25,.8,.3,1);
  --shadow:0 1px 2px rgba(20,20,30,.04), 0 8px 28px -16px rgba(20,20,30,.12);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{font-family:'Jost',system-ui,sans-serif; background:var(--bg); color:var(--txt); font-size:16px; letter-spacing:.01em}
body::before{content:""; position:absolute; top:0; left:0; right:0; height:60vh; pointer-events:none; z-index:0;
  background:radial-gradient(55% 30% at 50% -6%, rgba(91,127,184,.07), transparent 65%)}
#root{position:relative; z-index:1; max-width:920px; margin:0 auto; padding:0 16px 110px}
@keyframes fadeUp{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1.2)}}
.hidden{display:none!important}

/* ---------- marque ---------- */
.brandline{display:flex; align-items:center; gap:13px}
.gem{width:40px; height:40px; flex:none; position:relative}
.gem svg{width:100%; height:100%; overflow:visible}
.gem .spark{position:absolute; width:5px; height:5px; border-radius:50%;
  background:radial-gradient(circle,#8FA9D6,rgba(143,169,214,0)); animation:twinkle 2.6s infinite}
.gem .s1{top:-2px; right:2px}.gem .s2{bottom:0; left:-3px; animation-delay:1.3s; width:4px; height:4px}
.wordmark{font-family:'Cormorant Garamond',serif; font-weight:700; font-size:25px; letter-spacing:.18em; text-transform:uppercase; line-height:1; color:var(--ink)}
.accountline{font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin-top:5px}

/* ---------- page de connexion ---------- */
#loginpage{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 16px; animation:fadeUp .6s var(--ease)}
.lg-shell{width:100%; max-width:420px; text-align:center}
.lg-logo{width:96px; height:96px; margin:0 auto 18px; display:grid; place-items:center}
.lg-logo img{width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 8px 24px rgba(16,16,21,.15))}
.lg-logo.small{width:70px; height:70px}
.lg-title{font-family:'Cormorant Garamond',serif; font-size:36px; font-weight:600; letter-spacing:.05em; color:var(--ink); line-height:1.12}
.lg-welcome{font-size:12.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); margin:9px 0 30px}
.lg-card{background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px 26px 24px;
  box-shadow:var(--shadow); text-align:left}
.lg-btn{width:100%; border:0; background:var(--ink); color:#fff; font:inherit; font-size:13.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500; padding:15px; border-radius:99px; cursor:pointer; margin-top:4px;
  transition:all .25s var(--spring); box-shadow:0 10px 26px -10px rgba(16,16,21,.45)}
.lg-btn:hover{transform:translateY(-2px); box-shadow:0 16px 34px -10px rgba(16,16,21,.55)}
.lg-btn:active{transform:scale(.98)}
.lg-btn:disabled{opacity:.5; transform:none; cursor:default}
.lg-foot{margin-top:24px; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint)}

/* ---------- accueil manager (Stock / RH) ---------- */
#hub{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 16px; animation:fadeUp .6s var(--ease)}
.hub-shell{max-width:560px}
.hub-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:34px}
.hub-btn{display:flex; flex-direction:column; align-items:center; gap:9px; background:var(--surface); border:1px solid var(--line);
  border-radius:22px; padding:38px 20px 30px; cursor:pointer; font:inherit; transition:all .25s var(--ease); box-shadow:var(--shadow)}
.hub-btn:hover{transform:translateY(-3px); border-color:var(--ink); box-shadow:0 18px 44px -18px rgba(16,16,21,.35)}
.hub-btn:active{transform:scale(.97)}
.hub-ico{font-size:32px; line-height:1}
.hub-btn b{font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink)}
.hub-desc{font-size:12px; letter-spacing:.06em; color:var(--muted)}
.hub-out{margin-top:26px; border:0; background:none; color:var(--muted); font:inherit; font-size:13.5px; cursor:pointer; padding:8px}
.hub-out:hover{color:var(--ink)}
@media(max-width:520px){ .hub-grid{grid-template-columns:1fr} }

/* ---------- écran enseignes (PDG) ---------- */
#brandgate{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:40px 16px; animation:fadeUp .6s var(--ease)}
.gate-shell{max-width:680px}
.gate-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:30px}
.gatecard{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:110px;
  background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:18px 12px; cursor:pointer;
  font:inherit; transition:all .22s var(--ease); box-shadow:var(--shadow)}
.gatecard:hover{transform:translateY(-3px); border-color:var(--ink)}
.gatecard:active{transform:scale(.97)}
.gatename{font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; letter-spacing:.04em; color:var(--ink); text-align:center; line-height:1.15}
.gatetag{font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ok); font-weight:600}
.gatecard.locked{opacity:.5; cursor:default; background:var(--surface2); pointer-events:none}
.gatecard.locked .gatename{color:var(--muted)}
.gatecard.locked .gatetag{color:var(--faint)}
@media(max-width:640px){ .gate-grid{grid-template-columns:repeat(2,1fr)} }

/* ---------- header app ---------- */
header{padding:24px 2px 14px; animation:fadeUp .5s var(--ease)}
.headtop{display:flex; align-items:center; gap:13px}
.headtop .grow{flex:1; min-width:0}
.logout{border:1px solid var(--line2); background:var(--surface); color:var(--muted); font:inherit; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; padding:9px 15px; border-radius:99px; cursor:pointer; transition:all .25s}
.logout:hover{color:var(--ink); border-color:var(--ink)}
.stats{display:flex; gap:10px; margin-top:18px; flex-wrap:wrap}
.stat{flex:1; min-width:130px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 16px; box-shadow:var(--shadow); position:relative; overflow:hidden}
.stat::after{content:""; position:absolute; top:0; left:-80%; width:55%; height:100%;
  background:linear-gradient(100deg,transparent,rgba(91,127,184,.06),transparent); transform:skewX(-18deg); animation:sheen 7s var(--ease) infinite}
.stat:nth-child(2)::after{animation-delay:1.8s}.stat:nth-child(3)::after{animation-delay:3.6s}.stat:nth-child(4)::after{animation-delay:5.4s}
@keyframes sheen{0%,60%{left:-80%}90%,100%{left:135%}}
.stat b{display:block; font-size:24px; font-weight:500; font-variant-numeric:tabular-nums; color:var(--ink)}
.stat span{font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)}

/* ---------- sélecteur boutique (admin) ---------- */
.storebar{display:flex; gap:8px; overflow-x:auto; padding:14px 2px 6px; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:var(--line2) transparent; -webkit-overflow-scrolling:touch}
.storebar::-webkit-scrollbar{height:6px}
.storebar::-webkit-scrollbar-track{background:transparent}
.storebar::-webkit-scrollbar-thumb{background:var(--line2); border-radius:99px}
.storebar::-webkit-scrollbar-thumb:hover{background:var(--crystal1)}
.storechip{flex:none; border:1px solid var(--line2); background:var(--surface); color:var(--muted); font:inherit; font-size:13.5px;
  padding:9px 17px; border-radius:99px; cursor:pointer; transition:all .3s var(--ease); white-space:nowrap}
.storechip.on{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:500}
.storechip:active{transform:scale(.95)}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:5px; margin:16px 0 14px; background:var(--surface); border:1px solid var(--line);
  border-radius:14px; padding:5px; position:sticky; top:10px; z-index:40;
  overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; will-change:transform;
  -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent); mask-image:linear-gradient(90deg,#000 92%,transparent)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto; border:0; background:transparent; color:var(--muted); font:inherit; font-size:13px;
  letter-spacing:.08em; text-transform:uppercase; padding:11px 14px; border-radius:10px; cursor:pointer;
  transition:all .35s var(--ease); position:relative; white-space:nowrap}
.tab.on{background:var(--ink); color:#fff; font-weight:500; box-shadow:0 4px 14px -6px rgba(16,16,21,.5)}
.tab:active{transform:scale(.97)}
.tab .dot{display:inline-block; min-width:18px; padding:1px 5px; border-radius:9px; font-size:11px;
  background:var(--line); color:var(--muted); margin-left:4px; vertical-align:1px}
.tab.on .dot{background:rgba(255,255,255,.22); color:#fff}
.tab .dot.alert{background:var(--crystal1); color:#fff; animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ---------- recherche & chips ---------- */
.searchwrap{position:relative; margin-bottom:12px}
.search{width:100%; background:var(--surface); border:1px solid var(--line2); border-radius:var(--r);
  padding:15px 46px 15px 48px; color:var(--txt); font:inherit; font-size:17px; transition:all .3s var(--ease); box-shadow:var(--shadow)}
.search::placeholder{color:var(--faint)}
.search:focus{outline:0; border-color:var(--crystal1); box-shadow:0 0 0 4px rgba(91,127,184,.1)}
.searchwrap .ic{position:absolute; left:17px; top:50%; transform:translateY(-50%); color:var(--faint); font-size:18px}
.clearbtn{position:absolute; right:10px; top:50%; transform:translateY(-50%); border:0; background:var(--surface2);
  color:var(--muted); width:28px; height:28px; border-radius:50%; cursor:pointer; display:none; font-size:14px}
.chips{display:flex; gap:8px; overflow-x:auto; padding:2px 2px 14px; scroll-behavior:smooth;
  scrollbar-width:thin; scrollbar-color:var(--line2) transparent; -webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{height:6px}
.chips::-webkit-scrollbar-track{background:transparent}
.chips::-webkit-scrollbar-thumb{background:var(--line2); border-radius:99px}
.chips::-webkit-scrollbar-thumb:hover{background:var(--crystal1)}
.chip{flex:none; border:1px solid var(--line2); background:var(--surface); color:var(--muted); font:inherit;
  font-size:13px; padding:8px 15px; border-radius:99px; cursor:pointer; transition:all .3s var(--ease); white-space:nowrap}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:500}
.chip:active{transform:scale(.95)}

/* ---------- cartes stock ---------- */
.list{display:flex; flex-direction:column; gap:9px}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px;
  box-shadow:var(--shadow); opacity:0; animation:fadeUp .45s var(--ease) forwards; transition:border-color .25s}
.card:hover{border-color:var(--line2)}
.cardtop{display:flex; align-items:center; gap:12px}
.facet{width:50px; height:50px; flex:none; border-radius:10px; overflow:hidden; background:var(--surface2); position:relative; display:grid; place-items:center}
.facet img.prod{width:100%; height:100%; object-fit:contain}
.facet .fallback{width:30px;height:30px;object-fit:contain;opacity:.5}
.prodname{font-size:12.5px; color:var(--muted); margin-top:2px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden}
.prodprice{font-size:12px; color:var(--crystal1); font-weight:500}
.refbox{flex:1; min-width:0}
.ref{font-size:18.5px; font-weight:500; letter-spacing:.05em; font-variant-numeric:tabular-nums; color:var(--ink)}
.cat{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:1px}
.qty{display:flex; align-items:center; background:var(--surface2); border:1px solid var(--line2); border-radius:13px; overflow:hidden}
.qbtn{width:42px; height:42px; border:0; background:transparent; color:var(--ink); font-size:21px; cursor:pointer;
  display:grid; place-items:center; transition:background .2s, transform .15s var(--spring)}
.qbtn:active{transform:scale(.84); background:var(--line)}
.qbtn:disabled{opacity:.3; pointer-events:none}
.qval{min-width:42px; text-align:center; font-size:19px; font-weight:500; font-variant-numeric:tabular-nums}
.qval.zero{color:var(--danger)}
.qval.bump{animation:bump .35s var(--spring)}
@keyframes bump{40%{transform:scale(1.35)}}
.qtyro{min-width:64px; text-align:center; background:var(--surface2); border:1px solid var(--line2); border-radius:13px;
  padding:10px 0; font-size:18px; font-weight:500; font-variant-numeric:tabular-nums}
.cardacts{display:flex; gap:8px; margin-top:12px}
.act{flex:1; border:1px solid var(--line2); background:var(--surface); color:var(--ink); font:inherit; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; padding:11px 6px; border-radius:var(--r2); cursor:pointer;
  transition:all .25s var(--ease); display:flex; align-items:center; justify-content:center; gap:7px}
.act:active{transform:scale(.96)}
.act.dark{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:500}
.act.dark:hover{box-shadow:0 8px 22px -8px rgba(16,16,21,.45)}
.act.blue{border-color:rgba(91,127,184,.45); color:var(--crystal1)}
.act.blue:hover{background:var(--crystal-soft)}
.act:disabled{opacity:.35; pointer-events:none}
.more{margin:16px auto 0; display:block; border:1px solid var(--line2); background:var(--surface); color:var(--muted);
  font:inherit; font-size:13px; letter-spacing:.15em; text-transform:uppercase; padding:13px 30px; border-radius:99px; cursor:pointer}
.empty{padding:60px 20px; text-align:center; color:var(--muted)}
.empty .big{font-size:38px; margin-bottom:12px; opacity:.4}
.empty p{font-size:15px; line-height:1.7}

/* ---------- demandes ---------- */
.sectionlabel{font-size:11.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); margin:20px 2px 10px}
.req{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px; box-shadow:var(--shadow);
  opacity:0; animation:fadeUp .45s var(--ease) forwards}
.req.pendingme{border-color:rgba(91,127,184,.5)}
.route{display:flex; align-items:center; gap:9px; font-size:14px; margin-top:8px; color:var(--muted); flex-wrap:wrap}
.route .shop{color:var(--ink); font-weight:500; background:var(--surface2); border:1px solid var(--line2); padding:4px 11px; border-radius:99px; font-size:13px}
.arrow{color:var(--crystal1); animation:slideArrow 1.8s var(--ease) infinite}
@keyframes slideArrow{0%,100%{transform:translateX(0); opacity:.6}50%{transform:translateX(4px); opacity:1}}
.reqmeta{font-size:12.5px; color:var(--muted); margin-top:8px; line-height:1.6}
.badge{display:inline-block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:4px 11px; border-radius:99px; font-weight:500}
.badge.pending{background:var(--crystal-soft); color:var(--crystal1)}
.badge.accepted{background:var(--warn-soft); color:var(--warn)}
.badge.received{background:var(--ok-soft); color:var(--ok)}
.badge.refused{background:var(--danger-soft); color:var(--danger)}
.badge.cancelled{background:var(--surface2); color:var(--muted)}
.reqacts{display:flex; gap:8px; margin-top:13px}
.reqacts .act.ok{background:var(--ok); border-color:var(--ok); color:#fff; font-weight:500}
.reqacts .act.no{border-color:rgba(181,69,69,.4); color:var(--danger)}

/* ---------- journal ---------- */
.mv{display:flex; gap:13px; align-items:flex-start; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:14px 15px; box-shadow:var(--shadow); opacity:0; animation:fadeUp .4s var(--ease) forwards}
.mvic{width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; font-size:16px}
.t-vente{background:var(--ok-soft); color:var(--ok)}
.t-ajout,.t-nouveau{background:var(--crystal-soft); color:var(--crystal1)}
.t-retrait{background:var(--danger-soft); color:var(--danger)}
.t-transfert_envoi,.t-transfert_reception{background:var(--crystal-soft2); color:#7A5BB8}
.t-demande_refusee{background:var(--warn-soft); color:var(--warn)}
.mvbody{flex:1; min-width:0}
.mvtitle{font-size:15px; font-weight:500; color:var(--ink)}
.mvsub{font-size:13px; color:var(--muted); margin-top:2px; line-height:1.55}
.mvsub .who{color:var(--ink2); font-weight:500}
.mvtime{font-size:12px; color:var(--faint); white-space:nowrap; font-variant-numeric:tabular-nums; text-align:right; line-height:1.5}

/* ---------- fab / sheet / toast ---------- */
.fab{position:fixed; right:max(18px,calc(50vw - 442px)); bottom:24px; z-index:60; width:60px; height:60px; border-radius:20px;
  border:0; background:var(--ink); color:#fff; font-size:28px; cursor:pointer;
  box-shadow:0 16px 40px -10px rgba(16,16,21,.45); transition:transform .25s var(--spring); display:grid; place-items:center}
.fab:active{transform:scale(.9) rotate(90deg)}
.scrim{position:fixed; inset:0; background:rgba(20,20,28,.42); backdrop-filter:blur(7px); z-index:80;
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); display:flex; align-items:flex-end; justify-content:center}
.scrim.open{opacity:1; pointer-events:auto}
.sheet{width:100%; max-width:560px; background:var(--surface); border:1px solid var(--line);
  border-radius:26px 26px 0 0; padding:24px 22px calc(28px + env(safe-area-inset-bottom));
  transform:translateY(60px) scale(.98); transition:transform .4s var(--spring); max-height:88vh; overflow-y:auto}
.scrim.open .sheet{transform:none}
.sheet h2{font-family:'Cormorant Garamond',serif; font-size:23px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink)}
.shsub{font-size:13px; color:var(--muted); margin:4px 0 18px; letter-spacing:.04em}
.field{margin-bottom:14px}
.field label{display:block; font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin-bottom:7px}
.field input{width:100%; background:var(--bg); border:1px solid var(--line2); border-radius:var(--r2); padding:14px 15px;
  color:var(--txt); font:inherit; font-size:16.5px; transition:all .25s}
.field input:focus{outline:0; border-color:var(--crystal1); box-shadow:0 0 0 4px rgba(91,127,184,.1)}
.sheetacts{display:flex; gap:10px; margin-top:22px}
.btn{flex:1; border:1px solid var(--line2); background:var(--surface); color:var(--ink); font:inherit; font-size:14px;
  letter-spacing:.12em; text-transform:uppercase; padding:15px; border-radius:14px; cursor:pointer; transition:all .25s var(--ease)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:500}
.btn.primary:disabled{opacity:.45; pointer-events:none}
.errmsg{color:var(--danger); font-size:13.5px; margin-top:10px; min-height:18px}
.toasts{position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:90; display:flex; flex-direction:column; gap:8px; width:min(92vw,430px)}
.toast{background:var(--ink); color:#fff; border-radius:15px; padding:13px 16px; display:flex; align-items:center; gap:11px;
  font-size:14px; font-weight:400; box-shadow:0 18px 44px -12px rgba(16,16,21,.5); animation:toastIn .45s var(--spring)}
.toast .undo{margin-left:auto; border:0; background:rgba(255,255,255,.16); color:#fff; font:inherit; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; padding:7px 13px; border-radius:99px; cursor:pointer; font-weight:500; flex:none}
@keyframes toastIn{from{opacity:0; transform:translateY(22px) scale(.92)}}
.toast.out{animation:toastOut .3s var(--ease) forwards}
@keyframes toastOut{to{opacity:0; transform:translateY(12px) scale(.95)}}
.spin{display:inline-block; width:16px; height:16px; border:2px solid rgba(0,0,0,.15); border-top-color:var(--ink);
  border-radius:50%; animation:rot .7s linear infinite; vertical-align:-3px}
@keyframes rot{to{transform:rotate(360deg)}}
.exportbar{display:flex; align-items:center; gap:8px; margin:2px 2px 12px; flex-wrap:wrap}
.expbtn{border:1px solid var(--line2); background:var(--surface); color:var(--ink); font:inherit; font-size:12.5px;
  letter-spacing:.06em; padding:9px 15px; border-radius:99px; cursor:pointer; transition:all .25s var(--ease)}
.expbtn:hover{border-color:var(--crystal1); color:var(--crystal1)}
.expbtn:active{transform:scale(.96)}
.expinfo{font-size:12px; color:var(--faint)}
.dashhead{margin:4px 0 14px}
.dashgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:6px}
.dashcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; box-shadow:var(--shadow)}
.dashcard b{display:block; font-size:26px; font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums}
.dashcard span{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.sellerrow{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:13px 15px; box-shadow:var(--shadow)}
.sellerrow .nm{flex:1; font-weight:500; color:var(--ink)}
.sellerrow .ct{font-size:14px; color:var(--crystal1); font-weight:500}
.sellerrow .bar{height:6px; border-radius:99px; background:var(--crystal1); margin-top:5px}
.badge.reservation_vente,.badge.vente_resa{background:var(--warn-soft); color:var(--warn)}
.badge.sav{background:var(--crystal-soft2); color:#7A5BB8}
.resahead{display:flex; justify-content:space-between; align-items:center; gap:10px}
.chip.sub{border-style:dashed}
.sortbar{display:flex; gap:8px; margin:0 2px 12px; flex-wrap:wrap; align-items:center}
.minisel, .priceinp{border:1px solid var(--line2); background:var(--surface); color:var(--txt); font:inherit;
  font-size:13px; padding:10px 13px; border-radius:11px; transition:all .25s; cursor:pointer}
.minisel:focus, .priceinp:focus{outline:0; border-color:var(--crystal1); box-shadow:0 0 0 3px rgba(91,127,184,.1)}
.priceinp{width:92px; cursor:text}
.filterToggle{cursor:pointer; font-weight:500}
.filterToggle.active{background:var(--ink); color:#fff; border-color:var(--ink)}
.filterpanel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:14px 15px; margin:0 2px 12px; box-shadow:var(--shadow); animation:fadeUp .3s var(--ease)}
.filterrow{display:flex; align-items:center; gap:10px; margin-bottom:10px; flex-wrap:wrap}
.filterrow label{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); width:118px; flex:none}
.filterrow .grow{flex:1; min-width:160px}
.resetbtn{border:0; background:none; color:var(--danger); font:inherit; font-size:12.5px; cursor:pointer; padding:4px 0; letter-spacing:.04em}
.seg{display:inline-flex; gap:4px; background:var(--surface2); border:1px solid var(--line); border-radius:13px; padding:4px}
.seg button{border:0; background:transparent; color:var(--muted); font:inherit; font-size:13.5px; font-weight:500;
  padding:9px 18px; border-radius:9px; cursor:pointer; transition:all .3s var(--spring); white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button.on{background:var(--ink); color:#fff; box-shadow:0 3px 10px -4px rgba(16,16,21,.5)}
.cardacts3 .act{font-size:12.5px; letter-spacing:.04em; padding:11px 4px}
.act.sell-v{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:500}
.act.sell-v:hover{box-shadow:0 6px 18px -8px rgba(16,16,21,.5)}
.act.sell-r{border-color:rgba(169,130,31,.4); color:var(--warn)}
.act.sell-r:hover{background:var(--warn-soft)}
.act.sell-s{border-color:rgba(122,91,184,.4); color:#7A5BB8}
.act.sell-s:hover{background:var(--crystal-soft2)}
.chartlabel{display:flex; justify-content:space-between; align-items:center; gap:10px; margin:20px 2px 10px; flex-wrap:wrap}
.seg-sm button{padding:6px 13px; font-size:12px}
.statchart{display:flex; align-items:flex-end; gap:6px; height:160px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:16px 14px 12px; box-shadow:var(--shadow); overflow-x:auto}
.statbar{flex:1; min-width:22px; display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end}
.statbar .bcol{width:100%; max-width:34px; background:linear-gradient(180deg,var(--crystal1),#8FA9D6); border-radius:6px 6px 0 0; transition:height .5s var(--spring); min-height:2px}
.statbar .blbl{font-size:9.5px; color:var(--muted); white-space:nowrap}
.statbar .bval{font-size:11px; font-weight:500; color:var(--ink)}
.act.devedit{width:100%; margin-top:8px; border-color:rgba(91,127,184,.5); color:var(--crystal1); background:var(--crystal-soft); font-weight:500}
.act.devedit:hover{background:var(--crystal1); color:#fff; border-color:var(--crystal1)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* ---------- Module RH ---------- */
.rhhero{display:flex; align-items:center; gap:16px; background:linear-gradient(135deg,#1F3864,#2E5090); color:#fff;
  border-radius:18px; padding:22px 24px; margin-bottom:18px; box-shadow:0 12px 30px -12px rgba(31,56,100,.5)}
.rhheroico{font-size:34px; flex:none}
.rhherotitle{font-size:20px; font-weight:500; margin:0}
.rhherosub{font-size:13px; opacity:.85; margin:4px 0 0}
.rhbignew{width:100%; border:0; background:var(--ink); color:#fff; font:inherit; font-size:16px; font-weight:500;
  padding:18px; border-radius:14px; cursor:pointer; margin-bottom:12px; transition:transform .2s var(--spring); box-shadow:var(--shadow)}
.rhbignew:hover{transform:translateY(-2px)} .rhbignew:active{transform:scale(.98)}
.rhbignew.alt{background:linear-gradient(135deg,#1F3864,#2E5090); margin-bottom:22px}
.rhplaytop{display:flex; align-items:center; gap:12px; margin-bottom:18px}
.rhquit{border:1px solid var(--line2); background:var(--surface); color:var(--muted); font:inherit; font-size:13px;
  padding:8px 14px; border-radius:99px; cursor:pointer; flex:none}
.rhquit:hover{border-color:var(--danger); color:var(--danger)}
.rhprog{flex:1; height:8px; background:var(--surface2); border-radius:99px; overflow:hidden}
.rhprogbar{height:100%; background:linear-gradient(90deg,#2E5090,#5B7FB8); border-radius:99px; transition:width .4s var(--spring); width:0}
.rhstep{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums; flex:none}
.rhcard{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:26px 22px; box-shadow:var(--shadow); margin-bottom:14px}
.rhsec{font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--crystal1); font-weight:500; margin-bottom:12px}
.rhq{font-size:22px; font-weight:500; color:var(--ink); line-height:1.35; margin-bottom:22px}
.rhanswer{display:flex; flex-direction:column; gap:10px}
.rhopt{border:1.5px solid var(--line2); background:var(--surface); color:var(--ink); font:inherit; font-size:15.5px;
  padding:15px 18px; border-radius:13px; cursor:pointer; text-align:left; transition:all .2s var(--spring)}
.rhopt:hover{border-color:var(--crystal1)}
.rhopt.sel{background:var(--ink); color:#fff; border-color:var(--ink); font-weight:500}
.rhopt.multi.sel{background:var(--crystal1); border-color:var(--crystal1)}
.rhinput{width:100%; border:1.5px solid var(--line2); background:var(--surface); color:var(--ink); font:inherit;
  font-size:16px; padding:15px 16px; border-radius:13px; outline:none}
.rhinput:focus{border-color:var(--crystal1); box-shadow:0 0 0 3px rgba(91,127,184,.1)}
textarea.rhinput{min-height:96px; resize:vertical; line-height:1.5}
.rhscore{display:flex; flex-direction:column; gap:14px}
.rhscoreval{font-size:38px; font-weight:600; color:var(--crystal1); text-align:center; font-variant-numeric:tabular-nums}
.rhscoreval small{font-size:18px; color:var(--muted)}
.rhslider{width:100%; -webkit-appearance:none; appearance:none; height:8px; border-radius:99px; background:var(--surface2); outline:none}
.rhslider::-webkit-slider-thumb{-webkit-appearance:none; width:28px; height:28px; border-radius:50%; background:var(--crystal1); cursor:pointer; box-shadow:0 2px 8px -2px rgba(91,127,184,.6)}
.rhslider::-moz-range-thumb{width:28px; height:28px; border:0; border-radius:50%; background:var(--crystal1); cursor:pointer}
.rhnav{display:flex; gap:10px; margin-top:6px}
.rhnavbtn{flex:1; border:1px solid var(--line2); background:var(--surface); color:var(--ink); font:inherit; font-size:14.5px;
  padding:14px; border-radius:13px; cursor:pointer; transition:all .2s var(--spring); font-weight:500}
.rhnavbtn:hover{border-color:var(--crystal1)} .rhnavbtn:active{transform:scale(.97)}
.rhnavbtn.primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.rhnavbtn.ghost{flex:0 0 auto; color:var(--muted)}
.rhrecap{display:flex; flex-direction:column; gap:7px; max-height:260px; overflow-y:auto}
.rhrecaprow{display:flex; justify-content:space-between; gap:14px; font-size:13.5px; padding:7px 0; border-bottom:1px solid var(--line)}
.rhrecaprow b{color:var(--muted); font-weight:400; flex:none; max-width:55%}
.rhrecaprow span{color:var(--ink); text-align:right; font-weight:500}
.rhdl{display:flex; gap:10px; margin-top:6px}
.rhdlbtn{flex:1; border:0; font:inherit; font-size:14.5px; font-weight:500; padding:16px; border-radius:13px; cursor:pointer; transition:transform .2s var(--spring); color:#fff}
.rhdlbtn:active{transform:scale(.97)}
.rhdlbtn.word{background:#2B579A} .rhdlbtn.pdf{background:#C0392B}
.rharch{display:flex; align-items:center; gap:13px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; box-shadow:var(--shadow)}
.rharch .nm{flex:1} .rharch .nm b{display:block; font-size:15px; color:var(--ink)} .rharch .nm span{font-size:12px; color:var(--muted)}
.rharchdl{border:1px solid var(--line2); background:var(--surface); color:var(--muted); font:inherit; font-size:12px; padding:7px 12px; border-radius:99px; cursor:pointer}
.rharchtabs{display:flex; gap:8px; margin-bottom:12px}
.rharchtab{flex:1; border:1px solid var(--line); background:var(--surface); color:var(--muted); font:inherit; font-size:13.5px; font-weight:500; padding:11px; border-radius:12px; cursor:pointer; transition:all .2s var(--spring)}
.rharchtab.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.rharchtab:active{transform:scale(.97)}
.rharchtools{display:flex; gap:8px; margin-bottom:14px}
.rharchsearch{flex:1; border:1px solid var(--line2); background:var(--surface); color:var(--ink); font:inherit; font-size:14px; padding:11px 15px; border-radius:12px; outline:none}
.rharchsearch:focus{border-color:var(--crystal1)}
.rharchsort{flex:none; border:1px solid var(--line2); background:var(--surface); color:var(--muted); font:inherit; font-size:12.5px; padding:11px 14px; border-radius:12px; cursor:pointer; white-space:nowrap}
.rharchsort:hover{border-color:var(--crystal1); color:var(--crystal1)}
.rharchdl.del{border-color:rgba(192,57,43,.3); color:#C0392B; padding:7px 10px}
.rharchdl.del:hover{background:#C0392B; color:#fff; border-color:#C0392B}
.rharchdl:hover{border-color:var(--crystal1); color:var(--crystal1)}
/* ---------- Chat flottant ---------- */
.chatfab{position:fixed; right:20px; bottom:20px; width:58px; height:58px; border-radius:50%; border:0;
  background:var(--ink); color:#fff; font-size:24px; cursor:pointer; box-shadow:0 8px 24px -6px rgba(16,16,21,.5);
  z-index:60; transition:transform .3s var(--spring); display:grid; place-items:center}
.chatfab:hover{transform:scale(1.08)}
.chatfab:active{transform:scale(.94)}
.chatdot{position:absolute; top:10px; right:10px; width:12px; height:12px; border-radius:50%; background:var(--danger); border:2px solid #fff}
.chatwin{position:fixed; right:20px; bottom:88px; width:340px; max-width:calc(100vw - 40px); height:460px; max-height:calc(100vh - 130px);
  background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 50px -12px rgba(16,16,21,.4);
  z-index:60; display:flex; flex-direction:column; overflow:hidden; animation:chatUp .35s var(--spring)}
@keyframes chatUp{from{opacity:0; transform:translateY(20px) scale(.96)}to{opacity:1; transform:none}}
.chathead{display:flex; justify-content:space-between; align-items:center; padding:14px 16px; background:var(--ink); color:#fff}
.chathead b{display:block; font-size:14.5px}
.chathead span{font-size:11.5px; color:#9C9CAA}
.chatclose{border:0; background:none; color:#fff; font-size:16px; cursor:pointer; opacity:.7}
.chatclose:hover{opacity:1}
.chatbody{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:8px; background:var(--bg)}
.bubble{max-width:80%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.45; word-wrap:break-word}
.bubble.me{align-self:flex-end; background:var(--ink); color:#fff; border-bottom-right-radius:4px}
.bubble.them{align-self:flex-start; background:var(--surface); border:1px solid var(--line); border-bottom-left-radius:4px}
.bubble .bmeta{display:block; font-size:10px; opacity:.6; margin-top:3px}
.chatinput{display:flex; gap:8px; padding:11px; border-top:1px solid var(--line); background:var(--surface)}
.chatinput input{flex:1; border:1px solid var(--line2); border-radius:99px; padding:10px 15px; font:inherit; font-size:13.5px; outline:none}
.chatinput input:focus{border-color:var(--crystal1)}
.chatinput button{border:0; background:var(--ink); color:#fff; width:40px; border-radius:50%; cursor:pointer; font-size:15px}
.chatinput button:active{transform:scale(.92)}
/* section messages (dev/admin) */
.msgsplit{display:flex; gap:14px; height:calc(100vh - 230px); min-height:420px}
.msgthreads{width:210px; flex:none; display:flex; flex-direction:column; gap:6px; overflow-y:auto}
.msgthread{text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:12px 13px; cursor:pointer; transition:all .2s}
.msgthread:hover{border-color:var(--crystal1)}
.msgthread.on{background:var(--ink); color:#fff; border-color:var(--ink)}
.msgthread b{display:block; font-size:14px}
.msgthread span{font-size:11px; opacity:.7}
.msgthread .unread{display:inline-block; min-width:18px; height:18px; line-height:18px; text-align:center; background:var(--danger); color:#fff; border-radius:99px; font-size:10px; margin-left:6px}
.msgpanel{flex:1; display:flex; flex-direction:column; border:1px solid var(--line); border-radius:14px; overflow:hidden}
.msgpanelhead{padding:14px 16px; background:var(--ink); color:#fff; font-weight:500; font-size:14px}
@media (max-width:640px){ .msgsplit{flex-direction:column; height:auto} .msgthreads{width:100%; flex-direction:row; overflow-x:auto} .msgthread{flex:none; min-width:140px} .msgpanel{height:420px} }
@media (max-width:560px){.tab{font-size:11.5px; letter-spacing:.04em}.stats .stat{min-width:calc(50% - 5px)}
  html,body{overflow-x:hidden; max-width:100vw}
  #root{padding-left:12px; padding-right:12px}
  .chips,.storebar,.tabs,.sortbar{max-width:100%}
  .sortbar{flex-wrap:wrap}
  /* fluidité : couper les animations décoratives en boucle */
  .stat::after{display:none}
  .gem .spark{display:none}
  body::before{display:none}
}
/* ============ RECRUTEMENT ============ */
/* modales (même comportement que .scrim/.sheet du projet) */
.modal{ position:fixed; inset:0; background:rgba(20,20,28,.42); backdrop-filter:blur(7px); z-index:90;
  opacity:0; pointer-events:none; transition:opacity .25s ease; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal.open{ opacity:1; pointer-events:auto; }
.modalcard{ width:100%; max-width:520px; background:var(--surface,#fff); border:1px solid var(--line,#e5e5ea);
  border-radius:20px; padding:20px; max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25);
  transform:translateY(10px) scale(.99); transition:transform .25s ease; }
.modal.open .modalcard{ transform:none; }
.modalhead{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.modalhead b{ font-size:17px; }
.modalx{ border:none; background:none; font-size:18px; cursor:pointer; color:#999; padding:4px 8px; }
.modalfoot{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.modalfoot .btn, #rcDActions .btn{ border:1px solid var(--line2,#ddd); background:var(--surface,#fff); border-radius:10px;
  padding:9px 15px; font:inherit; font-size:14px; cursor:pointer; }
.modalfoot .btn.primary, #rcDActions .btn.primary{ background:#111115; color:#fff; border-color:#111115; }
.modalfoot .btn:hover, #rcDActions .btn:hover{ filter:brightness(.97); }
.modal .field{ margin-bottom:12px; }
.modal .field label{ display:block; font-size:13px; color:var(--muted,#666); margin-bottom:5px; }
.modal .field input, .modal .field select, .modal .field textarea{ width:100%; box-sizing:border-box;
  border:1px solid var(--line2,#dcdce0); border-radius:10px; padding:10px 12px; font:inherit; font-size:14px; background:var(--surface,#fff); }
.modal .errmsg{ color:#c0392b; font-size:13px; min-height:16px; }
/* Tableau de bord des étapes : cartes cliquables toujours visibles (plus de menu déroulant) */
.rcstages{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px; margin:16px 0 14px; }
.rcstage{ border:1px solid var(--line2,#e2e2e6); background:var(--surface,#fff); color:var(--txt,#222);
  border-radius:16px; padding:13px 14px 12px; font:inherit; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:2px; transition:all .18s ease; box-shadow:var(--shadow, 0 1px 2px rgba(20,20,30,.04)); }
.rcstage:hover{ border-color:#9a9aa6; transform:translateY(-2px); }
.rcstage:active{ transform:scale(.97); }
.rcstage .rctop{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.rcstage .rcico{ font-size:19px; line-height:1; }
.rcstage .rccount{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:26px; padding:0 8px;
  border-radius:999px; background:var(--surface2,#f0f0f3); font-size:13.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.rcstage .rclbl{ font-size:12.5px; line-height:1.3; color:var(--muted,#666); margin-top:6px; }
.rcstage.on{ background:#111115; color:#fff; border-color:#111115; box-shadow:0 10px 26px -12px rgba(16,16,21,.5); }
.rcstage.on .rclbl{ color:#c9c9d2; }
.rcstage.on .rccount{ background:rgba(255,255,255,.22); color:#fff; }
.rcstage.zero:not(.on){ opacity:.55; }
@media(max-width:520px){ .rcstages{ grid-template-columns:repeat(2,1fr); } }

.rccard{ border:1px solid var(--line2,#e8e8ec); border-radius:14px; padding:14px; margin-bottom:10px; background:var(--surface,#fff);
  display:flex; gap:12px; align-items:flex-start; }
.rccard .rcthumb{ width:52px; height:52px; border-radius:10px; background:#f0f0f3; flex:none; display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden; }
.rccard .rcthumb img{ width:100%; height:100%; object-fit:cover; }
.rccard .rcinfo{ flex:1; min-width:0; }
.rccard .rcname{ font-weight:600; font-size:15px; }
.rccard .rcmeta{ font-size:12.5px; color:var(--muted,#777); margin-top:2px; line-height:1.5; }
.rccard .rcbadge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; background:#eef; color:#334; margin-right:4px; }
.rccard .rcbadge.alt{ background:#fef0d8; color:#7a4e00; }
.rccard .rcbadge.cdi{ background:#e2f5e4; color:#1c5e2a; }
.rccard .rcopen{ flex:none; align-self:center; border:1px solid var(--line2,#ddd); background:var(--surface,#fff);
  border-radius:9px; padding:7px 12px; font:inherit; font-size:13px; cursor:pointer; }
.rccard .rcopen:hover{ background:#f6f6f8; }

/* détail candidat */
.rcdrow{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid #f0f0f2; font-size:13.5px; }
.rcdrow .k{ color:var(--muted,#777); }
.rcdrow .v{ font-weight:600; text-align:right; }
.rcfilechip{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line2,#e2e2e6); background:#fafafb;
  border-radius:9px; padding:7px 10px; font-size:13px; margin:4px 6px 0 0; cursor:pointer; }
.rcfilechip:hover{ background:#f0f0f3; }
.rcfilechip .fk{ font-size:11px; color:#888; }
.rctimeline{ margin-top:6px; }
.rctl{ display:flex; gap:8px; font-size:12.5px; padding:5px 0; border-bottom:1px solid #f4f4f6; }
.rctl .tldot{ color:#aaa; }
.rctl .tlmsg{ color:#333; }
.rctl .tlwhen{ color:#999; margin-left:auto; white-space:nowrap; }

.modalfoot .btn.danger{ background:#c0392b; color:#fff; border-color:#c0392b; }
.modalfoot .btn.danger:hover{ background:#a83224; }

/* actions détail : grille de boutons */
#rcDActions{ flex-wrap:wrap; gap:8px; }
#rcDActions .btn{ flex:none; }

@media (max-width:560px){
  .rccard{ padding:11px; gap:9px; }
  .rccard .rcthumb{ width:44px; height:44px; }
}

/* message "en attente" dans le détail candidat */
.rcwait{ width:100%; text-align:center; padding:14px; border:1px dashed #cfcfd6; border-radius:12px;
  color:#777; font-size:14px; background:#fafafb; }

/* ===== Carte CV flottante pendant l'entretien ===== */
#rcCvCard{ position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:80; display:flex; align-items:flex-start; }
#rcCvCardTab{ background:#111115; color:#fff; border:none; border-radius:12px 0 0 12px; padding:14px 10px; cursor:pointer;
  writing-mode:vertical-rl; font:inherit; font-size:14px; font-weight:600; box-shadow:-3px 0 12px rgba(0,0,0,.15); }
#rcCvCardPanel{ width:0; overflow:hidden; transition:width .28s ease; height:78vh; background:#fff; border-radius:12px 0 0 12px;
  box-shadow:-8px 0 30px rgba(0,0,0,.22); }
#rcCvCard.rccv-open #rcCvCardPanel{ width:min(560px, 82vw); }
#rcCvCardBody{ width:100%; height:100%; }
#rcCvCardBody iframe, #rcCvCardBody img{ width:100%; height:100%; display:block; }
@media (max-width:560px){ #rcCvCard.rccv-open #rcCvCardPanel{ width:88vw; height:70vh; } }

/* ===== Bloc rappel (infos pré-entretien) dans l'entretien ===== */
.rhrecapbox{ border:1px solid #e6e6ec; border-radius:12px; padding:10px 14px; background:#fafafb; }
.rhrecaprow{ display:flex; justify-content:space-between; gap:12px; padding:6px 0; border-bottom:1px solid #f0f0f2; font-size:14px; }
.rhrecaprow:last-child{ border-bottom:none; }
.rhrecaprow .k{ color:#888; }
.rhrecaprow .v{ font-weight:600; text-align:right; }

/* ===== Filtre "CV traité" ===== */
.rcfilterbar{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.rcfilterchip{ border:1px solid var(--line2,#e2e2e6); background:var(--surface,#fff); color:var(--muted,#666);
  border-radius:999px; padding:6px 12px; font:inherit; font-size:12.5px; cursor:pointer; transition:.15s; }
.rcfilterchip:hover{ border-color:#bbb; }
.rcfilterchip.on{ background:#111115; color:#fff; border-color:#111115; }
.rcbadge.ok{ background:#e2f5e4; color:#1c5e2a; }
.rcbadge.ko{ background:#fde8e6; color:#a0281b; }