/* =========================================================
   COUTURIA — portal.css
   Styles des espaces Client & Commercial (dashboards)
   ========================================================= */

body.portal-body{
  background: var(--light-grey);
}

/* ---------- LAYOUT ---------- */
.portal-wrap{
  display:flex;
  min-height:100vh;
}

.portal-sidebar{
  width:260px;
  flex-shrink:0;
  background: var(--navy-darker);
  color: rgba(255,255,255,.75);
  display:flex;
  flex-direction:column;
  position:fixed;
  top:0; bottom:0; left:0;
  z-index:1050;
  transition: transform .25s ease;
}
.portal-sidebar .ps-brand{
  padding: 1.25rem 1.25rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.portal-sidebar .ps-brand img{ height:30px; }
.portal-sidebar .ps-role{
  font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color: var(--gold); margin-top:.4rem;
}
.portal-nav{
  flex:1;
  overflow-y:auto;
  padding: 1rem .75rem;
}
.portal-nav .ps-section-label{
  font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  color: rgba(255,255,255,.35);
  padding: .75rem .75rem .3rem;
}
.portal-nav a{
  display:flex; align-items:center; gap:.65rem;
  padding:.6rem .75rem;
  border-radius:.55rem;
  color: rgba(255,255,255,.7);
  font-size:.85rem; font-weight:500;
  margin-bottom:.15rem;
}
.portal-nav a i{ font-size:1.05rem; width:20px; text-align:center; }
.portal-nav a:hover{ background: rgba(255,255,255,.06); color:#fff; }
.portal-nav a.active{ background: rgba(var(--gold-rgb),.15); color: var(--gold); font-weight:700; }
.portal-nav a .nav-count{
  margin-left:auto; font-size:.65rem; font-weight:700;
  background: rgba(255,255,255,.12); color:#fff;
  padding:.1rem .4rem; border-radius:999px;
}

/* ---------- SOUS-MENUS (accordéon sidebar) ---------- */
.portal-nav .nav-group{ margin-bottom:.15rem; }
.portal-nav .nav-toggle{ cursor:pointer; user-select:none; }
.portal-nav .nav-toggle .nav-chevron{ margin-left:auto; font-size:.7rem; transition:transform .2s ease; }
.portal-nav .nav-group.open .nav-toggle .nav-chevron{ transform:rotate(180deg); }
.portal-nav .subnav{ display:none; padding:.15rem 0 .35rem .5rem; }
.portal-nav .nav-group.open .subnav{ display:block; }
.portal-nav .subnav a{
  padding:.45rem .75rem .45rem 2.5rem;
  font-size:.8rem; font-weight:500;
}
.portal-nav .subnav a i{ font-size:.85rem; width:16px; }
.portal-nav .subnav a:hover{ background: rgba(255,255,255,.05); color:#fff; }
.portal-nav .subnav a.active{
  background: rgba(var(--gold-rgb),.15); color: var(--gold); font-weight:700;
}

.portal-sidebar .ps-footer{
  padding: 1rem 1.25rem 1.25rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.portal-sidebar .ps-user{ display:flex; align-items:center; gap:.6rem; margin-bottom:.75rem; }
.portal-sidebar .ps-user img{ width:36px; height:36px; border-radius:50%; object-fit:cover; }
.portal-sidebar .ps-user .name{ font-size:.8rem; font-weight:700; color:#fff; }
.portal-sidebar .ps-user .role{ font-size:.68rem; color: rgba(255,255,255,.45); }
.portal-sidebar .ps-logout{
  display:flex; align-items:center; gap:.5rem;
  font-size:.8rem; color: rgba(255,255,255,.55);
}
.portal-sidebar .ps-logout:hover{ color:#fff; }

.portal-main{
  flex:1;
  margin-left:260px;
  min-width:0;
}

.portal-topbar{
  background:#fff;
  border-bottom:1px solid var(--border-c);
  padding: .85rem 1.5rem;
  display:flex; align-items:center; justify-content:between; gap:1rem;
  position:sticky; top:0; z-index:1030;
}
.portal-topbar .pt-title{ font-family: var(--font-display); font-weight:700; color: var(--navy); font-size:1.15rem; margin:0; }
.portal-topbar .pt-breadcrumb{ font-size:.75rem; color: var(--muted); margin:0; }
.portal-sidebar-toggle{
  display:none;
  border:none; background:none; color: var(--navy); font-size:1.4rem;
}
.portal-back-button{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex-shrink:0;
  border:1px solid var(--border-c); border-radius:.55rem;
  background:#fff; color: var(--navy); font-size:1.15rem; line-height:1;
  cursor:pointer; transition: border-color .2s, color .2s, background .2s;
}
.portal-back-button:hover{
  border-color: var(--gold); color: var(--gold); background:#faf7f0;
}
[data-theme="dark"] .portal-back-button{
  background: var(--surface); color: var(--ink); border-color: var(--border-c);
}
[data-theme="dark"] .portal-back-button:hover{
  border-color: var(--gold); color: var(--gold); background: #252833;
}

.portal-content{ padding: 1.5rem; }

@media (max-width: 991.98px){
  .portal-sidebar{ transform: translateX(-100%); }
  .portal-sidebar.open{ transform: translateX(0); }
  .portal-main{ margin-left:0; }
  .portal-sidebar-toggle{ display:inline-flex; align-items:center; }
  .portal-content{ padding: 1rem; padding-bottom: calc(1rem + 60px + env(safe-area-inset-bottom)); }
}
.portal-overlay{
  display:none;
  position:fixed; inset:0; background: rgba(14,25,41,.5); z-index:1049;
}
.portal-overlay.show{ display:block; }

/* ---------- STAT CARDS ---------- */
.stat-card{
  border:1px solid var(--border-c); border-radius:.85rem; background:#fff; padding:1.25rem;
  height:100%;
}
.stat-card .si{
  width:42px;height:42px;border-radius:.6rem; display:flex;align-items:center;justify-content:center;
  font-size:1.2rem; margin-bottom:.75rem;
}
.stat-card .sv{ font-family: var(--font-display); font-size:1.6rem; font-weight:700; color: var(--navy); }
.stat-card .sl{ font-size:.75rem; color: var(--muted); }
.stat-card .strend{ font-size:.72rem; font-weight:700; }
.stat-card .strend.up{ color:#16A34A; }
.stat-card .strend.down{ color:#DC2626; }

/* ---------- TABLES ---------- */
.portal-table{ background:#fff; border-radius:.85rem; border:1px solid var(--border-c); overflow:hidden; }
.portal-table table{ margin-bottom:0; }
.portal-table thead th{
  background: var(--light-grey); font-size:.68rem; text-transform:uppercase; letter-spacing:.05em;
  color: var(--muted); font-weight:700; border-bottom:none; padding:.85rem 1rem;
}
.portal-table td{ padding:.85rem 1rem; vertical-align:middle; font-size:.85rem; }

.status-pill{ font-size:.68rem; font-weight:700; padding:.25rem .6rem; border-radius:999px; }
.status-payee, .status-livre, .status-actif, .status-validee{ background:#DCFCE7; color:#15803D; }
.status-attente, .status-cours{ background:#FEF3C7; color:#92400E; }
.status-retard, .status-refuse{ background:#FEE2E2; color:#B91C1C; }
.status-brouillon{ background:#E5E7EB; color:#374151; }

/* ---------- KANBAN ---------- */
.kanban-board{ display:flex; gap:1rem; overflow-x:auto; padding-bottom:.5rem; }
.kanban-col{ flex:0 0 260px; background:#fff; border:1px solid var(--border-c); border-radius:.75rem; padding:.85rem; }
.kanban-col h4{ font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color: var(--muted); font-weight:700; margin-bottom:.75rem; display:flex; justify-content:space-between; }
.kanban-card{ background: var(--light-grey); border-radius:.6rem; padding:.75rem; margin-bottom:.6rem; font-size:.8rem; }
.kanban-card .kc-id{ font-size:.65rem; color: var(--muted); }
.kanban-card .kc-name{ font-weight:700; margin:.15rem 0; }
.kanban-card .kc-artisan{ font-size:.7rem; color: var(--muted); }

/* ---------- MLM BINARY TREE ---------- */
/* Le diagramme MLM (niveaux 1-2 + agrégats 3-5) vit dans mlm-diagram.css
   (nœuds en blocs + connecteurs SVG calculés en JS — maquette vitrine).
   Les règles dark correspondantes sont définies dans le bloc MODE SOMBRE
   ci-dessous. */

/* ---------- SUIVI DE COMMANDE (stepper) ---------- */
.track-steps{ display:flex; gap:.35rem; overflow-x:auto; padding:.25rem 0 .5rem; }
.track-step{
  flex:1 0 92px; display:flex; flex-direction:column; align-items:center; gap:.3rem;
  text-align:center; min-width:0;
}
.track-step .ts-dot{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background: var(--light-grey); color: var(--muted);
  border:2px solid var(--border-c); font-size:.75rem;
}
.track-step .ts-label{ font-size:.62rem; color: var(--muted); line-height:1.2; }
.track-step.done .ts-dot{ background: var(--navy); border-color: var(--navy); color:#fff; }
.track-step.current .ts-dot{
  background:#fff; border-color: var(--gold); color: var(--gold);
  box-shadow:0 0 0 3px rgba(var(--gold-rgb),.25);
}
.track-step.current .ts-label{ color: var(--navy); font-weight:700; }

/* ---------- PAYMENT PLAN ---------- */
.tranche-row{ display:flex; align-items:center; gap:1rem; padding:.85rem 0; border-bottom:1px solid var(--border-c); }
.tranche-row:last-child{ border-bottom:none; }
.tranche-num{
  width:34px;height:34px;border-radius:50%; background: var(--light-grey); color: var(--navy);
  display:flex;align-items:center;justify-content:center; font-weight:700; font-size:.8rem; flex-shrink:0;
}
.tranche-num.paid{ background: var(--navy); color:#fff; }

/* Notes / messages */
.note-item{ border-bottom:1px solid var(--border-c); padding: 1rem 0; }
.note-item:last-child{ border-bottom:none; }

/* Body measurement diagram */
.measure-figure{
  max-width:220px; margin:0 auto;
  display:flex; align-items:center; justify-content:center;
  background: var(--light-grey); border-radius:.75rem; aspect-ratio:2/3;
}

/* Tabs for role switch demo banner */
.demo-banner{
  background: rgba(var(--gold-rgb),.12); border:1px solid rgba(var(--gold-rgb),.3);
  color: var(--navy); font-size:.78rem; padding:.6rem 1rem; border-radius:.6rem; margin-bottom:1.25rem;
}

/* =========================================================
   PAGES DE CONNEXION (portails distincts Client / Commercial)
   ========================================================= */

/* ---------- CHOIX DE PORTAL (connexion.html) ---------- */
.portal-pick-hero{
  background: linear-gradient(135deg, var(--navy-darker) 0%, var(--navy-dark) 55%, var(--navy) 100%);
  color:#fff; padding: 3.5rem 0;
}
.portal-pick-hero .pp-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.7rem; text-transform:uppercase; letter-spacing:.14em; font-weight:700;
  color: var(--gold); border:1px solid rgba(var(--gold-rgb),.4);
  padding:.3rem .7rem; border-radius:999px; margin-bottom:1rem;
}
.portal-pick-hero h1{
  font-family: var(--font-display); font-weight:800; font-size:clamp(1.8rem, 4vw, 2.6rem); margin-bottom:.6rem;
}
.portal-pick-hero p{ color: rgba(255,255,255,.7); max-width:640px; margin:0 auto; }

.portal-pick-card{
  border-radius:1rem; border:1px solid var(--border-c); background:#fff;
  padding:2rem; height:100%; display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.portal-pick-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(14,25,41,.12); }
.portal-pick-card .pp-icon{
  width:56px;height:56px;border-radius:.9rem; display:flex;align-items:center;justify-content:center;
  font-size:1.6rem; margin-bottom:1.1rem;
}
.portal-pick-card .pp-icon.client{ background: rgba(var(--navy-rgb),.1); color: var(--navy); }
.portal-pick-card .pp-icon.commercial{ background: rgba(var(--gold-rgb),.18); color:#8a6d2f; }
.portal-pick-card h3{ font-family: var(--font-display); font-weight:700; color: var(--navy); font-size:1.25rem; margin-bottom:.35rem; }
.portal-pick-card .pp-role{ font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700; color: var(--gold); margin-bottom:.9rem; }
.portal-pick-card p{ color: var(--muted); font-size:.85rem; flex:1; margin-bottom:1.25rem; }
.portal-pick-card ul{ list-style:none; padding:0; margin:0 0 1.4rem; }
.portal-pick-card ul li{
  display:flex; align-items:center; gap:.55rem; font-size:.82rem; color: #3a4a63; margin-bottom:.5rem;
}
.portal-pick-card ul li i{ color: var(--gold); font-size:.9rem; }
.portal-pick-card.commercial{
  background: var(--navy-darker); border-color: rgba(var(--gold-rgb),.35); color:#fff;
}
.portal-pick-card.commercial h3{ color:#fff; }
.portal-pick-card.commercial .pp-role{ color: var(--gold); }
.portal-pick-card.commercial p{ color: rgba(255,255,255,.65); }
.portal-pick-card.commercial ul li{ color: rgba(255,255,255,.8); }
.portal-pick-card.commercial ul li i{ color: var(--gold); }

/* ---------- CONNEXION COMMERCIALE (split screen) ---------- */
.auth-split{ display:flex; min-height:100vh; }
.auth-aside{
  flex:1 1 46%; background:
    radial-gradient(circle at 85% 12%, rgba(var(--gold-rgb),.12), transparent 40%),
    linear-gradient(160deg, var(--navy-darker) 0%, var(--navy-dark) 60%, var(--navy) 100%);
  color:#fff; padding:3.5rem 3.5rem; display:flex; flex-direction:column;
  justify-content:space-between; position:relative; overflow:hidden;
}
.auth-aside::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 85% 15%, rgba(var(--gold-rgb),.14), transparent 45%);
}
.auth-aside .aa-inner{ position:relative; z-index:1; }
.auth-aside .aa-brand{ display:flex; align-items:center; gap:.8rem; margin-bottom:3rem; }
.auth-aside .aa-brand img{ height:34px; }
.auth-aside .aa-eyebrow{
  display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; text-transform:uppercase;
  letter-spacing:.12em; font-weight:700; color: var(--gold);
  border:1px solid rgba(var(--gold-rgb),.4); padding:.28rem .65rem; border-radius:999px; margin-bottom:1.2rem;
}
.auth-aside h1{ font-family: var(--font-display); font-weight:800; font-size:clamp(1.7rem,3.2vw,2.4rem); margin-bottom:1rem; }
.auth-aside .aa-sub{ color: rgba(255,255,255,.65); font-size:.9rem; max-width:420px; margin-bottom:2rem; }
.auth-aside .aa-feature{ display:flex; gap:.8rem; align-items:flex-start; margin-bottom:1rem; }
.auth-aside .aa-feature .af-ic{
  width:38px;height:38px;flex-shrink:0; border-radius:.6rem;
  background: rgba(var(--gold-rgb),.15); color: var(--gold);
  display:flex;align-items:center;justify-content:center; font-size:1.05rem;
}
.auth-aside .aa-feature .af-t{ font-size:.85rem; font-weight:600; }
.auth-aside .aa-feature .af-s{ font-size:.75rem; color: rgba(255,255,255,.55); }
.auth-aside .aa-foot{ font-size:.72rem; color: rgba(255,255,255,.4); }

.auth-form-panel{ flex:1 1 54%; display:flex; align-items:center; justify-content:center; padding:3rem 2rem; background: var(--light-grey); }
.auth-form-panel .afp-inner{ width:100%; max-width:420px; }
.auth-form-panel .afp-back{ font-size:.78rem; color: var(--muted); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; margin-bottom:1.4rem; }
.auth-form-panel .afp-back:hover{ color: var(--navy); }
.auth-form-panel .afp-title{ font-family: var(--font-display); font-weight:700; color: var(--navy); font-size:1.5rem; margin-bottom:.25rem; }
.auth-form-panel .afp-sub{ color: var(--muted); font-size:.85rem; margin-bottom:1.75rem; }

/* Bandeau info accès réservé (commercial) */
.access-restricted{
  display:flex; gap:.7rem; align-items:flex-start;
  background: rgba(var(--gold-rgb),.1); border:1px dashed rgba(var(--gold-rgb),.5);
  color:#7a5c1f; font-size:.78rem; padding:.8rem .9rem; border-radius:.6rem; margin-bottom:1.5rem;
}
.access-restricted i{ font-size:1.05rem; color:#8a6d2f; margin-top:.1rem; }

/* ---------- CONNEXION CLIENTE (auth-card enrichie) ---------- */
.auth-card .auth-role-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color: var(--navy); background: rgba(var(--navy-rgb),.07);
  border:1px solid rgba(var(--navy-rgb),.15);
  padding:.28rem .7rem; border-radius:999px; margin-bottom:.9rem;
}
.auth-card .auth-role-badge i{ color: var(--gold); }
.auth-card .referral-hint{
  font-size:.72rem; color: var(--muted); margin-top:.35rem; display:flex; align-items:center; gap:.35rem;
}
.auth-card .referral-hint i{ color: var(--gold); }
.auth-switch-link{ font-size:.82rem; color: var(--muted); }
.auth-switch-link a{ color: var(--navy); font-weight:700; text-decoration:none; }
.auth-switch-link a:hover{ color: var(--gold); }
.password-toggle{
  position:absolute; right:.75rem; top:50%; transform:translateY(-50%);
  border:none; background:none; color: var(--muted); cursor:pointer; font-size:1rem; z-index:2;
}
.password-toggle:hover{ color: var(--navy); }

@media (max-width: 991.98px){
  .auth-aside{ display:none; }
  .auth-form-panel{ flex:1 1 100%; }
}

/* =========================================================
   Bandeau supérieur — actions haut à droite + logo centré
   (harmonisation avec le backoffice STMS et le portail employé)
   ========================================================= */
.pt-logo{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  line-height:0;
}
.pt-logo img{ height:34px; display:block; }
.pt-action{
  display:inline-flex; align-items:center; justify-content:center;
  position:relative;
  min-width:36px; height:36px;
  border-radius:.55rem;
  color: var(--navy);
  text-decoration:none;
  transition: color .2s, background .2s;
}
.pt-action:hover{ color: var(--gold); background: #faf7f0; }
.pt-badge{
  position:absolute; top:2px; right:2px;
  min-width:15px; height:15px;
  padding:0 4px;
  border-radius:8px;
  background:#ef4444; color:#fff;
  font-size:.6rem; font-weight:700;
  line-height:15px; text-align:center;
}
.pt-action .lang-flag{ width:20px; height:14px; object-fit:cover; border-radius:2px; }
.pt-action.dropdown-toggle::after{ display:none; }
.pt-user{ gap:.5rem; }
.pt-avatar{ background: var(--gold); color:#fff; }
.pt-actions .dropdown-menu{ z-index:1060; }

[data-theme="dark"] .pt-action{ color: var(--ink); }
[data-theme="dark"] .pt-action:hover{ color: var(--gold); background:#252833; }

/* =========================================================
   MODE SOMBRE — data-theme="dark" (espaces Client & Commercial)
   ========================================================= */
[data-theme="dark"] body.portal-body{ background: #12141a; }
[data-theme="dark"] .portal-topbar{ background: var(--surface); }
[data-theme="dark"] .portal-topbar .pt-title{ color: var(--ink); }
[data-theme="dark"] .portal-sidebar-toggle{ color: var(--ink); }
[data-theme="dark"] .stat-card,
[data-theme="dark"] .portal-table,
[data-theme="dark"] .kanban-col,
[data-theme="dark"] .mlm-node,
[data-theme="dark"] .mlm-agg-card,
[data-theme="dark"] .portal-pick-card{ background: var(--surface); border-color: var(--border-c); }
[data-theme="dark"] .stat-card .sv,
[data-theme="dark"] .mlm-node .mn-name,
[data-theme="dark"] .mlm-agg-card .ac-count,
[data-theme="dark"] .portal-pick-card h3,
[data-theme="dark"] .auth-form-panel .afp-title,
[data-theme="dark"] .auth-form-panel .afp-back:hover,
[data-theme="dark"] .auth-switch-link a,
[data-theme="dark"] .auth-card .auth-role-badge{ color: var(--ink); }
[data-theme="dark"] .mlm-diagram-wrap{ background: var(--canvas); }
[data-theme="dark"] .mlm-node.is-root{ background: rgba(var(--gold-rgb), .12); }
[data-theme="dark"] .mlm-node.is-empty,
[data-theme="dark"] .mlm-node.is-empty .mn-name{ color: var(--ink-soft); }
[data-theme="dark"] .portal-pick-card ul li{ color: var(--ink-soft); }
[data-theme="dark"] .tranche-num{ background: var(--light-grey); color: var(--ink); }
[data-theme="dark"] .auth-form-panel{ background: var(--canvas); }
[data-theme="dark"] .portal-table thead th{ background: var(--light-grey); }
[data-theme="dark"] .kanban-card{ background: var(--light-grey); }
[data-theme="dark"] .demo-banner{ color: var(--ink); }
[data-theme="dark"] .access-restricted{ color: var(--gold-soft); }
[data-theme="dark"] .access-restricted i{ color: var(--gold); }
[data-theme="dark"] .password-toggle:hover{ color: var(--gold); }