/* == 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);
}
/* Signature : pas de carte, pas d'ombre, pas de fond, pas de voile —
   juste « Propulsé par » + le logo, posés à plat et bien lisibles.
   Aucun effet d'opacité ni de survol : le bloc reste identique en
   permanence (demande explicite — ne pas réintroduire d'opacity). */
#exp-app .exp-powered{
  display:flex;flex-direction:row;gap:7px;align-items:center;justify-content:center;
  white-space:nowrap;padding:10px 0 2px;margin-top:2px;
  background:none;border:none;box-shadow:none;border-radius:0;
}
#exp-app .exp-powered span{font-size:10px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--c-muted)}
#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}

/* Exception pour l'onglet DEMANDES uniquement : le tableau porte 14 colonnes
   et 2300px de contenu — le brider à 1440 obligerait à défiler alors qu'un
   grand écran a la place de tout montrer. Les autres onglets (formulaires,
   statistiques, coordonnées) gardent la largeur de confort : un champ ou un
   paragraphe étiré sur 2500px devient illisible.
   `:has()` cible la page courante sans toucher au HTML ni au JS. */
#exp-app .exp-main:has(.exp-panel[data-panel="contacts"].active){max-width:none;min-width:0}
#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)}

/* Bouton « Aperçu » dans le titre de carte : discret, poussé à droite par
   `margin-left:auto` (le titre est déjà en flex). Il ouvre l'e-mail tel
   qu'il sera envoyé — une action secondaire, qui ne doit pas concurrencer
   le bouton d'envoi. */
#exp-app .exp-preview-btn{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;
  height:28px;padding:0 10px;border-radius:var(--r-pill);
  border:1px solid rgba(var(--c-ink-rgb),.12);background:var(--c-card);
  color:var(--c-muted);font:inherit;font-size:12px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
#exp-app .exp-preview-btn:hover{color:var(--c-primary);border-color:var(--c-primary);background:var(--c-primary-soft)}
#exp-app .exp-preview-btn:focus{outline:none}
#exp-app .exp-preview-btn svg{flex-shrink:0}

/* Modale d'aperçu : plus large que la popup SMS (l'e-mail fait 600px de
   large) et bornée en hauteur, le contenu défile à l'intérieur. */
#exp-app .exp-mailprev-tabs{display:flex;gap:6px;margin:0 0 14px}
/* `display:grid;place-items:center` : un <button> porte un padding
   latéral par défaut qui collait le libellé à gauche. */
#exp-app .exp-mailprev-tab{
  flex:1;height:32px;padding:0;display:grid;place-items:center;
  border-radius:var(--r-sm);border:1px solid rgba(var(--c-ink-rgb),.10);
  background:var(--c-card);color:var(--c-muted);font:inherit;font-size:12.5px;font-weight:700;
  cursor:pointer;transition:color var(--t-fast),background var(--t-fast),border-color var(--t-fast);
}
#exp-app .exp-mailprev-tab:hover{color:var(--c-ink);background:var(--c-field)}
#exp-app .exp-mailprev-tab.is-active{background:var(--c-primary);border-color:var(--c-primary);color:#fff}
#exp-app .exp-mailprev-tab:focus{outline:none}
/* Cadre de rendu : l'e-mail est mis à l'échelle pour tenir dans la modale
   sans rogner. `transform:scale` plutôt qu'un zoom sur les tailles de
   police — le rendu reste fidèle au pixel près. */
#exp-app .exp-mailprev-frame{
  max-height:min(62vh,520px);overflow-y:auto;overflow-x:hidden;
  border:1px solid rgba(var(--c-ink-rgb),.08);border-radius:var(--r-sm);
  background:var(--c-field);
}
#exp-app .exp-mailprev-frame > div{transform-origin:top left}
#exp-app .exp-mailprev-frame a{pointer-events:none}   /* aperçu : rien n'est cliquable */

/* ---------- 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}
/* Largeur fixe de 300px, calée à gauche de la rangée : assez pour lire ce
   qu'on tape, sans étirer un champ vide sur toute la largeur disponible. */
#exp-app .exp-search-bar{position:relative;width:300px;flex:0 0 300px;max-width:100%;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}
/* Filet de 1px à la couleur du client : le halo de 3px épaississait
   visiblement le champ au clic, comme s'il changeait de taille. */
#exp-app .exp-search-bar:focus-within{box-shadow:0 0 0 1px var(--c-primary)}
#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);color:var(--c-ink)}
/* Croix visible seulement quand quelque chose est saisi. Elle vide le
   champ sans le refermer — le champ de recherche reste déployé en
   permanence. La classe est posée par onSearch(), qui ne redessine pas la
   barre pour ne pas perdre le focus pendant la frappe. */
#exp-app .exp-search-bar:not(.has-value) .exp-search-close{display:none!important}
#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)}
/* Groupe des commandes, tenu à droite de la rangée pendant que la
   recherche occupe la gauche. `flex-shrink:0` : les icônes gardent leur
   taille, c'est le champ de recherche qui absorbe la place restante. */
#exp-app .exp-bar-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}
#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)}

/* ── Panneau de DÉTAIL d'une demande ─────────────────────────────────
   Même mécanique que le panneau de filtres : mêmes classes, même overlay,
   mêmes animations, même côté droit. Une seule différence : un peu plus
   large (420px contre 360) — il montre des paires label/valeur dont
   certaines sont longues (URL, message). */
#exp-app .exp-detail-panel{width:420px}

/* Rangées compactes : label discret au-dessus, valeur lisible en dessous,
   un fin filet entre chaque champ. Tous les champs se suivent dans une
   seule liste — pas de cartes ni de sections. */
#exp-app .exp-detail-body{gap:0;padding:6px 24px 20px}
/* Titre du panneau à l'encre, comme les en-têtes du tableau. */
#exp-app #detail-title{color:var(--c-ink)}
/* Croix de fermeture : aucun contour au focus — c'est l'anneau natif du
   navigateur (outline:auto) qui apparaissait, jugé inesthétique. Le survol
   suffit à la signaler. Même traitement dans le panneau de filtres. */
#exp-app .exp-filter-panel-head [onclick]:focus,
#exp-app .exp-filter-panel-head [onclick]:focus-visible{outline:none!important;box-shadow:none!important}
#exp-app .exp-detail-list{margin:0}
#exp-app .exp-detail-row{padding:8px 0;border-bottom:1px solid rgba(var(--c-ink-rgb),.06)}
#exp-app .exp-detail-row:last-child{border-bottom:none}
#exp-app .exp-detail-row dt{
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c-faint);padding-bottom:2px;
}
#exp-app .exp-detail-row dd{
  margin:0;font-size:13.5px;font-weight:500;color:var(--c-ink);
  overflow-wrap:anywhere;white-space:normal;line-height:1.45;
}
/* Liens du détail (email, téléphone, page, destinataire) à l'encre, comme
   dans le tableau : ce sont des données, pas des appels à l'action. Seul le
   survol révèle la couleur du client. */
#exp-app .exp-detail-row dd a{color:var(--c-ink);font-weight:600;text-decoration:none;transition:color var(--t-fast) var(--ease)}
#exp-app .exp-detail-row dd a:hover{color:var(--c-primary);text-decoration:underline}
/* Valeur absente : le tiret reprend la convention du tableau. */
#exp-app .exp-detail-row dd .exp-detail-empty{color:var(--c-faint)}
/* Message : une phrase par ligne, avec un peu d'air entre elles. */
#exp-app .exp-detail-msg{display:block;line-height:1.55}
/* Chaque phrase est un bloc, séparé du suivant : c'est ce qui aère
   vraiment un message d'un seul tenant (un <br> n'accepte pas de marge). */
#exp-app .exp-detail-p{display:block}
#exp-app .exp-detail-p + .exp-detail-p{margin-top:10px}
#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)}
  /* Le panneau de détail (420px sur bureau) redevient une bottom-sheet
     pleine largeur, comme les filtres. */
  #exp-app .exp-detail-panel{width:100%}
}

/* ---------- Tableaux ---------- */
/* `overflow:hidden` retiré : il empêcherait le `position:sticky` de la barre
   de défilement ci-dessous de fonctionner (un ancêtre qui coupe le
   débordement annule le collage). Le rayon est conservé via `clip-path`
   implicite du fond + le border-radius des coins du tableau. */
/* `padding-bottom:6px` : juste ce qu'il faut pour que le curseur ne touche
   pas le filet de la carte. Au-delà, on voit une bande blanche sous la
   barre — la barre doit sembler posée sur la carte, pas séparée d'elle. */
/* Aucun padding vertical : les 8px du haut décalaient la ligne d'en-têtes
   par rapport au bord de la carte, ce qui se lisait comme un défaut
   d'alignement. La respiration du bas est reportée sur la barre de
   défilement elle-même (elle porte déjà son propre padding-top).
   ⚠️ Ne pas ajouter `overflow:hidden` ici pour arrondir les angles : un
   ancêtre qui coupe le débordement annule le position:sticky de la barre. */
#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:0}

/* ── BARRE DE DÉFILEMENT HORIZONTALE : VISIBLE ET TOUJOURS ATTEIGNABLE ──
   Deux exigences distinctes :

   1. TOUJOURS VISIBLE — `scroll` et non `auto` : la barre s'affiche quel
      que soit le nombre de lignes (10 ou 50). Avec `auto`, macOS la masque
      tant qu'on ne fait pas défiler, et les colonnes de droite passent
      inaperçues.

   2. TOUJOURS ATTEIGNABLE — `position:sticky; bottom:0` sur le conteneur
      de défilement + une hauteur maximale calée sur le viewport. Sans ça,
      la barre vit sous la dernière ligne : avec 50 lignes affichées, il
      fallait descendre tout en bas de la page pour l'attraper. Ici elle
      reste collée au bas de l'écran tant que le tableau est visible.

   `-webkit-overflow-scrolling:touch` = inertie iOS.
   `overscroll-behavior-x:contain` = pas de retour arrière du navigateur
   en butée horizontale. */
#exp-app .exp-dscroll{
  /* `auto clip` et non `auto visible` : déclarer overflow-x fait basculer
     overflow-y en `auto` automatiquement, ce qui ferait du conteneur un
     scroller vertical et casserait tout `position:sticky` interne.
     `clip` masque sans créer de zone de défilement. */
  overflow:scroll clip;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  /* La barre native vit sous la dernière ligne. On la neutralise ici et on
     la remplace par la barre miroir ci-dessous, qui, elle, peut être collée
     en bas de l'écran (une scrollbar native n'est pas positionnable). */
  scrollbar-width:none;
}
#exp-app .exp-dscroll::-webkit-scrollbar{display:none}

/* Barre miroir : collée en bas du viewport tant que le tableau est à
   l'écran, donc atteignable sans descendre jusqu'à la dernière ligne.
   Son contenu est un bloc vide de la largeur réelle du tableau : faire
   défiler cette barre fait défiler le tableau (synchronisé en JS). */
#exp-app .exp-hscroll{
  position:sticky;bottom:0;z-index:6;
  overflow-x:scroll;overflow-y:hidden;
  /* Hauteur = exactement celle du curseur (10px) + 4px de respiration au
     total. Empiler padding + margin + filet créait deux bandes blanches
     visibles au-dessus et en dessous de la barre : la barre doit se poser
     sur le fond de la carte, pas flotter dans une zone à part. */
  height:14px;padding:2px 0 0;
  background:var(--c-card);
  border-bottom-left-radius:var(--r-lg);border-bottom-right-radius:var(--r-lg);
  /* Standard (Firefox, Chrome 121+, Safari 26.2+) — déclaré AVANT les
     règles ::-webkit- ci-dessous, qui prennent le dessus là où elles
     s'appliquent. Écrit dans cet ordre, chaque navigateur reçoit ce qu'il
     comprend, sans surcharge inutile. */
  scrollbar-width:auto;
  scrollbar-color:rgba(var(--c-ink-rgb),.22) transparent;
}
#exp-app .exp-hscroll > div{height:1px}
/* Curseur à la COULEUR PRIMAIRE DU CLIENT : bleu chez BeClean, vert chez
   Get Your Move, rouge chez Blandino… Aucune couleur de marque en dur —
   `--c-primary-shadow` est la primaire en composantes RVB, seule forme qui
   accepte une opacité.

   Rendu : pouce en pilule à 40 % sur piste TRANSPARENTE, qui passe à 100 %
   au survol du tableau. La piste colorée créait un rail gris permanent sous
   le tableau ; sans elle la barre se pose sur le fond de la carte et ne se
   remarque qu'au moment utile. Les 40 % sont un plancher, pas un réglage
   libre : en dessous, le curseur cesse d'être perceptible au repos et plus
   rien n'indique que le tableau défile.

   `height` explicite : c'est CE réglage qui fait basculer macOS du mode
   « overlay » (barre masquée au repos) au mode classique, donc visible
   en permanence. Sans lui, la barre disparaît sur Mac au trackpad. */
#exp-app .exp-hscroll::-webkit-scrollbar{-webkit-appearance:none;appearance:none;height:10px}
#exp-app .exp-hscroll::-webkit-scrollbar-track{background:transparent}
/* Curseur GRIS, identique sur tous les sites : la barre de défilement est
   un élément d'interface, pas un porteur de marque — à la couleur du client
   elle attirait l'œil plus que les données. */
#exp-app .exp-hscroll::-webkit-scrollbar-thumb{
  background:rgba(var(--c-ink-rgb),.22);
  border-radius:var(--r-pill);
  transition:background var(--t-fast) var(--ease);
}
/* Survol du TABLEAU, pas seulement de la barre : on cherche la barre avec
   le regard avant d'y poser le curseur. */
#exp-app .exp-dcard:hover .exp-hscroll::-webkit-scrollbar-thumb{background:rgba(var(--c-ink-rgb),.38)}
#exp-app .exp-hscroll::-webkit-scrollbar-thumb:hover{background:rgba(var(--c-ink-rgb),.55)}
/* Rien à faire défiler → la barre miroir disparaît. */
#exp-app .exp-hscroll.is-idle{display:none}
/* `table-layout:fixed` est la condition pour que la largeur d'une colonne
   soit respectée. En `auto` (défaut), le navigateur répartit lui-même la
   place selon le contenu : la largeur posée par la poignée est alors
   ignorée, et redimensionner ne produit aucun effet visible.
   En contrepartie, chaque colonne doit avoir une largeur de départ — d'où
   le bloc de largeurs par défaut ci-dessous. */
#exp-app table.exp-data{width:100%;border-collapse:collapse;min-width:1400px;table-layout:fixed}

/* Largeurs de départ par colonne, adaptées au contenu réel de chacune.
   Elles ne s'appliquent que tant que l'utilisateur n'a pas ajusté la
   colonne lui-même (`:not([style*="width"])`), après quoi son choix prime. */
/* Les libellés courts partagent leur place avec l'entonnoir (20px) et la
   poignée (9px) : sous ~135px, « STATUT » se tronque en « STAT… ». */
#exp-app table.exp-data th[data-col="statut"]:not([style*="width"]){width:140px}
#exp-app table.exp-data th[data-col="date"]:not([style*="width"]){width:190px}
#exp-app table.exp-data th[data-col="type"]:not([style*="width"]){width:150px}
#exp-app table.exp-data th[data-col="nom"]:not([style*="width"]){width:210px}
#exp-app table.exp-data th[data-col="email"]:not([style*="width"]){width:230px}
#exp-app table.exp-data th[data-col="phone"]:not([style*="width"]){width:150px}
#exp-app table.exp-data th[data-col="profil"]:not([style*="width"]){width:130px}
#exp-app table.exp-data th[data-col="ville"]:not([style*="width"]){width:130px}
#exp-app table.exp-data th[data-col="societe"]:not([style*="width"]){width:160px}
#exp-app table.exp-data th[data-col="besoin"]:not([style*="width"]){width:220px}
#exp-app table.exp-data th[data-col="service"]:not([style*="width"]){width:160px}
#exp-app table.exp-data th[data-col="source"]:not([style*="width"]){width:180px}
/* 250px : la colonne porte des URLs, souvent longues (campagnes avec
   paramètres) — à 200px presque toutes se tronquaient. */
#exp-app table.exp-data th[data-col="page"]:not([style*="width"]){width:250px}
#exp-app table.exp-data th[data-col="appareil"]:not([style*="width"]){width:145px}
#exp-app table.exp-data th[data-col="destinataire"]:not([style*="width"]){width:220px}
/* Message : la plus large, elle porte du texte libre. Avant le passage de
   `message` devant page/appareil/destinataire, elle héritait de la règle
   « dernière colonne » ci-dessous ; elle a désormais sa propre largeur. */
#exp-app table.exp-data th[data-col="message"]:not([style*="width"]){width:520px}
/* La case à cocher de sélection garde sa largeur fixe. */
/* 48px — la MÊME valeur que la règle .exp-select-col plus bas (padding
   18+4 + case 22). À 46, le contenu débordait de 2px et l'ellipsis
   générique des td faisait apparaître « … » à côté de chaque case. */
#exp-app table.exp-data th.exp-select-col{width:48px}
/* La cellule de sélection ne contient qu'une case : jamais d'ellipsis. */
#exp-app table.exp-data td.exp-select-col{overflow:visible;text-overflow:clip}
/* En `table-layout:fixed`, une cellule ne rogne plus son contenu toute
   seule : on le coupe explicitement pour éviter qu'un long besoin ou une
   URL ne déborde sur la colonne voisine. */
#exp-app table.exp-data td{overflow:hidden;text-overflow:ellipsis}
/* En-têtes : à la couleur du client et en gras. Un gris clair se lit mal
   et n'annonce pas que la colonne est interactive (tri, filtre, largeur). */
#exp-app table.exp-data th{
  text-align:left;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--c-ink);padding:15px 18px;white-space:nowrap;position:relative;
}
/* ── Outils d'en-tête : trier · filtrer · ajuster la largeur ────────── */
/* ── BLINDAGE des outils d'en-tête contre le CSS du thème ──────────────
   WordPress et Elementor déclarent des règles très larges sur `th svg`,
   `th button`, `th span` (souvent `display:block;width:100%`). Résultat
   observé : les icônes de tri et de filtre s'étirent ou tombent à 0×0, et
   apparaissent empilées sous le libellé. On fige donc ce qui compte —
   affichage, dimensions, alignement — pour ces éléments précis. */
#exp-app table.exp-data th .exp-th-in{display:flex!important;flex-direction:row!important;align-items:center!important;gap:2px;min-width:0;width:auto!important;height:auto!important}
#exp-app table.exp-data th .exp-th-in svg{
  display:inline-block!important;width:13px!important;height:13px!important;
  max-width:none!important;min-width:0!important;flex:0 0 auto!important;
  vertical-align:middle!important;margin:0!important;
}
#exp-app table.exp-data th .exp-th-in .exp-th-filt svg{width:13px!important;height:13px!important}
#exp-app table.exp-data th .exp-th-sort{display:inline-flex!important;flex-direction:row!important;width:auto!important}
#exp-app table.exp-data th .exp-th-sort > span{display:block!important;width:auto!important;min-width:0}
#exp-app table.exp-data th .exp-th-filt{display:grid!important;width:20px!important;height:20px!important;flex:0 0 auto!important}
/* `all:unset` remet aussi outline à `none` : le focus clavier disparaît.
   On le rétablit explicitement, sinon naviguer au Tab dans une ligne de
   14 en-têtes se fait à l'aveugle. */
#exp-app .exp-th-sort{
  all:unset;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  flex:1;min-width:0;font:inherit;color:inherit;letter-spacing:inherit;
  text-transform:inherit;border-radius:5px;
  transition:color var(--t-fast) var(--ease);
}
/* Aucun anneau de focus sur les outils d'en-tête : choix produit assumé
   (Rémy) — les encadrés bleus sont jugés inesthétiques sur un tableau de
   14 colonnes. Le survol et l'état actif (flèche de tri, pastille de
   filtre) restent les seuls retours visuels. */
#exp-app .exp-th-sort:focus,#exp-app .exp-th-sort:focus-visible,
#exp-app .exp-th-filt:focus,#exp-app .exp-th-filt:focus-visible{
  outline:none!important;box-shadow:none!important;
}
#exp-app .exp-th-sort > span{overflow:hidden;text-overflow:ellipsis}
#exp-app .exp-th-sort:hover{color:var(--c-primary-hover)}
/* L'icône dit l'état : double flèche au repos (triable), flèche bas en
   croissant, flèche haut en décroissant — c'est le JS qui la remplace, pas
   une rotation. Discrète au repos pour ne pas alourdir 14 en-têtes, pleine
   opacité dès qu'un tri est actif. */
#exp-app .exp-th-arrow{opacity:.28;flex-shrink:0;transition:opacity var(--t-fast) var(--ease)}
#exp-app .exp-th-sort:hover .exp-th-arrow{opacity:.6}
#exp-app table.exp-data th[aria-sort] .exp-th-arrow{opacity:1}
/* .55 plutôt que .35 : à 35 % l'entonnoir se lisait comme un artefact et
   n'annonçait pas que la colonne est filtrable. Assez présent pour être
   vu, assez discret pour ne pas concurrencer le libellé. */
#exp-app .exp-th-filt{
  all:unset;cursor:pointer;width:20px;height:20px;flex-shrink:0;
  display:grid;place-items:center;border-radius:5px;
  color:rgba(var(--c-ink-rgb),.55);
  transition:color var(--t-fast) var(--ease),background var(--t-fast) var(--ease);
}
#exp-app .exp-th-filt:hover{background:var(--c-primary-soft);color:var(--c-primary)}
/* Colonne filtrée : pastille sur l'icône, pas de fond sur tout l'en-tête.
   Un fond coloré sur plusieurs colonnes filtrées noie la ligne d'en-têtes ;
   une pastille dit la même chose en un point précis, et se compte d'un
   coup d'œil. Rouge de la charte (--st-danger) : c'est un état à défaire,
   pas une décoration. */
#exp-app .exp-th-filt.is-on{color:var(--c-primary);background:var(--c-primary-soft);position:relative}
#exp-app .exp-th-filt.is-on::after{
  content:"";position:absolute;top:-1px;right:-1px;
  width:7px;height:7px;border-radius:9999px;
  background:var(--st-danger-tx);
  box-shadow:0 0 0 2px var(--c-card);
}
/* Le fond de la colonne filtrée est déclaré plus bas, APRÈS le bloc
   BLINDAGE TABLEAU qui force `background:transparent!important` sur les
   th : à `!important` égal, c'est le dernier déclaré qui gagne. */

/* Poignée de redimensionnement : zone de saisie large (9px, confortable
   à la souris), mais trait fin et discret — visible en permanence pour
   annoncer que la colonne est ajustable, appuyé au survol. */
/* `z-index:1` + les outils au-dessus : sans ordre explicite, la poignée
   (posée après dans le DOM) recouvre le bord droit de l'entonnoir de
   filtre et intercepte le clic — le bouton devient inatteignable dès que
   le thème du site élargit un peu les boutons. */
#exp-app .exp-th-grip{
  position:absolute;top:0;right:0;width:9px;height:100%;z-index:1;
  cursor:col-resize;touch-action:none;display:flex;justify-content:center;
}
#exp-app table.exp-data th .exp-th-in{position:relative;z-index:2}
/* Le trait fait 3px en permanence et se dessine par `scaleX` : animer
   `width` déclencherait un recalcul de mise en page à chaque survol, sur
   14 colonnes. `transform` et `opacity` restent sur le compositeur. */
/* Le trait garde sa taille maximale et se réduit par `transform` : animer
   `width` ou `height` déclencherait un recalcul de mise en page à chaque
   survol, sur 14 colonnes. transform et opacity restent sur le compositeur. */
#exp-app .exp-th-grip::after{
  content:"";width:3px;height:100%;align-self:center;border-radius:2px;
  background:rgba(var(--c-ink-rgb),.22);
  transform:scale(.34,.55);transform-origin:center;
  transition:background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease);
}
#exp-app .exp-th-grip:hover::after,
#exp-app .exp-th-grip.is-dragging::after{transform:scale(.67,.62);background:var(--c-primary)}
/* Au clavier, le trait seul est trop ténu pour dire « vous êtes ici » :
   pleine hauteur + halo, comme les autres contrôles du kit.
   Tout dans UNE règle : deux blocs `:focus::after` séparés se seraient
   écrasés l'un l'autre sur les propriétés non redéclarées. */
#exp-app .exp-th-grip:focus{outline:none}
/* Le trait passe en bleu pleine hauteur — pas de halo autour : c'est
   assez pour situer la poignée sans encadré. */
#exp-app .exp-th-grip:focus::after{
  transform:scale(1,1);background:var(--c-primary);
}
/* La dernière colonne garde sa poignée droite, décalée vers l'intérieur :
   collée au bord du tableau, elle tomberait sous la barre de défilement. */
#exp-app table.exp-data th:last-child .exp-th-grip{right:3px}
/* Et elle reçoit une SECONDE poignée sur son bord gauche. Sans elle,
   Message — la colonne la plus fournie en texte — ne s'ajuste qu'en allant
   chercher le bord droit du tableau, tout au bout du défilement. Celle-ci
   est atteignable dès que la colonne est visible : tirer vers la gauche
   élargit.
   `left:10px` : collée à 0, elle touchait la poignée droite de la colonne
   précédente (mesuré : les deux se rejoignaient au pixel près) — on voyait
   deux traits accolés sans savoir lequel on attrapait. Décalée vers
   l'intérieur, chaque poignée reste sur sa colonne. */
#exp-app table.exp-data th .exp-th-grip.is-left{right:auto;left:10px}
/* Elle reste invisible au repos et n'apparaît qu'au survol de la colonne :
   deux traits verticaux permanents à quelques pixels l'un de l'autre se
   lisent comme un défaut d'affichage, pas comme deux commandes. */
#exp-app table.exp-data th .exp-th-grip.is-left::after{opacity:0;transition:opacity var(--t-fast) var(--ease),background var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
#exp-app table.exp-data th:hover .exp-th-grip.is-left::after,
#exp-app table.exp-data th .exp-th-grip.is-left:focus::after,
#exp-app table.exp-data th .exp-th-grip.is-left.is-dragging::after{opacity:1}
body.exp-resizing,body.exp-resizing *{cursor:col-resize!important;user-select:none!important}

#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}
/* La ligne ouvre le panneau de détail : le curseur l'annonce. Seules les
   lignes porteuses d'une demande (data-id) sont concernées — pas la ligne
   « aucune demande ». Focusable (tabindex) : l'anneau intérieur montre où
   on est pendant la navigation au clavier, sans déborder de la ligne. */
/* Toute la ligne ouvre le détail : le curseur main sur la ligne ET sur son
   contenu (une cellule ou un <span> qui repose `cursor:default`/`text`
   annulerait le signal au survol). Les liens et commandes gardent le leur. */
#exp-app table.exp-data tbody tr[data-id],
#exp-app table.exp-data tbody tr[data-id] td,
#exp-app table.exp-data tbody tr[data-id] td span:not(.exp-badge),
#exp-app table.exp-data tbody tr[data-id] td time{cursor:pointer}
#exp-app table.exp-data tbody tr[data-id] td a,
#exp-app table.exp-data tbody tr[data-id] td label,
#exp-app table.exp-data tbody tr[data-id] td .exp-badge.is-clickable{cursor:pointer}
#exp-app table.exp-data tbody tr[data-id] td input[type=checkbox]{cursor:pointer}
/* Ligne focusée : fond teinté, jamais d'anneau (même raison qu'au-dessus). */
#exp-app table.exp-data tbody tr[data-id]:focus{outline:none}
#exp-app table.exp-data tbody tr[data-id]:focus-visible{outline:none}
#exp-app table.exp-data tbody tr[data-id]:focus-visible td{background:var(--c-primary-row)}

/* ── Panneau de filtre d'une colonne ───────────────────────────────────
   Attaché au <body> (pas à #exp-app) : dans le tableau, il serait rogné
   par l'overflow du conteneur de défilement. Le placement est calculé en
   JS et rabattu pour rester dans la fenêtre — sur les dernières colonnes
   il sortirait à droite, en bas de page il sortirait sous le pli. */
/* ════════════════════════════════════════════════════════════════════
   PANNEAU DE FILTRE — ISOLATION TOTALE DU CSS DU SITE

   Ce panneau est attaché au <body>, donc HORS de #exp-app : il ne
   bénéficie ni du reset du dashboard, ni de sa portée. Le thème et
   Elementor lui appliquent librement leurs styles de bouton, de champ
   et de libellé (vécu sur BeClean : boutons « Tout / Aucun » rendus en
   jaune #FBDE16, la couleur du bouton d'avis du site).

   Plutôt que de corriger propriété par propriété au fil des sites, on
   coupe l'héritage EN BLOC :
   · `all:revert-layer` remet CHAQUE propriété de CHAQUE descendant à sa
     valeur par défaut du navigateur, en annulant tout ce que le thème
     déclare — une seule règle couvre les cas connus et à venir ;
   · `isolation:isolate` + `contain` détachent le panneau du contexte
     d'empilement et de mise en page du site ;
   · tout le style du panneau est ensuite (re)déclaré ci-dessous, après
     ce reset.
   ⚠️ Ne pas remplacer par des `!important` ciblés : c'est ce qui menait
   à rejouer la correction à chaque nouveau site.
   ════════════════════════════════════════════════════════════════════ */

/* Bouton d'effacement des filtres : n'existe dans le DOM que lorsqu'au
   moins un filtre est actif (panneau ou colonne). Reprend EXACTEMENT la
   géométrie des autres boutons de la rangée (.exp-filter-trigger) —
   hauteur 42px, rayon --r-sm, 13.5px, poids 600 : un bouton plus petit ou
   plus arrondi que ses voisins se lit comme un élément étranger.
   Seule la couleur diffère : le rouge de la charte, celui de la pastille
   qui marque une colonne filtrée — même code couleur pour le même sujet. */
#exp-app .exp-colfilter-reset{
  display:inline-flex;align-items:center;gap:7px;
  height:42px;padding:0 16px;border-radius:var(--r-sm);
  border:none;background:var(--st-danger-bg);box-shadow:var(--shadow-sm);
  color:var(--st-danger-tx);font:inherit;font-size:13.5px;font-weight:600;
  cursor:pointer;white-space:nowrap;
  transition:background var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease);
}
#exp-app .exp-colfilter-reset:hover{background:#F9DADA;box-shadow:var(--shadow-md)}
#exp-app .exp-colfilter-reset:focus,#exp-app .exp-colfilter-reset:focus-visible{outline:none;box-shadow:var(--shadow-md)}
#exp-app .exp-colfilter-reset svg{flex-shrink:0}

/* ---------- Colonne « Page » : URL tronquée + infobulle ----------
   Règle : l'URL tient sur UNE ligne, la colonne ne s'élargit jamais, le
   tableau ne bouge pas. L'URL complète s'obtient au survol.

   ⚠️ Contrainte propre à ce tableau : `.exp-dscroll` est en
   `overflow:scroll clip`, donc tout ce qui déborde verticalement d'une
   cellule est DÉCOUPÉ. Une infobulle posée au-dessus de la cellule
   (`bottom:calc(100% + 8px)`) serait invisible. Elle est donc ancrée dans
   le flux de la cellule, superposée au lien, et remonte visuellement via
   `translateY` — sans jamais dépasser la boîte. */
#exp-app table.exp-data td.cell-page{max-width:250px}
#exp-app .url-wrap{position:relative;display:block;min-width:0;max-width:100%}

/* Le lien : une seule ligne, ellipse à la coupe. */
#exp-app .url-trunc{
  display:block;width:100%;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  color:inherit;text-decoration:none;
}
#exp-app .url-trunc:hover{text-decoration:underline}
#exp-app .url-trunc:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-radius:2px}

@media(hover:none){
  /* Tactile : cibles élargies pour les outils d'en-tête. L'entonnoir passe
     de 20 à 32px de visuel, et sa ZONE de frappe atteint les 44px requis
     par un ::before étendu (32 + 2×6) — grossir le bouton lui-même à 44
     écraserait la ligne d'en-tête, l'extension invisible non.
     Le bouton de tri occupe déjà toute la hauteur du th (45px ≥ 44). */
  #exp-app .exp-th-filt{width:32px;height:32px;position:relative}
  #exp-app .exp-th-filt::before{content:"";position:absolute;inset:-6px}
  /* Poignées : zone de saisie 9 → 18px, étendue à 34px effectifs par le
     même procédé — au doigt, un trait de 9px est inattrapable. L'extension
     reste sous les 10px de retrait de la poignée gauche voisine (dernière
     colonne) : les deux zones ne se chevauchent pas. */
  #exp-app .exp-th-grip{width:18px}
  #exp-app .exp-th-grip::before{content:"";position:absolute;inset:0 -8px}
  /* La poignée gauche de la dernière colonne n'apparaît qu'au survol —
     état qui n'existe pas au doigt : on la montre en permanence. */
  #exp-app table.exp-data th .exp-th-grip.is-left::after{opacity:1}
}
#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:500;color:var(--c-ink);max-width:220px;overflow:hidden;text-overflow:ellipsis}
#exp-app table.exp-data .cell-need{color:var(--c-ink)!important}
#exp-app table.exp-data .cell-email a,#exp-app table.exp-data .cell-phone a{color:var(--c-ink);font-weight:500}
/* Aucune largeur ici : en `table-layout:fixed`, c'est le <th> qui decide
   (voir le bloc des largeurs par defaut). Un width fige sur le td rendait
   la colonne insensible a la poignee de redimensionnement. */
#exp-app table.exp-data td.cell-sub{font-size:13px;color:var(--c-muted);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:28px!important}
#exp-app table.exp-data td.cell-sub .exp-msg-preview{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}
#exp-app #msg-popup-body{max-height:min(52vh,420px);overflow-y:auto}
/* Plus de largeur imposée à la dernière colonne : cette règle visait
   `message` quand elle fermait le tableau. Depuis que `message` passe avant
   page/appareil/destinataire, elle étirait `destinataire` à 530px.
   Chaque colonne a maintenant sa largeur propre (bloc ci-dessus). */
/* Tous les liens du tableau (email, téléphone, page, destinataire) à
   l'encre : ce sont des données, pas des appels à l'action. Seul le survol
   révèle la couleur du client. */
#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 ---------- */
/* ---------- Barre de pagination ----------
   Disposition Material : taille de page à gauche · plage au centre ·
   navigation à droite. En dessous de 820px, tout s'empile et se centre. */
#exp-app .exp-pag{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px 20px;padding:16px 18px;flex-wrap:wrap;
}
#exp-app .exp-cadpag{display:flex;align-items:center;justify-content:center;gap:6px;padding:16px 18px;flex-wrap:wrap}
#exp-app .exp-pag-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Sélecteur « Lignes par page » — label VISIBLE et associé (un aria-label
   seul priverait de repère les utilisateurs en zoom ou en surcharge cognitive). */
#exp-app .exp-pag-size{display:flex;align-items:center;gap:8px}
#exp-app .exp-pag-size-label{font-size:12.5px;font-weight:600;color:var(--c-muted);white-space:nowrap}
#exp-app .exp-pag-select{
  min-height:36px;padding:0 30px 0 10px;border-radius:var(--r-sm);
  border:1px solid rgba(var(--c-ink-rgb),.12);background:var(--c-card);
  font-family:inherit;font-size:13px;font-weight:600;color:var(--c-ink);cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23667' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
#exp-app .exp-pag-select:hover{border-color:rgba(var(--c-ink-rgb),.22)}
#exp-app .exp-pag-select:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px;border-color:var(--c-primary)}

#exp-app .exp-pag-range{font-size:12.5px;font-weight:600;color:var(--c-muted);margin:0!important}
#exp-app .exp-pag-nav{display:flex}
#exp-app .exp-pag-list{display:flex;align-items:center;gap:4px;list-style:none;margin:0;padding:0}
#exp-app .exp-pag-list li{display:flex}

/* Lien texte « Voir tout » / « Paginer » */
#exp-app .exp-pag-link{
  height:36px;padding:0 14px;border:none;background:none;border-radius:var(--r-sm);
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--c-muted);cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast);
}
#exp-app .exp-pag-link:hover{background:var(--c-field);color:var(--c-ink)}
#exp-app .exp-pag-link:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}

/* Masquage accessible : lu par les lecteurs d'écran, invisible à l'oeil.
   Jamais display:none, qui retirerait l'élément de l'arbre d'accessibilité. */
#exp-app .exp-sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* ---- Pagination compacte : UNE SEULE LIGNE jusqu'en mobile ----
   Le contenu ne s'empile jamais ; il rétrécit. Trois leviers, dans cet
   ordre : le libellé long devient court, les espacements se resserrent,
   les contrôles passent à 32px. Les cibles tactiles restent ≥ 32px et
   l'espacement entre elles compense — on ne descend pas plus bas. */
@media(max-width:820px){
  #exp-app .exp-pag{
    flex-wrap:nowrap;              /* interdit le passage à la ligne */
    justify-content:space-between;
    gap:8px;padding:12px 10px;
  }
  /* « Lignes par page » → « Lignes » : c'est le texte qui prend le plus de
     place. Le <label> reste associé au <select>, donc l'intitulé complet
     demeure disponible pour les lecteurs d'écran via aria-label. */
  #exp-app .exp-pag-size-label{font-size:0}
  #exp-app .exp-pag-size-label::after{content:"Lignes";font-size:12px}
  #exp-app .exp-pag-size{gap:6px}
  #exp-app .exp-pag-select{min-height:32px;padding:0 24px 0 8px;font-size:12.5px;background-position:right 7px center}
  #exp-app .exp-pag-range{font-size:11.5px;white-space:nowrap}
  #exp-app .exp-pag-right{gap:2px;flex-wrap:nowrap}
  #exp-app .exp-pag-list{gap:2px}
  #exp-app .exp-pag-btn,#exp-app .exp-pag-arrow{min-width:26px;width:26px;height:26px;font-size:12px}
  #exp-app .exp-pag-link{height:32px;padding:0 8px;font-size:11.5px;white-space:nowrap}
}
/* Sous 480px, la somme des éléments dépasse la largeur d'écran (mesuré :
   ~398px de contenu pour 375px disponibles sur un iPhone SE). On retire les
   deux éléments les moins utiles — le libellé (le select se comprend seul,
   son aria-label reste pour les lecteurs d'écran) et la plage chiffrée
   (déductible) — plutôt que de laisser la barre casser sur deux lignes. */
@media(max-width:480px){
  #exp-app .exp-pag-size-label{display:none}
  #exp-app .exp-pag-range{display:none}
}
/* 320px (iPhone SE 1re génération) : même sans le libellé ni la plage, il
   manque ~16px. On retire « Voir tout » — sa fonction reste atteignable par
   le sélecteur (100 lignes couvre la plupart des cas à ce format). */
@media(max-width:360px){
  #exp-app .exp-pag-link{display:none}
  #exp-app .exp-pag{padding:12px 8px;gap:6px}
}
/* 28px et rayon 6 : la pagination est un contrôle secondaire, elle ne doit
   pas peser autant que les actions de la barre d'outils. Sur un carré de
   28px, un rayon de 10 (--r-sm) tirerait vers le cercle. */
#exp-app .exp-pag-btn,#exp-app .exp-cadpag-btn{
  min-width:28px;height:28px;padding:0 6px;border-radius:6px;
  font-size:12.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)}
/* Page courante à la COULEUR DU CLIENT (bleu BeClean, rouge Blandino,
   vert GYM…) : c'est l'unique élément actif de la pagination, il doit
   porter la marque. `--c-ink` donnait le même bleu ardoise partout,
   identique d'un client à l'autre. */
#exp-app .exp-pag-btn.active,#exp-app .exp-cadpag-btn.current{background:var(--c-primary);color:#fff;font-weight:700}
/* Même gabarit que les boutons de page (28px, rayon 6) : les flèches sont
   sur la même ligne, une différence de taille se verrait. */
#exp-app .exp-pag-arrow{
  display:grid;place-items:center;width:28px;height:28px;border-radius:6px;
  border:none;background:none;font-family:inherit;font-size:14px;
  color:var(--c-muted);cursor:pointer;
  transition:color var(--t-fast),background var(--t-fast);
}
#exp-app .exp-pag-arrow:hover:not(:disabled):not(.disabled){background:var(--c-field);color:var(--c-ink)}
#exp-app .exp-pag-arrow:disabled,#exp-app .exp-pag-arrow.disabled{opacity:.35;cursor:default}
/* Focus clavier visible sur TOUS les contrôles de pagination : le skill
   classe l'absence d'anneau de focus en CRITICAL. Ne jamais retirer. */
#exp-app .exp-pag-btn:focus-visible,
#exp-app .exp-pag-arrow:focus-visible{outline:2px solid var(--c-primary);outline-offset:2px}
#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;
}
/* Déclarée APRÈS .exp-sms-popup, qui impose max-width:460px : à
   spécificité égale, c'est la dernière règle qui gagne. L'e-mail fait
   600px de large, il lui faut 680. L'overlay porte déjà 20px de padding,
   la modale ne touche donc pas les bords sur mobile. */
#exp-app .exp-mailprev{max-width:680px;width:min(680px,calc(100vw - 40px))}
#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}

/* ---- EN-TÊTE DE PAGE — RÈGLE UNIQUE, VALABLE SUR TOUTES LES PAGES ----
   Le titre et son sous-titre occupent EXACTEMENT la même position d'un
   onglet à l'autre : même hauteur, mêmes marges, même interligne.
   Toute exception par panneau (ex. un margin-top négatif sur Stats) casse
   cet alignement au changement d'onglet — ne JAMAIS en réintroduire.
   Un besoin d'espacement propre à une section se règle sur le bloc QUI SUIT
   le sous-titre, jamais sur le titre lui-même. */
#exp-app .exp-title{
  margin:0 0 2px!important;padding:0!important;
  line-height:1.15!important;
}
#exp-app .exp-subtitle{
  margin:0!important;padding:0 0 40px!important;
  line-height:1.25!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}
/* 15px haut/bas (au lieu de 12) : la ligne d'en-tête respire un peu plus,
   maintenant que le libellé partage sa place avec l'entonnoir de filtre. */
#exp-app table.exp-data th{padding:15px 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;border-bottom:1px solid rgba(var(--c-ink-rgb),.07)!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{
  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 ---
   Les en-têtes de tableau portent la couleur primaire du client (voir le
   bloc principal plus haut) : le `!important` est nécessaire pour passer
   devant le kit Elementor, qui force sa propre couleur sur les th. */
#exp-app table.exp-data th{color:var(--c-ink)!important}
#exp-app .exp-filter-label,
#exp-app .exp-info-label{color:var(--c-faint)!important}

/* --- Scrollbars fines assorties (filtres, graphiques, message) ---
   `.exp-dscroll` n'est PAS dans cette liste : sa barre native est masquée
   et remplacée par `.exp-hscroll` (barre miroir collée en bas de l'écran),
   stylée avec le bloc Tableaux plus haut. */
#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-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-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-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-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-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}

  /* Barre d'outils : la recherche (300px fixes) + 4 icônes ne tiennent pas
     côte à côte — la recherche prend sa ligne, les actions passent dessous,
     alignées à droite. Le bouton « Effacer les N filtres » peut replier. */
  #exp-app #filter-bar{flex-wrap:wrap}
  #exp-app .exp-search-bar{flex:1 1 100%;width:100%}
  #exp-app .exp-bar-actions{width:100%;justify-content:flex-end;flex-wrap:wrap}

  /* Anti-zoom iOS pour les champs du panneau de filtre de colonne — il vit
     sur le <body>, hors de #exp-app, donc hors de la règle générale 16px. */

  /* Bottom-sheet du détail : la dernière rangée ne doit pas passer sous la
     barre système iPhone. */
  #exp-app .exp-detail-body{padding-bottom:max(20px,env(safe-area-inset-bottom))}
}

/* 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 */

/* 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:scroll!important;-webkit-overflow-scrolling:touch!important}
  #exp-app table.exp-data{min-width:1680px!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}