/* == RESET WP/ELEMENTOR == */
#bc-chat-launcher,.bc-chat-widget,[style*="z-index: 999997"],.e-contact-buttons{display:none!important}

/* ============================================================
   EXP Dashboard — design system identique à CAD Ventilation
   Seule différence : --c-primary (couleur pilotée par site)
   ============================================================ */
#exp-app{
  --c-primary:#86BC25;
  --c-primary-hover:#75a520;
  --c-primary-soft:#E1F3D2;
  --c-primary-deep:#4d6f16;
  --c-primary-tint:#D3EEC0;      /* fond hover boutons secondaires/relance (soft assombri ~1 cran) */
  --c-primary-row:#F6FAEC;       /* fond survol des lignes de tableau (primaire ultra-diluée) */
  --c-primary-link:#94C741;      /* lien « voir plus » (primaire légèrement éclaircie) */
  --c-primary-shadow:134,188,37; /* triplet RGB de la primaire pour les box-shadow rgba() */
  --c-ink:#003046;
  --c-ink-rgb:0,48,70;           /* encre en RGB → ombres/filets/bordures : rgba(var(--c-ink-rgb),a) */
  --c-muted:#5E7A8A;
  --c-faint:#6E8593;             /* gris label — nuance AA (contraste ≥4.5:1 sur fond clair) */
  --c-bg:#FAFAFB;
  --c-card:#fff;
  --c-field:#F1F5F7;
  --c-field-hover:#EAF1F4;
  --c-overlay:rgba(0,30,44,.4);  /* scrims des overlays (filtres, popups, confirm) */

  --chart-1:#86BC25;
  --chart-2:#0057B8;
  --chart-3:#8B7CF7;
  --chart-track:#E7EEF2;

  /* Couleurs KPI par type de demande (sémantiques — indépendantes de la charte client) */
  --kpi-chatbot-bg:#E0F2FE;  --kpi-chatbot-dot:#38BDF8;  --kpi-chatbot-tx:#0369A1;
  --kpi-form-bg:#EDE9FE;     --kpi-form-dot:#8B5CF6;     --kpi-form-tx:#6D28D9;
  --kpi-call-bg:#FFEDD5;     --kpi-call-dot:#FB923C;     --kpi-call-tx:#C2410C;
  --kpi-callback-bg:#FEF9C3; --kpi-callback-dot:#FACC15; --kpi-callback-tx:#A16207;

  --st-success-bg:#E4F6EC; --st-success-tx:#0E7A46;
  --st-warning-bg:#FFF3DD; --st-warning-tx:#8F6400;
  --st-danger-bg:#FDEBEB;  --st-danger-tx:#C0353A;
  --st-info-bg:#E1F3D2;    --st-info-tx:#4d6f16;
  --st-neutral-bg:#EDF2F5; --st-neutral-tx:#5E7A8A;

  --shadow-sm:0 1px 2px rgba(var(--c-ink-rgb),.05);
  --shadow-md:0 2px 6px rgba(var(--c-ink-rgb),.04), 0 10px 28px rgba(var(--c-ink-rgb),.07);
  --shadow-lg:0 8px 20px rgba(var(--c-ink-rgb),.10), 0 24px 60px rgba(var(--c-ink-rgb),.14);
  --line:0 1px 0 rgba(var(--c-ink-rgb),.06);   /* filet séparateur horizontal réutilisable */

  --r-lg:20px; --r-md:14px; --r-sm:10px; --r-pill:999px;

  /* Échelle d'espacement (base 4px) — UN rythme pour tous les sites */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-7:28px; --sp-8:40px;

  --exp-sidebar-w:264px;
  --exp-sidebar-w-min:80px;
  --header-h:52px;
  --ease:cubic-bezier(.4,0,.2,1);
  --ease-spring:cubic-bezier(.2,.8,.2,1);   /* entrées animées (barres, segments) */
  --t-fast:.15s;                             /* durée de transition standard de l'UI */
}

#exp-app,#exp-app *,#exp-app *::before,#exp-app *::after{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif!important;
  box-sizing:border-box;
}
#exp-app button{all:unset;box-sizing:border-box;cursor:pointer;font-family:inherit}
#exp-app input,#exp-app select,#exp-app textarea{font-family:inherit;font-size:inherit;color:var(--c-ink);border:none;outline:none;background:none}
#exp-app a{color:inherit;text-decoration:none}
#exp-app ul{list-style:none}
#exp-app h1,#exp-app h2,#exp-app h3,#exp-app h4{font-weight:700;letter-spacing:-.015em;color:var(--c-ink)}
#exp-app svg{display:block}
#exp-app ::placeholder{color:var(--c-faint)}

html,html.wp-toolbar,body,body.admin-bar{margin:0!important;padding:0!important;background:#FAFAFB!important}
html{margin-top:0!important}
body{
  font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  color:#003046;font-size:14.5px;line-height:1.55;min-height:100vh;
}

/* ============================================================
   LAYOUT
   ============================================================ */
#exp-app{display:flex;min-height:100vh;background:var(--c-bg)}

/* ---------- Sidebar ---------- */
#exp-app .exp-sidebar{
  width:var(--exp-sidebar-w);
  background:var(--c-card);
  box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;z-index:60;
  transition:width .28s var(--ease), transform .28s var(--ease);
}
#exp-app .exp-sidebar-logo{
  display:flex;align-items:center;gap:12px;
  padding:22px 20px 18px;flex-shrink:0;overflow:hidden;
}
#exp-app .exp-logo-mark{
  width:40px;height:40px;border-radius:12px;flex-shrink:0;
  background:var(--c-card);box-shadow:inset 0 0 0 1px rgba(var(--c-ink-rgb),.1);
  display:grid;place-items:center;overflow:hidden;
}
#exp-app .exp-logo-mark img{width:100%;height:100%;object-fit:contain;padding:3px}
#exp-app .exp-logo-text{white-space:nowrap;transition:opacity .2s var(--ease)}
#exp-app .exp-logo-text strong{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink);line-height:1.15}
#exp-app .exp-logo-text span{display:block;font-size:11px;color:var(--c-muted);font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.15;margin-top:1px}

#exp-app .exp-sidebar-toggle{
  position:absolute;top:28px;right:-13px;z-index:5;
  width:26px;height:26px;border-radius:50%;
  background:var(--c-card);box-shadow:var(--shadow-md);
  display:grid;place-items:center;color:var(--c-muted);cursor:pointer;border:none;
  transition:transform .28s var(--ease), color .15s;
}
#exp-app .exp-sidebar-toggle:hover{color:var(--c-ink)}
#exp-app .exp-sidebar.collapsed .exp-sidebar-toggle{transform:rotate(180deg)}

#exp-app .exp-sidebar-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:6px 14px 12px;scrollbar-width:none;-ms-overflow-style:none}
#exp-app .exp-sidebar-nav::-webkit-scrollbar{display:none;width:0}

#exp-app .exp-navitem{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 12px;margin:2px 0;border-radius:var(--r-sm);
  font-weight:600;font-size:14px;color:var(--c-muted);
  position:relative;white-space:nowrap;overflow:hidden;
  transition:background .15s,color .15s;text-align:left;cursor:pointer;
}
#exp-app .exp-navitem svg{flex-shrink:0}
#exp-app .exp-navitem:hover{background:var(--c-bg);color:var(--c-ink)}
#exp-app .exp-navitem.active{background:var(--c-primary-soft);color:var(--c-ink)}
#exp-app .exp-navitem.active::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3.5px;height:20px;border-radius:var(--r-pill);background:var(--c-primary);
}
#exp-app .exp-navlabel{transition:opacity .2s var(--ease)}

#exp-app .exp-sidebar-foot{
  flex-shrink:0;padding:14px;margin-top:auto;
  background:linear-gradient(0deg,var(--c-bg) 60%,transparent);
}
#exp-app .exp-powered{
  display:flex;flex-direction:row;gap:8px;align-items:center;justify-content:center;
  white-space:nowrap;padding:11px 12px;margin-top:10px;
  background:var(--c-card);border-radius:var(--r-md);box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease);
}
#exp-app .exp-powered:hover{transform:translateY(-2px);box-shadow:0 3px 8px rgba(var(--c-ink-rgb),.06), 0 12px 26px rgba(var(--c-ink-rgb),.09)}
#exp-app .exp-powered span{font-size:9px;font-weight:400;letter-spacing:.07em;text-transform:uppercase;color:var(--c-faint)}
#exp-app .exp-powered img{height:16px;width:auto;display:block}

/* Sidebar réduite */
#exp-app .exp-sidebar.collapsed{width:var(--exp-sidebar-w-min)}
#exp-app .exp-sidebar.collapsed .exp-logo-text,
#exp-app .exp-sidebar.collapsed .exp-navlabel,
#exp-app .exp-sidebar.collapsed .exp-powered{display:none}
#exp-app .exp-sidebar.collapsed .exp-navitem{justify-content:center;gap:0;padding:11px 0}
#exp-app .exp-sidebar.collapsed .exp-sidebar-logo{justify-content:center;padding-left:0;padding-right:0}
#exp-app .exp-sidebar.collapsed .exp-sidebar-foot{padding-left:14px;padding-right:14px}

/* ---------- Zone principale ---------- */
#exp-app .exp-main-wrap{flex:1;margin-left:var(--exp-sidebar-w);min-width:0;transition:margin-left .28s var(--ease);display:flex;flex-direction:column}
#exp-app.exp-sb-collapsed .exp-main-wrap{margin-left:var(--exp-sidebar-w-min)}

@media(max-width:900px){
  #exp-app .exp-sidebar{transform:translateX(-100%)}
  #exp-app .exp-sidebar.mobile-open{transform:translateX(0)}
  #exp-app .exp-main-wrap{margin-left:0!important}
  #exp-app .exp-sidebar-toggle{display:none}
  #exp-app .exp-scrim{position:fixed;inset:0;background:var(--c-overlay);z-index:55;opacity:0;pointer-events:none;transition:opacity .2s}
  #exp-app .exp-scrim.on{opacity:1;pointer-events:auto}
  #exp-app .exp-mobile-burger{display:grid!important}
  #exp-app .exp-sidebar.mobile-open ~ .exp-mobile-burger{display:none!important}
  #exp-app .exp-topheader{padding-left:70px}
}
#exp-app .exp-mobile-burger{
  display:none;position:fixed;top:5px;left:18px;z-index:65;
  width:42px;height:42px;border-radius:var(--r-sm);background:var(--c-card);
  box-shadow:var(--shadow-md);
  place-items:center;color:var(--c-ink);border:none;cursor:pointer;
}

/* ---------- Header ---------- */
#exp-app .exp-topheader{display:none!important}
#exp-app .exp-topheader::after{display:none!important;content:none!important}
#exp-app .exp-header-link{margin-left:auto;align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:6px;color:var(--c-muted);font-size:13px;font-weight:600;text-decoration:none;line-height:1;white-space:nowrap;transition:color .15s}
#exp-app .exp-header-link:hover{color:var(--c-ink)}
#exp-app .exp-header-link svg{flex-shrink:0}

/* ---------- Contenu ---------- */
#exp-app .exp-main{padding:28px;max-width:1440px;width:100%;margin:0 auto;flex:1}
#exp-app .exp-panel{display:none}
#exp-app .exp-panel.active{display:block}
@keyframes expPageIn{from{opacity:1;transform:none}to{opacity:1;transform:none}}

#exp-app .exp-title{font-size:24px;font-weight:800;margin:0 0 6px;letter-spacing:-.015em}
#exp-app .exp-subtitle{color:var(--c-muted);font-weight:500;margin:0;padding:2px 0 40px;font-size:14px}

/* ============================================================
   COMPOSANTS
   ============================================================ */

/* ---------- Boutons ---------- */
#exp-app .exp-btn,
#exp-app .exp-btn-primary,
#exp-app .exp-btn-secondary,
#exp-app .exp-btn-send,
#exp-app .exp-btn-whatsapp,
#exp-app .exp-btn-sms,
#exp-app .exp-btn-outline,
#exp-app .exp-btn-ghost,
#exp-app .exp-btn-danger{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 20px;border-radius:var(--r-sm);
  font-size:14px;font-weight:700;white-space:nowrap;
  transition:background .15s,box-shadow .15s,transform .1s;cursor:pointer;border:none;
  align-self:flex-start;width:auto;
}
#exp-app .exp-btn:active,#exp-app .exp-btn-primary:active,#exp-app .exp-btn-send:active,#exp-app .exp-btn-secondary:active{transform:scale(.98)}
#exp-app .exp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 20px;border-radius:var(--r-sm);
  font-size:14px;font-weight:700;white-space:nowrap;
  transition:background .15s,box-shadow .15s,transform .1s;cursor:pointer;border:none;
}
#exp-app .exp-btn:active{transform:scale(.98)}
#exp-app .exp-btn-primary,#exp-app .exp-btn-send{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:42px;padding:0 20px;border-radius:var(--r-sm);
  font-size:14px;font-weight:700;white-space:nowrap;
  transition:background .15s,box-shadow .15s,transform .1s;cursor:pointer;border:none;
  background:var(--c-primary);color:#fff;align-self:flex-start;
}
#exp-app .exp-btn-send:active,#exp-app .exp-btn-primary:active{transform:scale(.98)}
#exp-app .exp-btn-primary:hover,#exp-app .exp-btn-send:hover{background:var(--c-primary-hover);box-shadow:0 6px 16px rgba(var(--c-primary-shadow),.35)}
#exp-app .exp-btn-secondary{background:var(--c-primary-soft);color:var(--c-primary-deep)}
#exp-app .exp-btn-secondary:hover{background:var(--c-primary-tint)}
#exp-app .exp-btn-outline{background:var(--c-card);color:var(--c-ink);box-shadow:inset 0 0 0 1.5px rgba(var(--c-ink-rgb),.12)}
#exp-app .exp-btn-outline:hover{box-shadow:inset 0 0 0 1.5px rgba(var(--c-ink-rgb),.22), var(--shadow-sm)}
#exp-app .exp-btn-ghost{color:var(--c-muted)}
#exp-app .exp-btn-ghost:hover{background:var(--c-field);color:var(--c-ink)}
#exp-app .exp-btn-danger{background:var(--st-danger-bg);color:var(--st-danger-tx)}
#exp-app .exp-btn-danger:hover{background:#FBDCDC}
#exp-app .exp-btn-whatsapp{background:#25D366;color:#fff}
#exp-app .exp-btn-whatsapp:hover{background:#1da851}
#exp-app .exp-btn-sms{background:var(--c-primary);color:#fff}
#exp-app .exp-btn-sms:hover{background:var(--c-primary-hover)}
#exp-app .exp-relance-btn{background:var(--c-primary-soft);color:var(--c-primary-deep);height:36px;padding:0 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border:none}
#exp-app .exp-relance-btn:hover{background:var(--c-primary-tint)}
#exp-app .exp-relance-done{display:inline-flex;align-items:center;gap:6px;background:var(--st-success-bg);color:var(--st-success-tx);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--r-pill)}

/* ---------- Cartes ---------- */
#exp-app .exp-card,#exp-app .exp-form-card{
  background:var(--c-card);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);padding:24px;
  transition:box-shadow .2s;
}
#exp-app .exp-form-card{margin-bottom:28px}
#exp-app .exp-form-card-title{font-size:15px;font-weight:700;margin:0 0 16px;display:flex;align-items:center;gap:9px;color:var(--c-ink)}

/* ---------- KPI ---------- */
#exp-app .exp-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-bottom:28px}
#exp-app .exp-kpi{background:var(--c-card);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:16px 18px;transition:box-shadow .2s}
#exp-app .exp-kpi:hover{box-shadow:var(--shadow-md)}
#exp-app .exp-kpi-header{display:flex;align-items:center;gap:8px;margin-bottom:8px}
#exp-app .exp-kpi-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
#exp-app .exp-kpi-label{font-size:12.5px;color:var(--c-muted);font-weight:600}
#exp-app .exp-kpi-val{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--c-ink)}

/* ---------- Badges ---------- */
#exp-app .exp-badge{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;border-radius:var(--r-pill);
  padding:4px 11px;white-space:nowrap;cursor:pointer;user-select:none;
}
#exp-app .exp-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
#exp-app .exp-badge.type-badge::before{display:none}
#exp-app .exp-badge.success{background:var(--st-success-bg);color:var(--st-success-tx)}
#exp-app .exp-badge.warning{background:var(--st-warning-bg);color:var(--st-warning-tx)}
#exp-app .exp-badge.danger{background:var(--st-danger-bg);color:var(--st-danger-tx)}
#exp-app .exp-badge.info{background:var(--st-info-bg);color:var(--st-info-tx)}
#exp-app .exp-badge.neutral{background:var(--st-neutral-bg);color:var(--st-neutral-tx)}
#exp-app .exp-badge.type-chatbot{background:var(--kpi-chatbot-bg);color:var(--kpi-chatbot-tx)}
#exp-app .exp-badge.type-form{background:var(--kpi-form-bg);color:var(--kpi-form-tx)}
#exp-app .exp-badge.type-call{background:var(--kpi-call-bg);color:var(--kpi-call-tx)}
#exp-app .exp-badge.type-callback{background:var(--kpi-callback-bg);color:var(--kpi-callback-tx)}
#exp-app .exp-badge.canal-email{background:var(--c-primary-soft);color:var(--c-primary-deep)}
#exp-app .exp-badge.canal-sms{background:var(--st-success-bg);color:var(--st-success-tx)}
#exp-app .exp-badge.canal-whatsapp{background:#DCF8E8;color:#128c40}

/* ---------- Formulaires ---------- */
#exp-app .exp-form-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
#exp-app .exp-form-field:last-of-type{margin-bottom:0}
#exp-app .exp-form-label{font-size:13px;font-weight:700;color:var(--c-ink)}
#exp-app .exp-form-label small{color:var(--c-muted);font-weight:500;text-transform:none;letter-spacing:0}
#exp-app .exp-form-input{
  width:100%;background:var(--c-field);border-radius:var(--r-sm);
  height:46px;padding:0 16px;font-size:14px;font-weight:500;color:var(--c-ink);
  transition:background .15s,box-shadow .15s;
}
#exp-app .exp-form-input:hover{background:var(--c-field-hover)}
#exp-app .exp-form-input:focus{
  background:var(--c-card);
  box-shadow:0 0 0 3px rgba(var(--c-primary-shadow),.35), var(--shadow-sm);
}
#exp-app .exp-form-input::placeholder{color:var(--c-faint)}
#exp-app .exp-form-col{display:flex;flex-direction:column;gap:0}
#exp-app .exp-form-col .exp-btn-send{margin-top:18px}
#exp-app .exp-filter-panel-foot .exp-btn-send{margin-top:0;width:100%;align-self:stretch}
#exp-app .exp-form-row{display:flex;flex-wrap:wrap;gap:14px}
#exp-app .exp-review-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
#exp-app .exp-review-grid .exp-form-card{margin-bottom:0}

/* ---------- Toolbar tableau + filtres ---------- */
#exp-app .exp-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
#exp-app .exp-search-bar{position:relative;min-width:250px;flex:1;max-width:340px;background:var(--c-card);box-shadow:var(--shadow-sm);border-radius:var(--r-sm);height:42px;display:flex;align-items:center}
#exp-app .exp-search-input{width:100%;height:100%;padding:0 15px 0 42px;font-weight:500;font-size:14px;color:var(--c-ink);background:none;border:none;outline:none}
#exp-app .exp-search-input:focus{box-shadow:none}
#exp-app .exp-search-bar:focus-within{box-shadow:0 0 0 3px rgba(var(--c-primary-shadow),.3)}
#exp-app .exp-search-bar > svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--c-faint);pointer-events:none}
#exp-app .exp-search-close svg{position:static!important;left:auto!important;top:auto!important;transform:none!important;pointer-events:none}
#exp-app .exp-search-close{position:absolute;right:10px;top:50%;transform:translateY(-50%);cursor:pointer;padding:4px;border-radius:6px;color:var(--c-faint)}
#exp-app .exp-search-close:hover{background:var(--c-field)}
#exp-app .exp-filter-trigger{
  display:inline-flex;align-items:center;gap:7px;height:42px;padding:0 16px;
  border-radius:var(--r-sm);background:var(--c-card);box-shadow:var(--shadow-sm);
  font-size:13.5px;font-weight:600;color:var(--c-muted);transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);cursor:pointer;border:none;
}
#exp-app .exp-filter-trigger:hover{color:var(--c-ink);box-shadow:var(--shadow-md)}
#exp-app .exp-filter-trigger.has-filters{background:var(--c-primary-soft);color:var(--c-primary-deep)}
#exp-app .exp-filter-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:999px;background:var(--c-primary);color:#fff;font-size:10.5px;font-weight:700;padding:0 4px}
#exp-app .exp-filter-trigger[data-tooltip]{position:relative}
#exp-app .exp-filter-trigger[data-tooltip]::after{content:attr(data-tooltip);position:absolute;z-index:20;bottom:calc(100% + 8px);left:50%;transform:translate(-50%,3px);padding:6px 9px;border-radius:7px;background:var(--c-ink);color:#fff;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity var(--t-fast),transform var(--t-fast),visibility 0s linear var(--t-fast);box-shadow:var(--shadow-md)}
#exp-app .exp-filter-trigger[data-tooltip]:hover::after,#exp-app .exp-filter-trigger[data-tooltip]:focus-visible::after{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity var(--t-fast),transform var(--t-fast)}
#exp-app .exp-select-mode-btn,#exp-app .exp-archives-btn{position:relative;width:42px;padding:0;justify-content:center}
#exp-app .exp-filter-trigger.active{background:var(--c-primary-soft);color:var(--c-primary-deep);box-shadow:0 0 0 2px rgba(var(--c-primary-shadow),.18)}
#exp-app .exp-bulk-archive{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:42px;padding:0 16px;border:0;border-radius:var(--r-sm);background:var(--st-success-bg);color:var(--st-success-tx);font-family:inherit;font-size:13.5px;font-weight:600;line-height:1;cursor:pointer;box-shadow:var(--shadow-sm)}
#exp-app .exp-bulk-archive:hover{opacity:.9;box-shadow:var(--shadow-md)}
#exp-app .exp-bulk-archive span,#exp-app .exp-bulk-archive strong{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
#exp-app .exp-bulk-archive strong{margin-left:2px}
#exp-app .exp-bulk-archive.is-archive{background:var(--st-danger-bg);color:var(--st-danger-tx)}

/* ---------- Panneau de filtres ---------- */
#exp-app .exp-filter-overlay{position:fixed;inset:0;background:var(--c-overlay);z-index:9998;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s linear .2s}
#exp-app .exp-filter-overlay.open{opacity:1;visibility:visible;pointer-events:all;transition:opacity .2s}
#exp-app .exp-filter-panel{position:fixed;top:0;right:0;bottom:0;width:360px;background:var(--c-card);z-index:9999;transform:translateX(calc(100% + 24px));visibility:hidden;pointer-events:none;transition:transform .25s var(--ease),visibility 0s linear .25s;display:flex;flex-direction:column;box-shadow:var(--shadow-lg)}
#exp-app .exp-filter-panel.open{transform:translateX(0);visibility:visible;pointer-events:auto;transition:transform .25s var(--ease)}
#exp-app .exp-filter-panel-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;box-shadow:0 1px 0 rgba(var(--c-ink-rgb),.06)}
#exp-app .exp-filter-panel-body{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:20px}
#exp-app .exp-filter-panel-foot{padding:20px 24px;box-shadow:0 -1px 0 rgba(var(--c-ink-rgb),.06)}
#exp-app .exp-filter{display:flex;flex-direction:column;gap:6px}
#exp-app .exp-filter-label{font-size:12px;font-weight:700;color:var(--c-faint);text-transform:uppercase;letter-spacing:.06em}
#exp-app .exp-filter-select{
  font-size:14px;font-weight:500;color:var(--c-ink);
  padding:0 42px 0 14px;border-radius:var(--r-sm);background:var(--c-field);height:46px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 2L4.5 6.5L8 2' stroke='%235E7A8A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;border:none;
}
#exp-app .exp-filter-select:focus{background-color:var(--c-card);box-shadow:0 0 0 3px rgba(var(--c-primary-shadow),.35)}

@media(max-width:820px){
  #exp-app .exp-filter-panel{top:auto;right:0;left:0;bottom:0;width:100%;max-height:85vh;border-radius:20px 20px 0 0;transform:translateY(100%)}
  #exp-app .exp-filter-panel.open{transform:translateY(0)}
}

/* ---------- Tableaux ---------- */
#exp-app .exp-dcard{background:var(--c-card);border-radius:var(--r-lg);box-shadow:none;border:1px solid rgba(var(--c-ink-rgb),.06);padding:8px 0 0;overflow:hidden}
#exp-app .exp-dscroll{overflow-x:auto;overflow-y:hidden}
#exp-app table.exp-data{width:100%;border-collapse:collapse;min-width:1220px}
#exp-app table.exp-data th{
  text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c-faint);padding:12px 18px;white-space:nowrap;
}
#exp-app table.exp-data td{
  padding:15px 18px;font-weight:500;font-size:13px;vertical-align:middle;
  border-bottom:1px solid rgba(var(--c-ink-rgb),.07);white-space:nowrap;color:var(--c-ink);
}
#exp-app table.exp-data tbody tr:last-child td{border-bottom:none}
#exp-app table.exp-data tbody tr{transition:background .12s}
#exp-app table.exp-data tbody tr:hover{background:var(--c-primary-row)}
#exp-app table.exp-data tbody tr.exp-row-selected{background:var(--c-primary-soft)}
#exp-app .exp-select-col{display:none!important;width:48px;min-width:48px;max-width:48px;padding-left:18px!important;padding-right:4px!important}
#exp-app.exp-selection-mode .exp-select-col{display:table-cell!important}
#exp-app .exp-row-check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;cursor:pointer}
#exp-app .exp-row-check input{position:absolute;opacity:0;pointer-events:none}
#exp-app .exp-row-check span{width:18px;height:18px;border:2px solid var(--c-faint);border-radius:5px;background:var(--c-card);display:grid;place-items:center;transition:background .15s,border-color .15s,box-shadow .15s}
#exp-app .exp-row-check span::after{content:"";width:8px;height:4px;border:solid #fff;border-width:0 0 2px 2px;transform:rotate(-45deg) translateY(-1px);opacity:0}
#exp-app .exp-row-check input:checked + span{background:var(--c-primary);border-color:var(--c-primary);box-shadow:0 0 0 3px rgba(var(--c-primary-shadow),.18)}
#exp-app .exp-row-check input:checked + span::after{opacity:1}
#exp-app .exp-row-check input:focus-visible + span{outline:2px solid var(--c-primary);outline-offset:2px}
#exp-app table.exp-data .cell-entity{display:flex;align-items:center;gap:12px}
#exp-app table.exp-data .entity-ico{
  width:38px;height:38px;border-radius:var(--r-sm);flex-shrink:0;
  display:grid;place-items:center;font-weight:800;font-size:13px;
  background:var(--c-primary-soft);color:var(--c-primary-deep);
}
#exp-app table.exp-data .cell-main{display:block;font-weight:700;color:var(--c-ink);max-width:220px;overflow:hidden;text-overflow:ellipsis}
#exp-app table.exp-data td.cell-sub{font-size:13px;color:var(--c-muted);font-weight:500;width:530px;min-width:530px;max-width:530px;overflow:hidden;text-overflow:clip;cursor:default;white-space:nowrap;padding-right:28px!important}
#exp-app table.exp-data td.cell-sub .exp-msg-preview{display:inline-block;max-width:430px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
#exp-app table.exp-data .exp-msg-more{display:inline-flex;align-items:center;margin-left:8px;margin-right:8px;color:var(--c-primary-link);font-weight:800;cursor:pointer;white-space:nowrap;text-decoration:none;text-underline-offset:2px;vertical-align:middle}
#exp-app table.exp-data .exp-msg-more:hover{color:var(--c-primary-link);text-decoration:underline}
#exp-app .exp-mobile-card-msg{cursor:pointer}
#exp-app #msg-popup-body{max-height:min(52vh,420px);overflow-y:auto}
#exp-app table.exp-data th:last-child,#exp-app table.exp-data td:last-child{width:530px;min-width:530px;max-width:530px}
#exp-app table.exp-data a{color:var(--c-ink);text-decoration:none;font-weight:600;transition:color .15s}
#exp-app table.exp-data a:hover{color:var(--c-primary)}
#exp-app table.exp-data .row-actions{display:flex;gap:4px;justify-content:flex-end}

/* ---------- Pagination ---------- */
#exp-app .exp-pag,#exp-app .exp-cadpag{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px 18px;flex-wrap:wrap}
#exp-app .exp-pag-btn,#exp-app .exp-cadpag-btn{
  min-width:36px;height:36px;padding:0 8px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:700;color:var(--c-muted);border:none;background:none;cursor:pointer;
  display:grid;place-items:center;transition:color var(--t-fast),background var(--t-fast),box-shadow var(--t-fast);
}
#exp-app .exp-pag-btn:hover,#exp-app .exp-cadpag-btn:hover{background:var(--c-field);color:var(--c-ink)}
#exp-app .exp-pag-btn.active,#exp-app .exp-cadpag-btn.current{background:var(--c-ink);color:#fff;font-weight:700}
#exp-app .exp-pag-arrow{display:grid;place-items:center;width:36px;height:36px;border-radius:var(--r-sm);color:var(--c-muted);cursor:pointer}
#exp-app .exp-pag-arrow:hover:not(.disabled){background:var(--c-field);color:var(--c-ink)}
#exp-app .exp-pag-arrow.disabled{opacity:.35;pointer-events:none}
#exp-app .exp-pag-dots{display:grid;place-items:center;width:28px;color:var(--c-faint)}

/* ---------- SMS popup ---------- */
#exp-app .exp-sms-overlay,#exp-app .exp-toast-overlay,#exp-app .exp-confirm-overlay{
  position:fixed;inset:0;z-index:9999;background:var(--c-overlay);
  backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s,visibility 0s linear .2s;
}
#exp-app .exp-sms-overlay.show,#exp-app .exp-toast-overlay.show,#exp-app .exp-confirm-overlay.show{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .2s}
#exp-app .exp-sms-popup,#exp-app .exp-confirm-box{
  width:100%;max-width:460px;background:var(--c-card);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:28px;position:relative;
}
#exp-app .exp-sms-popup-title{font-size:17px;font-weight:800;margin:0 0 6px;color:var(--c-ink)}
#exp-app .exp-sms-popup-dest{color:var(--c-muted);font-weight:500;margin:0;padding-bottom:14px;font-size:13px}
#exp-app .exp-sms-popup-msg{background:var(--c-field);border-radius:var(--r-sm);padding:14px 16px;font-size:13.5px;line-height:1.5;color:var(--c-ink);white-space:pre-wrap;margin-bottom:20px}
#exp-app .exp-sms-popup-actions{display:flex;justify-content:center;gap:10px}
#exp-app .exp-toast-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--c-muted);cursor:pointer}
#exp-app .exp-toast-close:hover{background:var(--c-field)}

/* ---------- Toast (petit) ---------- */
#exp-app .exp-toast-box{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  background:var(--c-card);color:var(--c-ink);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:28px 32px;font-size:14px;font-weight:600;text-align:center;
  position:relative;max-width:360px;
}
#exp-app .exp-toast-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center}
#exp-app .exp-toast-icon.ok{background:var(--st-success-bg);color:var(--st-success-tx)}
#exp-app .exp-toast-icon.err{background:var(--st-danger-bg);color:var(--st-danger-tx)}

/* ---------- Confirm ---------- */
#exp-app .exp-confirm-icon{width:44px;height:44px;border-radius:50%;background:var(--c-primary-soft);color:var(--c-primary-deep);display:grid;place-items:center;margin:0 auto 14px}
#exp-app .exp-confirm-msg{text-align:center;font-weight:600;color:var(--c-ink);margin:0;padding-bottom:22px}
#exp-app .exp-confirm-actions{display:flex;justify-content:center;gap:10px}
#exp-app .exp-confirm-no{height:42px;padding:0 20px;border-radius:var(--r-sm);background:var(--c-field);color:var(--c-ink);font-weight:700;font-size:13.5px;cursor:pointer;border:none}
#exp-app .exp-confirm-no:hover{background:var(--c-field-hover)}
#exp-app .exp-confirm-yes{height:42px;padding:0 20px;border-radius:var(--r-sm);background:var(--c-primary);color:#fff;font-weight:700;font-size:13.5px;cursor:pointer;border:none}
#exp-app .exp-confirm-yes:hover{background:var(--c-primary-hover)}

/* ---------- Info rows (coordonnées) ---------- */
#exp-app .exp-info-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;box-shadow:0 1px 0 rgba(var(--c-ink-rgb),.06)}
#exp-app .exp-info-row:last-child{box-shadow:none}
#exp-app .exp-info-content{display:flex;flex-direction:column;gap:2px;min-width:0}
#exp-app .exp-info-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c-faint)}
#exp-app .exp-info-val{font-size:14.5px;font-weight:600;color:var(--c-ink);overflow:hidden;text-overflow:ellipsis}
#exp-app .exp-copy-btn{width:38px;height:38px;border-radius:var(--r-sm);display:grid;place-items:center;color:var(--c-muted);flex-shrink:0;cursor:pointer;border:none;background:none}
#exp-app .exp-copy-btn:hover{background:var(--c-field);color:var(--c-ink)}

/* ---------- Steps (procédure photos) ---------- */
#exp-app .exp-step{display:flex;align-items:center;gap:16px;background:var(--c-card);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:18px 20px;margin-bottom:12px;transition:box-shadow .2s}
#exp-app .exp-step:hover{box-shadow:var(--shadow-md)}
#exp-app .exp-step-num{flex-shrink:0;width:38px;height:38px;border-radius:var(--r-sm);background:var(--c-primary);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:800}
#exp-app .exp-step-title{font-size:14.5px;font-weight:700;color:var(--c-ink)}
#exp-app .exp-step-desc{font-size:13px;color:var(--c-muted);font-weight:500;margin-top:2px}
#exp-app .exp-btns{display:flex;gap:12px;flex-wrap:wrap}
#exp-app .exp-btn-primary,#exp-app .exp-btn-secondary{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 20px;
  border-radius:var(--r-sm);font-size:14px;font-weight:700;cursor:pointer;
}

/* ---------- Mobile cards ---------- */
#exp-app .exp-mobile-cards{display:none;flex-direction:column;gap:12px}
#exp-app .exp-mobile-card{background:var(--c-card);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:16px}
#exp-app .exp-mobile-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
#exp-app .exp-mobile-card-name{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-weight:700;color:var(--c-ink)}
#exp-app .exp-mobile-card-details{display:flex;flex-direction:column;gap:4px;font-size:13.5px;margin-bottom:10px}
#exp-app .exp-mobile-card-details a{color:var(--c-primary-deep);font-weight:600}
#exp-app .exp-mobile-card-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--c-muted);margin-bottom:10px}
#exp-app .exp-mobile-card-msg{font-size:13.5px;color:var(--c-muted);margin:0}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  #exp-app .exp-kpis{grid-template-columns:repeat(2,1fr)}
  #exp-app .exp-kpi:first-child{grid-column:span 2}
  #exp-app .exp-review-grid{grid-template-columns:1fr}
  #exp-app .exp-sms-popup-actions{flex-direction:column}
  #exp-app .exp-btn-primary,#exp-app .exp-btn-secondary{width:100%;justify-content:center}
  #exp-app .exp-step{flex-direction:column;text-align:center}
  #exp-app .exp-main{padding:18px 16px 40px}
  #exp-app .exp-title{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  #exp-app *{transition:none!important;animation:none!important}
}


/* ============================================================
   BLINDAGE — priorite absolue sur le theme / kit Elementor.
   Le kit force p{margin:0!important} site-wide : ce bloc
   re-impose nos espacements avec !important + specificite #id.
   ============================================================ */
#exp-app p{margin:0!important}
#exp-app .exp-title{margin:0 0 2px!important;padding:0!important}
#exp-app .exp-subtitle{margin:0!important;padding:0 0 40px!important}
#exp-app .exp-kpis{margin-bottom:28px!important}
#exp-app .exp-review-grid{margin-bottom:28px!important}
#exp-app .exp-review-grid .exp-form-card{margin-bottom:0!important}
#exp-app .exp-form-field{margin-bottom:16px!important}
#exp-app .exp-form-field:last-of-type{margin-bottom:0!important}
#exp-app .exp-form-col .exp-btn-send{margin-top:18px!important}
#exp-app .exp-btn,#exp-app .exp-btn-primary,#exp-app .exp-btn-secondary,#exp-app .exp-btn-send,#exp-app .exp-btn-whatsapp,#exp-app .exp-btn-sms,#exp-app .exp-btn-outline,#exp-app .exp-btn-ghost,#exp-app .exp-btn-danger{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:42px!important;padding:0 20px!important;border-radius:var(--r-sm)!important;width:auto!important;align-self:flex-start!important}
#exp-app .exp-filter-panel-foot .exp-btn-send{width:100%!important;align-self:stretch!important;margin-top:0!important}
#exp-app .exp-sms-popup-dest{margin:0!important;padding-bottom:14px!important}
#exp-app .exp-mobile-card-msg{margin:0!important}
#exp-app table.exp-data td{padding:15px 18px!important}
#exp-app table.exp-data th{padding:12px 18px!important}
/* BLINDAGE TABLEAU — le kit Elementor force site-wide : bordures 1px grises sur
   TOUTES les cellules (th/td), un zébrage nth-child gris sur les td, et
   vertical-align:top. On ré-impose NOTRE design (filet bas discret uniquement,
   fonds transparents, alignement vertical centré) avec !important UNIQUEMENT sur
   les propriétés qu'Elementor écrase — pas de reset global. */
#exp-app table.exp-data th{border:none!important;background:transparent!important;vertical-align:middle!important}
#exp-app table.exp-data td{border-top:none!important;border-left:none!important;border-right:none!important;border-bottom:1px solid rgba(var(--c-ink-rgb),.07)!important;background:transparent!important;vertical-align:middle!important}
#exp-app table.exp-data tbody tr:last-child td{border-bottom:none!important}
#exp-app table.exp-data tbody tr:hover td{background:var(--c-primary-row)!important}
#exp-app .exp-step-desc{margin-top:2px!important}
@media(max-width:820px){
#exp-app .exp-btn-primary,#exp-app .exp-btn-secondary{width:100%!important;align-self:stretch!important}
}

/* Blindage inputs — le kit Elementor style les input site-wide */
#exp-app .exp-search-bar{background:var(--c-card)!important;border-radius:var(--r-sm)!important;height:42px!important;border:none!important}
#exp-app input.exp-search-input,#exp-app .exp-search-input{background:transparent!important;border:none!important;outline:none!important;box-shadow:none!important;height:100%!important;padding:0 40px 0 42px!important;margin:0!important;border-radius:var(--r-sm)!important;width:100%!important;font-size:14px!important;color:var(--c-ink)!important}
#exp-app .exp-search-close{right:12px!important;display:flex!important;align-items:center!important}
#exp-app input.exp-form-input,#exp-app .exp-form-input{background:var(--c-field)!important;border:none!important;outline:none!important;box-shadow:none!important;height:46px!important;padding:0 16px!important;margin:0!important;border-radius:var(--r-sm)!important;width:100%!important;font-size:14px!important;color:var(--c-ink)!important}
#exp-app input.exp-form-input:focus,#exp-app .exp-form-input:focus{background:var(--c-card)!important;box-shadow:0 0 0 3px rgba(var(--c-primary-shadow),.35)!important}
#exp-app select.exp-filter-select,#exp-app .exp-filter-select{background-color:var(--c-field)!important;border:none!important;outline:none!important;height:46px!important;margin:0!important;border-radius:var(--r-sm)!important;color:var(--c-ink)!important}

/* ---------- Accessibilité — focus clavier visible ---------- */
#exp-app button:focus-visible,#exp-app a:focus-visible,#exp-app input:focus-visible,#exp-app select:focus-visible{outline:none!important;box-shadow:0 0 0 3px rgba(var(--c-primary-shadow),.45)!important}

/* ---------- État vide du tableau ---------- */
#exp-app table.exp-data .exp-empty-row td{padding:48px 18px!important;text-align:center!important;color:var(--c-muted)!important;font-weight:500!important}

/* ---------- Popup SMS : boutons étirés et centrés ---------- */
#exp-app .exp-sms-popup-actions .exp-btn-whatsapp,#exp-app .exp-sms-popup-actions .exp-btn-sms{flex:1 1 0!important;width:auto!important;align-self:stretch!important;justify-content:center!important}

/* ---------- Popups de validation agrandies ---------- */
#exp-app .exp-confirm-box{max-width:420px;padding:44px 36px 40px}
#exp-app .exp-confirm-msg{font-size:16px;margin:0!important;padding-bottom:28px!important}
#exp-app .exp-confirm-icon{width:56px;height:56px;margin:0 auto 18px}
#exp-app .exp-toast-box{width:100%;max-width:340px;padding:52px 32px 48px;font-size:16.5px;gap:14px}
#exp-app .exp-toast-icon{width:68px;height:68px}
#exp-app .exp-toast-icon svg{width:30px;height:30px}

/* ---------- Pastilles KPI colorées avec halo assorti ---------- */
#exp-app .dot-total{background:var(--c-primary);box-shadow:0 0 0 4px var(--c-primary-soft)}
#exp-app .dot-chatbot{background:var(--kpi-chatbot-dot);box-shadow:0 0 0 4px var(--kpi-chatbot-bg)}
#exp-app .dot-form{background:var(--kpi-form-dot);box-shadow:0 0 0 4px var(--kpi-form-bg)}
#exp-app .dot-call{background:var(--kpi-call-dot);box-shadow:0 0 0 4px var(--kpi-call-bg)}
#exp-app .dot-callback{background:var(--kpi-callback-dot);box-shadow:0 0 0 4px var(--kpi-callback-bg)}

/* ============================================================
   POLISSAGE UI/UX — passe de finition (accessibilité, responsive, micro-détails)
   ============================================================ */

/* --- Focus clavier sur les éléments interactifs (spans/cellules avec onclick) --- */
#exp-app .exp-badge[tabindex]:focus-visible,
#exp-app .exp-relance-btn:focus-visible,
#exp-app .exp-filter-trigger:focus-visible,
#exp-app .exp-pag-btn:focus-visible,
#exp-app .exp-pag-arrow:focus-visible,
#exp-app .exp-copy-btn:focus-visible,
#exp-app .exp-search-close:focus-visible,
#exp-app .exp-toast-close:focus-visible,
#exp-app .exp-mobile-card-msg:focus-visible,
#exp-app .exp-msg-more:focus-visible{
  outline:none!important;box-shadow:0 0 0 3px rgba(var(--c-primary-shadow),.45)!important;
  border-radius:var(--r-sm)!important;position:relative;z-index:1;
}
/* Les <td> et la nav prennent mal le box-shadow (overflow/collapse) → outline inset */
#exp-app .exp-navitem:focus-visible{
  outline:2px solid var(--c-primary)!important;outline-offset:-2px!important;box-shadow:none!important;
}

/* --- Feedback hover sur le badge de statut cliquable (action n°1 du dashboard) --- */
#exp-app .exp-badge.is-clickable{transition:box-shadow .15s,filter .15s}
#exp-app .exp-badge.is-clickable:hover{box-shadow:inset 0 0 0 1.5px currentColor;filter:brightness(.97)}

/* --- Harmonisation durée transition lignes de tableau --- */
#exp-app table.exp-data tbody tr{transition:background .15s!important}

/* --- Labels de colonnes/champs — token --c-faint (déjà en nuance AA) --- */
#exp-app table.exp-data th,
#exp-app .exp-filter-label,
#exp-app .exp-info-label{color:var(--c-faint)!important}

/* --- Scrollbars fines assorties (tableau, filtres, message) --- */
#exp-app .exp-dscroll,
#exp-app .exp-filter-panel-body,
#exp-app .exp-chart-bars,
#exp-app #msg-popup-body{scrollbar-width:thin;scrollbar-color:var(--chart-track) transparent}
#exp-app .exp-dscroll::-webkit-scrollbar,
#exp-app .exp-filter-panel-body::-webkit-scrollbar,
#exp-app .exp-chart-bars::-webkit-scrollbar,
#exp-app #msg-popup-body::-webkit-scrollbar{height:8px;width:8px}
#exp-app .exp-dscroll::-webkit-scrollbar-thumb,
#exp-app .exp-filter-panel-body::-webkit-scrollbar-thumb,
#exp-app .exp-chart-bars::-webkit-scrollbar-thumb,
#exp-app #msg-popup-body::-webkit-scrollbar-thumb{background:var(--chart-track);border-radius:var(--r-pill)}
#exp-app .exp-dscroll::-webkit-scrollbar-thumb:hover,
#exp-app .exp-filter-panel-body::-webkit-scrollbar-thumb:hover,
#exp-app .exp-chart-bars::-webkit-scrollbar-thumb:hover,
#exp-app #msg-popup-body::-webkit-scrollbar-thumb:hover{background:var(--c-faint)}
#exp-app .exp-dscroll::-webkit-scrollbar-track,
#exp-app .exp-filter-panel-body::-webkit-scrollbar-track,
#exp-app #msg-popup-body::-webkit-scrollbar-track{background:transparent}

/* --- reduced-motion : neutraliser aussi les micro-déplacements hover/active --- */
@media(prefers-reduced-motion:reduce){
  #exp-app .exp-powered:hover,
  #exp-app .exp-btn:active,#exp-app .exp-btn-primary:active,
  #exp-app .exp-btn-send:active,#exp-app .exp-btn-secondary:active,
  #exp-app .exp-opt:hover,#exp-app .exp-kpi:hover{transform:none!important}
}

/* ============================================================
   RESPONSIVE — bascule tableau→cartes, anti-zoom iOS, touch targets
   ============================================================ */
@media(max-width:820px){
  /* Mobile : le burger reste seul en haut, le titre passe dessous */
  #exp-app .exp-main{padding-top:66px!important}
  #exp-app .exp-title,#exp-app .exp-subtitle{padding-left:0!important}

  /* Bascule : masquer le tableau large, afficher les cartes empilées */
  #exp-app .exp-dcard{display:none!important}
  #exp-app .exp-mobile-cards{display:flex!important}

  /* Anti-zoom iOS : inputs à 16px minimum au focus */
  #exp-app input.exp-form-input,#exp-app .exp-form-input,
  #exp-app input.exp-search-input,#exp-app .exp-search-input,
  #exp-app select.exp-filter-select,#exp-app .exp-filter-select{font-size:16px!important}

  /* Touch targets ≥44px */
  #exp-app .exp-pag-btn,#exp-app .exp-pag-arrow{min-width:44px!important;height:44px!important}
  #exp-app .exp-copy-btn{width:44px!important;height:44px!important}
  #exp-app .exp-relance-btn{height:44px!important}
  #exp-app .exp-search-close{padding:10px!important}
  #exp-app .exp-badge.is-clickable{padding:8px 12px!important}
}

/* Palier tablette : KPI 5→3 colonnes avant de passer à 2 */
@media(max-width:1100px) and (min-width:821px){
  #exp-app .exp-kpis{grid-template-columns:repeat(3,1fr)}
}

/* Fix responsive final : hamburger sur sa ligne, titre en dessous */
@media(max-width:900px){
  html body #exp-app .exp-main{padding:74px 16px 40px!important}
  html body #exp-app .exp-title,
  html body #exp-app .exp-subtitle{padding-left:0!important;margin-left:0!important}
  html body #exp-app .exp-mobile-burger{top:8px!important;left:16px!important}
}

/* Test UX : Voir plus déplie la ligne Message au lieu d'ouvrir une popup */
#exp-app table.exp-data td.cell-sub.exp-msg-expanded{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;line-height:1.5!important;vertical-align:top!important}
#exp-app table.exp-data td.cell-sub.exp-msg-expanded .exp-msg-preview{display:inline!important;max-width:none!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important}
#exp-app table.exp-data td.cell-sub.exp-msg-expanded .exp-msg-more{vertical-align:baseline!important}

/* Mobile/tablette : conserver le tableau scrollable, pas les cartes */
@media(max-width:820px){
  #exp-app .exp-dcard{display:block!important}
  #exp-app .exp-mobile-cards{display:none!important}
  #exp-app .exp-dscroll{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  #exp-app table.exp-data{min-width:1500px!important}
}

/* ============================================================
   Onglet Statistiques — graphiques SVG maison.
   Toutes les couleurs suivent la charte (var(--c-*)) : changer
   --c-primary suffit à recolorer les graphiques. Aucune couleur
   de marque figée ici.
   ============================================================ */
#exp-app .exp-kpi-delta{display:block;font-size:12.5px;font-weight:700;margin-top:4px}
#exp-app .exp-kpi-delta.up{color:var(--st-success-tx)}
#exp-app .exp-kpi-delta.down{color:var(--st-danger-tx)}
#exp-app .exp-kpi-val-sm{font-size:16px;line-height:1.3;display:block;padding-top:4px}
#exp-app .exp-chart-card{margin-bottom:20px;padding:24px}
#exp-app .exp-chart-head{margin-bottom:22px}
#exp-app .exp-chart-title{font-size:16px;font-weight:700;color:var(--c-ink);margin:0}
#exp-app .exp-chart-desc{font-size:13px;color:var(--c-muted);margin:4px 0 0;font-weight:500}
#exp-app .exp-chart-empty{color:var(--c-faint);font-size:14px;text-align:center;padding:30px 0}
#exp-app .exp-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
/* min-width:0 = indispensable : sans ça une piste 1fr s'élargit pour contenir
   un SVG large au lieu de le contraindre → la carte déborde. Là, elle reste
   verrouillée à 1/2 et le graphique scrolle À L'INTÉRIEUR. */
#exp-app .exp-stats-grid > .exp-chart-card{min-width:0}
@media(max-width:1040px){#exp-app .exp-stats-grid{grid-template-columns:1fr}}

/* Barre d'outils stats : période rapide (gauche) + bouton Filtres (droite) */
#exp-app .exp-stats-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px;flex-wrap:wrap}
#exp-app .exp-period-tabs{display:inline-flex;gap:4px;background:var(--c-card);border-radius:var(--r-sm);box-shadow:var(--shadow-sm);padding:4px}
#exp-app .exp-period-btn{height:34px;padding:0 14px;border:none;background:none;border-radius:8px;font-size:13px;font-weight:600;color:var(--c-muted);cursor:pointer;transition:color .15s,background .15s;font-family:inherit}
#exp-app .exp-period-btn:hover{color:var(--c-ink);background:var(--c-field)}
#exp-app .exp-period-btn.active{background:var(--c-primary);color:#fff}
@media(max-width:560px){#exp-app .exp-period-tabs{width:100%;justify-content:space-between}#exp-app .exp-period-btn{padding:0 8px;flex:1}#exp-app #filter-bar-stats{width:100%;justify-content:flex-end}}

/* Rangée du haut : évolution mensuelle + cumul côte à côte */
#exp-app .exp-stats-grid-top{margin-bottom:20px}

/* Courbe de cumul (aire lissée) */
#exp-app .exp-svg-area{height:auto;overflow:visible;display:block}
#exp-app .exp-svg-area-fill{animation:expFade .6s ease backwards}
#exp-app .exp-svg-area-line{animation:expDraw 1s var(--ease) forwards}
#exp-app .exp-svg-area-dot{fill:var(--c-card);stroke:var(--c-primary);stroke-width:2.5;cursor:pointer;transition:r .15s;animation:expFade .5s ease backwards;animation-delay:.5s}
#exp-app .exp-svg-area-dot.on{r:6}
@keyframes expDraw{to{stroke-dashoffset:0}}
@keyframes expFade{from{opacity:0}to{opacity:1}}
/* Cumul à 1 seul mois : grande valeur centrée (stat tile) au lieu d'une courbe vide */
#exp-app .exp-cumul-tile{min-height:230px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
#exp-app .exp-cumul-big{font-size:64px;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--c-primary);font-variant-numeric:tabular-nums}
#exp-app .exp-cumul-sub{font-size:13px;color:var(--c-muted);font-weight:600}

/* Légende des types sous les barres */
#exp-app .exp-bars-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:28px;padding-top:20px;border-top:1px solid var(--chart-track)}
#exp-app .exp-bars-legend-row{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--c-muted);font-weight:600}

/* Barres (évolution mensuelle) */
/* scrollbar-gutter:stable + min-height réservent EN PERMANENCE la place de la
   barre de scroll, qu'elle apparaisse (Jour) ou non (Mois). Ainsi les deux
   conteneurs ont la même hauteur → dates alignées entre « Évolution » et
   « Demandes cumulées ». H (258) + espace scrollbar. */
#exp-app .exp-chart-bars{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;padding-bottom:14px;min-height:280px}
#exp-app .exp-svg-bars{height:auto;overflow:visible;display:block}
#exp-app .exp-svg-grid{stroke:var(--chart-track);stroke-width:1}
#exp-app .exp-svg-axis{fill:var(--c-faint);font-size:11px;font-weight:600;font-family:inherit}
#exp-app .exp-svg-axis-year{fill:var(--c-faint);font-size:9.5px;font-weight:700;font-family:inherit;opacity:.7}
#exp-app .exp-svg-barcol{transform-origin:bottom;transform-box:fill-box;animation:expBarGrow .5s var(--ease-spring) backwards;animation-delay:calc(var(--i)*40ms)}
#exp-app .exp-svg-barcol.on .exp-svg-bar-seg{opacity:.82}
#exp-app .exp-svg-bar-seg{transition:opacity .16s}
#exp-app .exp-svg-bar-zero{fill:var(--chart-track)}
#exp-app .exp-svg-bar-hit{cursor:pointer}
@keyframes expBarGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* Donuts (canaux / appareils) */
#exp-app .exp-donut-wrap{width:100%}
#exp-app .exp-donut-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center}
#exp-app .exp-svg-donut{flex:0 0 auto}
#exp-app .exp-svg-seg{cursor:pointer;transform-origin:center;transform-box:view-box;transition:transform .22s var(--ease-spring),filter .22s;animation:expSegIn .5s backwards;animation-delay:calc(var(--i)*80ms)}
#exp-app .exp-svg-seg.on{transform:scale(1.04);filter:drop-shadow(0 3px 8px rgba(var(--c-ink-rgb),.18))}
@keyframes expSegIn{from{opacity:0}to{opacity:1}}
#exp-app .exp-svg-donut-num{fill:var(--c-ink);font-size:26px;font-weight:800;font-family:inherit}
#exp-app .exp-svg-donut-lbl{fill:var(--c-muted);font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-family:inherit}
#exp-app .exp-donut-legend{flex:1;min-width:180px;display:flex;flex-direction:column;gap:11px}
#exp-app .exp-donut-legend-row{display:flex;align-items:center;gap:10px;font-size:13.5px}
#exp-app .exp-donut-dot{width:11px;height:11px;border-radius:4px;flex:0 0 auto}
#exp-app .exp-donut-legend-lbl{color:var(--c-ink);flex:1;font-weight:500}
#exp-app .exp-donut-legend-val{font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
#exp-app .exp-donut-legend-val em{color:var(--c-muted);font-weight:500;font-style:normal;font-size:12px}

/* En-tête de carte avec mini-icônes de bascule à droite (par graphique) */
#exp-app .exp-chart-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
#exp-app .exp-style-toggle{display:inline-flex;gap:2px;background:var(--c-field);border-radius:9px;padding:3px;flex:0 0 auto}
#exp-app .exp-style-ico{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:none;background:none;border-radius:7px;color:var(--c-muted);cursor:pointer;transition:color .15s,background .15s;padding:0}
#exp-app .exp-style-ico:hover{color:var(--c-ink);background:var(--c-card)}
#exp-app .exp-style-ico.active{background:var(--c-primary);color:#fff}
/* Toggle Jour|Mois (en-tête évolution / cumul) — même esprit, avec texte */
#exp-app .exp-grain-toggle{display:inline-flex;gap:2px;background:var(--c-field);border-radius:9px;padding:3px;flex:0 0 auto}
#exp-app .exp-grain-btn{height:28px;padding:0 12px;border:none;background:none;border-radius:7px;color:var(--c-muted);cursor:pointer;transition:color .15s,background .15s;font-size:12.5px;font-weight:600;font-family:inherit}
#exp-app .exp-grain-btn:hover{color:var(--c-ink);background:var(--c-card)}
#exp-app .exp-grain-btn.active{background:var(--c-primary);color:#fff}

/* Variante 2 — Barres horizontales */
#exp-app .exp-hbars{display:flex;flex-direction:column;gap:16px;padding-top:4px}
#exp-app .exp-hbar-row{cursor:default}
#exp-app .exp-hbar-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
#exp-app .exp-hbar-lbl{font-size:13.5px;font-weight:600;color:var(--c-ink)}
#exp-app .exp-hbar-val{font-size:13px;font-weight:700;color:var(--c-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
#exp-app .exp-hbar-val em{color:var(--c-muted);font-weight:500;font-style:normal;font-size:12px}
#exp-app .exp-hbar-track{height:10px;background:var(--chart-track);border-radius:var(--r-pill);overflow:hidden}
#exp-app .exp-hbar-fill{height:100%;border-radius:var(--r-pill);transform-origin:left;animation:expHBarGrow .6s var(--ease-spring) backwards;animation-delay:calc(var(--i)*60ms)}
@keyframes expHBarGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Variante 3 — Jauge (barre segmentée) */
#exp-app .exp-progress{padding-top:8px}
#exp-app .exp-progress-bar{display:flex;height:26px;border-radius:var(--r-pill);overflow:hidden;background:var(--chart-track);gap:2px}
#exp-app .exp-progress-seg{height:100%;transition:opacity .16s;cursor:default;transform-origin:left;animation:expHBarGrow .6s var(--ease-spring) backwards;animation-delay:calc(var(--i)*60ms);min-width:3px}
#exp-app .exp-progress-seg.on{opacity:.8}
#exp-app .exp-progress-seg:first-child{border-top-left-radius:var(--r-pill);border-bottom-left-radius:var(--r-pill)}
#exp-app .exp-progress-seg:last-child{border-top-right-radius:var(--r-pill);border-bottom-right-radius:var(--r-pill)}
#exp-app .exp-progress-legend{margin-top:18px}

/* Tooltip partagé */
.exp-stat-tip{position:fixed;z-index:9999;pointer-events:none;background:var(--c-ink,#003046);color:#fff;padding:10px 13px;border-radius:10px;font-size:13px;font-weight:600;opacity:0;transition:opacity .14s;box-shadow:0 8px 24px rgba(var(--c-ink-rgb),.25);font-family:-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.35;width:max-content;max-width:260px}
.exp-stat-tip b.tt{display:block;margin-bottom:6px;font-size:13px;white-space:nowrap}
.exp-tip-total{display:block;font-weight:600;opacity:.7;margin-top:7px;padding-top:6px;border-top:1px solid rgba(255,255,255,.18);font-size:12px;white-space:nowrap}
.exp-tip-rows{display:flex;flex-direction:column;gap:5px}
.exp-tip-row{display:flex;align-items:center;gap:8px;font-weight:500;font-size:12.5px;white-space:nowrap}
.exp-tip-row i{width:9px;height:9px;border-radius:3px;flex:0 0 auto;display:inline-block}
.exp-tip-row .exp-tip-lbl{flex:1 1 auto}
.exp-tip-row b{margin-left:18px;font-weight:700;font-variant-numeric:tabular-nums}
/* tooltip simple (cumul, donuts) : titre + valeur sur une ligne chacun */
.exp-stat-tip > span:not(.exp-tip-total){display:block;font-weight:600;opacity:.8;margin-top:3px;font-size:12px;white-space:nowrap}
