/* ============================================================
   SHTY CRM — Feuille de style
   ============================================================ */
:root{
  /* Couleurs de thème (surchargées dynamiquement selon les paramètres de l'agence) */
  --indigo:#4f46e5; --indigo-d:#4338ca; --indigo-l:#6366f1; --indigo-050:#eef2ff; --indigo-txt:#4338ca;
  --accent:#0ea5e9;
  --sidebar-1:#1e1b4b; --sidebar-2:#312e81; --sidebar-txt:#c7d2fe;
  --blue:#0ea5e9; --green:#10b981; --amber:#f59e0b; --red:#ef4444; --slate:#475569;
  --ink:#0f172a; --muted:#64748b; --line:#e6e8ef; --bg:#f4f6fb; --card:#ffffff;
  --radius:14px; --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.5}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0}
.muted{color:var(--muted)}
.strong{font-weight:600}
.nowrap{white-space:nowrap}
code{background:var(--indigo-050);color:var(--indigo-txt);padding:.1em .4em;border-radius:5px;font-size:.85em}

/* ---------- Layout ---------- */
.layout{display:flex;min-height:100vh}
.sidebar{width:250px;background:linear-gradient(180deg,var(--sidebar-1) 0%,var(--sidebar-2) 100%);color:var(--sidebar-txt);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;height:100vh;z-index:40}
.brand{display:flex;align-items:center;gap:.7rem;padding:1.25rem 1.25rem;border-bottom:1px solid rgba(255,255,255,.08)}
.brand__logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--indigo-l),var(--accent));display:grid;place-items:center;font-weight:800;color:#fff;font-size:1.1rem;box-shadow:0 4px 12px rgba(99,102,241,.4)}
.brand__logo--lg{width:56px;height:56px;font-size:1.6rem;margin:0 auto}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid #e5e7eb;border-radius:.5rem;background:#fff;text-decoration:none;font-size:.9rem;cursor:pointer;margin-left:.15rem;line-height:1;vertical-align:middle}
/* Fenêtre modale (édition client, etc.) */
.modal-back{position:fixed;inset:0;background:rgba(30,20,30,.55);display:none;align-items:flex-start;justify-content:center;z-index:60;padding:6vh 1rem;overflow:auto}
.modal-back.open{display:flex}
.modal-card{background:var(--card);border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.28);width:100%;max-width:480px}
.modal-card__head{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;border-bottom:1px solid var(--line)}
.modal-card__head h3{margin:0}
.modal-x{background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--muted)}
.modal-card__body{padding:1.1rem 1.2rem 1.3rem}
.icon-btn:hover{border-color:var(--sidebar-txt);background:#f5f7ff}
.icon-btn--danger:hover{border-color:#fecaca;background:#fef2f2}
.brand__logo--img{background:#fff;overflow:hidden;padding:3px}
.brand__logo--img img{width:100%;height:100%;object-fit:contain;display:block}
.brand__name{font-weight:800;color:#fff;font-size:1.02rem;line-height:1.15;display:flex;flex-direction:column}
.brand__name span{font-weight:500;font-size:.72rem;color:var(--sidebar-txt);letter-spacing:.02em}
.nav{padding:.9rem .7rem;display:flex;flex-direction:column;gap:.15rem;flex:1}
.nav__item{display:flex;align-items:center;gap:.7rem;padding:.62rem .8rem;border-radius:10px;color:var(--sidebar-txt);font-weight:500;transition:.15s}
.nav__item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav__item.is-active{background:rgba(255,255,255,.14);color:#fff;font-weight:600}
.nav__item .ico{width:18px;text-align:center;opacity:.9}
.sidebar__foot{padding:1rem;border-top:1px solid rgba(255,255,255,.08);display:flex;flex-direction:column;gap:.6rem}
.user{display:flex;align-items:center;gap:.6rem}
.user__avatar{width:36px;height:36px;border-radius:50%;background:var(--indigo-l);color:#fff;display:grid;place-items:center;font-weight:700}
.user__meta{display:flex;flex-direction:column;line-height:1.2}
.user__meta strong{color:#fff;font-size:.9rem}
.user__meta span{color:var(--sidebar-txt);font-size:.75rem}

.main{flex:1;margin-left:250px;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:1rem;padding:1rem 1.6rem;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.topbar__title{font-size:1.2rem;font-weight:700;flex:1}
.topbar__search{display:flex;align-items:center;gap:.25rem}
.topbar__search input{border:1px solid var(--line);border-radius:.6rem;padding:.45rem .75rem;font-size:.85rem;min-width:200px;background:#fff;color:var(--ink)}
.topbar__search input:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px var(--indigo-050)}
.topbar__search button{border:none;background:transparent;cursor:pointer;font-size:1rem;padding:.2rem .3rem;line-height:1}
@media (max-width:820px){.topbar__search input{min-width:120px}}
@media (max-width:560px){.topbar__search{display:none}}
.burger{display:none;background:none;border:none;font-size:1.3rem;cursor:pointer;color:var(--ink)}
.content{padding:1.6rem;flex:1;max-width:1280px;width:100%}
.pagefoot{padding:1.2rem 1.6rem;color:var(--muted);font-size:.82rem;border-top:1px solid var(--line)}

/* ---------- Boutons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.58rem 1rem;border-radius:10px;font-weight:600;font-size:.9rem;cursor:pointer;border:1px solid transparent;transition:.15s;white-space:nowrap}
.btn--primary{background:var(--indigo);color:#fff}
.btn--primary:hover{background:var(--indigo-d)}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{background:#f8fafc}
.btn--danger-ghost{background:#fff;border-color:#fecaca;color:var(--red)}
.btn--danger-ghost:hover{background:#fef2f2}
.btn--block{width:100%}
.btn--sm{padding:.4rem .7rem;font-size:.82rem}
.link{color:var(--indigo);font-weight:600;background:none;border:none;cursor:pointer;font-size:inherit;padding:0}
.link:hover{text-decoration:underline}
.link--danger{color:var(--red)}

/* ---------- Flash ---------- */
.flash{margin:0 0 1.1rem;padding:.8rem 1rem;border-radius:10px;font-weight:500}
.flash--success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0}
.flash--error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca}

/* ---------- KPI ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.2rem}
.kpi-grid--5{grid-template-columns:repeat(5,1fr)}
.kpi-grid--4{grid-template-columns:repeat(4,1fr)}
.kpi-grid--3{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.2rem;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px}
.kpi--indigo::before{background:var(--indigo)} .kpi--green::before{background:var(--green)}
.kpi--blue::before{background:var(--blue)} .kpi--amber::before{background:var(--amber)}
.kpi--slate::before{background:var(--slate)}
.kpi__label{color:var(--muted);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.kpi__value{font-size:2rem;font-weight:800;margin:.25rem 0 .1rem}
.kpi__value--sm{font-size:1.25rem}
.kpi__sub{color:var(--muted);font-size:.8rem}

/* ---------- Cards / grid ---------- */
.grid{display:grid;gap:1rem;margin-bottom:1.2rem}
.grid--2{grid-template-columns:1fr 1fr}
.grid--3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem;box-shadow:var(--shadow);margin-bottom:1.2rem}
.card--flush{padding:0;overflow:hidden}
.card--form{max-width:820px}
.card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.card__head h3{font-size:1rem;font-weight:700}
.chart-box{position:relative;width:100%;height:280px}
.chart-box--tall{height:320px}
.chart-box canvas{position:absolute;inset:0;width:100%!important;height:100%!important}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{text-align:left;padding:.7rem .9rem;color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid var(--line);background:#fafbff}
.table td{padding:.72rem .9rem;border-bottom:1px solid var(--line);vertical-align:middle}
.table--rows tr:last-child td{border-bottom:none}
.table--rows tbody tr:hover{background:#fafbff}
.table--mini td{padding:.5rem .3rem;font-size:.88rem;border-bottom:1px solid #f1f3f9}

/* ---------- Badges ---------- */
.badge{display:inline-block;padding:.22rem .6rem;border-radius:999px;font-size:.76rem;font-weight:600;line-height:1.4}
.badge--green{background:#ecfdf5;color:#047857}
.badge--blue{background:#eff6ff;color:#1d4ed8}
.badge--amber{background:#fffbeb;color:#b45309}
.badge--red{background:#fef2f2;color:#b91c1c}
.badge--gray{background:#f1f5f9;color:#475569}
.badge--indigo{background:var(--indigo-050);color:var(--indigo-txt)}

/* ---------- Rank list / minibars ---------- */
.ranklist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.ranklist li{display:grid;grid-template-columns:96px 1fr 32px;align-items:center;gap:.6rem;font-size:.86rem}
.ranklist__bar{background:#eef2f7;border-radius:6px;height:8px;overflow:hidden}
.ranklist__bar i{display:block;height:100%;background:linear-gradient(90deg,var(--indigo),var(--accent));border-radius:6px}
.ranklist__val{text-align:right;font-weight:600;color:var(--muted)}
.minibar{display:inline-block;width:100%;height:7px;background:#eef2f7;border-radius:5px;overflow:hidden;vertical-align:middle}
.minibar i{display:block;height:100%;background:linear-gradient(90deg,var(--indigo),var(--accent))}

/* ---------- Filtres / liste ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1rem;align-items:center}
.filters__search{flex:1;min-width:220px}
.filters input,.filters select,.form input,.form select,.form textarea,.auth-form input{
  font-family:inherit;font-size:.9rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);width:100%}
.filters input,.filters select{width:auto}
.filters select{min-width:150px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--indigo);box-shadow:0 0 0 3px rgba(79,70,229,.12)}
.list-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:.8rem;color:var(--muted)}

/* ---------- Pagination ---------- */
.pagination{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:1.2rem}
.pagination__info{color:var(--muted);font-size:.86rem}

/* ---------- Formulaire ---------- */
.form{display:flex;flex-direction:column;gap:1rem}
.form label{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.85rem;color:#334155}
.form input,.form select,.form textarea{font-weight:400}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form__row--3{grid-template-columns:1fr 1fr 1fr}
.form__actions{display:flex;justify-content:flex-end;gap:.7rem;margin-top:.4rem}
.card--form + .card--form{margin-top:0}
.card--form p{margin:.3rem 0}

/* ---------- Auth ---------- */
.auth-body{display:grid;place-items:center;min-height:100vh;background:linear-gradient(135deg,var(--sidebar-1),var(--sidebar-2) 60%,var(--accent))}
.auth-card{background:#fff;width:100%;max-width:400px;border-radius:18px;padding:2.2rem 2rem;box-shadow:0 24px 60px rgba(15,23,42,.35)}
.auth-brand{text-align:center;margin-bottom:1.4rem}
.auth-brand h1{font-size:1.4rem;font-weight:800;margin-top:.7rem}
.auth-brand p{color:var(--muted);margin:.2rem 0 0}
.auth-form{display:flex;flex-direction:column;gap:.9rem}
.auth-form label{display:flex;flex-direction:column;gap:.35rem;font-weight:600;font-size:.85rem;color:#334155}
.auth-hint{text-align:center;color:var(--muted);font-size:.8rem;margin-top:1rem}

/* ---------- WhatsApp / boutons complémentaires ---------- */
.btn--wa{background:#25d366;color:#fff}
.btn--wa:hover{background:#1eb955}
.btn--xs{padding:.28rem .6rem;font-size:.76rem;border-radius:8px}
.btn--danger-ghost.btn--xs{background:#fff}

/* ---------- Chips ---------- */
.chip{display:inline-block;padding:.18rem .55rem;border-radius:999px;font-size:.74rem;font-weight:600;background:var(--indigo-050);color:var(--indigo-txt)}
.chip--green{background:#ecfdf5;color:#047857}
.chip--red{background:#fef2f2;color:#b91c1c}
.chip--muted{background:#f1f5f9;color:#475569}

/* ---------- À relancer ---------- */
.card--relance{border-left:4px solid var(--amber)}
.relance-list{display:flex;flex-direction:column}
.relance-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.relance-item:last-child{border-bottom:none}
.relance-item .badge{margin-left:.5rem}
.relance-item__right{display:flex;align-items:center;gap:.8rem}

/* ---------- Timeline (notes) ---------- */
.note-form{display:flex;gap:.6rem;margin-bottom:1rem;align-items:flex-start}
.note-form textarea{flex:1;font-family:inherit;font-size:.9rem;padding:.55rem .7rem;border:1px solid var(--line);border-radius:9px;resize:vertical}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.8rem;max-height:340px;overflow-y:auto}
.timeline__item{border-left:3px solid var(--indigo);padding:.1rem 0 .3rem .8rem}
.timeline__meta{display:flex;align-items:center;gap:.6rem;font-size:.8rem;color:var(--muted)}
.timeline__meta strong{color:var(--ink)}
.timeline__body{margin-top:.2rem;color:#334155;font-size:.9rem;white-space:pre-wrap}

/* ---------- Paiements / devis form ---------- */
.pay-form{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.pay-form__row{display:flex;gap:.5rem;flex-wrap:wrap}
.pay-form__row input{flex:1;min-width:110px;font-family:inherit;font-size:.88rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px}
.devis-total{text-align:right;font-size:1.05rem;margin:.4rem 0}
.devis-total strong{color:var(--indigo);font-size:1.2rem}
#lignes input{font-family:inherit;font-size:.88rem;padding:.45rem .55rem;border:1px solid var(--line);border-radius:7px;width:100%}
#lignes th{font-size:.74rem}

/* ---------- Actions de suivi ---------- */
.note-form--action{flex-direction:column}
.action-row{display:flex;gap:.5rem;width:100%}
.action-row select,.action-row input{font-family:inherit;font-size:.88rem;padding:.5rem .6rem;border:1px solid var(--line);border-radius:8px}
.action-row select{flex:1}
.tarif-pick{margin:.2rem 0 .6rem}
.tarif-pick select{font-family:inherit;font-size:.88rem;padding:.5rem .7rem;border:1px solid var(--line);border-radius:9px;background:#f8fafc;width:100%;max-width:420px}

/* ---------- Actions groupées ---------- */
.bulk-bar{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;background:var(--indigo-050);border:1px solid var(--indigo-l);border-radius:12px;padding:.7rem 1rem;margin-bottom:.8rem}
.bulk-bar select,.bulk-bar input{font-family:inherit;font-size:.86rem;padding:.4rem .6rem;border:1px solid var(--line);border-radius:8px;background:#fff}

/* ---------- Entonnoir de conversion ---------- */
.funnel{display:flex;flex-direction:column;gap:.3rem;align-items:center;padding:.4rem 0}
.funnel__step{width:100%;display:flex;flex-direction:column;align-items:center}
.funnel__bar{height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;min-width:60px;transition:.3s}
.funnel__bar span{color:#fff;font-weight:800;font-size:1.1rem}
.funnel__bar--1{background:linear-gradient(90deg,var(--indigo),var(--indigo-l))}
.funnel__bar--2{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}
.funnel__bar--3{background:linear-gradient(90deg,#10b981,#34d399)}
.funnel__lbl{font-size:.82rem;color:var(--muted);margin-top:.25rem;font-weight:600}
.funnel__arrow{font-size:.8rem;color:var(--muted);font-weight:700}

/* ---------- Barres d'objectifs ---------- */
.obj-bar{height:10px;background:#eef2f7;border-radius:6px;overflow:hidden;margin:.2rem 0}
.obj-bar i{display:block;height:100%;border-radius:6px}
.obj-bar--low{background:linear-gradient(90deg,#f59e0b,#fbbf24)}
.obj-bar--mid{background:linear-gradient(90deg,#0ea5e9,#38bdf8)}
.obj-bar--ok{background:linear-gradient(90deg,#10b981,#34d399)}
.obj-line{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:.1rem}
.obj-head{margin-bottom:1rem}

/* ---------- Kanban ---------- */
.pipeline-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.inline-filter select{font-family:inherit;font-size:.88rem;padding:.5rem .7rem;border:1px solid var(--line);border-radius:9px;background:#fff}
.kanban{display:grid;grid-template-columns:repeat(5,minmax(190px,1fr));gap:.8rem;overflow-x:auto;padding-bottom:.5rem}
.kanban__col{background:#f1f3f9;border-radius:12px;padding:.6rem;min-height:200px;display:flex;flex-direction:column}
.kanban__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.6rem;padding:0 .2rem}
.kanban__count{background:#fff;border-radius:999px;padding:.05rem .5rem;font-size:.78rem;font-weight:700;color:var(--muted)}
.kanban__list{display:flex;flex-direction:column;gap:.5rem;flex:1;min-height:60px;border-radius:8px;transition:.15s}
.kanban__list.is-over{background:var(--indigo-050);outline:2px dashed var(--indigo-l)}
.kcard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:.6rem .7rem;box-shadow:0 1px 2px rgba(16,24,40,.05);cursor:grab}
.kcard.is-dragging{opacity:.5}
.kcard__title{font-weight:600;font-size:.88rem;margin-bottom:.35rem}
.kcard__meta{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.45rem}
.kcard__foot{display:flex;align-items:center;justify-content:space-between}

/* ---------- Responsive ---------- */
@media (max-width:1050px){ .kpi-grid,.kpi-grid--5{grid-template-columns:repeat(2,1fr)} .grid--2,.grid--3{grid-template-columns:1fr} }
@media (max-width:820px){
  .sidebar{transform:translateX(-100%);transition:.25s}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .burger{display:block}
  .form__row,.form__row--3{grid-template-columns:1fr}
  .topbar__actions .btn{padding:.5rem .7rem;font-size:.82rem}
  /* Cibles tactiles plus généreuses sur mobile */
  .nav__item,.nav__group-toggle{padding-top:.7rem;padding-bottom:.7rem}
  .btn{min-height:40px}
}
/* Encoches / barres système (PWA installée sur iPhone/Android récents) */
@supports(padding:max(0px)){
  .topbar{padding-top:max(1rem, env(safe-area-inset-top))}
  .sidebar{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  .content{padding-bottom:max(1.4rem, env(safe-area-inset-bottom))}
}

/* ---- Menu latéral : groupes repliables ---- */
.nav{overflow-y:auto}
.nav__group{display:flex;flex-direction:column}
.nav__group-toggle{display:flex;align-items:center;gap:.7rem;width:100%;background:none;border:0;cursor:pointer;
  padding:.62rem .8rem;border-radius:10px;color:var(--sidebar-txt);font-weight:600;font-size:.95rem;font-family:inherit;transition:.15s;text-align:left}
.nav__group-toggle:hover{background:rgba(255,255,255,.07);color:#fff}
.nav__group-toggle .ico{width:18px;text-align:center;opacity:.9}
.nav__group-label{flex:1}
.nav__caret{transition:transform .18s;opacity:.7;font-size:.8rem}
.nav__group.is-open>.nav__group-toggle .nav__caret{transform:rotate(180deg)}
.nav__group-items{max-height:0;overflow:hidden;transition:max-height .22s ease;padding-left:.15rem}
.nav__group.is-open>.nav__group-items{max-height:760px}
.nav__group-items .nav__item--sub{padding-left:2.1rem;font-size:.9rem;font-weight:500}
.nav__item--sub .ico{width:16px;font-size:.9rem}

/* ---- Dashboard : titres de section & variante KPI ---- */
.section-title{font-size:1.05rem;font-weight:700;color:var(--sidebar-2);margin:1.6rem 0 .5rem;padding-bottom:.3rem;border-bottom:2px solid var(--indigo-050)}
.section-title:first-child{margin-top:0}
.kpi--rose::before{background:#e11d48}
.ranklist--money li{grid-template-columns:minmax(90px,1.5fr) 1fr auto}
.ranklist--money .ranklist__val{min-width:104px;white-space:nowrap;color:var(--ink)}

/* ---- Table compacte (utilisée sur Ventes et fiche client) ---- */
.table--compact th,.table--compact td{font-size:.8rem;padding:.5rem .55rem}
.table--compact .chip{font-size:.72rem}

/* ---- Timeline de suivi (fiche client) ---- */
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
.timeline__item{position:relative;padding-left:1.1rem;border-left:2px solid #e0e7ff}
.timeline__item::before{content:"";position:absolute;left:-6px;top:.25rem;width:10px;height:10px;border-radius:50%;background:var(--indigo-l);border:2px solid #fff}
.timeline__meta{font-size:.76rem;color:var(--muted);font-weight:600}
.timeline__body{font-size:.88rem;margin-top:.15rem}

/* ── Fiche client : frise chronologique unifiée (#5) ── */
.ctimeline{list-style:none;margin:0;padding:0}
.ctimeline__item{display:flex;gap:.6rem;padding:.55rem 0;border-bottom:1px dashed var(--border,#e6e3ea)}
.ctimeline__item:last-child{border-bottom:0}
.ctimeline__ico{flex:0 0 1.9rem;width:1.9rem;height:1.9rem;border-radius:50%;background:#f3eef5;
  display:flex;align-items:center;justify-content:center;font-size:.9rem}
.ctimeline__body{flex:1;min-width:0}
.ctimeline__top{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.ctimeline__type{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:#6e1b3f}
.ctimeline__date{font-size:.74rem;color:#8a8594}
.ctimeline__montant{margin-left:auto;font-weight:700;font-size:.82rem;color:#111}
.ctimeline__titre{font-size:.86rem;font-weight:600;margin-top:.1rem}
.ctimeline__detail{font-size:.76rem;margin-top:.05rem}

/* ── Fidélité (#8) ── */
.fidelite-badge{display:inline-block;color:#fff;font-weight:700;font-size:.82rem;
  padding:.28rem .7rem;border-radius:999px;letter-spacing:.02em}
.fidelite-avantage{margin-top:.6rem;font-size:.76rem;line-height:1.35;
  background:#faf7fb;border:1px solid var(--border,#eee);border-radius:.5rem;padding:.5rem .6rem}
.fidelite-chip{display:inline-block;color:#fff;font-weight:700;font-size:.64rem;
  padding:.12rem .45rem;border-radius:999px;vertical-align:middle}

/* ── Parcours prospect : stepper (#3) ── */
.parcours{display:flex;gap:.35rem;margin:.2rem 0 0;flex-wrap:wrap}
.parcours__step{flex:1;min-width:70px;text-align:center;padding:.45rem .3rem;border-radius:.5rem;
  background:#f3eef5;color:#8a8594;font-weight:600;font-size:.78rem;position:relative}
.parcours__step.is-done{background:#e7f5ee;color:#047857}
.parcours__step.is-current{background:#6e1b3f;color:#fff;box-shadow:0 2px 8px rgba(110,27,63,.3)}
.parcours__step.is-abandon{background:#fdecec;color:#b91c1c}
.parcours__step small{display:block;font-weight:400;font-size:.66rem;opacity:.85}

/* ============================================================
   CLAYMORPHISM — surcouche « pâte à modeler »
   Surfaces bombées, coins très arrondis, ombres douces 3D.
   Placé en fin de fichier : surcharge les composants sans
   toucher au reste. Les couleurs restent celles de l'agence.
   ============================================================ */
:root{
  --radius:22px;
  --bg:#efe9ee;
  --line:rgba(120,80,105,.14);
  --clay-dark:rgba(74,20,45,.16);
  --clay-light:rgba(255,255,255,.90);
  --shadow:8px 8px 22px var(--clay-dark), -7px -7px 18px var(--clay-light);
  --clay-in:inset 2px 2px 5px rgba(255,255,255,.55), inset -4px -5px 11px rgba(74,20,45,.06);
}
body{
  background:
    radial-gradient(1100px 600px at 12% -12%, rgba(201,162,39,.10), transparent 60%),
    radial-gradient(1000px 720px at 112% 8%, rgba(110,27,63,.12), transparent 55%),
    var(--bg);
  background-attachment:fixed;
}

/* ---- Surfaces (cartes, KPI, modales) ---- */
.card,.kpi{
  border:1px solid rgba(255,255,255,.65);
  border-radius:var(--radius);
  box-shadow:var(--shadow), var(--clay-in);
}
.card--flush{overflow:hidden}
.kpi{padding:1.15rem 1.3rem}
.modal-card,.pmodal__card,.auth-card{
  border:1px solid rgba(255,255,255,.55);
  border-radius:28px;
  box-shadow:16px 18px 46px rgba(40,12,28,.30), -7px -7px 20px rgba(255,255,255,.55), var(--clay-in);
}

/* ---- Boutons bombés / tactiles ---- */
.btn{
  border:none;border-radius:16px;
  box-shadow:5px 5px 13px rgba(74,20,45,.16), -4px -4px 10px rgba(255,255,255,.85), inset 1px 1px 1px rgba(255,255,255,.35);
  transition:transform .08s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{
  transform:translateY(1px) scale(.995);
  box-shadow:inset 3px 3px 9px rgba(74,20,45,.24), inset -2px -2px 7px rgba(255,255,255,.45);
}
.btn--primary{background:linear-gradient(145deg, var(--indigo-l, var(--indigo)), var(--indigo));color:#fff}
.btn--primary:hover{background:linear-gradient(145deg, var(--indigo), var(--indigo-d))}
.btn--ghost{background:linear-gradient(145deg,#ffffff,#ece3e9);color:var(--ink)}
.btn--ghost:hover{background:linear-gradient(145deg,#ffffff,#f4edf2)}
.btn--wa{background:linear-gradient(145deg,#2ee06f,#1eb955)}
.btn--danger-ghost{background:linear-gradient(145deg,#ffffff,#fbeaea)}
.btn--sm{border-radius:13px}
.btn--xs{border-radius:11px}

.icon-btn{
  border:none;border-radius:12px;background:linear-gradient(145deg,#ffffff,#ece3e9);
  box-shadow:3px 3px 8px rgba(74,20,45,.14), -3px -3px 8px rgba(255,255,255,.85);
}
.icon-btn:hover{background:linear-gradient(145deg,#ffffff,#f4edf2)}
.icon-btn--danger:hover{background:linear-gradient(145deg,#fff,#fbeaea)}

/* ---- Champs : légèrement « creusés » ---- */
.filters input,.filters select,.form input,.form select,.form textarea,
.auth-form input,.topbar__search input,.pmodal input,.pmodal select,.pmodal textarea,
.note-form textarea,.pay-form__row input,#lignes input,.action-row select,.action-row input,
.tarif-pick select,.bulk-bar select,.bulk-bar input,.inline-filter select{
  border:1px solid rgba(120,80,105,.12);
  border-radius:14px;background:#f6f1f5;
  box-shadow:inset 2px 2px 5px rgba(74,20,45,.08), inset -2px -2px 5px rgba(255,255,255,.75);
}
input:focus,select:focus,textarea:focus{
  border-color:transparent;
  box-shadow:inset 2px 2px 5px rgba(74,20,45,.10), 0 0 0 3px rgba(201,162,39,.35);
}

/* ---- Badges / chips : léger relief ---- */
.badge,.chip{box-shadow:2px 2px 5px rgba(74,20,45,.08), -2px -2px 5px rgba(255,255,255,.70)}

/* ---- Barre du haut ---- */
.topbar{border-bottom:none;box-shadow:0 8px 22px rgba(74,20,45,.06);background:rgba(255,255,255,.85);backdrop-filter:blur(6px)}

/* ---- Menu latéral ---- */
.nav__item,.nav__group-toggle{border-radius:14px}
.nav__item.is-active{box-shadow:inset 2px 2px 7px rgba(0,0,0,.28), inset -2px -2px 7px rgba(255,255,255,.06)}

/* ---- Barres de progression toutes rondes ---- */
.minibar,.ranklist__bar,.obj-bar,.bar,.kpi::before{border-radius:999px}

/* ---- Kanban ---- */
.kanban__col{
  border-radius:20px;background:#ece4ea;
  box-shadow:inset 3px 3px 9px rgba(74,20,45,.08), inset -3px -3px 9px rgba(255,255,255,.70);
}
.kcard{
  border:none;border-radius:16px;
  box-shadow:5px 5px 12px rgba(74,20,45,.12), -4px -4px 10px rgba(255,255,255,.85);
}

/* ---- Flash / alertes ---- */
.flash,.pflash{border:none;border-radius:16px;box-shadow:var(--shadow)}

/* ---- Tables : nettes dans une carte bombée ---- */
.table th{background:transparent}

/* ---- Petites tuiles diverses ---- */
.fidelite-avantage{border:none;border-radius:14px;box-shadow:var(--clay-in)}
.parcours__step,.ctimeline__ico{border-radius:14px}
.ctimeline__ico{border-radius:50%}

/* ============================================================
   CLAYMORPHISM « À FOND » — intensification + composant avatar
   (surcharge la surcouche clay précédente : rayons plus larges,
   ombres plus marquées, avatar photo rond & cliquable)
   ============================================================ */
:root{
  --radius:24px;
  --clay-dark:rgba(74,20,45,.18);
  --clay-light:rgba(255,255,255,.92);
  --shadow:10px 10px 28px var(--clay-dark), -8px -8px 22px var(--clay-light);
  --clay-in:inset 2px 2px 6px rgba(255,255,255,.60), inset -5px -6px 13px rgba(74,20,45,.07);
}
.card,.kpi{border-radius:26px}
.kpi::before{left:10px;top:14px;bottom:14px;width:6px}
.section-title{border-bottom:none;box-shadow:0 6px 16px rgba(74,20,45,.05);background:linear-gradient(145deg,#ffffff,#f1e8ef);border-radius:16px;padding:.5rem .9rem}
.svc-tabs a{border:none!important;border-radius:14px!important;
  box-shadow:4px 4px 10px rgba(74,20,45,.12), -3px -3px 9px rgba(255,255,255,.85)!important;
  background:linear-gradient(145deg,#ffffff,#efe6ed)!important}
.svc-tabs a.is-active{box-shadow:inset 3px 3px 8px rgba(74,20,45,.20), inset -2px -2px 7px rgba(255,255,255,.5)!important;
  background:var(--indigo-050)!important;color:var(--indigo)!important}
.bulk-bar{border:none;border-radius:18px;box-shadow:var(--clay-in), 4px 4px 14px rgba(74,20,45,.10)}
.chip,.badge{border-radius:999px}
.card--relance,.timeline__item{border-left:none}
.timeline__item{padding-left:1.1rem}

/* ---- Avatar (affichage) ---- */
.av{border-radius:50%;overflow:hidden;object-fit:cover;background:#efe6ec;
  box-shadow:4px 4px 10px rgba(74,20,45,.16), -3px -3px 9px rgba(255,255,255,.85), inset 0 0 0 3px rgba(255,255,255,.55)}
.av img{width:100%;height:100%;object-fit:cover;display:block}

/* ---- Avatar photo cliquable (upload avec aperçu) ---- */
.avatar-pick{position:relative;display:inline-block;cursor:pointer;line-height:0}
.avatar-pick input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;z-index:2}
.avatar-pick .av-img{width:104px;height:104px;border-radius:50%;object-fit:cover;background:#efe6ec;
  box-shadow:6px 6px 15px rgba(74,20,45,.18), -5px -5px 12px rgba(255,255,255,.9), inset 0 0 0 4px rgba(255,255,255,.6);
  transition:transform .12s}
.avatar-pick:hover .av-img{transform:scale(1.02)}
.avatar-pick .av-cam{position:absolute;right:0;bottom:2px;width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;font-size:1rem;color:#fff;z-index:3;
  background:linear-gradient(145deg,var(--indigo-l,var(--indigo)),var(--indigo));
  box-shadow:3px 3px 8px rgba(74,20,45,.28), -2px -2px 6px rgba(255,255,255,.5)}
.avatar-pick .av-hint{display:block;text-align:center;font-size:.72rem;color:var(--muted);margin-top:.4rem;font-weight:600}

/* ═══════════════════════════════════════════════════════════════════
   REFONTE DESIGN PREMIUM (v3.5)
   Typographie éditoriale (Fraunces) + finitions. Réversible : supprimer
   ce bloc rétablit exactement l'apparence précédente.
   ═══════════════════════════════════════════════════════════════════ */
:root{ --serif:'Fraunces',Georgia,'Times New Roman',serif; }

/* Titres en serif éditorial — donne le ton « premium » sans toucher au corps.
   NB : les chiffres des KPI restent dans la police d'origine (Inter) — choix Felix. */
.topbar__title,
.card__head h3,
.section-title,
.auth-brand h1,
.modal-card__head h3{ font-family:var(--serif); letter-spacing:-.01em; }

.topbar__title{ font-weight:600; font-size:1.28rem; }
.card__head h3{ font-weight:600; font-size:1.08rem; letter-spacing:-.005em; }
.section-title{ font-weight:600; }

/* KPI : un halo doux + légère élévation au survol */
.kpi{ transition:transform .16s ease, box-shadow .16s ease; }
.kpi:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(15,23,42,.10); }

/* Cartes : coins un chouïa plus généreux + ombre plus subtile en survol */
.card{ transition:box-shadow .18s ease; }
.card:hover{ box-shadow:0 8px 30px rgba(15,23,42,.07); }

/* Boutons : transition et micro-relief */
.btn{ transition:transform .1s ease, box-shadow .15s ease, background .15s ease; }
.btn--primary{ box-shadow:0 4px 14px rgba(79,70,229,.28); }
.btn--primary:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(79,70,229,.34); }
.btn:active{ transform:translatey(0); }

/* Écran de connexion : plus aéré, titre serif */
.auth-brand h1{ font-weight:600; letter-spacing:-.015em; }
.auth-card{ box-shadow:0 24px 60px rgba(15,23,42,.14); }

/* Tables : en-têtes un peu plus lisibles */
.table th{ font-weight:700; }

/* Badges : coins pleinement arrondis pour un rendu « pilule » premium */
.badge{ border-radius:999px; }

/* Sélecteur de langue (carnet / espace client) */
.lang-switch a{ transition:background .15s ease, color .15s ease; }

/* ═══════════════════════════════════════════════════════════════════
   LANGAGE « NIMBUS » (clair) — v3.6
   Emprunte le langage : Ubuntu, arrondis généreux (pilules), élévation
   douce, interlignes aérés. Conserve la marque (bordeaux/or) et le fond
   clair. Réversible : supprimer ce bloc. Placé en dernier → prioritaire.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --radius:22px;                 /* cartes plus arrondies */
  --shadow:0 1px 2px rgba(110,27,63,.05), 0 14px 34px rgba(110,27,63,.08);
  --r-pill:999px;
}

/* Typographie Ubuntu — corps plus aéré */
body{ font-family:'Ubuntu',Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; line-height:1.7; }

/* Titres : Ubuntu (on neutralise la serif Fraunces de la v3.5) */
.topbar__title,
.card__head h3,
.section-title,
.kpi__value,
.auth-brand h1,
.modal-card__head h3,
h1,h2,h3,h4{ font-family:'Ubuntu',Inter,system-ui,sans-serif; }
.topbar__title{ font-weight:500; letter-spacing:-.01em; }
.card__head h3{ font-weight:500; }
.kpi__value{ font-weight:700; letter-spacing:-.01em; }

/* Boutons en pilule + relief doux */
.btn{ border-radius:var(--r-pill); font-weight:700; padding:.62rem 1.2rem;
  transition:transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .16s, background .16s, filter .16s; }
.btn--sm{ padding:.42rem .9rem; }
.btn--primary{ box-shadow:0 8px 20px rgba(110,27,63,.22); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(110,27,63,.30); }
.btn--ghost:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }

/* Cartes, KPI, modales : coins généreux + élévation douce (teinte marque) */
.card,.kpi{ border-radius:var(--radius); box-shadow:var(--shadow); }
.card{ padding:1.35rem 1.4rem; transition:transform .18s cubic-bezier(.22,.61,.36,1), box-shadow .18s; }
.card:hover{ transform:translateY(-3px); box-shadow:0 18px 40px rgba(110,27,63,.12); }
.kpi{ transition:transform .16s, box-shadow .16s; }
.kpi:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(110,27,63,.12); }
.modal-card,.pmodal__card{ border-radius:26px !important; }

/* Champs plus doux et lisibles */
input:not([type=checkbox]):not([type=radio]),
select, textarea,
.topbar__search input{ border-radius:12px !important; }

/* Badges / chips en pilule */
.badge,.chip{ border-radius:var(--r-pill); }

/* Onglets et pilules de navigation un peu plus ronds */
.svc-tabs a{ border-radius:var(--r-pill); }

/* Menu latéral : items plus arrondis */
.nav__item,.nav__group-toggle{ border-radius:14px; }

/* ═══════════════════════════════════════════════════════════════════
   LANGAGE « NIMBUS » — v3.6.1 : rendu AFFIRMÉ (toujours clair + marque)
   Objectif : que le nouveau langage soit franchement visible. Dégradés
   de marque vibrants, arrondis plus généreux, élévation plus présente.
   ═══════════════════════════════════════════════════════════════════ */
:root{ --radius:26px; }

/* Boutons primaires : dégradé de marque vibrant + pilule + relief net */
.btn--primary,
.btn.btn--primary{
  background:linear-gradient(120deg, var(--indigo) 0%, var(--indigo-l) 55%, var(--accent) 165%) !important;
  border:none !important;
  box-shadow:0 10px 24px rgba(110,27,63,.30) !important;
  letter-spacing:.01em;
}
.btn--primary:hover{ transform:translateY(-2px) scale(1.015); box-shadow:0 14px 30px rgba(110,27,63,.38) !important; filter:saturate(1.05); }

/* Bouton accent (or) bien vibrant */
.btn--accent{ background:linear-gradient(120deg, var(--accent), #e6c667) !important; color:#3a2a00 !important; border:none !important; box-shadow:0 10px 24px rgba(201,162,39,.32) !important; }

/* Cartes : coins plus francs, léger liseré clair + halo doux plus présent */
.card{
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 2px 4px rgba(110,27,63,.04), 0 18px 44px rgba(110,27,63,.11);
}
.card:hover{ transform:translateY(-4px); box-shadow:0 26px 56px rgba(110,27,63,.16); }

/* KPI : barre d'accent en pilule + fond très légèrement teinté + coins ronds */
.kpi{ border-radius:24px; overflow:hidden; }
.kpi::before{ width:6px !important; border-radius:999px; left:10px !important; top:12px !important; bottom:12px !important; height:auto !important; }
.kpi__value{ font-size:1.95rem; line-height:1.15; }

/* Entêtes de cartes : titre Ubuntu plus affirmé + filet or discret */
.card__head h3{ font-weight:700; font-size:1.12rem; }
.section-title{ font-weight:700; }

/* Barre du haut : léger dégradé chaud sous le titre pour ancrer la marque */
.topbar{ border-bottom:2px solid transparent; border-image:linear-gradient(90deg, var(--indigo), var(--accent)) 1; }
.topbar__title{ font-weight:700; }

/* Champs : un peu plus ronds et doux */
input:not([type=checkbox]):not([type=radio]), select, textarea, .topbar__search input{ border-radius:14px !important; }

/* Badges bien en pilule et lisibles */
.badge{ border-radius:999px; padding:.28em .7em; font-weight:700; }

/* Onglets : pilule marquée, état actif dégradé */
.svc-tabs a{ border-radius:999px; }
.svc-tabs a.is-active{ background:linear-gradient(120deg, var(--indigo-050), #fff); }

/* Item de menu actif : pilule avec accent or à gauche */
.nav__item.is-active{ border-radius:14px; box-shadow:inset 3px 0 0 var(--accent); }

/* ═══════════════════════════════════════════════════════════════════
   LANGAGE « NIMBUS » — v3.6.2 : PLUS FORT (dégradés marque étendus)
   Fond clair conservé, marque bordeaux/or, mais vibrance nettement accrue.
   ═══════════════════════════════════════════════════════════════════ */

/* Barre latérale : dégradé diagonal + halo or discret en haut */
.sidebar{
  background:
    radial-gradient(160px 120px at 26px 30px, rgba(201,162,39,.22), transparent 70%),
    linear-gradient(155deg, var(--sidebar-1) 0%, var(--sidebar-2) 62%, var(--indigo) 100%) !important;
}
/* Item de menu actif : pastille dégradée + accent or */
.nav__item.is-active{
  background:linear-gradient(100deg, rgba(201,162,39,.28), rgba(255,255,255,.10)) !important;
  box-shadow:inset 3px 0 0 var(--accent) !important; color:#fff !important;
}

/* Barre du haut : léger voile dégradé chaud + filet dégradé conservé */
.topbar{
  background:linear-gradient(90deg, rgba(110,27,63,.06), rgba(201,162,39,.05)) , rgba(255,255,255,.9) !important;
  backdrop-filter:blur(8px);
}
/* Titre de page en texte dégradé bordeaux→or (grande taille = lisible) */
.topbar__title{
  background:linear-gradient(92deg, var(--indigo) 0%, var(--indigo-l) 45%, var(--accent) 115%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
  font-weight:700;
}

/* Entêtes de cartes : filet dégradé sous le titre */
.card__head{ border-bottom:2px solid transparent; border-image:linear-gradient(90deg, var(--indigo), var(--accent) 80%) 1; padding-bottom:.55rem; }

/* Titres de section : petit tiret dégradé devant */
.section-title{ display:flex; align-items:center; gap:.55rem; }
.section-title::before{ content:""; width:22px; height:4px; border-radius:999px;
  background:linear-gradient(90deg, var(--indigo), var(--accent)); flex:0 0 auto; }

/* KPI : la pastille d'accent passe en dégradé pour plus d'éclat */
.kpi::before{ background:linear-gradient(180deg, var(--indigo), var(--accent)) !important; }

/* Voile de marque très doux en haut de la zone de contenu.
   ⚠ Ne PAS toucher au position/z-index de .topbar (sinon le sticky casse) :
   le voile est placé DANS .content, et seul .content passe au-dessus. */
.content{ position:relative; z-index:1; }
.content::before{ content:""; position:absolute; inset:0 0 auto 0; height:200px; pointer-events:none; z-index:-1;
  background:radial-gradient(520px 180px at 12% 0%, rgba(110,27,63,.06), transparent 70%),
            radial-gradient(460px 200px at 100% 0%, rgba(201,162,39,.07), transparent 70%); }

/* Barre du haut : réaffirmée fixe (collée en haut au défilement) */
.topbar{ position:sticky !important; top:0; z-index:40 !important; }

/* Boutons ghost : liseré dégradé au survol pour rester dans le thème */
.btn--ghost:hover{ border-color:transparent; box-shadow:0 0 0 1.5px var(--accent) inset; }

/* ═══════════════════════════════════════════════════════════════════
   EXPÉRIENCE PRO — v3.7
   Cohérence + micro-interactions dignes d'une app professionnelle.
   Tableaux réactifs, toasts, barre de chargement, focus, défilement.
   ═══════════════════════════════════════════════════════════════════ */

/* ---- Focus accessible et cohérent (marque) ---- */
a:focus-visible, button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent) !important;
  border-radius:12px;
}

/* ---- Champs : retour visuel au survol + focus soigné ---- */
input:not([type=checkbox]):not([type=radio]), select, textarea{
  transition:border-color .16s, box-shadow .16s, background .16s;
}
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover{
  border-color:color-mix(in srgb, var(--indigo) 35%, var(--line));
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus{
  border-color:var(--indigo) !important;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--indigo) 16%, transparent) !important;
}

/* ---- Tableaux « pro » : entête teintée, survol, zébrage léger ---- */
.table{ border-collapse:separate; border-spacing:0; }
.table thead th{
  background:color-mix(in srgb, var(--indigo-050) 55%, #fff);
  color:var(--indigo-txt); font-weight:700;
  border-bottom:1px solid var(--line);
}
.table tbody tr{ transition:background .13s; }
.table tbody tr:nth-child(even) td{ background:color-mix(in srgb, var(--indigo-050) 22%, #fff); }
.table tbody tr:hover td{ background:color-mix(in srgb, var(--accent) 12%, #fff); }
.table td{ border-bottom:1px solid color-mix(in srgb, var(--line) 70%, #fff); }
.table tbody tr:last-child td{ border-bottom:none; }
.table th:first-child, .table td:first-child{ padding-left:1.1rem; }
.table th:last-child, .table td:last-child{ padding-right:1.1rem; }

/* ---- Liens de tableau / actions : cible tactile confortable ---- */
.table a.link, .table .btn--sm{ white-space:nowrap; }

/* ---- Toasts (messages flash qui glissent puis s'estompent) ---- */
.flash, .pflash{
  position:fixed; top:16px; right:16px; left:auto; z-index:99999;
  max-width:min(380px, calc(100vw - 32px)); margin:0;
  padding:.85rem 2.4rem .85rem 1rem; border-radius:16px; font-weight:600;
  box-shadow:0 16px 40px rgba(15,23,42,.18); border:none;
  background:#fff; color:var(--ink);
  border-left:5px solid var(--indigo);
  animation:toastIn .32s cubic-bezier(.22,.61,.36,1) both;
}
.flash::after, .pflash::after{
  content:"×"; position:absolute; top:8px; right:12px; font-size:1.25rem; line-height:1;
  color:var(--muted); cursor:pointer; font-weight:400;
}
.flash--success, .flash--ok, .pflash--ok{ border-left-color:var(--green); }
.flash--error, .pflash--error{ border-left-color:var(--red); }
.flash.toast-out, .pflash.toast-out{ animation:toastOut .3s ease forwards; }
@keyframes toastIn{ from{ opacity:0; transform:translateX(24px) } to{ opacity:1; transform:none } }
@keyframes toastOut{ to{ opacity:0; transform:translateX(24px) } }

/* ---- Barre de chargement en haut (navigation) ---- */
#pageloader{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:100000;
  background:linear-gradient(90deg, var(--indigo), var(--accent));
  box-shadow:0 0 10px color-mix(in srgb, var(--accent) 60%, transparent);
  opacity:0; transition:width .2s ease, opacity .3s;
  pointer-events:none;
}
#pageloader.on{ opacity:1; }

/* ---- Micro-interactions générales ---- */
.card, .kpi, .btn, .nav__item, .badge, .svc-tabs a{ transition:all .16s cubic-bezier(.22,.61,.36,1); }
.link{ transition:color .13s; }
.link:hover{ text-decoration:underline; text-underline-offset:2px; }

/* ---- Barre de défilement discrète (teintée marque) ---- */
*{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb, var(--indigo) 40%, #cfd4e2) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-thumb{ background:color-mix(in srgb, var(--indigo) 32%, #c9cede); border-radius:999px; border:2px solid #fff; }
*::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--indigo) 55%, #b9bfd0); }

/* ---- Zone de contenu : respiration ---- */
.content{ padding-top:.4rem; }

/* ═══════════════════════════════════════════════════════════════════
   SOFT & ÉQUILIBRÉ — v3.11
   Rendu plus doux et aéré (référence Felix) : ombres légères, plus
   d'espace, accents pastel distincts par carte, titres sobres.
   Placé en dernier → prioritaire. Réversible par suppression.
   ═══════════════════════════════════════════════════════════════════ */

/* Cartes & KPI : ombres douces, coins généreux, plus d'air, survol calme */
.card{ box-shadow:0 1px 2px rgba(16,24,40,.03), 0 10px 26px rgba(16,24,40,.05); border-color:#eef0f4; padding:1.5rem 1.6rem; }
.card:hover{ transform:none; box-shadow:0 2px 6px rgba(16,24,40,.05), 0 14px 32px rgba(16,24,40,.07); }
.kpi{ padding:1.35rem 1.45rem; box-shadow:0 1px 2px rgba(16,24,40,.03), 0 8px 22px rgba(16,24,40,.05); border-color:#eef0f4; }
.kpi:hover{ transform:none; box-shadow:0 3px 8px rgba(16,24,40,.05), 0 14px 30px rgba(16,24,40,.07); }

/* KPI : on rétablit une couleur d'accent DISTINCTE et DOUCE par carte
   (au lieu du dégradé unique bordeaux→or, trop appuyé). */
.kpi::before{ width:5px !important; border-radius:999px; opacity:.9;
  background:color-mix(in srgb, var(--indigo) 70%, #fff) !important; }
.kpi--indigo::before{ background:color-mix(in srgb, var(--indigo) 72%, #fff) !important; }
.kpi--green::before{  background:color-mix(in srgb, var(--green)  70%, #fff) !important; }
.kpi--blue::before{   background:color-mix(in srgb, var(--blue)   70%, #fff) !important; }
.kpi--amber::before{  background:color-mix(in srgb, var(--amber)  72%, #fff) !important; }
.kpi--rose::before{   background:color-mix(in srgb, #e11d48 68%, #fff) !important; }
.kpi--slate::before{  background:#cbd2df !important; }
.kpi__label{ color:#8a90a2; letter-spacing:.05em; font-weight:600; }
.kpi__value{ color:#20242e; }
.kpi__sub{ color:#98a0b0; }

/* Titre de page : sobre (couleur pleine, plus de texte en dégradé) */
.topbar__title{ background:none !important; -webkit-text-fill-color:currentColor !important;
  color:var(--indigo) !important; font-weight:600; }

/* En-têtes de cartes : filet plus discret */
.card__head{ border-image:none; border-bottom:1px solid #eef0f4; padding-bottom:.7rem; }

/* Boutons primaires : dégradé plus doux, ombre légère */
.btn--primary{ box-shadow:0 5px 14px rgba(110,27,63,.15) !important; }
.btn--primary:hover{ box-shadow:0 8px 18px rgba(110,27,63,.20) !important; }

/* Barres de progression : épaisses, bien arrondies, fond doux */
.bar{ background:#eef0f4 !important; border-radius:999px; overflow:hidden; }
.bar i{ border-radius:999px; }

/* Barre du haut : voile plus neutre (moins chaud) */
.topbar{ background:rgba(255,255,255,.92) !important; }

/* ── Devise (FCFA) réduite sur les grands nombres, tout le site ──
   Le suffixe monétaire est enveloppé côté client (footer) dans .cur-suffix. */
.cur-suffix{
  font-size:.52em;
  font-weight:600;
  opacity:.6;
  letter-spacing:.02em;
  margin-left:.08em;
  white-space:nowrap;
}
/* Montants (variante --sm) : taille adaptée + valeur sur une seule ligne */
.kpi__value{ white-space:nowrap; }
.kpi__value.kpi__value--sm{ font-size:1.5rem; }

/* ── Barre de filtres sur une seule ligne (repli propre en dessous de 1100px) ── */
.filters{ flex-wrap:nowrap; gap:.45rem; }
.filters__search{ flex:1 1 120px; min-width:90px; }
.filters select{ min-width:0; flex:0 1 auto; }
.filters .btn{ flex:0 0 auto; white-space:nowrap; }
@media(max-width:1100px){
  .filters{ flex-wrap:wrap; }
  .filters__search{ flex:1 1 220px; min-width:200px; }
  .filters select{ flex:0 1 auto; }
}