/* ============================================================
   E-ComPlus Plateforme — Feuille de style
   Palette : navy profond + orange (identité E-ComPlus)
   Fond    : dégradé bleuté prononcé
   ============================================================ */

:root{
  --navy:#0D1B3E;
  --navy-2:#0A1530;
  --navy-3:#16295e;
  --orange:#F26B21;
  --orange-deep:#D9550F;
  --orange-soft:rgba(242,107,33,.12);
  --blue:#0F5FD7;
  --green:#16a34a;
  --green-soft:rgba(22,163,74,.12);
  --red:#dc2626;
  --red-soft:rgba(220,38,38,.1);
  --card:#ffffff;
  --ink:#0D1B3E;
  --muted:#8792ab;
  --muted-2:#a9b3c7;
  --line:rgba(13,27,62,.08);
  --shadow-sm:0 1px 3px rgba(13,27,62,.06);
  --shadow:0 4px 16px rgba(13,27,62,.08);
  --shadow-lg:0 12px 34px rgba(13,27,62,.14);
  --radius:14px;
  --radius-sm:10px;
  --sidebar-w:236px;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}

body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#EFF5FE;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
}

a{color:inherit;text-decoration:none}
img,video{max-width:100%;display:block}
.content{overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}

/* ============================================================
   MISE EN PAGE
   ============================================================ */

.layout{display:flex;min-height:100vh}

/* ---------- Barre latérale ---------- */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
}

.brand{
  padding:26px 22px 22px;
  font-size:20px;
  font-weight:800;
  letter-spacing:-.3px;
  color:#fff;
}
.brand span{color:var(--orange)}
.brand .tagline{
  display:block;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:4px;
}

.nav{flex:1;padding:6px 0;overflow-y:auto}
.nav-label{
  padding:16px 22px 7px;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#5f7099;
}
.nav a{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 22px;
  font-size:14px;
  font-weight:500;
  color:#9fb0d4;
  border-left:3px solid transparent;
  transition:background .16s,color .16s;
}
.nav a:hover{background:rgba(255,255,255,.05);color:#dbe3f4}
.nav a.active{
  background:var(--orange-soft);
  color:#fff;
  font-weight:600;
  border-left-color:var(--orange);
}
.nav .ico{width:18px;height:18px;flex-shrink:0;opacity:.9}
.nav a.active .ico{opacity:1}

.sidebar-foot{
  padding:16px 22px;
  border-top:1px solid rgba(255,255,255,.07);
}
.user-chip{
  display:flex;align-items:center;gap:11px;
  border-radius:var(--radius-sm);
  margin:-6px;padding:6px;
  transition:background .16s;
}
.user-chip:hover{background:rgba(255,255,255,.06)}
.avatar{
  width:36px;height:36px;flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--orange-deep));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;
}
.user-meta{min-width:0}
.user-name{font-size:13px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{font-size:11px;color:var(--muted)}
.logout-link{
  display:block;margin-top:12px;font-size:12.5px;color:#8fa0c6;
  transition:color .16s;
}
.logout-link:hover{color:var(--orange)}

/* Bouton de déconnexion — mobile uniquement */
.logout-icon{display:none}

/* ---------- Zone de travail ---------- */
.content{
  flex:1;
  min-width:0;
  background:linear-gradient(160deg,#EFF5FE 0%,#CFDFF5 100%);
  background-attachment:fixed;
  padding:28px 32px 56px;
}

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  margin-bottom:22px;
  flex-wrap:wrap;
}
.page-title{font-size:23px;font-weight:800;letter-spacing:-.4px}
.page-sub{font-size:13.5px;color:#63708c;margin-top:3px}

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

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:none;
  border-radius:var(--radius-sm);
  padding:11px 18px;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer;
  transition:transform .12s,box-shadow .16s,background .16s;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}

.btn-primary{
  background:var(--orange);
  color:#fff;
  box-shadow:0 4px 14px rgba(242,107,33,.34);
}
.btn-primary:hover{background:var(--orange-deep);box-shadow:0 6px 18px rgba(242,107,33,.42)}

.btn-ghost{
  background:#fff;
  color:var(--ink);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
}
.btn-ghost:hover{border-color:rgba(13,27,62,.18)}

.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#b91c1c}

.btn-sm{padding:8px 13px;font-size:12.5px}
.btn-block{width:100%;justify-content:center}

/* ---------- Cartes statistiques ---------- */
.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;
  margin-bottom:24px;
}
.stat{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:16px 18px;
  box-shadow:var(--shadow-sm);
  position:relative;
  overflow:hidden;
}
.stat::after{
  content:'';
  position:absolute;
  top:0;left:0;
  width:3px;height:100%;
  background:var(--orange);
  opacity:0;
  transition:opacity .2s;
}
.stat.accent::after{opacity:1}
.stat-label{
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.stat-value{font-size:24px;font-weight:800;letter-spacing:-.6px}
.stat.accent .stat-value{color:var(--orange)}
.stat-hint{font-size:11.5px;color:var(--muted);margin-top:3px}

/* ---------- Grille de produits ---------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:16px;
}

.product-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .18s,box-shadow .18s;
  display:flex;
  flex-direction:column;
}
.product-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}

.product-thumb{
  position:relative;
  height:150px;
  background:linear-gradient(135deg,#eef2fa,#dde7f6);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.product-thumb img{width:100%;height:100%;object-fit:cover}
.thumb-empty{font-size:12px;color:#9aa6bf;font-weight:600}

.badge-video{
  position:absolute;top:10px;right:10px;
  background:rgba(13,27,62,.82);
  color:#fff;
  font-size:10.5px;font-weight:700;
  padding:4px 9px;border-radius:20px;
  display:flex;align-items:center;gap:5px;
  backdrop-filter:blur(4px);
}
.badge-off{
  position:absolute;top:10px;left:10px;
  background:rgba(220,38,38,.92);
  color:#fff;font-size:10.5px;font-weight:700;
  padding:4px 9px;border-radius:20px;
}

.card-link{display:flex;flex-direction:column;flex:1;color:inherit}

.product-body{padding:14px 15px 15px;flex:1;display:flex;flex-direction:column}
.product-name{
  font-size:14.5px;font-weight:700;letter-spacing:-.2px;
  margin-bottom:10px;line-height:1.35;
}
.price-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:12.5px;color:var(--muted);margin-bottom:4px;
}
.price-row b{font-size:13px;font-weight:700;color:var(--ink)}

.margin-tag{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:10px;
  background:var(--orange-soft);
  color:var(--orange-deep);
  font-size:11.5px;font-weight:700;
  padding:5px 10px;border-radius:20px;
  align-self:flex-start;
}
.margin-tag .pct{opacity:.75;font-weight:600}

.stock-line{
  display:flex;align-items:center;gap:6px;
  margin-top:11px;font-size:12px;color:var(--muted);
}
.stock-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.stock-dot.ok{background:var(--green)}
.stock-dot.low{background:#f59e0b}
.stock-dot.out{background:var(--red)}

.product-actions{
  display:flex;gap:7px;
  padding:0 15px 15px;
}
.product-actions .btn{flex:1;justify-content:center}

/* ---------- État vide ---------- */
.empty{
  background:var(--card);
  border:1px dashed rgba(13,27,62,.16);
  border-radius:var(--radius);
  padding:56px 30px;
  text-align:center;
  box-shadow:var(--shadow-sm);
}
.empty-icon{
  width:60px;height:60px;margin:0 auto 16px;
  border-radius:50%;
  background:var(--orange-soft);
  display:flex;align-items:center;justify-content:center;
}
.empty h3{font-size:17px;font-weight:700;margin-bottom:7px}
.empty p{font-size:13.5px;color:#63708c;max-width:400px;margin:0 auto 20px;line-height:1.6}

/* ---------- Formulaires ---------- */
.form-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  max-width:820px;
}
.form-section{padding:24px 26px;border-bottom:1px solid var(--line)}
.form-section:last-of-type{border-bottom:none}
.form-section-title{
  font-size:12px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  color:var(--orange-deep);margin-bottom:16px;
}

.field{margin-bottom:17px}
.field:last-child{margin-bottom:0}
.field label{
  display:block;font-size:13px;font-weight:600;margin-bottom:6px;
}
.field .hint{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}

.input,.select,.textarea{
  width:100%;
  border:1.5px solid var(--line);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  font-size:14px;
  background:#fbfcfe;
  transition:border-color .16s,box-shadow .16s,background .16s;
}
.input:focus,.select:focus,.textarea:focus{
  outline:none;
  border-color:var(--orange);
  background:#fff;
  box-shadow:0 0 0 3px rgba(242,107,33,.13);
}
.textarea{min-height:100px;resize:vertical;line-height:1.6}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.input-money{position:relative}
.input-money .input{padding-right:52px}
.input-money .unit{
  position:absolute;right:13px;top:50%;transform:translateY(-50%);
  font-size:12.5px;font-weight:700;color:var(--muted);pointer-events:none;
}

.tag-private{
  display:inline-block;margin-left:8px;
  font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  background:rgba(13,27,62,.08);color:#5a6178;
  padding:2px 8px;border-radius:12px;vertical-align:middle;
}

.margin-double{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.margin-double .margin-preview{flex-direction:column;align-items:flex-start;gap:5px}
.margin-preview.alt{
  background:linear-gradient(135deg,rgba(15,95,215,.09),rgba(15,95,215,.03));
  border-color:rgba(15,95,215,.22);
}
.margin-preview.alt .lbl{color:#1249a8}
.margin-preview.alt .val{color:#1249a8}

@media (max-width:880px){
  .margin-double{grid-template-columns:1fr}
}

/* Aperçu de marge en direct */
.margin-preview{
  background:linear-gradient(135deg,var(--orange-soft),rgba(242,107,33,.05));
  border:1px solid rgba(242,107,33,.22);
  border-radius:var(--radius-sm);
  padding:14px 16px;
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap;
}
.margin-preview .lbl{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--orange-deep)}
.margin-preview .val{font-size:21px;font-weight:800;color:var(--orange-deep)}
.margin-preview .val.neg{color:var(--red)}

/* Champ fichier */
.file-drop{
  border:1.5px dashed rgba(13,27,62,.18);
  border-radius:var(--radius-sm);
  padding:18px 20px 20px;
  text-align:center;
  background:#fbfcfe;
  cursor:pointer;
  transition:border-color .16s,background .16s;
}
.file-drop:hover{border-color:var(--orange);background:rgba(242,107,33,.03)}
.file-drop input[type=file]{display:none}
.file-drop .fd-title{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--orange);color:#fff;
  font-size:13.5px;font-weight:700;
  padding:10px 18px;border-radius:var(--radius-sm);
  box-shadow:0 4px 14px rgba(242,107,33,.34);
  margin-bottom:9px;
  transition:background .16s;
}
.file-drop:hover .fd-title{background:var(--orange-deep)}
.file-drop .fd-title::before{content:'+';font-size:17px;font-weight:800;line-height:1}
.file-drop .fd-hint{font-size:12px;color:var(--muted)}
.file-drop .fd-name{
  font-size:13px;font-weight:600;color:var(--orange-deep);
  margin-top:8px;word-break:break-all;
}

.current-media{
  display:flex;align-items:center;gap:12px;
  margin-top:11px;padding:10px 12px;
  background:#f4f7fc;border-radius:var(--radius-sm);
}
.current-media img{width:52px;height:52px;object-fit:cover;border-radius:8px;flex-shrink:0}
.current-media .cm-meta{flex:1;min-width:0}
.current-media .cm-title{font-size:12.5px;font-weight:600}
.current-media .cm-sub{font-size:11.5px;color:var(--muted)}

.form-actions{
  display:flex;gap:11px;justify-content:flex-end;
  padding:19px 26px;
  background:#f8fafd;
  border-top:1px solid var(--line);
}

/* Case à cocher */
.checkbox{display:flex;align-items:flex-start;gap:10px;cursor:pointer}
.checkbox input{
  width:19px;height:19px;flex-shrink:0;margin-top:1px;
  accent-color:var(--orange);cursor:pointer;
}
.checkbox .cb-text{font-size:13.5px}
.checkbox .cb-hint{font-size:12px;color:var(--muted);margin-top:2px}

/* ---------- Messages ---------- */
.flash{
  display:flex;align-items:flex-start;gap:11px;
  border-radius:var(--radius-sm);
  padding:13px 16px;
  font-size:13.5px;font-weight:500;
  margin-bottom:16px;
  border:1px solid transparent;
}
.flash-success{background:var(--green-soft);border-color:rgba(22,163,74,.25);color:#15803d}
.flash-error{background:var(--red-soft);border-color:rgba(220,38,38,.24);color:#b91c1c}
.flash-info{background:rgba(15,95,215,.09);border-color:rgba(15,95,215,.22);color:#1249a8}

/* ---------- Barre de recherche ---------- */
.toolbar{
  display:flex;gap:11px;align-items:center;
  margin-bottom:20px;flex-wrap:wrap;
}
.search-box{position:relative;flex:1;min-width:210px;max-width:380px}
.search-box .input{padding-left:38px;background:#fff}
.search-box .s-ico{
  position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--muted);pointer-events:none;
}

/* ============================================================
   PAGES PUBLIQUES (connexion / installation)
   ============================================================ */

.auth-wrap{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:28px 20px;
  background:linear-gradient(160deg,#EFF5FE 0%,#CFDFF5 100%);
}
.auth-card{
  width:100%;max-width:428px;
  background:var(--card);
  border-radius:18px;
  box-shadow:0 20px 50px rgba(13,27,62,.16);
  overflow:hidden;
}
.auth-head{
  background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);
  padding:32px 30px 28px;
  text-align:center;
}
.auth-head .logo{font-size:26px;font-weight:800;color:#fff;letter-spacing:-.5px}
.auth-head .logo span{color:var(--orange)}
.auth-head .sub{
  font-size:11.5px;font-weight:600;letter-spacing:1.1px;text-transform:uppercase;
  color:var(--muted);margin-top:7px;
}
.auth-body{padding:28px 30px 30px}
.auth-body h2{font-size:18px;font-weight:700;margin-bottom:5px}
.auth-body .intro{font-size:13.5px;color:#63708c;margin-bottom:22px;line-height:1.6}
.auth-foot{
  text-align:center;font-size:12px;color:var(--muted);
  padding:0 30px 26px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

.mobile-bar{display:none}

@media (max-width:880px){
  .layout{flex-direction:column}

  /* ---- Barre du haut : marque + compte ---- */
  .sidebar{
    width:100%;height:auto;
    position:sticky;top:0;z-index:50;
    flex-direction:row;align-items:center;justify-content:space-between;
    padding:0 12px;gap:10px;
    overflow:visible;
  }
  .brand{padding:13px 4px;font-size:17px;flex-shrink:0}
  .brand .tagline{display:none}
  .nav-label{display:none}

  /* ---- Navigation fixée en bas de l'écran ---- */
  .nav{
    position:fixed;left:0;right:0;bottom:0;z-index:60;
    display:flex;padding:0;flex:none;
    background:var(--navy);
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:0 -4px 20px rgba(13,27,62,.3);
    overflow-x:auto;
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
  .nav a{
    flex:1 0 auto;min-width:70px;
    flex-direction:column;gap:5px;
    padding:10px 8px 9px;
    border-left:none;
    border-top:3px solid transparent;
    font-size:10.5px;font-weight:600;
    text-align:center;white-space:nowrap;
    line-height:1.25;
  }
  .nav a:hover{background:transparent}
  .nav a.active{
    border-left-color:transparent;
    border-top-color:var(--orange);
    background:rgba(242,107,33,.16);
    color:#fff;
  }
  .nav .ico{width:21px;height:21px}

  .sidebar-foot{
    border-top:none;padding:8px 4px 8px 8px;flex-shrink:0;
    display:flex;align-items:center;gap:8px;
  }
  .user-meta,.logout-link{display:none}

  /* Bouton de déconnexion visible sur mobile */
  .logout-icon{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;flex-shrink:0;
    border-radius:50%;
    background:rgba(255,255,255,.08);
    color:#9fb0d4;
    transition:background .16s,color .16s;
  }
  .logout-icon:active{background:rgba(242,107,33,.22);color:#fff}
  .logout-icon svg{width:19px;height:19px}

  .content{padding:20px 16px 92px}
  .page-title{font-size:20px}
  .field-row{grid-template-columns:1fr;gap:0}
  .form-section{padding:20px 18px}
  .form-actions{padding:16px 18px;flex-direction:column-reverse}
  .form-actions .btn{width:100%;justify-content:center}
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
  .product-thumb{height:118px}
  .stats{grid-template-columns:repeat(2,1fr);gap:11px}
  .stat-value{font-size:20px}
}

@media (max-width:420px){
  .product-grid{grid-template-columns:1fr 1fr}
  .product-actions{flex-direction:column}
}

/* Impression */
@media print{
  .sidebar,.form-actions,.product-actions,.toolbar{display:none}
  .content{background:#fff;padding:0}
  .product-card,.stat{box-shadow:none;border:1px solid #ddd}
}

/* ============================================================
   FICHE PRODUIT
   ============================================================ */

.detail-top{
  display:grid;
  grid-template-columns:340px 1fr;
  gap:18px;
  margin-bottom:26px;
  align-items:start;
}

.detail-cover{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  aspect-ratio:4/3;
}
.detail-cover img{width:100%;height:100%;object-fit:cover}
.cover-empty{
  width:100%;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(135deg,#eef2fa,#dde7f6);
  color:#9aa6bf;font-size:13px;font-weight:600;
}
.cover-empty svg{width:30px;height:30px}

.detail-info{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.info-block{padding:17px 20px;border-bottom:1px solid var(--line)}
.info-block:last-child{border-bottom:none}

.info-row{
  display:flex;justify-content:space-between;align-items:center;
  gap:14px;padding:5px 0;
}
.info-label{font-size:13px;color:var(--muted)}
.info-value{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:7px}
.info-row.total{
  margin-top:7px;padding-top:12px;
  border-top:1px dashed rgba(13,27,62,.13);
}
.info-row.total .info-label{font-weight:700;color:var(--ink);font-size:13.5px}
.info-value.accent{color:var(--orange-deep);font-size:18px}
.pct-small{font-size:13px;font-weight:600;opacity:.72}

.description-text{font-size:13.8px;line-height:1.7;color:#4a5570}

/* ============================================================
   SECTIONS MÉDIAS
   ============================================================ */

.media-section{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:20px 22px 22px;
  margin-bottom:16px;
  scroll-margin-top:20px;
}

.media-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:14px;margin-bottom:16px;
}
.media-title{
  font-size:16px;font-weight:700;letter-spacing:-.2px;
  display:flex;align-items:center;gap:9px;
}
.media-count{
  background:rgba(13,27,62,.07);
  color:#5a6178;
  font-size:11.5px;font-weight:700;
  padding:2px 8px;border-radius:20px;
}
.media-hint{font-size:12.8px;color:var(--muted);margin-top:4px;line-height:1.55;max-width:560px}

.access-badge{
  flex-shrink:0;
  font-size:10.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  padding:5px 11px;border-radius:20px;white-space:nowrap;
}
.access-badge.free{background:var(--green-soft);color:#15803d}
.access-badge.paid{background:var(--orange-soft);color:var(--orange-deep)}

.media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:13px;
  margin-bottom:16px;
}

.media-item{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:#fbfcfe;
}
.media-preview{
  display:block;
  width:100%;max-width:100%;height:138px;
  object-fit:cover;
  background:#0D1B3E;
  border:none;
}
a.media-preview{cursor:zoom-in}
video.media-preview{
  background:#000;
  height:auto;
  aspect-ratio:16/9;
  object-fit:contain;
}

.media-meta{
  display:flex;align-items:center;gap:8px;
  padding:8px 10px;
}
.media-name{
  flex:1;min-width:0;
  font-size:12px;color:#5a6178;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.media-meta form{display:flex;flex-shrink:0}
.media-del{
  border:none;background:transparent;cursor:pointer;
  color:var(--muted);padding:4px;border-radius:6px;
  display:flex;align-items:center;
  transition:color .15s,background .15s;
}
.media-del:hover{color:var(--red);background:var(--red-soft)}
.media-del svg{width:15px;height:15px}

.media-empty{
  font-size:13px;color:var(--muted);
  padding:18px;text-align:center;
  background:#f8fafd;border-radius:var(--radius-sm);
  margin-bottom:16px;
}

.media-upload{display:flex;flex-direction:column;gap:11px;align-items:flex-start}
.media-upload .file-drop{width:100%}
.media-upload .btn{align-self:flex-start}

/* ============================================================
   ESPACE COMMERCIAL
   ============================================================ */

/* Prix de vente sur les cartes */
.sell-price{margin-top:auto;padding-top:8px}
.sp-label{
  display:block;
  font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);margin-bottom:3px;
}
.sp-value{font-size:19px;font-weight:800;color:var(--orange-deep);letter-spacing:-.4px}
.sell-price.big{padding:4px 0}
.sell-price.big .sp-value{font-size:27px}

/* Badge verrouillé sur la vignette */
.badge-lock{
  position:absolute;top:10px;right:10px;
  background:rgba(13,27,62,.86);color:#fff;
  font-size:10.5px;font-weight:700;
  padding:4px 9px;border-radius:20px;
  backdrop-filter:blur(4px);
}

/* Bandeau de promotion de l'abonnement */
.promo-banner{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  background:linear-gradient(135deg,var(--navy),var(--navy-3));
  border-radius:var(--radius);
  padding:18px 22px;margin-bottom:20px;
  box-shadow:var(--shadow);flex-wrap:wrap;
}
.promo-title{font-size:15px;font-weight:800;color:#fff;margin-bottom:4px}
.promo-text{font-size:12.8px;color:#9fb0d4;line-height:1.55;max-width:520px}

/* Contenu verrouillé */
.locked-box{
  display:flex;align-items:center;gap:16px;
  background:linear-gradient(135deg,rgba(242,107,33,.07),rgba(242,107,33,.02));
  border:1.5px dashed rgba(242,107,33,.32);
  border-radius:var(--radius-sm);
  padding:22px;flex-wrap:wrap;
}
.lock-icon{font-size:28px;flex-shrink:0}
.lock-text{flex:1;min-width:200px}
.lock-title{font-size:14.5px;font-weight:700;margin-bottom:4px}
.lock-hint{font-size:12.8px;color:#63708c;line-height:1.55}

/* Produit dans le formulaire de commande */
.order-product{
  display:flex;align-items:center;gap:14px;
  background:#f6f9fd;border-radius:var(--radius-sm);padding:13px 15px;
}
.order-product img{width:60px;height:60px;object-fit:cover;border-radius:9px;flex-shrink:0}
.op-name{font-size:15px;font-weight:700}
.op-price{font-size:13px;color:var(--muted);margin-top:2px}

/* Liste des commandes */
.order-list{display:flex;flex-direction:column;gap:11px}
.order-card{
  display:flex;justify-content:space-between;gap:18px;
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px 18px;
  box-shadow:var(--shadow-sm);flex-wrap:wrap;
}
.oc-main{flex:1;min-width:220px}
.oc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.oc-ref{font-size:12.5px;font-weight:800;letter-spacing:.4px;color:var(--muted)}
.oc-product{font-size:15px;font-weight:700;margin-bottom:6px}
.oc-qty{font-size:13px;color:var(--muted);font-weight:600}
.oc-customer{font-size:13px;color:#4a5570;margin-bottom:2px}
.oc-address{font-size:12.5px;color:var(--muted);line-height:1.5}
.oc-side{text-align:right;flex-shrink:0}
.oc-total{font-size:18px;font-weight:800;color:var(--orange-deep);margin-bottom:5px}
.oc-date{font-size:11.5px;color:var(--muted);line-height:1.6}

.order-status{
  font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;white-space:nowrap;
}
.order-status.wait{background:rgba(245,158,11,.14);color:#b45309}
.order-status.ship{background:rgba(15,95,215,.12);color:#1249a8}
.order-status.done{background:var(--green-soft);color:#15803d}
.order-status.off{background:var(--red-soft);color:#b91c1c}

/* Page abonnement */
.sub-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:18px;box-shadow:var(--shadow-lg);
  overflow:hidden;max-width:640px;
}
.sub-head{
  background:linear-gradient(135deg,var(--navy),var(--navy-3));
  padding:28px 30px;text-align:center;
}
.sub-badge{
  display:inline-block;
  background:var(--orange);color:#fff;
  font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;
  padding:5px 13px;border-radius:20px;margin-bottom:12px;
}
.sub-name{font-size:23px;font-weight:800;color:#fff;letter-spacing:-.4px}
.sub-sub{font-size:13.5px;color:#9fb0d4;margin-top:7px;line-height:1.55}

.sub-body{padding:24px 28px}
.sub-feature{display:flex;gap:14px;margin-bottom:19px}
.sub-feature:last-child{margin-bottom:0}
.sf-ico{font-size:22px;flex-shrink:0;line-height:1.2}
.sf-title{font-size:14.5px;font-weight:700;margin-bottom:3px}
.sf-text{font-size:13px;color:#63708c;line-height:1.55}

.sub-foot{padding:0 28px 28px}
.sub-note{
  font-size:12.8px;color:var(--muted);line-height:1.6;
  text-align:center;margin-bottom:15px;
}

.sub-active{
  display:flex;align-items:center;gap:18px;
  background:var(--card);border:1px solid rgba(22,163,74,.3);
  border-left:4px solid var(--green);
  border-radius:var(--radius);padding:22px 24px;
  box-shadow:var(--shadow-sm);flex-wrap:wrap;
}
.sub-check{
  width:44px;height:44px;flex-shrink:0;border-radius:50%;
  background:var(--green-soft);color:#15803d;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;
}
.sub-active .sub-title{font-size:16px;font-weight:700;margin-bottom:4px}
.sub-active .sub-text{font-size:13px;color:#63708c;line-height:1.6}

@media (max-width:880px){
  .promo-banner{flex-direction:column;align-items:stretch}
  .promo-banner .btn{justify-content:center}
  .order-card{flex-direction:column;gap:12px}
  .oc-side{text-align:left}
  .locked-box{flex-direction:column;align-items:flex-start}
  .locked-box .btn{width:100%;justify-content:center}
}

/* ============================================================
   GESTION DES COMPTES
   ============================================================ */

.invite-box{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:linear-gradient(135deg,var(--navy),var(--navy-3));
  border-radius:var(--radius);
  padding:19px 22px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
  flex-wrap:wrap;
}
.invite-title{font-size:15px;font-weight:800;color:#fff;margin-bottom:4px}
.invite-hint{font-size:12.8px;color:#9fb0d4;line-height:1.55;max-width:430px}
.invite-actions{display:flex;gap:9px;align-items:center;flex:1;min-width:260px;max-width:430px}
.invite-actions .input{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);color:#fff;font-size:12.5px}
.invite-actions .input:focus{background:rgba(255,255,255,.16);box-shadow:none}

.user-rows{display:flex;flex-direction:column;gap:9px}
.user-row{
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  background:#fbfcfe;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 15px;
  flex-wrap:wrap;
}
.user-row.is-off{opacity:.62}
.user-cell{display:flex;align-items:center;gap:12px;min-width:0}
.u-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.u-sub{font-size:12px;color:var(--muted)}
.u-you{
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  background:var(--orange-soft);color:var(--orange-deep);
  padding:2px 8px;border-radius:12px;
}
.u-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.status-badge{
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:12px;
}
.status-badge.off{background:var(--red-soft);color:#b91c1c}

.role-pill{
  font-size:11.5px;font-weight:700;
  padding:6px 13px;border-radius:20px;
}
.role-admin{background:var(--orange-soft);color:var(--orange-deep)}
.role-gestionnaire{background:rgba(15,95,215,.1);color:#1249a8}
.role-commercial{background:rgba(13,27,62,.07);color:#4a5570}

.select-sm{padding:7px 10px;font-size:12.5px;width:auto;background:#fff}

.create-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:14px;
}

@media (max-width:880px){
  .invite-box{flex-direction:column;align-items:stretch}
  .create-grid{grid-template-columns:1fr}
  .user-row{flex-direction:column;align-items:flex-start}
}

/* ============================================================
   PERFORMANCE DU COMMERCIAL
   ============================================================ */

.perf-box{
  display:grid;
  grid-template-columns:minmax(220px,300px) 1fr;
  gap:22px;
  background:linear-gradient(135deg,var(--navy),var(--navy-3));
  border-radius:var(--radius);
  padding:22px 24px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
  align-items:center;
}

.perf-label{
  font-size:11px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:#9fb0d4;margin-bottom:7px;
}
.perf-value{
  font-size:32px;font-weight:800;letter-spacing:-1px;
  color:var(--orange);line-height:1.1;
}
.perf-sub{font-size:12.5px;color:#9fb0d4;margin-top:6px;line-height:1.5}

.perf-tier{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--radius-sm);
  padding:16px 18px;
}
.pt-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;
  font-size:13.5px;color:#dbe3f4;line-height:1.55;margin-bottom:12px;
  flex-wrap:wrap;
}
.pt-head b{color:#fff}
.pt-bonus{
  flex-shrink:0;
  background:var(--orange-soft);color:#ffb184;
  font-size:12px;font-weight:800;
  padding:4px 11px;border-radius:20px;white-space:nowrap;
}
.pt-bar{
  height:9px;border-radius:20px;
  background:rgba(255,255,255,.12);
  overflow:hidden;
}
.pt-fill{
  height:100%;border-radius:20px;
  background:linear-gradient(90deg,var(--orange),#ffa76b);
  transition:width .5s ease;
}
.pt-scale{
  display:flex;justify-content:space-between;
  font-size:11.5px;color:#8fa0c6;margin-top:7px;font-weight:600;
}

@media (max-width:880px){
  .perf-box{grid-template-columns:1fr;gap:16px;padding:18px 16px}
  .perf-value{font-size:27px}
}

/* ============================================================
   PAGE CLIENT (commander.php)
   ============================================================ */

.shop-body{
  background:linear-gradient(160deg,#EFF5FE 0%,#CFDFF5 100%);
  background-attachment:fixed;
  min-height:100vh;
  padding:0 0 40px;
}
.shop-wrap{max-width:520px;margin:0 auto;padding:0 14px}

.shop-head{text-align:center;padding:22px 0 16px}
.shop-head .logo{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.4px}
.shop-head .logo span{color:var(--orange)}

.shop-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 40px rgba(13,27,62,.14);
  overflow:hidden;
}

.shop-photo{background:#0D1B3E}
.shop-photo img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}

.shop-pad{padding:22px 20px 4px}
.shop-title{font-size:21px;font-weight:800;letter-spacing:-.4px;color:var(--navy);margin-bottom:8px}
.shop-price{
  font-size:27px;font-weight:800;color:var(--orange-deep);
  margin-bottom:14px;letter-spacing:-.6px;
}
.shop-text{font-size:14px;line-height:1.65;color:#4a5570;margin-bottom:14px}

.shop-trust{
  display:flex;gap:14px;flex-wrap:wrap;
  padding:12px 0 18px;
  font-size:12.5px;font-weight:600;color:#15803d;
}

.shop-form{
  background:#f8fafd;
  border-top:1px solid var(--line);
  padding:22px 20px 24px;
}
.shop-sub{font-size:17px;font-weight:800;color:var(--navy);margin-bottom:5px}
.shop-hint{font-size:13px;color:#63708c;margin-bottom:18px;line-height:1.55}

.shop-total{
  display:flex;justify-content:space-between;align-items:center;
  background:var(--orange-soft);
  border:1px solid rgba(242,107,33,.24);
  border-radius:var(--radius-sm);
  padding:14px 16px;margin-top:16px;
  font-size:14px;font-weight:600;color:var(--orange-deep);
}
.shop-total b{font-size:21px;font-weight:800}

.shop-check{
  width:62px;height:62px;margin:6px auto 16px;
  border-radius:50%;
  background:var(--green-soft);color:#15803d;
  display:flex;align-items:center;justify-content:center;
  font-size:32px;font-weight:800;
}
.shop-ref{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px;font-weight:800;letter-spacing:1.5px;
  color:var(--navy);
  background:#f4f7fc;border:1.5px dashed rgba(13,27,62,.18);
  border-radius:var(--radius-sm);
  padding:12px;margin:16px 0;
}
.shop-recap{
  background:#f8fafd;border-radius:var(--radius-sm);
  padding:14px 16px;margin-bottom:16px;text-align:left;
}
.sr-row{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:4px 0}
.sr-row.muted{color:var(--muted);font-size:12.5px}

.shop-foot{
  text-align:center;font-size:12.5px;color:#63708c;
  padding:18px 0 0;
}

/* ============================================================
   STATISTIQUES
   ============================================================ */

/* Barre de répartition */
.split-bar{
  display:flex;height:34px;border-radius:var(--radius-sm);
  overflow:hidden;margin-bottom:18px;
  background:#eef2fa;
}
.split-bar > div{transition:width .4s ease}
.p-cost{background:#8792ab}
.p-margin{background:var(--orange)}
.p-seller{background:var(--blue)}

.split-legend{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;
}
.sl-item{display:flex;align-items:flex-start;gap:10px}
.sl-dot{width:13px;height:13px;border-radius:4px;flex-shrink:0;margin-top:3px}
.sl-label{font-size:12.5px;color:var(--muted);font-weight:600}
.sl-value{font-size:16px;font-weight:800;color:var(--ink);margin-top:2px}
.sl-pct{font-size:12px;color:var(--muted);margin-top:1px}

/* Nom cliquable vers la fiche du commercial */
.u-link{
  color:var(--ink);
  border-bottom:1.5px solid transparent;
  transition:color .15s,border-color .15s;
}
.u-link:hover{color:var(--orange-deep);border-bottom-color:var(--orange)}

.u-perf{
  display:inline-block;margin-top:5px;
  font-size:11.5px;font-weight:700;color:var(--blue);
}
.u-perf:hover{text-decoration:underline}

/* Bandeau de suivi rapide */
.mini-stats{
  display:flex;flex-wrap:wrap;gap:9px;
  margin-bottom:18px;
}
.mini-stats span{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:20px;
  padding:7px 14px;
  font-size:12.5px;color:var(--muted);
  box-shadow:var(--shadow-sm);
}
.mini-stats b{color:var(--ink);font-weight:800}

/* Classements */
.rank-list{display:flex;flex-direction:column;gap:8px}
.rank-row{
  display:flex;align-items:center;gap:14px;
  background:#fbfcfe;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:12px 15px;
}
.rank-n{
  width:28px;height:28px;flex-shrink:0;
  border-radius:50%;
  background:rgba(13,27,62,.07);color:#5a6178;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:800;
}
.rank-n.gold{background:var(--orange);color:#fff}
.rank-main{flex:1;min-width:0}
.rank-name{
  font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.rank-sub{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5}
.rank-side{text-align:right;flex-shrink:0}
.rank-value{font-size:14.5px;font-weight:800}
.rank-margin{font-size:12px;font-weight:700;color:var(--orange-deep);margin-top:2px}

.tier-pill{
  font-size:10px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
  padding:3px 9px;border-radius:12px;
  /* Teinte par défaut : couvre les paliers créés sur mesure,
     dont le nom n'a pas de classe dédiée ci-dessous. */
  background:var(--orange-soft);color:var(--orange-deep);
}
.tier-bronze{background:rgba(180,120,60,.14);color:#a8642c}
.tier-argent{background:rgba(120,135,160,.18);color:#5a6a85}
.tier-or{background:rgba(242,107,33,.14);color:var(--orange-deep)}

@media (max-width:880px){
  .rank-row{flex-wrap:wrap;gap:10px}
  .rank-side{text-align:left;width:100%;padding-left:42px}
  .split-legend{grid-template-columns:1fr 1fr;gap:12px}
}

/* ============================================================
   ENCAISSEMENTS DES LIVREURS
   ============================================================ */

.balance-due{
  flex-shrink:0;text-align:right;
  background:var(--orange-soft);
  border:1px solid rgba(242,107,33,.24);
  border-radius:var(--radius-sm);
  padding:10px 16px;
}
.bd-label{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;color:var(--orange-deep);opacity:.85;
}
.bd-value{
  display:block;font-size:19px;font-weight:800;color:var(--orange-deep);margin-top:2px;
}

.settle-hint{
  font-size:12.5px;color:var(--muted);line-height:1.55;
  margin-bottom:12px;padding:9px 13px;
  background:#f4f7fc;border-radius:8px;
}

/* Bouton « réglé » — vert, bien identifiable */
.btn-ok{
  background:#fff;
  color:#15803d;
  border:1.5px solid rgba(22,163,74,.45);
}
.btn-ok:hover{background:var(--green);color:#fff;border-color:var(--green)}
.btn-ok svg{width:15px;height:15px}

.settle-rows{display:flex;flex-direction:column;gap:8px}
.settle-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:#fbfcfe;
  border:1px solid var(--line);
  border-left:3px solid var(--orange);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  flex-wrap:wrap;
}
.settle-row.is-done{border-left-color:var(--green);opacity:.75}
.sr-main{flex:1;min-width:0}
.sr-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sr-date{font-size:11.5px;color:var(--muted)}
.sr-sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}
.sr-side{display:flex;align-items:center;gap:11px;flex-shrink:0}
.sr-amount{font-size:15px;font-weight:800}

.settle-badge{
  font-size:10px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  padding:3px 9px;border-radius:12px;
}
.settle-badge.due{background:var(--orange-soft);color:var(--orange-deep)}
.settle-badge.ok{background:var(--green-soft);color:#15803d}

.cs-due{
  background:var(--orange-soft);color:var(--orange-deep);
  padding:4px 11px;border-radius:20px;font-size:12px;
}
.cs-due:hover{background:rgba(242,107,33,.2)}

/* ============================================================
   ALERTE DE STOCK
   ============================================================ */

.stock-alert{
  display:flex;align-items:flex-start;gap:14px;
  background:var(--card);
  border:1px solid rgba(242,107,33,.3);
  border-left:4px solid var(--orange);
  border-radius:var(--radius);
  padding:15px 18px;
  margin-bottom:18px;
  box-shadow:var(--shadow-sm);
}
.sa-icon{color:var(--orange);flex-shrink:0;display:flex;margin-top:1px}
.sa-icon svg{width:21px;height:21px}
.sa-title{font-size:14px;font-weight:800;margin-bottom:9px}
.sa-list{display:flex;flex-wrap:wrap;gap:8px}
.sa-item{
  background:#f8fafd;
  border:1px solid var(--line);
  border-radius:20px;
  padding:5px 13px;
  font-size:12.5px;color:#4a5570;
  display:flex;align-items:center;gap:7px;
}
.sa-item b{color:var(--orange-deep);font-weight:800}
.sa-item.out{border-color:rgba(220,38,38,.3);background:var(--red-soft)}
.sa-item.out b{color:var(--red)}
.sa-item:hover{border-color:var(--orange)}

@media (max-width:880px){
  .balance-due{width:100%;text-align:left}
  .settle-row{flex-direction:column;align-items:stretch}
  .sr-side{
    justify-content:space-between;
    flex-direction:column;align-items:stretch;gap:9px;
    padding-top:10px;margin-top:4px;
    border-top:1px dashed var(--line);
  }
  .sr-side .btn{width:100%;justify-content:center}
}

/* ============================================================
   GUIDE D'INSTALLATION
   ============================================================ */

.guide-block{
  background:#f8fafd;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:16px 18px;
  margin-bottom:14px;
}
.guide-title{
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;font-weight:800;color:var(--ink);
  margin-bottom:11px;
}
.guide-num{
  width:25px;height:25px;flex-shrink:0;
  border-radius:50%;
  background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;
}
.guide-steps{
  margin:0;padding-left:20px;
  font-size:13.5px;line-height:1.85;color:#4a5570;
}
.guide-steps b{color:var(--ink)}
.guide-note{
  margin-top:11px;padding:10px 12px;
  background:var(--orange-soft);
  border-radius:8px;
  font-size:12.5px;line-height:1.55;color:var(--orange-deep);
}

/* ============================================================
   INVITATION AUX NOTIFICATIONS
   ============================================================ */

/* L'attribut hidden doit l'emporter sur display:flex */
.push-invite[hidden]{display:none !important}

.push-invite{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:200;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:linear-gradient(135deg,var(--navy),var(--navy-3));
  border-radius:var(--radius);
  padding:15px 18px;
  box-shadow:0 12px 34px rgba(13,27,62,.35);
  flex-wrap:wrap;
  animation:pushRise .35s ease;
}
@keyframes pushRise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}
.pi-text b{display:block;font-size:14px;color:#fff;margin-bottom:3px}
.pi-text span{font-size:12.5px;color:#9fb0d4;line-height:1.5}
.pi-actions{display:flex;gap:9px;flex-shrink:0}
.pi-actions .btn-ghost{
  background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#dbe3f4;
}
.pi-actions .btn-ghost:hover{background:rgba(255,255,255,.2)}

@media (max-width:880px){
  .push-invite{bottom:82px;flex-direction:column;align-items:stretch}
  .pi-actions .btn{flex:1;justify-content:center}
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */

.nav-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:19px;height:19px;padding:0 5px;
  margin-left:auto;
  background:var(--orange);color:#fff;
  font-size:11px;font-weight:800;
  border-radius:20px;
}

.notif-list{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.notif{
  display:flex;align-items:flex-start;gap:11px;
  background:var(--card);
  border:1px solid var(--line);
  border-left:4px solid var(--blue);
  border-radius:var(--radius-sm);
  padding:13px 16px;
  box-shadow:var(--shadow-sm);
}
.notif-delivered{border-left-color:var(--green)}
.notif-cancelled{border-left-color:var(--red)}
.notif-delivering{border-left-color:var(--orange)}
.notif-dot{
  width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px;
  background:var(--blue);
}
.notif-delivered .notif-dot{background:var(--green)}
.notif-cancelled .notif-dot{background:var(--red)}
.notif-delivering .notif-dot{background:var(--orange)}
.notif-msg{font-size:13.5px;font-weight:600;line-height:1.5}
.notif-time{font-size:11.5px;color:var(--muted);margin-top:3px}

/* Livreurs */
.courier-edit{
  display:flex;align-items:center;gap:9px;
  flex:1;min-width:0;flex-wrap:wrap;
}
.courier-edit .input{flex:1;min-width:110px;background:#fff}
.courier-stats{
  display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;
  font-size:12px;color:var(--muted);
}
.courier-stats b{color:var(--ink)}
.cs-active{color:var(--orange-deep);font-weight:600}

.assign-form{
  display:flex;gap:7px;align-items:center;width:100%;
}
.assign-form .select{flex:1;min-width:0}

.courier-send{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:10px;padding:9px 12px;
  background:rgba(37,211,102,.07);
  border:1px solid rgba(37,211,102,.22);
  border-radius:var(--radius-sm);
}
.cs-label{font-size:12px;font-weight:700;color:#15803d}

/* Commandes côté gestion */
.admin-order .oc-seller{
  font-size:12.5px;color:var(--muted);margin-top:8px;
  padding-top:8px;border-top:1px dashed var(--line);
}
.admin-order .oc-note{
  font-size:12.5px;color:#4a5570;margin-top:6px;
  background:#f8fafd;padding:7px 10px;border-radius:8px;
}
.oc-actions{
  display:flex;flex-direction:column;gap:7px;
  margin-top:11px;align-items:stretch;
}
.oc-actions form{display:flex}
.oc-actions .btn{width:100%;justify-content:center}

/* Correction discrète — pas un vrai bouton, pour ne pas inviter à cliquer
   par mégarde. Sert uniquement à annuler un « marquer livrée » par erreur. */
.oc-undo{
  background:none;border:none;
  font-family:inherit;font-size:11px;color:var(--muted);
  text-decoration:underline;text-decoration-style:dotted;
  padding:4px 2px;margin-top:2px;cursor:pointer;
}
.oc-undo:hover{color:var(--red)}
.src-badge{
  font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  background:rgba(15,95,215,.1);color:#1249a8;
  padding:3px 8px;border-radius:12px;
}

/* ============================================================
   BOUTONS WHATSAPP / APPEL
   ============================================================ */

.btn-wa{
  background:#25D366;color:#fff;
  box-shadow:0 4px 14px rgba(37,211,102,.32);
}
.btn-wa:hover{background:#1da851;box-shadow:0 6px 18px rgba(37,211,102,.4)}
.btn-wa svg{width:16px;height:16px}

.btn-call{
  background:var(--navy);color:#fff;
  margin-top:9px;
}
.btn-call:hover{background:var(--navy-3)}
.btn-call svg{width:15px;height:15px}

/* Bandeau du lien fraîchement créé */
.new-link-box{
  background:linear-gradient(135deg,#F26B21,#D9550F);
  border-radius:var(--radius);
  padding:20px 22px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
}
.nl-title{font-size:16px;font-weight:800;color:#fff;margin-bottom:4px}
.nl-hint{font-size:12.8px;color:#ffe0cd;line-height:1.55}
.nl-url{
  background:rgba(255,255,255,.16);
  border:1.5px dashed rgba(255,255,255,.42);
  border-radius:var(--radius-sm);
  padding:11px 14px;margin:14px 0;
  font-size:13px;color:#fff;word-break:break-all;
}
.nl-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.nl-actions .btn-ghost{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:#fff}
.nl-actions .btn-ghost:hover{background:rgba(255,255,255,.26)}

/* Bénéfice sur la carte commande */
.oc-profit{
  font-size:12.5px;font-weight:700;color:#15803d;
  margin-top:3px;
}

/* Produit qui se vend bien */
.hot-badge{
  display:inline-block;
  background:rgba(242,107,33,.12);
  color:var(--orange-deep);
  font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:20px;
  margin-bottom:8px;
}

@media (max-width:880px){
  .nl-actions{grid-template-columns:1fr}
}

/* Liens de commande — espace commercial */
.link-form{display:grid;grid-template-columns:2fr 1fr auto;gap:14px;align-items:start}
.link-thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0}
.link-url{
  font-size:11.5px;color:var(--blue);
  margin-top:5px;cursor:pointer;
  word-break:break-all;
  padding:4px 8px;background:rgba(15,95,215,.07);
  border-radius:6px;display:inline-block;
}
.link-url:hover{background:rgba(15,95,215,.13)}
.link-url.copied::after{content:'  copié ✓';color:#15803d;font-weight:700}

@media (max-width:880px){
  .link-form{grid-template-columns:1fr}
}

/* ============================================================
   FILTRE PAR DATE
   ============================================================ */

.date-filter{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:14px 16px;
  margin-bottom:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.df-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.df-icon{display:flex;color:var(--muted);margin-right:2px}
.df-icon svg{width:17px;height:17px}

.df-custom{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.df-custom label{font-size:12.5px;color:var(--muted);font-weight:600}
.df-custom .input{width:auto;padding:8px 11px;font-size:12.8px;background:#fff}

.active-filter{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--orange-soft);
  border:1px solid rgba(242,107,33,.22);
  border-radius:var(--radius-sm);
  padding:10px 15px;
  margin-bottom:16px;
  font-size:13px;font-weight:600;color:var(--orange-deep);
}
.active-filter a{
  margin-left:auto;font-size:12.5px;font-weight:700;
  color:var(--orange-deep);text-decoration:underline;
}

/* ============================================================
   MOT DE PASSE PROVISOIRE
   ============================================================ */

.new-pass-box{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:linear-gradient(135deg,#15803d,#0f5f2e);
  border-radius:var(--radius);
  padding:19px 22px;
  margin-bottom:18px;
  box-shadow:var(--shadow);
  flex-wrap:wrap;
}
.np-title{font-size:15px;font-weight:800;color:#fff;margin-bottom:4px}
.np-hint{font-size:12.8px;color:#c8ecd5;line-height:1.55;max-width:440px}
.np-value{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:22px;font-weight:800;letter-spacing:1.5px;color:#fff;
  background:rgba(255,255,255,.14);
  border:1.5px dashed rgba(255,255,255,.4);
  border-radius:var(--radius-sm);
  padding:12px 22px;cursor:pointer;
  transition:background .16s;
  white-space:nowrap;
}
.np-value:hover{background:rgba(255,255,255,.22)}
.np-value.copied::after{content:'  copié ✓';font-size:12px;letter-spacing:0;opacity:.85}

@media (max-width:880px){
  .date-filter{flex-direction:column;align-items:stretch}
  .df-custom{justify-content:space-between}
  .df-custom .input{flex:1;min-width:0}
  .new-pass-box{flex-direction:column;align-items:stretch}
  .np-value{text-align:center;font-size:19px}
}

/* ============================================================
   CATÉGORIES
   ============================================================ */

.cat-chips{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:20px;
}
.chip{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:20px;
  padding:7px 14px;
  font-size:12.8px;font-weight:600;color:#4a5570;
  box-shadow:var(--shadow-sm);
  transition:border-color .15s,color .15s,background .15s;
}
.chip:hover{border-color:rgba(242,107,33,.4);color:var(--orange-deep)}
.chip.on{
  background:var(--navy);border-color:var(--navy);color:#fff;
}
.chip-n{
  background:rgba(13,27,62,.08);
  color:inherit;opacity:.85;
  font-size:10.5px;font-weight:700;
  padding:1px 7px;border-radius:12px;
}
.chip.on .chip-n{background:rgba(255,255,255,.18)}

.product-cat{
  font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--orange-deep);
  margin-bottom:4px;
}

.cat-add{
  display:flex;gap:11px;align-items:center;
  padding:16px 18px;
}
.cat-add .input{flex:1}

.cat-list{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.cat-row{
  display:flex;align-items:center;gap:13px;
  padding:12px 18px;
  border-bottom:1px solid var(--line);
}
.cat-row:last-child{border-bottom:none}
.cat-rename{display:flex;gap:8px;align-items:center;flex:1;min-width:0}
.cat-name-input{max-width:320px;background:#fff}
.cat-count{
  flex-shrink:0;
  font-size:12px;font-weight:600;color:var(--muted);
  background:rgba(13,27,62,.06);
  padding:4px 11px;border-radius:20px;
  white-space:nowrap;
}

@media (max-width:880px){
  .cat-add{flex-direction:column;align-items:stretch}
  .cat-row{flex-wrap:wrap;gap:9px}
  .cat-name-input{max-width:none}
}

@media (max-width:880px){
  .detail-top{grid-template-columns:1fr;gap:14px}
  .detail-cover{aspect-ratio:16/10}
  .media-section{padding:17px 15px 18px}
  .media-head{flex-direction:column;gap:9px}
  .media-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .media-preview{height:112px}

  /* Les vidéos prennent toute la largeur, en 16/9, sans déborder */
  .media-item:has(video){grid-column:1/-1}
  video.media-preview{height:auto;aspect-ratio:16/9;max-height:260px}
}

/* ============================================================
   Historique clients
   ============================================================ */

/* Compteur en alerte — pendant du .stat.accent, en rouge */
.stat.warn::after{opacity:1;background:var(--red)}
.stat.warn .stat-value{color:var(--red)}

.cust-list{display:flex;flex-direction:column;gap:10px}

.cust-card{
  background:var(--card);
  border:1px solid var(--line);
  border-left:3px solid transparent;
  border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .16s,border-color .16s;
}
.cust-card:hover{box-shadow:var(--shadow)}
.cust-card.is-loyal{border-left-color:var(--green)}
.cust-card.is-risk{border-left-color:var(--red)}

.cust-link{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;
  color:inherit;text-decoration:none;
}
.cust-main{flex:1;min-width:0}

.cust-name{
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
  font-weight:700;font-size:14.5px;
}
.cust-tag{
  font-size:10px;font-weight:800;
  letter-spacing:.4px;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;
}
.cust-tag.loyal{background:var(--green-soft);color:var(--green)}
.cust-tag.risk{background:var(--red-soft);color:var(--red)}
.cust-tag.live{background:var(--orange-soft);color:var(--orange-deep)}

.cust-meta{font-size:12.5px;color:var(--muted);margin-top:3px}

.cust-stats{
  display:flex;gap:12px;flex-wrap:wrap;
  font-size:12px;color:var(--muted);margin-top:6px;
}
.cust-stats b{color:var(--ink);font-weight:700}
.cust-stats .cs-ok b{color:var(--green)}
.cust-stats .cs-ko b{color:var(--red)}

.cust-side{text-align:right;flex-shrink:0}
.cust-total{font-size:15px;font-weight:800;letter-spacing:-.3px}
.cust-last{font-size:11.5px;color:var(--muted);margin-top:2px}

.cust-actions{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:0 16px 13px;
}

/* ---------- Fiche client ---------- */
.cust-contact{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:18px;
}
.cust-sellers{font-size:12.5px;color:var(--muted)}
.cust-sellers b{color:var(--ink);font-weight:700}

/* ---------- Rappel d'historique sur une commande ---------- */
.cust-history{
  display:inline-flex;align-items:center;gap:7px;
  margin-top:8px;padding:6px 11px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(13,27,62,.03);
  font-size:12px;font-weight:600;
  color:var(--muted);text-decoration:none;
  transition:border-color .16s,background .16s;
}
.cust-history:hover{border-color:var(--orange)}
.cust-history svg{width:14px;height:14px;flex-shrink:0}
.cust-history.good{
  background:var(--green-soft);
  border-color:rgba(22,163,74,.25);
  color:var(--green);
}
.cust-history.warn{
  background:var(--red-soft);
  border-color:rgba(220,38,38,.3);
  color:var(--red);
  font-weight:700;
}

@media (max-width:880px){
  .cust-link{flex-wrap:wrap;gap:11px;padding:13px 14px}
  .cust-side{text-align:left;width:100%;display:flex;align-items:baseline;gap:9px}
  .cust-last{margin-top:0}
  .cust-actions{padding:0 14px 12px}
  .cust-actions .btn{flex:1;justify-content:center}
  .cust-history{font-size:11.5px;align-items:flex-start}
  .cust-contact{gap:8px}
  .cust-contact .btn{flex:1;justify-content:center}
  .cust-sellers{width:100%}
}

/* ============================================================
   Objectifs, primes et classement
   ============================================================ */

/* Lien vers le classement, dans l'encadré sombre de performance */
.pt-rank{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:13px;
  font-size:12.5px;font-weight:700;
  color:#ffb184;text-decoration:none;
}
.pt-rank:hover{color:#fff}
.pt-rank svg{width:15px;height:15px}

/* ---------- Champ avec unité accolée ---------- */
.input-suffix{display:flex;align-items:center;gap:8px}
.input-suffix .input{min-width:0}
.input-suffix span{
  font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;
}

/* ---------- Paliers de prime ---------- */
.tier-rows{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.tier-row{
  display:flex;align-items:flex-end;gap:10px;
  padding:12px 14px;
  border:1px solid var(--line);
  border-left:3px solid var(--orange);
  border-radius:var(--radius-sm);
  background:#fbfcfe;
}
.tier-edit{
  flex:1;
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr auto;
  gap:12px;align-items:flex-end;
}
.tier-edit .field{margin-bottom:0}
.tier-edit label{
  display:block;
  font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--muted);margin-bottom:5px;
}

.tier-add{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr auto;
  gap:10px;align-items:center;
  padding-top:16px;
  border-top:1px dashed var(--line);
}

/* ---------- Objectifs individuels ---------- */
.target-rows{display:flex;flex-direction:column;gap:10px}
.target-row{
  display:flex;align-items:center;gap:14px;
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fbfcfe;
}
.tr-main{flex:1;min-width:0}
.tr-name{font-weight:700;font-size:14px}
.tr-sub{font-size:12px;color:var(--muted);margin-top:3px}
.tr-sub b{color:var(--orange-deep)}
.tr-bar{background:rgba(13,27,62,.09);margin-top:8px;max-width:260px}
.tr-input{flex-shrink:0}
.tr-input .input{width:88px;text-align:center}

/* ---------- Classement ---------- */
.rank-board{display:flex;flex-direction:column;gap:10px}

.rank-card{
  display:flex;align-items:center;gap:15px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 17px;
  box-shadow:var(--shadow-sm);
}
.rank-card.is-podium{border-color:rgba(242,107,33,.3)}
.rank-card.is-me{
  border-color:var(--orange);
  background:linear-gradient(120deg,rgba(242,107,33,.06),transparent 60%);
}

.rk-pos{
  flex-shrink:0;width:38px;text-align:center;
  font-size:23px;line-height:1;
}
.rk-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:rgba(13,27,62,.06);
  font-size:13px;font-weight:800;color:var(--muted);
}

.rk-main{flex:1;min-width:0}
.rk-name{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-weight:700;font-size:14.5px;margin-bottom:8px;
}

.rk-bar{
  height:7px;border-radius:20px;
  background:rgba(13,27,62,.07);
  overflow:hidden;
}
.rk-fill{
  height:100%;border-radius:20px;
  background:linear-gradient(90deg,var(--orange),#ffa76b);
  transition:width .5s ease;
}

.rk-meta{font-size:12.5px;color:var(--muted);margin-top:7px}
.rk-meta b{color:var(--ink);font-weight:700}

.rk-goal{
  font-size:12px;color:var(--orange-deep);
  margin-top:5px;font-weight:600;
}
.rk-goal b{font-weight:800}
.rk-goal.done{color:var(--green)}

.rank-note{
  font-size:12px;color:var(--muted);
  margin-top:16px;line-height:1.6;
}

@media (max-width:880px){
  .tier-row{flex-direction:column;align-items:stretch;gap:12px}
  .tier-edit{grid-template-columns:1fr 1fr;gap:10px}
  .tier-edit .btn{grid-column:1/-1}
  .tier-add{grid-template-columns:1fr 1fr}
  .tier-add .btn{grid-column:1/-1;justify-content:center}

  .target-row{flex-wrap:wrap;gap:11px}
  .tr-input{width:100%;justify-content:space-between}
  .tr-bar{max-width:none}

  .rank-card{gap:11px;padding:13px 14px}
  .rk-pos{width:30px;font-size:20px}
}

/* ============================================================
   Discussion — présentation façon conversation
   ============================================================ */

.chat-head{margin-bottom:14px}

/* ---------- Annonce épinglée ---------- */
.chat-pinned{
  display:flex;align-items:flex-start;gap:12px;
  background:var(--orange-soft);
  border:1px solid rgba(242,107,33,.25);
  border-radius:var(--radius-sm);
  padding:12px 15px;margin-bottom:14px;
}
.cp-icon{color:var(--orange-deep);flex-shrink:0;display:flex}
.cp-icon svg{width:17px;height:17px}
.cp-body{flex:1;min-width:0}
.cp-label{
  font-size:10.5px;font-weight:800;letter-spacing:.5px;
  text-transform:uppercase;color:var(--orange-deep);margin-bottom:3px;
}
.cp-text{font-size:13px;line-height:1.55;color:#4a3524;overflow-wrap:anywhere}

/* ---------- Le fil ---------- */
.chat{
  display:flex;flex-direction:column;gap:3px;
  padding:4px 2px 8px;
}
.chat-older{text-align:center;padding:6px 0 14px}

.chat-empty{
  text-align:center;color:var(--muted);
  padding:44px 20px;
}
.chat-empty h3{font-size:16px;color:var(--ink);margin-bottom:6px}
.chat-empty p{font-size:13.5px;line-height:1.6}
.chat-empty .empty-icon{opacity:.4;margin-bottom:10px}

/* Séparateur de journée */
.chat-day{
  display:flex;align-items:center;justify-content:center;
  margin:16px 0 10px;
}
.chat-day span{
  background:rgba(13,27,62,.07);
  color:#536080;
  font-size:11px;font-weight:700;
  padding:4px 13px;border-radius:20px;
}

/* ---------- Une ligne de conversation ---------- */
.cw{display:flex;align-items:flex-end;gap:8px;margin-top:8px}
.cw.follow{margin-top:2px}
.cw.mine{justify-content:flex-end}

.cw-avatar{width:32px;flex-shrink:0}
.cw-avatar .avatar{width:32px;height:32px;font-size:11px}

/* ---------- La bulle ---------- */
.bubble{
  position:relative;
  max-width:min(78%,540px);
  padding:9px 13px 7px;
  border-radius:14px;
  box-shadow:0 1px 2px rgba(13,27,62,.07);
  font-size:14px;line-height:1.55;
}
.cw.theirs .bubble{
  background:var(--card);
  border:1px solid var(--line);
  border-bottom-left-radius:4px;
  color:#39435c;
}
.cw.mine .bubble{
  background:linear-gradient(135deg,var(--orange),#f9853f);
  border-bottom-right-radius:4px;
  color:#fff;
}
.cw.follow.theirs .bubble{border-bottom-left-radius:14px}
.cw.follow.mine   .bubble{border-bottom-right-radius:14px}

.bubble.pinned{box-shadow:0 0 0 2px rgba(242,107,33,.35)}
.bubble.unread{box-shadow:0 0 0 2px rgba(15,95,215,.3)}

.bb-author{
  display:flex;align-items:center;gap:7px;
  font-size:12.5px;font-weight:800;
  color:var(--orange-deep);margin-bottom:3px;
}
.bb-role{
  font-size:9.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
  background:rgba(15,95,215,.12);color:var(--blue);
  padding:1px 6px;border-radius:20px;
}

.bb-text{overflow-wrap:anywhere;white-space:normal}

.bb-img{
  display:block;margin:-3px -5px 6px;
  border-radius:10px;overflow:hidden;
}
.bb-img img{display:block;width:100%;height:auto;max-height:340px;object-fit:cover}

.bb-foot{
  display:flex;align-items:center;justify-content:flex-end;gap:7px;
  margin-top:2px;
}
.bb-time{font-size:10.5px;font-weight:600;opacity:.62}
.bb-pin{
  font-size:9.5px;font-weight:800;letter-spacing:.4px;
  text-transform:uppercase;opacity:.75;
}

.bb-actions{
  display:flex;gap:11px;
  margin-top:5px;padding-top:5px;
  border-top:1px solid rgba(255,255,255,.22);
}
.cw.theirs .bb-actions{border-top-color:var(--line)}

.msg-act{
  background:none;border:none;padding:0;cursor:pointer;
  font-size:11px;font-weight:700;font-family:inherit;
  color:inherit;opacity:.7;
}
.msg-act:hover{opacity:1;text-decoration:underline}
.cw.theirs .msg-act{color:var(--muted)}
.cw.theirs .msg-act:hover{color:var(--orange-deep)}
.cw.theirs .msg-act.danger:hover{color:var(--red)}

/* ---------- Zone d'écriture, collée en bas ---------- */
.composer{
  position:sticky;bottom:0;z-index:20;
  background:linear-gradient(180deg,rgba(239,245,254,0),#EFF5FE 22%);
  padding:12px 0 4px;
}
.cp-notify{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:600;color:var(--muted);
  margin-bottom:8px;cursor:pointer;
}
.cp-row{
  display:flex;align-items:flex-end;gap:9px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:24px;
  padding:6px 6px 6px 8px;
  box-shadow:var(--shadow);
}
.cp-clip{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;
  border-radius:50%;color:var(--muted);cursor:pointer;
  transition:background .16s,color .16s;
}
.cp-clip:hover{background:var(--orange-soft);color:var(--orange-deep)}
.cp-clip svg{width:19px;height:19px}

.cp-input{
  flex:1;min-width:0;
  border:none;outline:none;resize:none;
  background:transparent;
  font-family:inherit;font-size:14.5px;line-height:1.5;
  color:var(--ink);
  padding:9px 2px;max-height:140px;
}
.cp-input::placeholder{color:var(--muted-2)}

.cp-send{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;flex-shrink:0;
  border:none;border-radius:50%;cursor:pointer;
  background:var(--orange);color:#fff;
  transition:background .16s;
}
.cp-send:hover{background:var(--orange-deep)}

.cp-file{
  font-size:11.5px;color:var(--orange-deep);font-weight:600;
  padding:5px 14px 0;
}

@media (max-width:880px){
  .bubble{max-width:86%;font-size:14.5px}
  .cw-avatar{width:28px}
  .cw-avatar .avatar{width:28px;height:28px;font-size:10px}

  /* La barre de navigation occupe le bas de l'écran :
     la zone d'écriture vient se poser juste au-dessus. */
  .composer{bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
}

/* Logo officiel E-ComPlus (sac + flèche) */
.logo-img{display:block;width:auto;height:44px}
.brand .logo-img{height:40px;margin-bottom:6px}
.auth-head .logo-img{height:58px;margin:0 auto}
.shop-head .logo-img{height:38px}
@media(max-width:900px){.brand .logo-img{height:32px;margin-bottom:0}}