/* ============================================================
   PORTAL DESIGN SYSTEM — Menipex · Le Processus (2026)
   Style : app premium (Figma / Apple dashboard), light,
   rouge Stiebel = action, vert Menipex = minimum (succès only).
   Chargé par : espace-client, espace-pro (dash), admin.
   ============================================================ */
:root{
  --p-bg:#f7f6f4; --p-card:#fff; --p-ink:#141414; --p-ink2:#5d5d58; --p-ink3:#96958f;
  --p-line:#ebe9e4; --p-red:#BA0C2F; --p-red2:#e8dfe0; --p-redsoft:#fbf1f3;
  --p-green:#3e7d3e; --p-greensoft:#eef5ee;
  --p-amber:#a06a00; --p-ambersoft:#fdf5e6;
  --p-blue:#20567d; --p-bluesoft:#edf4f9;
  --p-r:18px; --p-sh:0 1px 2px rgba(20,20,20,.04),0 10px 30px -18px rgba(20,20,20,.18);
  --p-sh2:0 2px 6px rgba(20,20,20,.06),0 18px 50px -20px rgba(20,20,20,.28);
  --p-tr:.25s cubic-bezier(.2,.7,.2,1);
}
.ptl{background:var(--p-bg);min-height:60vh;padding-top:calc(var(--navh,64px))}
.ptl *{-webkit-tap-highlight-color:transparent}
.ptl .wrap2{max-width:1140px;margin:0 auto;padding:0 clamp(16px,3vw,32px)}

/* ---------- cards ---------- */
.pcard{background:var(--p-card);border:1px solid var(--p-line);border-radius:var(--p-r);
  box-shadow:var(--p-sh);padding:clamp(16px,2.4vw,26px);transition:box-shadow var(--p-tr),transform var(--p-tr)}
.pcard.hov:hover{box-shadow:var(--p-sh2);transform:translateY(-2px)}
.pcard h3{font-family:var(--serif);font-weight:600;font-size:1.18rem;margin:0 0 4px}
.pcard .sub{color:var(--p-ink2);font-size:.86rem;line-height:1.5}

/* ---------- section head ---------- */
.phead{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin:26px 0 14px}
.phead h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.25rem,2vw,1.6rem);letter-spacing:-.01em}
.phead .hint{font-size:.78rem;color:var(--p-ink3)}

/* ---------- chips / badges ---------- */
.pchip{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
  letter-spacing:.04em;border-radius:100px;padding:4px 11px;white-space:nowrap}
.pchip.red{background:var(--p-redsoft);color:var(--p-red)}
.pchip.green{background:var(--p-greensoft);color:var(--p-green)}
.pchip.amber{background:var(--p-ambersoft);color:var(--p-amber)}
.pchip.blue{background:var(--p-bluesoft);color:var(--p-blue)}
.pchip.grey{background:#f1f0ec;color:var(--p-ink2)}
.pdot{width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.pdot.pulse{animation:ppulse 1.6s infinite}
@keyframes ppulse{0%,100%{box-shadow:0 0 0 0 rgba(186,12,47,.35)}50%{box-shadow:0 0 0 6px rgba(186,12,47,0)}}

/* ---------- buttons ---------- */
.pbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  font:600 .84rem var(--sans);border-radius:12px;padding:11px 18px;text-decoration:none;
  transition:transform .15s cubic-bezier(.2,.7,.2,1),box-shadow var(--p-tr),background var(--p-tr),opacity var(--p-tr)}
.pbtn:active{transform:scale(.96)}
.pbtn.prim{background:var(--p-red);color:#fff;box-shadow:0 6px 18px -8px rgba(186,12,47,.55)}
.pbtn.prim:hover{background:#a00b29}
.pbtn.dark{background:var(--p-ink);color:#fff}
.pbtn.dark:hover{background:#000}
.pbtn.ghost{background:#fff;color:var(--p-ink);border:1px solid var(--p-line)}
.pbtn.ghost:hover{border-color:#d8d6cf;box-shadow:var(--p-sh)}
.pbtn.wa{background:#0faa4b;color:#fff;box-shadow:0 6px 18px -8px rgba(15,170,75,.5)}
.pbtn.wa:hover{background:#0d9642}
.pbtn.sm{padding:7px 13px;font-size:.76rem;border-radius:10px}
.pbtn[disabled]{opacity:.45;pointer-events:none}
.pbtn .icx{width:15px;height:15px}

/* ---------- stepper chantier (6 étapes) ---------- */
.pstep{display:grid;grid-template-columns:repeat(6,1fr);gap:0;position:relative;margin:18px 0 6px}
.pstep::before{content:"";position:absolute;top:17px;left:calc(100%/12);right:calc(100%/12);height:3px;
  background:var(--p-line);border-radius:2px}
.pstep .bar{position:absolute;top:17px;left:calc(100%/12);height:3px;background:var(--p-red);
  border-radius:2px;max-width:calc(100% - 100%/6);transition:width 1.1s cubic-bezier(.6,.05,.2,1)}
.pst{position:relative;text-align:center;padding:0 4px}
.pst .n{width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--p-line);
  display:flex;align-items:center;justify-content:center;margin:0 auto 8px;font:700 .8rem var(--sans);
  color:var(--p-ink3);position:relative;z-index:1;transition:all var(--p-tr)}
.pst.done .n{background:var(--p-red);border-color:var(--p-red);color:#fff}
.pst.cur .n{border-color:var(--p-red);color:var(--p-red);box-shadow:0 0 0 5px rgba(186,12,47,.12);animation:ppulse 2s infinite}
.pst .t{font-size:.72rem;font-weight:600;color:var(--p-ink3);line-height:1.25}
.pst.done .t,.pst.cur .t{color:var(--p-ink)}
.pst .d{font-size:.66rem;color:var(--p-ink3);margin-top:2px}
.pst .de{font-size:.62rem;color:var(--p-ink3)}
@media(max-width:760px){
  .pstep{grid-template-columns:1fr;gap:0}
  .pstep::before,.pstep .bar{display:none}
  .pst{display:grid;grid-template-columns:36px 1fr;text-align:left;gap:12px;padding:9px 0;align-items:start}
  .pst .n{margin:0}
  .pst:not(:last-child)::after{content:"";position:absolute;left:17px;top:46px;bottom:-8px;width:2px;background:var(--p-line)}
  .pst.done:not(:last-child)::after{background:var(--p-red)}
  .pst .t{font-size:.82rem}
}

/* ---------- timeline photos ---------- */
.pgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.pgal .ph{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;
  background:#eee;transition:transform var(--p-tr),box-shadow var(--p-tr)}
.pgal .ph:hover{transform:scale(1.03);box-shadow:var(--p-sh2)}
.pgal .ph img{width:100%;height:100%;object-fit:cover;display:block}
.pgal .ph .tag{position:absolute;left:6px;bottom:6px;background:rgba(0,0,0,.55);color:#fff;
  font-size:.6rem;font-weight:600;border-radius:6px;padding:2px 7px;backdrop-filter:blur(4px)}
.pgal .ph .del{position:absolute;top:6px;right:6px;width:24px;height:24px;border-radius:50%;border:0;
  background:rgba(0,0,0,.55);color:#fff;font-size:.8rem;cursor:pointer;display:none;align-items:center;justify-content:center}
.pgal .ph:hover .del{display:flex}

/* lightbox */
.plight{position:fixed;inset:0;background:rgba(10,10,10,.88);z-index:400;display:none;
  align-items:center;justify-content:center;padding:22px;backdrop-filter:blur(6px)}
.plight.on{display:flex;animation:pfad .22s}
@keyframes pfad{from{opacity:0}to{opacity:1}}
.plight img{max-width:94vw;max-height:82vh;border-radius:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.plight .cap{position:absolute;bottom:26px;left:0;right:0;text-align:center;color:#fff;font-size:.82rem}
.plight .x{position:absolute;top:18px;right:18px;width:38px;height:38px;border-radius:50%;border:0;
  background:rgba(255,255,255,.14);color:#fff;font-size:1.05rem;cursor:pointer}

/* ---------- tracker commande (5 statuts) ---------- */
.ptrack{display:flex;align-items:center;gap:0;margin:10px 0 2px}
.ptk{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;position:relative}
.ptk::before{content:"";position:absolute;top:7px;left:-50%;width:100%;height:2px;background:var(--p-line)}
.ptk:first-child::before{display:none}
.ptk.done::before{background:var(--p-red)}
.ptk .c{width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--p-line);z-index:1;transition:all var(--p-tr)}
.ptk.done .c{background:var(--p-red);border-color:var(--p-red)}
.ptk.cur .c{border-color:var(--p-red);box-shadow:0 0 0 4px rgba(186,12,47,.14)}
.ptk .t{font-size:.62rem;font-weight:600;color:var(--p-ink3);text-align:center;line-height:1.2}
.ptk.done .t,.ptk.cur .t{color:var(--p-ink)}

/* ---------- rows / listes ---------- */
.prow{display:flex;align-items:center;gap:14px;padding:13px 4px;border-bottom:1px solid var(--p-line);
  transition:background var(--p-tr)}
.prow:hover{background:#fbfaf8}
.prow:last-child{border-bottom:0}
.prow .grow{flex:1;min-width:0}
.prow .ti{font-weight:600;font-size:.9rem;color:var(--p-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prow .mi{font-size:.75rem;color:var(--p-ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pava{width:38px;height:38px;border-radius:50%;background:var(--p-redsoft);color:var(--p-red);
  display:flex;align-items:center;justify-content:center;font:700 .8rem var(--sans);flex:0 0 auto;text-transform:uppercase}
.pava.grn{background:var(--p-greensoft);color:var(--p-green)}
.pava.blu{background:var(--p-bluesoft);color:var(--p-blue)}

/* ---------- KPI ---------- */
.pkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.pkpi{background:var(--p-card);border:1px solid var(--p-line);border-radius:16px;padding:16px 18px;
  transition:transform var(--p-tr),box-shadow var(--p-tr)}
.pkpi:hover{transform:translateY(-2px);box-shadow:var(--p-sh)}
.pkpi b{font-family:var(--serif);font-weight:600;font-size:1.9rem;line-height:1;display:block;color:var(--p-ink)}
.pkpi span{font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--p-ink3)}
.pkpi .up{color:var(--p-green);font-size:.7rem;font-weight:700}
.pkpi.hot{border-color:rgba(186,12,47,.35);background:linear-gradient(160deg,#fff 55%,var(--p-redsoft))}

/* ---------- tabs / segmented ---------- */
.pseg{display:inline-flex;background:#efeee9;border-radius:12px;padding:3px;gap:2px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.pseg::-webkit-scrollbar{display:none}
.pseg button{border:0;background:none;cursor:pointer;font:600 .8rem var(--sans);color:var(--p-ink2);
  border-radius:10px;padding:8px 15px;white-space:nowrap;transition:all var(--p-tr)}
.pseg button.on{background:#fff;color:var(--p-ink);box-shadow:0 1px 4px rgba(0,0,0,.09)}

/* ---------- forms ---------- */
.pfield{margin-bottom:13px}
.pfield label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--p-ink3);margin-bottom:5px}
.pfield input,.pfield select,.pfield textarea{width:100%;border:1.5px solid var(--p-line);border-radius:11px;
  background:#fff;font:400 16px var(--sans);color:var(--p-ink);padding:10px 13px;outline:none;
  transition:border var(--p-tr),box-shadow var(--p-tr)}
.pfield input:focus,.pfield select:focus,.pfield textarea:focus{border-color:var(--p-red);box-shadow:0 0 0 3px rgba(186,12,47,.09)}
.pgrid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media(max-width:560px){.pgrid2{grid-template-columns:1fr}}

/* ---------- modal ---------- */
.pmodal{position:fixed;inset:0;background:rgba(15,15,15,.45);z-index:380;display:none;
  align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)}
.pmodal.on{display:flex;animation:pfad .2s}
.pmodal .box{background:#fff;border-radius:22px 22px 0 0;max-width:600px;width:100%;max-height:88vh;
  overflow:auto;padding:24px 22px 30px;animation:pup .32s cubic-bezier(.2,.7,.2,1)}
@keyframes pup{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media(min-width:640px){.pmodal{align-items:center;padding:20px}.pmodal .box{border-radius:22px;animation-name:pzoom}
@keyframes pzoom{from{transform:scale(.94);opacity:0}to{transform:none;opacity:1}}}
.pmodal h3{font-family:var(--serif);font-weight:600;font-size:1.3rem;margin-bottom:4px}
.pmodal .x{float:right;width:32px;height:32px;border-radius:50%;border:0;background:#f1f0ec;cursor:pointer;font-size:.95rem}

/* ---------- toast ---------- */
.ptoast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,80px);background:var(--p-ink);color:#fff;
  font:600 .84rem var(--sans);border-radius:100px;padding:12px 22px;z-index:420;opacity:0;
  transition:all .4s cubic-bezier(.2,.7,.2,1);box-shadow:0 14px 40px -10px rgba(0,0,0,.4);max-width:90vw;text-align:center}
.ptoast.on{transform:translate(-50%,0);opacity:1}
.ptoast.grn{background:var(--p-green)}

/* ---------- skeleton ---------- */
.pskel{background:linear-gradient(90deg,#efeee9 25%,#f7f6f2 50%,#efeee9 75%);background-size:200% 100%;
  animation:pskel 1.3s infinite;border-radius:10px;color:transparent!important}
@keyframes pskel{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- garantie ring ---------- */
.pring{position:relative;width:74px;height:74px;flex:0 0 auto}
.pring svg{transform:rotate(-90deg)}
.pring .bgc{stroke:#eeece7;fill:none;stroke-width:6}
.pring .fgc{stroke:var(--p-red);fill:none;stroke-width:6;stroke-linecap:round;
  transition:stroke-dashoffset 1.2s cubic-bezier(.6,.05,.2,1)}
.pring .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.pring .in b{font-family:var(--serif);font-weight:600;font-size:1.15rem;line-height:1}
.pring .in span{font-size:.56rem;font-weight:700;letter-spacing:.06em;color:var(--p-ink3);text-transform:uppercase}

/* ---------- gate (non connecté) ---------- */
.pgate{max-width:520px;margin:40px auto;text-align:center}
.pgate .badge{width:64px;height:64px;border-radius:20px;background:var(--p-redsoft);display:flex;
  align-items:center;justify-content:center;margin:0 auto 16px;font-size:1.6rem}
.pgate h2{font-family:var(--serif);font-weight:600;font-size:1.7rem;margin-bottom:8px}
.pgate p{color:var(--p-ink2);font-size:.92rem;line-height:1.6;margin-bottom:18px}

/* ---------- demo banner ---------- */
.pdemo{display:flex;align-items:center;gap:10px;background:var(--p-ambersoft);border:1px solid #eeddb5;
  color:var(--p-amber);border-radius:14px;padding:10px 16px;font-size:.8rem;font-weight:600;margin-bottom:18px}

/* ---------- admin shell ---------- */
.ashell{display:grid;grid-template-columns:224px 1fr;gap:0;min-height:calc(100vh - 60px)}
.aside{background:#fff;border-right:1px solid var(--p-line);padding:18px 12px;position:sticky;top:60px;
  height:calc(100vh - 60px);overflow:auto}
.aside .who{display:flex;align-items:center;gap:10px;padding:8px 10px 16px;border-bottom:1px solid var(--p-line);margin-bottom:10px}
.aside .who .mi{font-size:.68rem;color:var(--p-ink3)}
.anav{display:flex;flex-direction:column;gap:2px}
.anav button{display:flex;align-items:center;gap:11px;border:0;background:none;cursor:pointer;
  font:600 .84rem var(--sans);color:var(--p-ink2);border-radius:11px;padding:10px 12px;text-align:left;
  transition:all var(--p-tr);width:100%}
.anav button:hover{background:#f6f5f1;color:var(--p-ink)}
.anav button.on{background:var(--p-redsoft);color:var(--p-red)}
.anav button .ico{width:19px;text-align:center;font-size:.95rem}
.anav button .ct{margin-left:auto;background:var(--p-red);color:#fff;font-size:.62rem;font-weight:700;
  border-radius:100px;padding:2px 7px;min-width:20px;text-align:center}
.amain{padding:clamp(16px,2.6vw,30px);min-width:0}
@media(max-width:900px){
  .ashell{grid-template-columns:1fr}
  .aside{position:static;height:auto;border-right:0;border-bottom:1px solid var(--p-line);padding:10px 12px}
  .aside .who{display:none}
  .anav{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px}
  .anav::-webkit-scrollbar{display:none}
  .anav button{white-space:nowrap;padding:9px 13px}
}
/* étape setter (admin) */
.psetter{display:flex;gap:6px;flex-wrap:wrap}
.psetter button{border:1.5px solid var(--p-line);background:#fff;border-radius:11px;cursor:pointer;
  font:600 .72rem var(--sans);color:var(--p-ink2);padding:8px 11px;transition:all var(--p-tr)}
.psetter button:hover{border-color:#cfcdc6}
.psetter button.on{background:var(--p-red);border-color:var(--p-red);color:#fff}
/* upload zone */
.pupl{border:2px dashed #ddd9d0;border-radius:16px;padding:22px;text-align:center;cursor:pointer;
  transition:all var(--p-tr);background:#fdfcfa}
.pupl:hover{border-color:var(--p-red);background:var(--p-redsoft)}
.pupl b{display:block;font-size:.9rem;margin-bottom:3px}
.pupl span{font-size:.74rem;color:var(--p-ink3)}

/* ---------- identité visuelle par portail ---------- */
.ptl-client{background:radial-gradient(900px 400px at 88% -6%,#eef5ee 0%,transparent 55%),var(--p-bg)}
.ptl-client .echero h1 em{color:var(--p-green)}
.ptl-admin{background:radial-gradient(900px 400px at 12% -6%,#fbf1f3 0%,transparent 55%),var(--p-bg)}