/* ═══════════════════════════════════════════════════════════
   COINMALIN — commercant-dashboard.css (styles spécifiques)
═══════════════════════════════════════════════════════════ */

body { padding-bottom:calc(var(--bottom-h) + 24px) }

/* ═══ HERO ÉTABLISSEMENT ═══ */
.hero-etab {
  position:relative; overflow:hidden;
  /* Vert plein identique à la sidebar (source unique --cm-green) quand il
     n'y a PAS de photo de couverture. */
  background:var(--cm-green);
}
.hero-etab__bg {
  position:absolute; inset:0; z-index:0;
}
.hero-etab__bg img {
  width:100%; height:100%; object-fit:cover;
}
/* Sans photo : overlay transparent → le vert plein --cm-green domine. */
.hero-etab__overlay {
  position:absolute; inset:0; background:transparent;
}
/* Avec photo de couverture (classe posée par le JS) : dégradé sombre pour
   garder le texte lisible par-dessus l'image. */
.hero-etab--photo .hero-etab__overlay {
  background:linear-gradient(160deg,rgba(7,24,16,.93) 0%,rgba(13,61,43,.82) 100%);
}
.hero-etab__inner {
  position:relative; z-index:2;
  padding:26px 20px 22px;
  display:flex; flex-direction:column; gap:16px;
  max-width:var(--w); margin:0 auto;
}
.hero-etab__status-row {
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.status-live {
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(255,255,255,.1); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
  border-radius:50px; padding:5px 13px;
  font-size:12px; font-weight:600; color:var(--wh);
}
.status-live__dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--lt); animation:pulse-dot 2s ease infinite;
}
.status-change-btn {
  font-size:11px; font-weight:700;
  color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.22);
  border-radius:50px; padding:4px 11px;
  transition:all var(--ease);
}
.status-change-btn:hover { background:rgba(255,255,255,.15); color:var(--wh) }

.hero-etab__name {
  font-family:var(--serif);
  font-size:clamp(1.6rem,5vw,2.2rem);
  color:var(--wh); letter-spacing:-.02em;
  margin-bottom:7px; line-height:1.15;
}
.hero-etab__loc {
  display:flex; align-items:center; gap:5px;
  font-size:12.5px; color:rgba(255,255,255,.62);
}
.hero-etab__plan {
  background:rgba(255,255,255,.07); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:var(--r2); padding:13px 16px;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.plan-badge {
  font-size:10.5px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--gd); color:var(--dk);
  padding:4px 11px; border-radius:50px;
}
.plan-renew { font-size:12px; color:rgba(255,255,255,.5); flex:1 }
.plan-upgrade {
  font-size:12px; font-weight:700; color:var(--lt);
  white-space:nowrap; transition:color var(--ease);
}
.plan-upgrade:hover { color:var(--wh) }

/* ═══ TABS NAVIGATION ═══ */
.tabs-nav {
  display:flex; background:var(--wh);
  border-bottom:1px solid var(--bd);
  position:sticky; top:var(--topbar-h); z-index:180;
  overflow-x:auto; scrollbar-width:none;
}
.tabs-nav::-webkit-scrollbar { display:none }
.tabs-nav-inner {
  display:flex; max-width:var(--w);
  margin:0 auto; width:100%;
}
.tab-btn {
  flex-shrink:0; padding:0 16px; height:46px;
  font-size:13px; font-weight:500; color:var(--t3);
  border-bottom:2.5px solid transparent;
  transition:all var(--ease); white-space:nowrap;
  background:transparent;
}
.tab-btn:hover { color:var(--t1); background:var(--bg) }
.tab-btn--active { color:var(--rc); border-bottom-color:var(--rc); font-weight:600 }
.tab-badge {
  background:var(--bl); color:var(--rc);
  font-size:10px; font-weight:700;
  padding:2px 6px; border-radius:50px; margin-left:5px;
}
.tab-badge--menu { background:#FEF3C7; color:var(--warn) }

/* ═══ TAB CONTENT ═══ */
.tab-content-wrap { max-width:var(--w); margin:0 auto; width:100% }
.tab-content { display:none; animation:fade-in .28s var(--ease) both }
.tab-content.active { display:block }
.content-inner { padding:20px 20px 8px }

/* ═══ KPI GRID ═══ */
.kpi-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin-bottom:14px;
}
/* Desktop : les 4 cartes de stats sur une seule rangée (look tableau de bord pro) */
@media(min-width:900px){
  .kpi-grid{ grid-template-columns:repeat(4,1fr); gap:14px; }
}
/* Cartes KPI — structure COLONNE identique au tableau de bord admin :
   icône (badge) en haut → grand chiffre → label → tendance dessous.
   (Avant : disposition en ligne → le texte long empilait « Vues / ce / mois ».) */
.kpi-card {
  background:var(--wh); border:1px solid var(--bd);
  border-radius:var(--r3); padding:18px;
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  box-shadow:var(--sh1); transition:all var(--ease);
}
.kpi-card:hover { box-shadow:var(--sh2); transform:translateY(-2px) }
.kpi-card--primary {
  background:linear-gradient(135deg,var(--dk) 0%,var(--mg) 100%);
  border:none; box-shadow:0 4px 20px rgba(9,28,16,.15);
}
.kpi-card__icon {
  width:42px; height:42px; border-radius:12px;
  background:var(--bl); color:var(--rc);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-bottom:14px;
}
.kpi-card--primary .kpi-card__icon { background:rgba(255,255,255,.15); color:var(--wh) }
/* Icônes colorées par carte (look tableau de bord moderne) */
.kpi-card:nth-child(2) .kpi-card__icon { background:#EFF6FF; color:#2563EB }
.kpi-card:nth-child(3) .kpi-card__icon { background:#FBF6E9; color:#B58A2E }
.kpi-card:nth-child(4) .kpi-card__icon { background:#F5F0FF; color:#7C3AED }
.kpi-card__body { width:100%; min-width:0 }
.kpi-card__val {
  display:block; font-family:var(--fb);
  font-size:1.7rem; color:var(--t1);
  font-weight:800; letter-spacing:-.02em; line-height:1.1; margin-bottom:4px;
}
.kpi-card--primary .kpi-card__val { color:var(--wh) }
.kpi-card__label {
  display:block; font-size:11.5px; font-weight:600; color:var(--t3); letter-spacing:.02em;
}
.kpi-card--primary .kpi-card__label { color:rgba(255,255,255,.6) }
/* Tendance en pilule colorée (vert = hausse, rouge = baisse) */
.kpi-card__trend {
  display:inline-flex; align-items:center; gap:3px;
  font-size:11px; font-weight:800; line-height:1;
  padding:5px 9px; border-radius:50px; margin-top:12px;
  background:var(--bg); color:#607A6A;
}
.kpi-card__trend:empty { display:none }
.kpi-card__trend--up   { background:#E7F6EC; color:#0B7A3E }
.kpi-card__trend--down { background:#FDECEC; color:#DC2626 }
.kpi-card--primary .kpi-card__trend { background:rgba(255,255,255,.16); color:#fff }
.kpi-card--primary .kpi-card__trend--up { background:rgba(255,255,255,.18); color:#fff }

/* ═══════════════════════════════════════════════════════════
   APERÇU — TABLEAU DE BORD (maquette SaaS type Jumia/Uber)
   Mobile-first : tout empilé. ≥1024px : grilles multi-colonnes.
═══════════════════════════════════════════════════════════ */
.ap-page { display:flex; flex-direction:column; gap:16px; }

/* Salutation */
.ap-hello__title { font-family:var(--serif); font-size:1.5rem; color:var(--t1); letter-spacing:-.01em; }
.ap-hello__sub   { font-size:13.5px; color:var(--t3); margin-top:2px; }

/* ── KPIs ── */
.ap-kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.ap-kpi {
  background:var(--wh); border:1px solid var(--bd); border-radius:18px;
  padding:16px; display:flex; flex-direction:column; align-items:flex-start; gap:0;
  box-shadow:var(--sh1); transition:box-shadow var(--ease), transform var(--ease), border-color var(--ease);
  position:relative; text-decoration:none; color:inherit;
}
.ap-kpi:hover { box-shadow:var(--sh2); transform:translateY(-2px); }
/* Ligne du haut : icône colorée à gauche + bouton rond ↗ à droite (style Donezo) */
.ap-kpi__top { width:100%; display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ap-kpi__ic {
  width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; color:#fff;
}
.ap-kpi__ic svg { width:21px; height:21px; }
.ap-kpi__ic--green  { background:linear-gradient(135deg,#156240,#1E7A50); }
.ap-kpi__ic--blue   { background:linear-gradient(135deg,#2563EB,#3B82F6); }
.ap-kpi__ic--gold   { background:linear-gradient(135deg,#D97706,#F59E0B); }
.ap-kpi__ic--purple { background:linear-gradient(135deg,#7C3AED,#8B5CF6); }
.ap-kpi__ic--red    { background:linear-gradient(135deg,#DC2626,#EF4444); }
.ap-kpi__arrow {
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--bd); color:var(--t2);
  transition:background var(--ease), color var(--ease), transform var(--ease);
}
.ap-kpi__arrow svg { width:16px; height:16px; }
.ap-kpi:hover .ap-kpi__arrow { background:var(--dk); border-color:var(--dk); color:#fff; transform:rotate(0deg) scale(1.05); }
.ap-kpi__num { font-family:var(--sans); font-size:1.7rem; font-weight:800; color:var(--t1); line-height:1.05; letter-spacing:-.02em; }
.ap-kpi__label { font-size:12px; font-weight:600; color:var(--t3); margin-top:3px; }
.ap-kpi__trend { margin-top:10px; }

/* ── Rangées ── */
.ap-row { display:flex; flex-direction:column; gap:16px; }

/* ── Carte générique ── */
.ap-card {
  background:var(--wh); border:1px solid var(--bd); border-radius:16px;
  padding:18px; box-shadow:var(--sh1);
}
.ap-card__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.ap-card__title { font-family:var(--serif); font-size:1.05rem; color:var(--t1); letter-spacing:-.01em; }
.ap-card__foot-link {
  display:block; text-align:center; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--bd); font-size:13px; font-weight:700; color:var(--rc);
}
.ap-pill { background:var(--bl); color:var(--rc); font-size:12px; font-weight:800; padding:3px 11px; border-radius:50px; }
.ap-chip { background:var(--bg); color:var(--t3); font-size:11.5px; font-weight:600; padding:5px 11px; border-radius:50px; border:1px solid var(--bd); }
.ap-stack { display:flex; flex-direction:column; gap:16px; }

/* La carte demandes / menu / conseil réutilisent leurs styles existants,
   mais sans marge basse (le gap gère l'espacement) */
.ap-row .menu-status-card,
.ap-row .insight-card,
.ap-row #demandesCard { margin-bottom:0; display:block; }
.ap-row .menu-status-card { display:flex; }
.ap-row .insight-card { display:flex; }

/* ── Liste demandes compacte ── */
.ap-dem-list { display:flex; flex-direction:column; }

/* ── Activité récente ── */
.ap-acts { display:flex; flex-direction:column; }
.ap-act {
  display:flex; align-items:center; gap:12px; padding:11px 0;
  border-top:1px solid var(--bd);
}
.ap-acts .ap-act:first-child { border-top:none; }
.ap-act__ic { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.ap-act__ic--star { background:#FBF6E9; color:#B58A2E; }
.ap-act__ic--menu { background:var(--bl); color:var(--rc); }
.ap-act__ic--dem  { background:#EFF6FF; color:#2563EB; }
.ap-act__body { flex:1; min-width:0; }
.ap-act__title { font-size:13.5px; font-weight:600; color:var(--t1); display:flex; align-items:center; gap:8px; }
.ap-act__stars { color:var(--gd); font-size:12px; letter-spacing:1px; }
.ap-act__time { font-size:11.5px; color:var(--t4); white-space:nowrap; flex-shrink:0; }

/* ── Prochaines actions (checklist) ── */
.ap-todos { display:flex; flex-direction:column; }
.ap-todo {
  display:flex; align-items:center; gap:11px; padding:12px 0;
  border-top:1px solid var(--bd); font-size:13.5px; color:var(--t2);
}
.ap-todos .ap-todo:first-child { border-top:none; }
.ap-todo__check { width:20px; height:20px; border-radius:50%; border:2px solid var(--bd2); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:transparent; }
.ap-todo--done .ap-todo__check { background:var(--rc); border-color:var(--rc); color:#fff; }
.ap-todo--done { color:var(--t3); }
.ap-todo__txt { flex:1; }
.ap-todo__badge { font-size:10px; font-weight:800; background:var(--bl); color:var(--rc); padding:3px 8px; border-radius:50px; }
.ap-todo__badge--reco { background:#FBF6E9; color:#B58A2E; }
.ap-todo__count { font-size:11px; font-weight:800; background:var(--err); color:#fff; width:19px; height:19px; border-radius:50px; display:flex; align-items:center; justify-content:center; }
.ap-empty { color:var(--t4); font-size:13px; text-align:center; padding:16px 0; }

/* Bouton « ← Accueil » en tête des sections secondaires */
.ap-back-bar {
  display:inline-flex; align-items:center; gap:7px; margin-bottom:14px;
  padding:9px 16px; border-radius:50px;
  background:var(--wh); border:1px solid var(--bd);
  font-size:13px; font-weight:700; color:var(--rc); cursor:pointer;
  transition:all var(--ease);
}
.ap-back-bar:hover { background:var(--bl); border-color:var(--bd2); }

/* ── Desktop ≥1024px : grilles multi-colonnes ── */
@media (min-width:1024px) {
  .ap-kpis { grid-template-columns:repeat(4,1fr); gap:16px; }
  .ap-row--2 { display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .ap-row--demandes { display:grid; grid-template-columns:1.35fr 1fr; align-items:start; }
}

/* ═══ INSIGHT CARD ═══ */
.insight-card {
  display:flex; align-items:flex-start; gap:12px;
  background:linear-gradient(135deg,#FFFBEB,#FEF3C7);
  border:1px solid rgba(217,119,6,.18);
  border-radius:var(--r3); padding:16px;
  margin-bottom:14px; position:relative;
}
.insight-card__icon { font-size:20px; flex-shrink:0 }
.insight-card__body { flex:1; min-width:0 }
.insight-card__body strong { display:block; font-size:13px; font-weight:700; color:#92400E; margin-bottom:5px }
.insight-card__body p { font-size:12px; color:#78350F; line-height:1.6 }
.insight-card__dismiss {
  position:absolute; top:10px; right:10px;
  color:#D97706; font-size:14px;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transition:background var(--ease);
}
.insight-card__dismiss:hover { background:rgba(217,119,6,.15) }

/* ═══ MENU STATUS CARD ═══ */
.menu-status-card {
  display:flex; align-items:center; gap:13px;
  background:var(--wh); border:1px solid var(--bd);
  border-radius:var(--r3); padding:16px;
  margin-bottom:14px; box-shadow:var(--sh1);
}
.menu-status-card--ok { border-color:rgba(5,150,105,.25); background:linear-gradient(135deg,#ECFDF5,#F0FDF4) }
.menu-status-card__icon {
  width:42px; height:42px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.menu-status-card__body { flex:1; min-width:0 }
.menu-status-card__body strong { display:block; font-size:13.5px; font-weight:700; color:var(--t1); margin-bottom:3px }
.menu-status-card__body p { font-size:12px; color:var(--t3) }
.menu-status-card__cta {
  font-size:12px; font-weight:700; color:var(--rc);
  white-space:nowrap; flex-shrink:0;
  padding:7px 13px; border-radius:50px;
  border:1.5px solid rgba(21,98,64,.2);
  background:var(--bl); transition:all var(--ease);
}
.menu-status-card__cta:hover { background:var(--rc); color:var(--wh); border-color:var(--rc) }

/* ═══ CHARTS ═══ */
.chart-card {
  background:var(--wh); border:1px solid var(--bd);
  border-radius:var(--r3); padding:20px;
  margin-bottom:12px; box-shadow:var(--sh1);
}
.chart-card__head {
  display:flex; align-items:flex-start;
  justify-content:space-between; gap:12px;
  margin-bottom:18px;
}
.chart-card__title {
  font-family:var(--serif); font-size:1.05rem;
  color:var(--t1); margin-bottom:3px; letter-spacing:-.01em;
}
.chart-card__sub { font-size:12px; color:var(--t3) }
.chart-total { text-align:right; flex-shrink:0 }
.chart-total strong { display:block; font-family:var(--serif); font-size:1.5rem; color:var(--rc) }
.chart-total span { font-size:11px; color:var(--t4) }
.chart-wrap { position:relative; width:100%; height:220px }
.chart-wrap--sm { height:160px }
/* Desktop : graphiques plus grands (look tableau de bord pro) */
@media(min-width:900px){
  .chart-wrap { height:300px }
  .chart-wrap--sm { height:200px }
}
.chart-legend-row { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--t3); margin-bottom:12px; font-weight:500 }
.chart-legend-dot { width:8px; height:8px; border-radius:50%; display:inline-block }

/* Donut */
.donut-layout { display:flex; align-items:center; gap:28px; flex-wrap:wrap }
.donut-wrap { position:relative; width:200px; height:200px; flex-shrink:0; margin:0 auto }
.donut-wrap canvas { width:200px !important; height:200px !important }
@media(min-width:900px){
  .donut-wrap { width:240px; height:240px }
  .donut-wrap canvas { width:240px !important; height:240px !important }
}
.donut-center {
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; pointer-events:none;
}
.donut-center strong { font-family:var(--serif); font-size:1.45rem; color:var(--t1) }
.donut-center span { font-size:11px; color:var(--t4); font-weight:600 }
.donut-legend { flex:1; display:flex; flex-direction:column; gap:14px; min-width:130px }
.donut-legend-item { display:flex; align-items:center; gap:11px }
.dot { width:10px; height:10px; border-radius:50%; flex-shrink:0 }
.donut-legend-item div strong { display:block; font-size:13px; font-weight:600; color:var(--t1) }
.donut-legend-item div span { font-size:11px; color:var(--t3) }
.heure-insight {
  display:flex; align-items:center; gap:10px;
  padding-top:12px; font-size:12px; color:var(--t3);
  border-top:1px solid var(--bd); margin-top:12px;
}
.heure-insight__peak { font-weight:700; color:var(--t1); flex-shrink:0 }

/* ═══ RANKING ═══ */
.ranking-list { display:flex; flex-direction:column; gap:8px; margin-bottom:14px }
.ranking-item {
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:var(--r2);
  background:var(--bg); border:1px solid var(--bd);
  transition:all var(--ease);
}
.ranking-item--you {
  background:linear-gradient(135deg,var(--bl),rgba(21,98,64,.06));
  border-color:rgba(21,98,64,.22);
  box-shadow:0 0 0 2px rgba(21,98,64,.08);
}
.ranking-num {
  width:26px; height:26px; border-radius:50%;
  background:var(--bd); display:flex; align-items:center;
  justify-content:center; font-size:11px; font-weight:700;
  color:var(--t3); flex-shrink:0;
}
.ranking-item--you .ranking-num { background:var(--rc); color:var(--wh) }
.ranking-body { flex:1; min-width:0 }
.ranking-body strong { display:block; font-size:13px; font-weight:600; color:var(--t1); margin-bottom:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ranking-body span { font-size:11px; color:var(--t3) }
.ranking-bar { display:flex; flex-direction:column; align-items:flex-end; gap:3px; min-width:88px }
.ranking-bar-track { width:100%; height:4px; background:var(--bd); border-radius:4px; overflow:hidden }
.ranking-fill { height:100%; background:var(--bd); border-radius:4px; transition:width .8s ease }
.ranking-bar--you .ranking-fill { background:linear-gradient(90deg,var(--rc),var(--lt)) }
.ranking-bar span { font-size:10px; font-weight:700; color:var(--t3); white-space:nowrap }
.ranking-item--you .ranking-bar span { color:var(--rc) }
.ranking-cta {
  background:var(--bl); border:1px solid rgba(21,98,64,.18);
  border-radius:var(--r2); padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.ranking-cta p { font-size:13px; color:var(--t2) }
.ranking-cta p strong { color:var(--dk) }
.btn-upgrade {
  background:var(--rc); color:var(--wh);
  padding:8px 16px; border-radius:50px;
  font-size:12px; font-weight:700;
  transition:background var(--ease); flex-shrink:0;
}
.btn-upgrade:hover { background:var(--dk) }

.note-badge { font-size:1.2rem; color:var(--gd); font-family:var(--serif) }

/* ═══ VUES & CLICS ═══ */
.period-selector { display:flex; gap:8px; margin-bottom:18px }
.period-btn {
  padding:8px 17px; border-radius:50px;
  border:1.5px solid var(--bd);
  background:var(--wh); font-size:13px; font-weight:600;
  color:var(--t3); transition:all var(--ease);
}
.period-btn:hover { border-color:var(--bd2); color:var(--t1) }
.period-btn--active { background:var(--rc); border-color:var(--rc); color:var(--wh) }
.metrics-row { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:12px }
.metric-box {
  background:var(--wh); border:1px solid var(--bd);
  border-radius:var(--r2); padding:14px 12px; text-align:center;
  box-shadow:var(--sh1);
}
.metric-box strong { display:block; font-family:var(--serif); font-size:1.3rem; color:var(--t1); margin-bottom:2px }
.metric-box span { font-size:10.5px; font-weight:600; color:var(--t3); display:block; margin-bottom:5px }
.metric-trend { font-size:10.5px; font-weight:700 }
.metric-trend.up { color:var(--lt) }
.metric-trend.down { color:var(--err) }
.jours-insight { font-size:12px; color:var(--t3); padding-top:12px; border-top:1px solid var(--bd); margin-top:12px; line-height:1.55 }

/* ═══ MENU TAB ═══ */
.menu-redirect-card {
  background:var(--wh); border:1px solid var(--bd);
  border-radius:var(--r3); padding:24px; text-align:center;
  margin-bottom:14px; box-shadow:var(--sh1);
}
.menu-redirect-card__icon { font-size:2.8rem; margin-bottom:14px }
.menu-redirect-card h3 {
  font-family:var(--serif); font-size:1.2rem;
  color:var(--t1); margin-bottom:6px;
}
.menu-redirect-card p { font-size:13px; color:var(--t3); margin-bottom:18px; line-height:1.6 }
.btn-goto-menu {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; background:var(--rc); color:var(--wh);
  border-radius:var(--r2); font-size:14px; font-weight:600;
  transition:all var(--ease); box-shadow:0 4px 16px rgba(21,98,64,.22);
}
.btn-goto-menu:hover { background:var(--dk); transform:translateY(-1px) }
.update-history {
  background:var(--wh); border:1px solid var(--bd);
  border-radius:var(--r3); padding:18px;
  box-shadow:var(--sh1);
}
.update-list { display:flex; flex-direction:column; gap:0; margin-bottom:10px }
.update-item {
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid var(--bd); font-size:13px;
}
.update-item:last-child { border-bottom:none }
.update-item span:first-child { min-width:54px; font-weight:700; color:var(--t1) }
.update-item span:nth-child(2) { flex:1; color:var(--t3) }
.update-item--ok span:nth-child(2) { color:var(--mg) }
.update-item--late span:nth-child(2) { color:var(--warn) }
.update-item--miss span:nth-child(2) { color:var(--err) }
.update-views { font-size:12px; font-weight:700; color:var(--rc); min-width:60px; text-align:right }
.update-views--miss { color:var(--err) }
.update-tip {
  font-size:12px; color:var(--t3);
  padding-top:10px; border-top:1px solid var(--bd); line-height:1.55;
}

/* ═══ AVIS TAB ═══ */
.avis-score-card {
  display:flex; gap:20px; align-items:center;
  background:var(--wh); border:1px solid var(--bd);
  border-radius:var(--r3); padding:20px;
  margin-bottom:12px; flex-wrap:wrap; box-shadow:var(--sh1);
}
.avis-score-card__main { text-align:center; flex-shrink:0; min-width:96px }
.avis-big-note { font-family:var(--serif); font-size:3.2rem; color:var(--t1); display:block; line-height:1 }
.avis-stars-big { font-size:1rem; color:var(--gd); margin:5px 0 }
.avis-score-card__main span { font-size:11px; color:var(--t4); font-weight:500 }
.avis-bars { flex:1; display:flex; flex-direction:column; gap:7px; min-width:160px }
.avis-bar-row { display:flex; align-items:center; gap:8px; font-size:11px; color:var(--t3) }
.avis-bar-row span:first-child { min-width:20px; text-align:right; font-weight:600; color:var(--t1) }
.avis-bar-row span:last-child { min-width:28px; font-weight:600 }
.avis-bar-track { flex:1; height:5px; background:var(--bd); border-radius:4px; overflow:hidden }
.avis-bar-fill { height:100%; width:var(--pct); background:var(--gd); border-radius:4px; transition:width .8s ease }
.avis-bar-fill--low { background:var(--err) }
.mentions-cloud { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px }
.mention-tag {
  background:var(--bl); border:1px solid rgba(21,98,64,.16);
  border-radius:50px; color:var(--dk); font-weight:600;
  transition:all var(--ease);
}
.mention-tag--lg { padding:9px 16px; font-size:13px }
.mention-tag--md { padding:7px 14px; font-size:12px }
.mention-tag--sm { padding:6px 12px; font-size:11px }
.avis-list { display:flex; flex-direction:column; gap:10px }
.avis-item {
  background:var(--wh); border:1px solid var(--bd);
  border-radius:var(--r3); padding:16px; box-shadow:var(--sh1);
}
.avis-item__head { display:flex; align-items:center; gap:10px; margin-bottom:10px }
.avis-item__avatar {
  width:36px; height:36px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:var(--wh); flex-shrink:0;
}
.avis-item__meta { flex:1 }
.avis-item__meta strong { display:block; font-size:13px; font-weight:600; color:var(--t1) }
.avis-item__meta span { font-size:11px; color:var(--t4) }
.avis-item__stars { color:var(--gd); font-size:12px }
.avis-item__text { font-size:13px; line-height:1.7; color:var(--t2); font-style:italic; margin-bottom:10px }
.avis-item__tags { display:flex; flex-wrap:wrap; gap:6px }
.avis-item__tags span {
  font-size:10px; font-weight:700;
  background:var(--bg); color:var(--t3);
  padding:3px 9px; border-radius:50px;
}

/* ═══ OFFRES TAB ═══ */
/* Carte claire lisible (fix : l'ancienne version dégradée s'affichait blanche) */
.offres-redirect-card {
  background:#FFFFFF;
  border:1px solid rgba(21,98,64,.12);
  border-radius:18px; padding:26px 24px; text-align:center; margin-bottom:14px;
  box-shadow:0 2px 14px rgba(9,28,16,.06);
  position:relative; overflow:hidden;
}
.offres-redirect-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg,#C8A855,#E0C878);
}
.offres-redirect-card h3 {
  font-family:var(--serif); font-size:1.3rem; color:#091C10; margin-bottom:8px;
}
.offres-redirect-card p { font-size:13px; color:#607A6A; margin-bottom:20px; line-height:1.6 }
.offres-redirect-card p strong { color:#156240; }
.btn-goto-offres {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 24px; background:linear-gradient(135deg,#156240,#1E7A50);
  color:#FFFFFF; border-radius:12px;
  font-size:14px; font-weight:700; transition:all var(--ease);
  box-shadow:0 4px 16px rgba(21,98,64,.24);
}
.btn-goto-offres:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(21,98,64,.32) }
.offres-quota-bar {
  background:var(--bg); border:1px solid rgba(21,98,64,.1); border-radius:12px;
  padding:11px 16px; margin-top:16px;
  font-size:12px; color:#607A6A;
  display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
}
.offres-quota-bar strong { color:#091C10 }
.offres-quota-bar a { color:#156240 !important; font-weight:700; }

/* ═══ ABONNEMENT TAB ═══ */
.plan-actuel {
  background:var(--wh); border:1.5px solid rgba(21,98,64,.18);
  border-radius:var(--r3); padding:20px; margin-bottom:12px;
  box-shadow:var(--sh1);
}
.plan-actuel__head { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:10px }
.plan-actuel__label { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--t3); margin-bottom:4px; display:block }
.plan-actuel__name { font-family:var(--serif); font-size:1.45rem; color:var(--t1) }
.plan-actuel__price { text-align:right; flex-shrink:0 }
.plan-actuel__price strong { display:block; font-family:var(--serif); font-size:1.55rem; color:var(--rc) }
.plan-actuel__price span { font-size:12px; color:var(--t3) }
.plan-actuel__renew { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--t3); margin-bottom:14px }
.plan-actuel__features { display:flex; flex-direction:column; gap:8px }
.plan-feat { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--t2) }
.plan-feat svg { color:var(--mg); flex-shrink:0 }
/* Barres de quota */
.plan-quotas { background:var(--wh); border:1.5px solid rgba(21,98,64,.12); border-radius:var(--r3); padding:18px 20px; margin-bottom:12px }
.plan-quotas__title { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--t3); margin-bottom:14px }
.plan-quota-item { margin-bottom:14px }
.plan-quota-item:last-child { margin-bottom:0 }
.plan-quota-item__header { display:flex; justify-content:space-between; font-size:12.5px; color:var(--t2); margin-bottom:6px }
.plan-quota-item__header strong { color:var(--t1); font-weight:700 }
.plan-quota-bar-track { height:6px; background:rgba(0,0,0,.07); border-radius:99px; overflow:hidden }
.plan-quota-bar-fill { height:100%; background:#1A6B46; border-radius:99px; transition:width .4s ease, background .3s }
.roi-card {
  background:linear-gradient(135deg,var(--dk),var(--mg));
  border-radius:var(--r3); padding:20px; margin-bottom:12px;
}
.roi-card__title { font-size:13px; font-weight:700; color:rgba(255,255,255,.7); margin-bottom:14px; letter-spacing:.04em }
.roi-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px }
.roi-item { background:rgba(255,255,255,.08); border-radius:var(--r2); padding:12px; text-align:center }
.roi-item--highlight { background:rgba(255,255,255,.13) }
.roi-item--green { background:rgba(77,184,122,.22) }
.roi-item strong { display:block; font-family:var(--serif); font-size:1.4rem; color:var(--wh); font-weight:400; margin-bottom:3px }
.roi-item span { font-size:11px; color:rgba(255,255,255,.58); font-weight:500 }
.roi-note { font-size:11px; color:rgba(255,255,255,.42); line-height:1.5 }
.upgrade-card {
  background:var(--wh); border:2px solid var(--rc);
  border-radius:var(--r3); padding:22px;
  position:relative; box-shadow:var(--sh2);
}
.upgrade-card__badge {
  display:inline-block; background:var(--gd); color:var(--dk);
  font-size:11px; font-weight:700; padding:4px 12px;
  border-radius:50px; margin-bottom:13px;
}
.upgrade-card__title { font-family:var(--serif); font-size:1.35rem; color:var(--t1); margin-bottom:8px }
.upgrade-card__title em { font-style:italic; color:var(--rc) }
.upgrade-card__desc { font-size:13px; color:var(--t3); line-height:1.6; margin-bottom:16px }
.upgrade-card__gains { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px }
.upgrade-gain { background:var(--bl); border-radius:var(--r2); padding:12px 8px; text-align:center }
.upgrade-gain strong { display:block; font-family:var(--serif); font-size:1.25rem; color:var(--rc); margin-bottom:2px }
.upgrade-gain span { font-size:10px; color:var(--t3); font-weight:600 }
.upgrade-card__price { margin-bottom:14px }
.upgrade-card__price strong { display:block; font-size:16px; font-weight:700; color:var(--t1); margin-bottom:2px }
.upgrade-card__price span { font-size:12px; color:var(--t3) }
.btn-upgrade-premium {
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:16px; background:var(--rc); color:var(--wh);
  border-radius:var(--r2); font-size:15px; font-weight:600;
  transition:all var(--ease); box-shadow:0 4px 18px rgba(21,98,64,.25);
  margin-bottom:10px;
}
.btn-upgrade-premium:hover { background:var(--dk); transform:translateY(-2px); box-shadow:var(--sh3) }
.upgrade-card__note { font-size:11px; color:var(--t4); text-align:center }
.upgrade-pay-btn {
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--bl); border:1.5px solid #e5e7eb; border-radius:10px;
  cursor:pointer; font-size:13px; font-weight:600; color:var(--t1);
  transition:all .15s; width:100%; text-align:left;
}
.upgrade-pay-btn:hover { border-color:var(--rc); background:#fff }
.upgrade-pay-btn.selected { border-color:var(--rc); background:#fff3f0 }
.form-input-upgrade {
  width:100%; padding:12px 14px; border:1.5px solid #e5e7eb;
  border-radius:10px; font-size:14px; color:var(--t1);
  background:var(--bl); outline:none;
}
.form-input-upgrade:focus { border-color:var(--rc) }
.upgrade-payment-methods { margin-top:14px; padding-top:14px; border-top:1px solid #f0f0f0 }

@media(min-width:640px) {
  .content-inner { padding:24px 24px 8px }
  .kpi-grid { gap:12px }
}

/* ── Visiteurs de profil ── */
.visiteurs-total {
  background:#EEF2EF; color:var(--gp,#1A6B46); font-size:12px; font-weight:600;
  padding:4px 12px; border-radius:20px; white-space:nowrap;
}
.visiteurs-liste { max-height:380px; overflow-y:auto }
.visiteurs-loading { color:#9CA3AF; font-size:13px; text-align:center; padding:20px 0 }
.visiteurs-empty {
  text-align:center; padding:28px 16px; color:#9CA3AF;
}
.visiteurs-empty svg { margin:0 auto 12px; display:block; opacity:.6 }
.visiteurs-empty p { font-size:14px; font-weight:600; color:#6B7280; margin-bottom:4px }
.visiteurs-empty span { font-size:12px }
.visiteur-row {
  display:flex; align-items:center; gap:12px; padding:12px 4px;
  border-bottom:1px solid #f3f4f6;
}
.visiteur-row:last-child { border-bottom:none }
.visiteur-photo { flex-shrink:0 }
.visiteur-avatar {
  width:40px; height:40px; border-radius:50%; object-fit:cover;
  display:block;
}
.visiteur-avatar--initiales {
  background:#EEF2EF; color:var(--gp,#1A6B46); font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.visiteur-info { flex:1; min-width:0 }
.visiteur-nom {
  display:block; font-size:14px; font-weight:600; color:#1f2937;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.visiteur-detail { display:block; font-size:12px; color:#9CA3AF; margin-top:2px }
.visiteur-date { font-size:11px; color:#9CA3AF; white-space:nowrap; flex-shrink:0 }