/* ============================================================
   MY-AGENTIFY — Espace client (dashboard.html)
   Même système graphique que le site public et le back-office,
   appliqué au vocabulaire de classes existant.
   Aucune classe, aucun identifiant n'est renommé.
   ============================================================ */

:root{
  --brand:#2563FF; --light:#7BA2FF; --ghost:#F0F5FF; --pale:#DCE7FF;
  --dark:#081436; --mid:#3D4E7A; --muted:#6B79A0;
  --border:#E4EBFA; --white:#FFFFFF; --bg:#F5F8FF;
  --green:#10B981; --red:#EF4444; --orange:#F59E0B; --blue:#2563FF;
  --radius:14px;
  --display-font:"Plus Jakarta Sans","Segoe UI",system-ui,sans-serif;
  --mono-font:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
  --shadow:0 1px 2px rgba(8,20,54,.06),0 2px 6px rgba(8,20,54,.04);
  --shadow-lg:0 8px 24px rgba(8,20,54,.08),0 24px 60px rgba(37,99,255,.12);
  --grad:linear-gradient(135deg,#2563FF 0%,#6D5CFF 100%);
}

body{
  background:var(--bg) !important;
  font-family:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif !important;
  color:var(--dark); font-size:15px; line-height:1.6; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}
html,body{ overflow-x:hidden; max-width:100% }

/* ---------- Barre supérieure ---------- */
.topbar{
  background:#fff !important; height:64px !important;
  border-bottom:1px solid var(--border) !important;
  box-shadow:0 1px 3px rgba(8,20,54,.05) !important;
  padding:0 20px !important; gap:14px;
}
.t-logo{
  font-family:inherit !important; font-size:18px !important; font-weight:800 !important;
  letter-spacing:-.04em !important; color:var(--dark) !important; text-decoration:none;
}
.t-logo span{
  background:var(--grad); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent !important;
}
.t-nav{ gap:4px !important }
.t-nav-link{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--mid) !important; font-size:13.5px !important; font-weight:600 !important;
  padding:8px 13px !important; border-radius:999px !important; text-decoration:none;
  transition:color .18s ease,background .18s ease;
}
.t-nav-link svg{ width:15px; height:15px; opacity:.8 }
.t-nav-link:hover{ color:var(--dark) !important; background:var(--ghost) !important }
.t-nav-cta{
  background:var(--grad) !important; color:#fff !important;
  box-shadow:0 4px 14px rgba(37,99,255,.28) !important; font-weight:700 !important;
}
.t-nav-cta:hover{ color:#fff !important; box-shadow:0 7px 20px rgba(37,99,255,.38) !important }

.t-user{ gap:10px !important }
.t-av-ph,.t-av{
  width:36px !important; height:36px !important; border-radius:50% !important;
  background:var(--grad) !important; color:#fff !important;
  font-weight:800 !important; font-size:14px !important;
  display:grid !important; place-items:center;
}
.t-name{ font-size:13.5px !important; font-weight:700 !important; color:var(--dark) !important }
.t-email{ font-size:11.5px !important; color:var(--muted) !important }
.tinstall{
  background:var(--ghost) !important; border:1px solid var(--pale) !important;
  color:var(--brand) !important; border-radius:999px !important;
  font-weight:700 !important; font-size:12.5px !important; padding:8px 14px !important;
  display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-family:inherit;
}
.tinstall svg,.tinstall-ico svg{ width:14px; height:14px }
.t-out{
  background:#fff !important; border:1px solid var(--border) !important;
  color:var(--red) !important; border-radius:999px !important;
  font-weight:700 !important; font-size:12.5px !important; padding:8px 15px !important;
  transition:border-color .18s ease,background .18s ease;
}
.t-out:hover{ border-color:var(--red) !important; background:#FEF2F2 !important }

/* ---------- Barre latérale ---------- */
.layout{ min-height:calc(100vh - 64px) }
.sidebar{
  width:244px !important; background:#fff !important;
  border-right:1px solid var(--border) !important;
  padding:14px 12px 18px !important;
  display:flex; flex-direction:column; gap:2px;
  position:sticky; top:64px; height:calc(100vh - 64px); overflow-y:auto;
}
.sidebar::-webkit-scrollbar{ width:6px }
.sidebar::-webkit-scrollbar-thumb{ background:var(--pale); border-radius:999px }

.s-item{
  gap:11px !important; padding:9px 11px !important; border-radius:10px !important;
  font-size:13.5px !important; font-weight:600 !important; color:var(--mid) !important;
  transition:background .16s ease,color .16s ease !important;
}
.s-item:hover{ background:var(--ghost) !important; color:var(--brand) !important }
.s-item.active{
  background:var(--ghost) !important; color:var(--brand) !important; font-weight:700 !important;
  box-shadow:inset 3px 0 0 var(--brand);
}
.si{
  width:20px !important; height:20px; flex:0 0 auto; font-size:0 !important;
  display:inline-flex; align-items:center; justify-content:center;
}
.si svg{ width:17px; height:17px }
.s-sep{
  font-size:10.5px !important; font-weight:800 !important; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted) !important; opacity:.7;
}
.s-badge{
  margin-left:auto; background:var(--brand) !important; color:#fff !important;
  font-size:10.5px !important; font-weight:800 !important;
  padding:2px 7px !important; border-radius:999px !important; min-width:18px !important;
  text-align:center;
}

/* ---------- Sections repliables (injectées par admin-nav.js) ---------- */
.snav-groupe{ margin-bottom:2px }
.grp-tete{
  display:flex; align-items:center; gap:8px; width:100%;
  background:none; border:0; cursor:pointer; font-family:inherit;
  padding:12px 10px 7px; color:var(--muted);
  font-size:10.5px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  transition:color .16s ease;
}
.grp-tete:hover{ color:var(--brand) }
.grp-lbl{ flex:1; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.grp-chev{ width:13px; height:13px; flex:0 0 auto; transition:transform .26s cubic-bezier(.22,.68,.32,1); opacity:.7 }
.snav-groupe.ferme .grp-chev{ transform:rotate(-90deg) }
.grp-pastille{
  flex:0 0 auto; background:var(--brand); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:0;
  padding:1px 6px; border-radius:999px; min-width:17px; text-align:center;
  opacity:0; transform:scale(.7); transition:opacity .2s ease,transform .2s ease;
}
.snav-groupe.ferme .grp-pastille:not([hidden]){ opacity:1; transform:none }
.grp-corps{
  display:grid; grid-template-rows:1fr; overflow:hidden;
  transition:grid-template-rows .3s cubic-bezier(.22,.68,.32,1),opacity .22s ease;
}
.grp-corps > *{ min-height:0 }
.grp-liste{ display:flex; flex-direction:column; gap:1px; min-height:0 }
.snav-groupe.ferme .grp-corps{ grid-template-rows:0fr; opacity:0 }

.snav-reduire{
  margin-top:auto; display:flex; align-items:center; gap:9px;
  background:none; border:0; border-top:1px solid var(--border);
  padding:13px 11px 4px; margin-left:-2px; margin-right:-2px;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--muted);
  cursor:pointer; transition:color .16s ease;
}
.snav-reduire:hover{ color:var(--brand) }
.snav-reduire svg{ width:16px; height:16px; flex:0 0 auto }

/* Mode réduit sur grand écran */
@media (min-width:1200px){
  body.nav-reduit .sidebar{ width:72px !important; padding:14px 10px 18px !important; overflow-x:visible }
  body.nav-reduit .grp-lbl,
  body.nav-reduit .grp-chev,
  body.nav-reduit .snav-reduire span,
  body.nav-reduit .s-badge{ display:none !important }
  body.nav-reduit .grp-tete{ justify-content:center; padding:12px 0 6px; pointer-events:none }
  body.nav-reduit .grp-tete::after{ content:""; display:block; width:22px; height:1px; background:var(--border) }
  body.nav-reduit .snav-groupe.ferme .grp-corps{ grid-template-rows:1fr; opacity:1 }
  body.nav-reduit .grp-corps,body.nav-reduit .grp-liste{ overflow:visible }
  body.nav-reduit .s-item{
    justify-content:center; padding:11px 0 !important; position:relative;
    font-size:0 !important; gap:0 !important; overflow:visible;
  }
  body.nav-reduit .s-item > :not(.si){ display:none !important }
  body.nav-reduit .snav-reduire{ justify-content:center }
  body.nav-reduit .s-item::after{
    content:attr(data-titre); position:absolute; left:calc(100% + 14px); top:50%;
    transform:translateY(-50%) translateX(-6px); font-family:inherit;
    background:var(--dark); color:#fff; font-size:12.5px !important; font-weight:600;
    padding:6px 11px; border-radius:8px; white-space:nowrap; pointer-events:none;
    opacity:0; transition:opacity .16s ease,transform .16s ease; z-index:60;
    box-shadow:0 8px 24px rgba(8,20,54,.24);
  }
  body.nav-reduit .s-item:hover::after{ opacity:1; transform:translateY(-50%) }
}

/* ---------- Tiroir sur tablette et mobile ---------- */
.nav-burger{
  display:none; width:38px; height:38px; flex:0 0 auto;
  border:1px solid var(--border); border-radius:11px; background:#fff;
  cursor:pointer; padding:0; margin-right:2px;
}
.nav-burger span{
  display:block; width:16px; height:1.9px; background:var(--dark);
  border-radius:2px; margin:3.4px auto; transition:transform .24s ease,opacity .24s ease;
}
.nav-burger.ouvert span:nth-child(1){ transform:translateY(5.3px) rotate(45deg) }
.nav-burger.ouvert span:nth-child(2){ opacity:0 }
.nav-burger.ouvert span:nth-child(3){ transform:translateY(-5.3px) rotate(-45deg) }
.nav-voile{
  position:fixed; inset:0; z-index:190; background:rgba(8,20,54,.42);
  opacity:0; pointer-events:none; transition:opacity .26s ease;
  
}
@media (max-width:1199px){
  .nav-burger{ display:block }
  .sidebar{
    display:flex !important; position:fixed !important; top:0; left:0; bottom:0;
    height:100% !important; width:278px !important; z-index:200; padding-top:18px !important;
    transform:translateX(-102%); transition:transform .3s cubic-bezier(.22,.68,.32,1);
    box-shadow:0 24px 70px rgba(8,20,54,.22);
  }
  body.nav-ouvert .sidebar{ transform:none }
  body.nav-ouvert .nav-voile{ opacity:1; pointer-events:auto }
  body.nav-ouvert{ overflow:hidden }
  .snav-reduire{ display:none }
}

/* ---------- Zone principale ---------- */
.main{ padding:26px !important; min-width:0 }
.sec-hdr{ margin-bottom:16px !important; gap:12px; flex-wrap:wrap }
.sec-title{
  font-size:19px !important; font-weight:800 !important;
  letter-spacing:-.032em; color:var(--dark) !important;
}
.p-title,.page > h1{ font-size:26px !important; font-weight:800 !important; letter-spacing:-.038em; color:var(--dark) !important }

/* ---------- Cartes ---------- */
.card{
  background:#fff !important; border:1px solid var(--border) !important;
  border-radius:var(--radius) !important; box-shadow:var(--shadow) !important;
  transition:box-shadow .24s ease;
}

.card-hdr,.card-hd{ border-bottom:1px solid var(--border) !important }
.card-title{ font-size:14.5px !important; font-weight:700 !important; color:var(--dark) !important }

/* ---------- Statistiques ---------- */
.stat,.kpi-card,.st-card{
  background:#fff !important; border:1px solid var(--border) !important;
  border-radius:var(--radius) !important; box-shadow:var(--shadow) !important;
  transition:transform .24s ease,box-shadow .24s ease;
}
.stat:hover,.kpi-card:hover,.st-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg) !important }
.stat-val,.kpi-value,.st-val{ font-weight:800 !important; letter-spacing:-.045em !important; color:var(--dark) !important; font-variant-numeric:tabular-nums }
.stat-lbl,.kpi-label,.st-lbl{
  font-size:11.5px !important; font-weight:700 !important; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted) !important;
}
.stat-icon,.kpi-icon{
  border-radius:11px !important; background:var(--ghost) !important; color:var(--brand) !important;
  display:inline-flex; align-items:center; justify-content:center;
}
.stat-icon svg,.kpi-icon svg{ width:19px; height:19px }

.stats,.st-grid,.kpi-grid{
  display:grid !important;
  grid-template-columns:repeat(auto-fit,minmax(196px,1fr)) !important; gap:14px !important;
}
@media (max-width:520px){
  .stats,.st-grid,.kpi-grid{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; gap:11px !important }
}

/* ---------- États vides ---------- */
.empty{ padding:44px 20px !important }
.empty-ico{ display:none !important }
.empty-title{ font-size:17px !important; font-weight:800 !important; color:var(--dark) !important; letter-spacing:-.025em }
.empty p{ color:var(--muted) !important; font-size:14px }

/* ---------- Boutons ---------- */
.btn,.abtn,.b-primary{
  border-radius:999px !important; font-weight:700 !important; font-size:13.5px !important;
  font-family:inherit !important; padding:10px 18px !important; cursor:pointer;
  border:1px solid var(--border) !important; background:#fff !important; color:var(--brand) !important;
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.btn:hover,.abtn:hover{ border-color:var(--brand) !important; background:var(--ghost) !important; transform:translateY(-1px) }
.btn.primary,.btn-primary,.b-primary{
  background:var(--grad) !important; color:#fff !important; border-color:transparent !important;
  box-shadow:0 4px 14px rgba(37,99,255,.28) !important;
}
.btn.primary:hover,.btn-primary:hover{ box-shadow:0 7px 20px rgba(37,99,255,.38) !important }

/* ---------- Champs ---------- */
.opt-field{ gap:7px !important; margin-bottom:16px !important }
.opt-label{
  font-size:12px !important; font-weight:700 !important; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted) !important;
}
.opt-input,.main input:not([type=checkbox]):not([type=radio]),.main select,.main textarea{
  background:#fff !important; border:1px solid var(--border) !important;
  border-radius:10px !important; padding:11px 13px !important;
  font-family:inherit !important; font-size:14.5px !important; color:var(--dark);
  transition:border-color .18s ease,box-shadow .18s ease !important;
}
.opt-input:focus,.main input:focus,.main select:focus,.main textarea:focus{
  outline:0 !important; border-color:var(--brand) !important;
  box-shadow:0 0 0 3px rgba(37,99,255,.12) !important;
}

/* ---------- Tableaux ---------- */
thead th{
  font-size:11px !important; font-weight:800 !important; letter-spacing:.07em;
  text-transform:uppercase; color:var(--muted) !important;
  background:var(--bg) !important; border-bottom:1px solid var(--border) !important;
  padding:11px 14px !important;
}
tbody td{ padding:13px 14px !important; border-bottom:1px solid var(--border) !important; color:var(--mid) }
tbody tr{ transition:background .15s ease }
tbody tr:hover{ background:var(--ghost) !important }
.tbl-scroll{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:10px }
.tbl-scroll::-webkit-scrollbar{ height:7px }
.tbl-scroll::-webkit-scrollbar-thumb{ background:var(--pale); border-radius:999px }
.tbl-scroll > table{ min-width:600px }

/* ---------- Pastilles d'état ---------- */
.badge,.tag,.pill,.status,.st-badge{ border-radius:999px !important; font-weight:700 !important; font-size:11.5px !important }

/* ---------- Barre de navigation du bas (mobile) ---------- */
.mob-nav{
  background:rgba(255,255,255,.94) !important;
  
  border-top:1px solid var(--border) !important;
  box-shadow:0 -4px 20px rgba(8,20,54,.06) !important;
  padding-bottom:env(safe-area-inset-bottom) !important;
}
.mn-item{ color:var(--muted) !important; gap:4px !important; transition:color .16s ease }
.mn-item.active{ color:var(--brand) !important }
.mn-ico{ font-size:0 !important; display:inline-flex; align-items:center; justify-content:center; height:20px }
.mn-ico svg{ width:19px; height:19px }
.mn-lbl{ font-size:9.5px !important; font-weight:700 !important; letter-spacing:-.01em }

/* ---------- Étapes PWA ---------- */
.pwa-step{ background:#fff !important; border:1px solid var(--border) !important; border-radius:var(--radius) !important; box-shadow:var(--shadow) !important }
.pwa-step-num{ background:var(--grad) !important; color:#fff !important; border-radius:999px !important; font-weight:800 !important }

/* ---------- Adaptation générale ---------- */
@media (max-width:900px){
  .main{ padding:18px !important; padding-bottom:88px !important }
  .sec-title{ font-size:17px !important }
  .sec-hdr{ flex-wrap:wrap }
}
@media (max-width:767px){
  .topbar{ padding:0 12px !important; gap:10px; height:60px !important }
  .t-logo{ font-size:16px !important }
  .t-nav{ display:none !important }
  .t-email{ display:none }
  .sidebar{ width:min(84vw,300px) !important; top:0 }
}
@media (min-width:1600px){
  .main{ padding:32px 40px !important }
  .sidebar{ width:260px !important }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.001ms !important; animation-duration:.001ms !important }
}

/* ---------- Bandeau d'accueil ---------- */
.banner{
  background:var(--grad) !important; border:0 !important;
  border-radius:18px !important; box-shadow:0 10px 30px rgba(37,99,255,.24) !important;
  padding:26px 28px !important; position:relative; overflow:hidden;
}
.banner *{ color:#fff !important }
.banner-title{ font-size:26px !important; font-weight:800 !important; letter-spacing:-.038em }
.banner-title span{ color:#fff !important }
.banner-sub{ font-size:14.5px !important; color:rgba(255,255,255,.8) !important; font-family:inherit !important }
.banner .btn,.banner a.btn,.banner button{
  background:#fff !important; color:var(--brand) !important; border:0 !important;
  box-shadow:0 6px 18px rgba(0,0,0,.16) !important; font-weight:700 !important;
}
@media (max-width:640px){ .banner{ padding:20px !important } .banner-title{ font-size:21px !important } }

/* Le bouton du bandeau garde son texte lisible malgré la règle générale */
.banner .btn,.banner a.btn,.banner button,.banner .b-primary{
  color:var(--brand) !important; background:#fff !important;
}
.banner .btn *,.banner button *{ color:var(--brand) !important }
.banner-title span{ font-style:normal; font-family:inherit !important }

/* Bandeau d'incitation : ambre adouci, même géométrie que le reste */
.nudge,.profil-banner{
  border-radius:var(--radius) !important; border:1px solid #FDE68A !important;
  background:#FFFBEB !important;
}

/* Bouton du bandeau : la règle « tout en blanc » du bandeau ne doit pas l'effacer */
.banner .banner-btn,.banner-btn{
  background:#fff !important; color:var(--brand) !important;
  border-radius:999px !important; font-weight:700 !important; padding:11px 20px !important;
  box-shadow:0 6px 18px rgba(0,0,0,.16) !important;
}
.banner .banner-btn:hover,.banner-btn:hover{ background:var(--ghost) !important; color:var(--brand) !important }

/* Les tableaux larges défilent dans leur carte — en CSS pur, sans JavaScript */
.card{ overflow:hidden }
.card table{ min-width:560px }
.tbl-scroll,.responsive-table{ overflow-x:auto; -webkit-overflow-scrolling:touch }

/* v14-72 : garde-fou icônes SVG inline — jamais plus grand que le texte qui les entoure (responsive PC / tablette / mobile).
   Spécificité volontairement minimale (:where) : les tailles déjà définies (.si svg, .stat-icon svg, .tnav-btn svg…) restent prioritaires. */
svg:where([viewBox="0 0 24 24"][stroke="currentColor"]:not([width]):not([height])){width:1em;height:1em;display:inline-block;vertical-align:-.15em;flex:none;max-width:100%}