/* ════════════════════════════════════════════════════════════════
   Loopya — Skin Direction A pour les pages app (override styles.css)
   Charge ce fichier APRÈS styles.css. Cascade CSS = la palette,
   la typo et les classes shell basculent en clair façon 1x.tech.
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,600&display=swap');

/* ── Variables (réécrit la palette sombre/violet en crème) ────── */
:root {
  --bg:             #FFFFFF;   /* blanc neige (Evan 14/08 : « comme le menu déroulant, pas beige ») */
  --bg-soft:        #F1F1F3;   /* tuiles/hover : gris neutre froid, plus de beige */
  --surface:        #ffffff;
  --surface-hover:  #F6F6F8;
  --surface-2:      #F0F0F2;   /* tuile neutre (placeholders vendus, vignettes) — REDÉFINI dans chaque thème sombre */
  --border:         rgba(0, 0, 0, 0.10);
  --border-strong:  rgba(0, 0, 0, 0.18);
  --text:           #1a1a1a;
  --text-muted:     #4a4a4a;
  --text-subtle:    #8a8a8a;
  /* Alias des tokens « marketing » (--ink/--cream/--line) sur les tokens dashboard,
     pour que les pages qui les utilisent (revendeurs…) suivent AUSSI le thème. */
  --ink: var(--text); --ink-soft: var(--text-muted); --ink-mute: var(--text-subtle);
  --cream: var(--bg); --cream-soft: var(--bg-soft); --line: var(--border);
  --accent:         #0B7A52;
  --accent-hover:   #0E8A5F;
  --accent-light:   rgba(11, 122, 82, 0.08);
  --accent-dark:    #095E3F;
  --accent-rgb:     11,122,82;
  --accent-bright:  #34D399;
  --accent-solid:   #0B7A52;   /* remplissage profond (texte blanc dessus) dans tous les thèmes */
  --ink-deep:       #0C100E;   /* base des héros sombres (thématique) */
  --noir:           #1a1a1a;
  --noir-soft:      #2a2a2a;
  --gradient:        linear-gradient(135deg, #0B7A52 0%, #34D399 100%);
  --gradient-soft:   linear-gradient(135deg, var(--surface) 0%, var(--bg-soft) 100%);
  --gradient-purple: linear-gradient(135deg, #0B7A52 0%, #34D399 100%);
  --success:        #16a34a;
  --success-light:  rgba(22, 163, 74, 0.10);
  --warning:        #d97706;
  --warning-light:  rgba(217, 119, 6, 0.10);
  --danger:         #dc2626;
  --danger-light:   rgba(220, 38, 38, 0.08);
  --radius:         14px;
  --radius-sm:      10px;
  --shadow-sm:      0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:      0 12px 30px rgba(0, 0, 0, 0.08);
  --shadow-glow:    0 0 32px rgba(var(--accent-rgb), 0.15);

  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Geist", "Inter", system-ui, sans-serif;
  --text-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
}
/* ══ THÈMES — sélecteur dans la sidebar, mémorisé (partagé avec le site public) ══
   Défaut (:root) = ÉMERAUDE clair. */
html[data-theme="violet"]{
  --accent:#6b46c1; --accent-hover:#8b5cf6; --accent-light:rgba(107,70,193,0.08);
  --accent-dark:#5b3aa3; --accent-rgb:107,70,193; --accent-bright:#a78bfa; --accent-solid:#6b46c1; --ink-deep:#15121F;
  --gradient:linear-gradient(135deg,#6b46c1 0%,#8b5cf6 100%);
  --gradient-purple:linear-gradient(135deg,#6b46c1 0%,#8b5cf6 100%);
}
html[data-theme="dark"]{
  /* Fond NOIR neutre façon v-tools (Evan 14/07) — plus aucune teinte verte sur le fond,
     l'émeraude ne vit que dans les accents. */
  --bg:#000000; --bg-soft:#0A0A0A; --surface:#101010; --surface-hover:#181818; --surface-2:#141414;
  --border:rgba(255,255,255,0.11); --border-strong:rgba(255,255,255,0.20);
  --text:#F2F3ED; --text-muted:#B9BEB7; --text-subtle:#8B918B;
  --accent:#34D399; --accent-hover:#5EEAD4; --accent-light:rgba(52,211,153,0.14);
  --accent-dark:#0E8A5F; --accent-rgb:52,211,153; --accent-bright:#5EEAD4; --accent-solid:#0B7A52; --ink-deep:#020302;
  --gradient:linear-gradient(135deg,#0B7A52 0%,#34D399 100%);
  --gradient-soft:linear-gradient(135deg,var(--surface) 0%,var(--bg-soft) 100%);
  --ink:var(--text); --ink-soft:var(--text-muted); --ink-mute:var(--text-subtle); --cream:var(--bg); --cream-soft:var(--bg-soft); --line:var(--border);
  --success:#4ade80; --success-light:rgba(74,222,128,.16); --warning:#fbbf24; --warning-light:rgba(251,191,36,.16); --danger:#f87171; --danger-light:rgba(248,113,113,.16);
}
html[data-theme="dark-violet"]{
  /* Fond NOIR neutre (Evan 14/07) — le violet ne vit que dans les accents. */
  --bg:#000000; --bg-soft:#0A0A0A; --surface:#111013; --surface-hover:#19181C; --surface-2:#151417;
  --border:rgba(255,255,255,0.13); --border-strong:rgba(255,255,255,0.22);
  --text:#F2F0F7; --text-muted:#BFBACE; --text-subtle:#8E8A9D;
  --accent:#a78bfa; --accent-hover:#c4b5fd; --accent-light:rgba(139,92,246,0.16);
  --accent-dark:#6b46c1; --accent-rgb:139,92,246; --accent-bright:#c4b5fd; --accent-solid:#6b46c1; --ink-deep:#0C0A12;
  --gradient:linear-gradient(135deg,#6b46c1 0%,#a78bfa 100%);
  --gradient-soft:linear-gradient(135deg,var(--surface) 0%,var(--bg-soft) 100%);
  --ink:var(--text); --ink-soft:var(--text-muted); --ink-mute:var(--text-subtle); --cream:var(--bg); --cream-soft:var(--bg-soft); --line:var(--border);
  --success:#4ade80; --success-light:rgba(74,222,128,.16); --warning:#fbbf24; --warning-light:rgba(251,191,36,.16); --danger:#f87171; --danger-light:rgba(248,113,113,.16);
}

/* ── Base ────────────────────────────────────────────────────── */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--text-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body { font-size: 15px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.026em;
  color: var(--text);
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

::selection { background: var(--accent); color: #fff; }

/* ── Nav (pages app non sidebar : download, etc.) ─────────────── */
.nav {
  background: rgba(251, 251, 252, 0.85);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 50;
}
.nav-inner { padding: 16px 24px; }
.logo { color: var(--text); font-family: var(--display); }
.logo svg text { fill: currentColor; }
.logo-svg, .nav .logo-svg, .footer-logo .logo-svg { color: var(--text); }
.sidebar .logo-svg { color: var(--text); }
.sidebar .logo { color: var(--text); }
.sidebar .logo:hover { color: var(--text); }

/* ── Shell .app (sidebar + main) ──────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
  background: var(--bg);
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 24px 16px;
  display: flex; flex-direction: column;
  gap: 24px;
  position: sticky; top: 0; height: 100vh;
}
.sidebar .logo {
  display: inline-flex; align-items: center;
  padding: 0 6px; margin-bottom: 8px;
  color: var(--text);
}
.sidebar-nav {
  display: flex; flex-direction: column;
  gap: 2px; flex: 1;
}
.sidebar-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--text-muted);
  font-size: 14px; font-weight: 500;
  transition: background .2s, color .2s;
}
.sidebar-link:hover { background: var(--bg-soft); color: var(--text); }
.sidebar-link.active {
  background: var(--accent-solid); color: #fff;
}
.sidebar-link.active:hover { color: #fff; }
.sidebar-link-icon {
  width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; opacity: 0.85;
  font-size: 14px;
}
.sidebar-link.active .sidebar-link-icon { opacity: 1; }
.sidebar-link .ico { color: currentColor; }

.sidebar-user {
  margin-top: 0;
  padding: 14px;
  border-radius: 12px;
  background: var(--bg-soft);
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: background .2s;
  position: relative;
}
.sidebar-user:hover { background: rgba(0,0,0,0.05); }
.sidebar-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.sidebar-user-info { flex: 1; min-width: 0; }
.sidebar-user-name {
  font-size: 13.5px; font-weight: 500;
  color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user-plan {
  font-size: 11.5px; color: var(--text-subtle);
  margin-top: 1px;
}

/* ── Main / Topbar ────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-height: 100vh; }
/* ── Hero premium commun (façon "Mes filtres" / "Radar revendeurs") ──
   Une seule définition → toutes les pages outils + dashboard héritent du
   même bandeau d'en-tête haut de gamme. Carte arrondie, dégradé encre,
   halos violet/émeraude, titre Fraunces. */
/* En-tête d'app MINIMALISTE (26/07) : plus de gros bloc encre + ombre lourde.
   Un titre net + sous-titre discret + fin filet, façon Linear/Vercel. S'adapte
   au thème via les tokens (clair crème ET thèmes sombres). */
.topbar-app {
  position: relative;
  margin: 30px 32px 4px;
  border-radius: 0;
  padding: 2px 2px 20px;
  background: transparent;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap;
}
.topbar-app > div { position: relative; z-index: 1; min-width: 0; }
.topbar-app h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(23px, 2.5vw, 31px); letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--text);
  margin: 0; padding: 0;
}
.topbar-app p, .topbar-app > div p {
  color: var(--text-subtle) !important;
  margin-top: 6px !important;
  font-size: 13.5px;
}
.topbar-app p strong { color: var(--text-muted) !important; }
.topbar-app p a { color: var(--accent) !important; text-decoration: none; }
.topbar-app p a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* Boutons/badges : styles clairs par défaut (aucune surcharge blanc-sur-sombre). */
.topbar-app .app-burger { position: static; align-self: center; }
.topbar-credits, .credit-badge, .daily-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--text-muted);
}
.topbar-credits strong, .credit-badge strong, .daily-badge strong {
  color: var(--text);
  font-family: var(--display); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.main-content { padding: 28px 32px; flex: 1; }

/* ── Boutons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 0;
  font: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, color .2s, transform .2s, border-color .2s, box-shadow .2s;
  background: var(--bg-soft); color: var(--text);
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--text); color: var(--bg);
}
.btn-primary:hover { background: var(--accent); color: #fff; }
.btn-secondary, .btn-ghost {
  background: transparent; color: var(--text);
  border: 1px solid var(--text);
}
.btn-secondary:hover, .btn-ghost:hover {
  background: var(--text); color: var(--bg);
}
.btn-danger {
  background: var(--danger); color: #fff;
}
.btn-danger:hover { background: #b91c1c; }
.btn-lg { padding: 13px 28px; font-size: 15px; }
.btn-block { display: block; width: 100%; text-align: center; }
.btn[disabled], .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Forms ────────────────────────────────────────────────────── */
.form-group { margin-bottom: 16px; }
.form-label {
  display: block; font-size: 13px; font-weight: 500;
  margin-bottom: 6px; color: var(--text);
}
.form-input, select.form-input, textarea.form-input {
  width: 100%; padding: 11px 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px;
  font: inherit; font-size: 14.5px; color: var(--text);
  transition: border-color .2s, box-shadow .2s;
  font-family: var(--text-font);
}
.form-input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
.form-input::placeholder { color: var(--text-subtle); }
.form-hint { font-size: 12.5px; color: var(--text-muted); margin-top: 6px; line-height: 1.45; }
textarea.form-input { resize: vertical; min-height: 90px; }

/* ── Panels ───────────────────────────────────────────────────── */
.panel {
  background: var(--surface); border-radius: 16px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
  margin-bottom: 16px;
}
.panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
}
.panel-title {
  font-family: var(--display); font-weight: 600;
  font-size: 18px; letter-spacing: -0.022em;
  margin: 0;
}
.panel-sub { font-size: 13.5px; color: var(--text-muted); }

/* ── Stats / Dash cards ───────────────────────────────────────── */
.stats-section { margin-bottom: 24px; }
.stats-grid, .dash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.stat-card, .dash-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
}
.stat-card:hover, .dash-card:hover {
  transform: translateY(-2px); box-shadow: var(--shadow-md);
}
.stat-num, .dash-card-value {
  font-family: var(--display); font-weight: 600;
  font-size: 30px; letter-spacing: -0.028em;
  line-height: 1; color: var(--text);
  font-variant-numeric: tabular-nums;
  margin-bottom: 4px;
}
.stat-label, .dash-card-label {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-muted); font-weight: 500;
  margin-bottom: 10px;
}
.dash-card-sub { font-size: 12.5px; color: var(--text-subtle); margin-top: 6px; }

/* ── Tuiles de catégorie (new-scan + dashboard) ── UNE seule bordure (sur la carte intérieure) */
.cat-tile { display: block; cursor: pointer; text-decoration: none; color: inherit; transition: transform .2s; }
.cat-tile input { position: absolute; opacity: 0; }
.cat-tile-inner {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 16px; text-align: center; box-shadow: var(--shadow-sm);
  transition: border-color .2s, box-shadow .2s, background .2s, transform .2s;
}
.cat-tile:hover { transform: translateY(-2px); }
.cat-tile:hover .cat-tile-inner { border-color: var(--accent); box-shadow: var(--shadow-md); }
.cat-tile input:checked + .cat-tile-inner,
.cat-tile.active .cat-tile-inner,
.cat-tile[aria-selected="true"] .cat-tile-inner {
  border-color: var(--accent); background: var(--accent-light);
}
.cat-tag {
  display: inline-block; margin-top: 8px; font-size: 11px; padding: 3px 10px;
  background: var(--bg-soft); color: var(--text-muted);
  border-radius: 999px; font-weight: 500;
  font-family: var(--display); letter-spacing: 0.04em;
}
.cat-tile input:checked + .cat-tile-inner .cat-tag,
.cat-tile.active .cat-tile-inner .cat-tag { background: var(--accent); color: #fff; }
.conf-tag {
  display: inline-block; padding: 2px 8px; font-size: 11px;
  border-radius: 999px; font-weight: 600;
  font-family: var(--display); letter-spacing: 0.04em;
}
.conf-tres-bon, .conf-bon, .conf-high { background: var(--success-light); color: var(--success); }
.conf-moyen, .conf-mid { background: var(--warning-light); color: var(--text); }
.conf-faible, .conf-low { background: var(--danger-light); color: var(--danger); }

/* ── Filter cards (results) ───────────────────────────────────── */
.filters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.filter-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s;
  display: flex; flex-direction: column; gap: 10px;
}
.filter-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.filter-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 10px;
}
.filter-card-title {
  font-family: var(--display); font-weight: 600;
  font-size: 16px; letter-spacing: -0.018em;
  line-height: 1.25;
}
.filter-card-brand {
  font-size: 12px; color: var(--text-muted); margin-top: 2px;
}
.filter-card-example {
  font-size: 12px; color: var(--text-subtle);
  padding: 8px 10px;
  background: var(--bg-soft);
  border-radius: 8px; line-height: 1.4;
}
.filter-card-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.filter-card-stat-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text-subtle); margin-bottom: 2px;
}
.filter-card-stat-num {
  font-family: var(--display); font-weight: 600;
  font-size: 15px; letter-spacing: -0.018em;
  font-variant-numeric: tabular-nums;
}
.filter-card-margin {
  color: var(--success); font-family: var(--display); font-weight: 600;
  font-size: 17px; letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.filter-card-target {
  font-size: 12px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.filter-card-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: auto; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.filter-card-actions .btn {
  font-size: 12.5px; padding: 7px 14px;
}

/* ── Bannière "Niche validée / fragile" en haut de filter-card ──── */
.niche-banner {
  margin: -18px -20px 14px;
  padding: 9px 18px;
  font-size: 12.5px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid var(--border);
  line-height: 1.35;
}
.niche-banner strong {
  font-family: var(--display); font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.niche-banner-forte {
  background: rgba(22, 163, 74, 0.07);
  color: #0f7a37;
  border-bottom-color: rgba(22, 163, 74, 0.18);
}
.niche-banner-forte strong { color: #0f7a37; }
.niche-banner-faible {
  background: rgba(217, 119, 6, 0.08);
  color: #a8550b;
  border-bottom-color: rgba(217, 119, 6, 0.22);
}
.niche-banner-faible strong { color: #a8550b; }
.niche-banner-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px currentColor;
  opacity: 0.85;
}
.niche-banner-forte .niche-banner-dot {
  animation: la-pulse 2.4s ease-in-out infinite;
}

/* Carte avec validation : ombrage subtil pour différencier */
.filter-card.niche-faible {
  border-color: rgba(217, 119, 6, 0.20);
}
.filter-card.niche-forte {
  border-color: rgba(22, 163, 74, 0.20);
}

/* ── Scan / spinner ───────────────────────────────────────────── */
.scan-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%;
  animation: la-spin .9s linear infinite;
  display: inline-block; vertical-align: middle;
}
.scan-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(22,163,74,0.18);
  animation: la-pulse 2s ease-in-out infinite;
}
@keyframes la-spin { to { transform: rotate(360deg); } }
@keyframes la-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(22,163,74,0.18); }
  50%     { box-shadow: 0 0 0 7px rgba(22,163,74,0.08); }
}

/* ── Settings rows ────────────────────────────────────────────── */
.settings-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.settings-section h2, .settings-section h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 18px; letter-spacing: -0.022em;
  margin-bottom: 8px;
}
.settings-row {
  padding: 14px 0;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.settings-row:last-child { border-bottom: 0; }
.settings-row-label { font-weight: 500; font-size: 14.5px; }
.settings-row-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; }

/* ── Danger zone ──────────────────────────────────────────────── */
.danger-zone {
  background: var(--danger-light);
  border: 1px solid rgba(220, 38, 38, 0.20);
  border-radius: 14px;
  padding: 22px 24px;
  margin-top: 24px;
}
.danger-zone h2, .danger-zone h3 { color: var(--danger); margin-bottom: 8px; }

/* ── Howto (accordion settings) ───────────────────────────────── */
.howto {
  background: var(--bg-soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 18px;
  font-size: 13.5px;
  margin-top: 10px;
}
.howto summary {
  cursor: pointer; font-weight: 500;
  font-family: var(--display);
  letter-spacing: -0.014em;
  list-style: none;
}
.howto summary::-webkit-details-marker { display: none; }
.howto[open] summary { margin-bottom: 10px; }
.howto-steps { padding-left: 20px; color: var(--text-muted); line-height: 1.6; }
.howto-note {
  margin-top: 10px; padding: 10px 12px;
  background: var(--surface); border-radius: 8px;
  font-size: 12.5px; color: var(--text-muted);
}

/* ── Download page (gardée car publique-app hybride) ──────────── */
.download-page { padding: 40px 0; }
.download-inner { max-width: 640px; margin: 0 auto; text-align: center; }
.download-icon {
  width: 64px; height: 64px; margin: 0 auto 24px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover));
  color: #fff; display: grid; place-items: center;
  font-size: 28px; font-weight: 700;
  box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.30);
}
.download-page h1 {
  font-family: var(--display); font-weight: 600;
  font-size: 36px; letter-spacing: -0.035em; line-height: 1.05;
  margin-bottom: 12px;
}
.download-page > .download-inner > p {
  color: var(--text-muted); font-size: 16px;
  line-height: 1.55; margin-bottom: 28px;
}
.download-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 30px; border-radius: 999px;
  font-size: 15px; font-weight: 500;
}
.download-meta { font-size: 13px; color: var(--text-subtle); margin-top: 12px; }
.download-steps {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 26px; margin-top: 28px;
  text-align: left;
}
.download-steps h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 17px; letter-spacing: -0.020em;
  margin-bottom: 14px;
}
.download-steps ol { padding-left: 22px; color: var(--text-muted); line-height: 1.7; }
.download-steps strong { color: var(--text); font-weight: 500; }

/* ── Auth pages (déjà refondues mais évite override sombre) ──── */
.auth-page, .auth-card, .auth-card h1 { color: var(--text); }
.auth-bullets li::before { /* préservé par loopya-v2.css quand utilisé */ }

/* ── Empty state ──────────────────────────────────────────────── */
.empty-state, .lp-help {
  text-align: center; padding: 40px 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow-sm);
  color: var(--text-muted);
}

/* ── Tables ───────────────────────────────────────────────────── */
table {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border);
}
th, td { padding: 12px 16px; text-align: left; font-size: 13.5px; }
th {
  background: var(--bg-soft);
  font-family: var(--display); font-weight: 600;
  letter-spacing: 0.02em;
  border-bottom: 1px solid var(--border);
}
tbody tr { border-bottom: 1px solid var(--border); }
tbody tr:last-child { border-bottom: 0; }
tbody tr:hover { background: var(--bg-soft); }
tbody td { color: var(--text-muted); }

/* ── View Transitions (Chrome 126+) ───────────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root) {
  animation: vt-fade-out .22s cubic-bezier(.4,0,1,1) forwards;
}
::view-transition-new(root) {
  animation: vt-fade-in .38s cubic-bezier(0,0,.2,1) forwards;
}
@keyframes vt-fade-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-fade-in  { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ── Animations scroll (.reveal) ──────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition:
    opacity .6s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .app { grid-template-columns: 200px 1fr; }
  .sidebar { padding: 20px 12px; }
}
@media (max-width: 800px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; left: -100%; top: 0;
    width: 280px; height: 100vh;
    z-index: 200; transition: left .3s ease;
    box-shadow: 0 0 40px rgba(0,0,0,0.20);
  }
  .sidebar.open { left: 0; }
  .topbar-app { margin: 18px 16px 2px; padding: 2px 2px 16px; border-radius: 0; gap: 12px; }
  .main-content { padding: 20px; }
  .stats-grid, .dash-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .stat-num, .dash-card-value { font-size: 26px; }
  .filters-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stats-grid, .dash-grid { grid-template-columns: 1fr; }
  .topbar-app { margin: 14px 12px 2px; padding: 2px 2px 14px; border-radius: 0; }
  .main-content { padding: 16px; }
  .panel { padding: 18px; }
  .settings-section { padding: 20px; }
}

/* ── Hamburger mobile pour la sidebar des pages app ──────────────── */
.app-burger {
  display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0; padding: 0;
  border: 1px solid var(--border, rgba(0,0,0,.12));
  border-radius: 11px;
  background: var(--surface, #fff);
  color: var(--text, #1a1a1a);
  cursor: pointer;
}
.app-burger svg { width: 22px; height: 22px; }
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.45); z-index: 150;
}
.sidebar-overlay.show { display: block; }
@media (max-width: 800px) {
  .app-burger { display: inline-flex; }
  /* Pages sans topbar (Radar, Mes filtres…) : burger flottant en haut à gauche */
  /* z-index 140 : SOUS l'overlay (150) et le tiroir (200) → le burger ne masque
     plus le logo quand le tiroir est ouvert (revendeurs/filtres, audit 14/08). */
  .app-burger--float { position: fixed; top: 12px; left: 12px; z-index: 140;
    background: var(--surface); box-shadow: var(--shadow-md); }
  .topbar-credits { margin-left: auto; }
  /* Pages app SANS hero .topbar-app : le burger flotte → on dégage le haut du
     contenu pour qu'il ne passe pas dessous (30/06). */
  .app:not(:has(.topbar-app)) .main-content,
  .app:not(:has(.topbar-app)) .rv-hero { padding-top: 60px; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE — anti-débordement + tailles adaptées (07/06/2026)
   Cause n°1 du "tout trop gros sur mobile" : un élément qui déborde en
   largeur fait gonfler le viewport → les media queries ne s'appliquent
   plus → le layout DESKTOP s'affiche zoomé. On verrouille la largeur, et
   on resserre les tailles/grilles sur petit écran.
   ════════════════════════════════════════════════════════════════ */
/* overflow-x: clip (pas hidden) → empêche le débordement horizontal SANS créer
   de conteneur de scroll ni bloquer le défilement vertical de la page. */
html, body { max-width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
img, video, canvas, table, pre { max-width: 100%; }
.main, .main-content, .app { min-width: 0; max-width: 100%; }

@media (max-width: 600px) {
  /* Toutes les grilles d'app passent en 1 colonne (anti-débordement) */
  .filters-grid, .stats-grid, .dash-grid, .niche-grid,
  .filter-grid, .cards-grid, .score-container, .chart-row { grid-template-columns: 1fr !important; }

  .topbar-app { margin: 12px 10px 2px; padding: 2px 2px 12px; border-radius: 0; gap: 10px; }
  .main-content { padding: 16px 14px; }
  .panel, .section, .settings-section { padding: 16px; }

  /* Gros chiffres / titres : on réduit nettement */
  .stat-num, .dash-card-value, .score-value, .stat-card-value { font-size: 24px; }
  h1 { font-size: 20px; }
  h2, .section-title { font-size: 16px; }

  /* Boutons : pleine largeur + taille raisonnable (3 boutons côte-à-côte
     en 12px débordaient hors carte) */
  .topbar-app .btn, .topbar-app .btn-ghost, .topbar-app .btn-secondary { font-size: 13px; padding: 9px 14px; }
  .filter-card-actions { flex-wrap: wrap; gap: 8px; }
  .filter-card-actions .btn { flex: 1 1 100%; padding: 11px; font-size: 13px; }

  /* Cartes résultats : 3 mini-stats plus compactes */
  .filter-card-stat-num { font-size: 15px; }
  .filter-card-stat-label { font-size: 9px; letter-spacing: .04em; }

  /* La bannière "niche validée" ne doit pas écraser la carte */
  .niche-banner { font-size: 12px; padding: 8px 12px; }
}

@media (max-width: 400px) {
  .topbar-app h1 { font-size: 17px; }
  .stat-num, .dash-card-value, .score-value { font-size: 22px; }
  .main-content { padding: 14px 12px; }
  .filter-card-stats { gap: 4px; }
}

/* ── CATÉGORIES (dashboard + nouveau scan) : icône en pastille NEUTRE, sobre.
   Pas de couleur par catégorie ni dans la sidebar (Evan 25/06 : pas d'icônes en
   couleur). Une seule teinte = l'accent de la marque. */
.cat-tile-inner > div:first-child {
  width: 48px; height: 48px; margin: 0 auto 8px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent); background: var(--accent-light);
  transition: transform .18s ease;
}
.cat-tile:hover .cat-tile-inner > div:first-child { transform: scale(1.05); }

/* ── Sélecteur de thème dans la sidebar ───────────────────────── */
.sidebar-themesw { padding: 2px 6px 0; }
.sidebar-themesw .st-lbl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-subtle); margin-bottom: 7px; padding-left: 8px; }
.sidebar-themesw .st-dots { display: flex; gap: 9px; padding-left: 8px; }
.sidebar-themesw button { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--sw); border: 2px solid var(--swr, transparent);
  box-shadow: 0 0 0 1px var(--border); transition: transform .15s, box-shadow .15s; }
.sidebar-themesw button:hover { transform: scale(1.14); }
.sidebar-themesw button.on { box-shadow: 0 0 0 2px var(--accent); }

/* Anti-flash GLOBAL (Evan 13/07 « les anciens logos en couleur pendant 1 s à chaque page ») :
   le contenu de l'app reste invisible jusqu'au remplacement des emojis par les icônes SVG
   (classe icons-ready posée par icons.js). Garde-fou : réaffiché de force après 700 ms même
   si icons.js échoue — jamais de page blanche. Les pages publiques (sans .app) ne sont pas touchées. */
html:not(.icons-ready) .app { visibility: hidden; animation: lpForceShow 0s .7s forwards; }
@keyframes lpForceShow { to { visibility: visible; } }

/* ── Catégories façon Vinted (pastille ronde + label) — dashboard ET scanner (Evan 14/07) ── */
.cat-mini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 4px; }
.cat-mini { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px 10px;
  border-radius: 14px; text-decoration: none; color: inherit; cursor: pointer; transition: background .15s, transform .15s; }
.cat-mini:hover { background: var(--bg-soft, rgba(0,0,0,.04)); transform: translateY(-1px); }
.cat-mini input { position: absolute; opacity: 0; pointer-events: none; }
.cat-mini .ico { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  font-size: 27px; background: var(--accent-light, rgba(0,0,0,.05)); border: 1px solid var(--border);
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; transition: background .15s, border-color .15s, box-shadow .15s; }
.cat-mini:hover .ico { border-color: var(--accent); }
.cat-mini .lbl { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.25; color: var(--text, inherit); }
/* état SÉLECTIONNÉ (scanner) : pastille pleine accent + label accent */
.cat-mini input:checked ~ .ico { background: var(--accent); border-color: var(--accent); color: #fff !important;
  box-shadow: 0 8px 22px rgba(var(--accent-rgb), .38); }
.cat-mini input:checked ~ .ico * { color: #fff !important; }
.cat-mini input:checked ~ .lbl { color: var(--accent); font-weight: 700; }
/* scan EN COURS (dashboard) : anneau pulsant */
.cat-mini.scanning .ico { border-color: var(--accent); position: relative; }
.cat-mini.scanning .ico::after { content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--accent); animation: catPulse 1.5s ease-out infinite; }
@keyframes catPulse { 0% { transform: scale(.82); opacity: .85; } 100% { transform: scale(1.28); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cat-mini.scanning .ico::after { animation: none; opacity: .5; } }
.cat-mini.scanning .lbl::after { content: " · scan en cours…"; color: var(--accent); font-weight: 700; }

/* ════════════════════════════════════════════════════════════════
   RAIL DÉPLOYANT (Établi v2, 14/08 — réf. visuelle validée par Evan) :
   sur desktop la sidebar est un rail d'icônes 64px ; AU SURVOL elle se
   DÉPLOIE par-dessus le contenu (252px) et révèle le nom de chaque
   fonctionnalité + les groupes (Trouver / Gérer / Suivi, injectés par
   loopya-auth.js). Le contenu ne bouge pas (la colonne de grille reste
   64px, le rail déborde dessus). En MOBILE (≤800px) rien ne change :
   tiroir complet + burger.
   ════════════════════════════════════════════════════════════════ */
@media (min-width: 801px) {
  .app { grid-template-columns: 64px 1fr; }
  /* z-index : sticky crée un contexte d'empilement → sans z-index, .main
     peindrait par-dessus le rail déployé. */
  .sidebar { width: 64px; padding: 14px 10px 12px; gap: 12px;
             background: var(--bg); border-right: 1px solid var(--border);
             overflow: hidden; z-index: 60;
             transition: width .18s ease, background .18s ease, box-shadow .18s ease; }
  .sidebar:hover, .sidebar:has(:focus-visible) {
    width: 252px; background: var(--surface);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
  }
  @media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

  /* Logo : pastille « L » toujours visible, wordmark révélé au déploiement */
  .sidebar .logo { display: flex; align-items: center; gap: 0; padding: 0 6px;
                   white-space: nowrap; font-size: 19px; overflow: hidden; flex: none; }
  .sidebar .logo::before { content: "L"; display: flex; align-items: center; justify-content: center;
    flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--accent-solid);
    color: #fff; font: 800 16px var(--display); margin-right: 11px; }

  /* Liens : icône dans une colonne fixe de 44px, libellé révélé au déploiement.
     min-height 0 + scroll interne : sur écran bas, la nav défile au lieu
     d'écraser le logo/le thème/l'utilisateur (blocs figés en flex:none). */
  .sidebar-nav { gap: 2px; min-height: 0; overflow-y: auto; overflow-x: hidden;
                 scrollbar-width: none; }
  .sidebar-nav::-webkit-scrollbar { display: none; }
  .sidebar-themesw, .sidebar-user { flex: none; }
  .sidebar-link { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px;
    border-radius: 12px; white-space: nowrap; font-size: 13.5px; overflow: hidden; flex: none; }
  .sidebar-link .sidebar-link-icon { flex: none; width: 20px; display: inline-flex; justify-content: center; }
  .sidebar-link .ico svg { width: 19px; height: 19px; }
  .sidebar-link:hover { background: var(--bg-soft); }
  .sidebar-link.active { background: var(--bg-soft); color: var(--accent); }
  .sidebar-link.active:hover { color: var(--accent); }
  /* cadenas plan gratuit : à droite du libellé, visible au déploiement */
  .sidebar-link .lock-mini { margin-left: auto; }

  /* Groupes (injectés par loopya-auth.js) : trait fin fermé, libellé déployé */
  .nav-sep { position: relative; height: 12px; margin: 3px 0 1px; flex: none; }
  .nav-sep::after { content: ""; position: absolute; left: 19px; right: auto; width: 26px; top: 50%;
    height: 1px; background: var(--border-strong); transition: opacity .15s; }
  .nav-sep::before { content: attr(data-label); position: absolute; left: 13px; top: 50%;
    transform: translateY(-50%); font: 650 10.5px var(--text-font); letter-spacing: .12em;
    text-transform: uppercase; color: var(--text-subtle); opacity: 0; transition: opacity .15s; }
  .sidebar:hover .nav-sep::before, .sidebar:has(:focus-visible) .nav-sep::before { opacity: 1; }
  .sidebar:hover .nav-sep::after, .sidebar:has(:focus-visible) .nav-sep::after { opacity: 0; }

  /* Sélecteur de thème : ABSENT rail fermé (pas de pastilles + libère la
     hauteur qui rognait la roue Paramètres), révélé au déploiement */
  .sidebar-themesw { display: none; padding: 0; }
  .sidebar:hover .sidebar-themesw, .sidebar:has(:focus-visible) .sidebar-themesw { display: block; }
  .sidebar-themesw .st-lbl { display: none; }
  .sidebar-themesw .st-dots { display: flex; gap: 10px; padding-left: 12px; }

  /* Utilisateur : avatar fermé, nom + plan + menu déployés */
  .sidebar-user { padding: 5px; gap: 11px; }
  .sidebar-user-avatar { flex: none; }
  .sidebar-user-info { opacity: 0; transition: opacity .15s; }
  .sidebar-user .user-menu-chevron { opacity: 0; }
  .sidebar:hover .sidebar-user-info, .sidebar:has(:focus-visible) .sidebar-user-info { opacity: 1; }
  .sidebar:hover .user-menu-chevron, .sidebar:has(:focus-visible) .user-menu-chevron { opacity: 1; }
}

/* ── UX MOBILE (16/08) ─────────────────────────────────────────────
   iOS ZOOME automatiquement au focus d'un champ dont la police < 16px →
   sur mobile, aucun champ ne descend en-dessous (l'app ne « saute » plus). */
@media (max-width: 800px) {
  input, select, textarea { font-size: max(16px, 1em) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHANTIER RESPONSIVE — 18/08/2026
   Constaté au navigateur (Chromium 390×844 et 768×1024, pages connectées) :
   aucune page ne scrolle horizontalement, mais du texte descendait à 9,5-11,5px
   et les pastilles de thème n'offraient qu'une cible de 22×22.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Plancher de lisibilité sur mobile ──────────────────────────────────
   Ces libellés sont définis dans le <style> local de chaque page ; la classe
   doublée (.x.x) suffit à passer devant sans recourir à !important.
   12px est le plancher retenu : en dessous, iOS zoome au focus et le texte
   devient illisible à bout de bras.
   18/09 — le plancher s'arrêtait à 600 px : sur tablette TACTILE (768, 1024) les mêmes libellés
   retombaient à 10,5-11,5 px (mesuré : 8 textes sur le tableau de bord, toutes les cartes d'« À sourcer »,
   les badges « Connecté » des réglages). Étendu au tactile jusqu'à 1024 px ; à la souris et au-delà,
   rien ne change. */
@media (max-width: 600px), (max-width: 1024px) and (pointer: coarse) {
  .t-label.t-label,                 /* tableau de bord, trackers */
  .dash-card-label.dash-card-label, /* résultats */
  .ed-brand.ed-brand,
  .ed-reliab.ed-reliab,
  .ed-reliab-text.ed-reliab-text,
  .sb-st.sb-st,                     /* à sourcer */
  .sb-brand.sb-brand,
  .ac-data-note.ac-data-note,       /* audit dressing */
  .ac-meta.ac-meta,
  .lp-brand.lp-brand,               /* mes filtres */
  .lp-chip.lp-chip,
  /* ── Ajouts du 20/08 : relevés à la mesure sur les 6 pages de l'app, ils
     étaient passés au travers du premier passage. Tous entre 10,5 et 11,5px. ── */
  .st-lbl.st-lbl,                   /* libellés de statistiques — sur TOUTES les pages */
  .sidebar-user-plan.sidebar-user-plan,
  .chart-cap.chart-cap,             /* légendes de graphiques, tableau de bord */
  .tip.tip,
  .ed-hero-lbl.ed-hero-lbl,         /* fiche résultat */
  .ed-buy-lbl.ed-buy-lbl,
  .fmin-val.fmin-val,
  .sb-range.sb-range,               /* à sourcer */
  .conn-badge.conn-badge,           /* réglages : état des connexions */
  /* ── Ajouts du 18/09 (contre-vérification) : encore sous 12 px à la mesure ── */
  .sb-rayon.sb-rayon,               /* à sourcer : rayon à côté de la marque (11 px) */
  .ftop-h.ftop-h,                   /* tableau de bord : « Tes filtres les plus rentables » (10,5 px) */
  .sq-hint.sq-hint.sq-hint {        /* tableau de bord : « Relance express » (10,5 px, règle locale à 2 classes) */
    font-size: 12px;
    line-height: 1.45;
  }
  /* Le pire du lot : 9,5px sur la rotation d'« À sourcer ». */
  .sb-rot.sb-rot { font-size: 12px; letter-spacing: 0; }
  /* 18/09 — pastille « ACTUEL » des plans (9 px) : la taille seule, sans toucher à l'interligne, pour
     qu'elle garde sa forme. (Les pastilles « TOP »/« Pro » du Scanner ne sont PAS relevées d'ici :
     essayé, à 12 px elles recouvrent le libellé de la tuile en 320-360 px — « Phot[TOP] » — tant que
     la tuile elle-même n'est pas revue dans new-scan.html.) */
  .plan-current.plan-current { font-size: 12px; letter-spacing: 0; }
}

/* ── 2. Cibles tactiles ────────────────────────────────────────────────────
   Les pastilles de thème font 22px de diamètre — joli à la souris, trop petit
   au doigt (WCAG 2.2 demande 24px minimum, Apple recommande 44px). On étend la
   zone tactile par un pseudo-élément : le rond reste identique, la surface
   cliquable passe à 44px. Uniquement sur pointeur grossier, pour ne rien
   changer au rendu souris. */
@media (pointer: coarse) {
  .sidebar-themesw button { position: relative; }
  .sidebar-themesw button::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
  .sidebar-themesw .st-dots { gap: 14px; }
}

/* ── Zone tactile des liens de texte fins (20/08) ──────────────────────────
   Relevé sur l'app en 390 px : quelques liens n'offraient que 16 à 20 px de
   hauteur cliquable (réglages, historique). Même technique que les pastilles
   de thème plus haut : un ::after transparent porte la zone à 44 px SANS
   déplacer le texte d'un pixel.
   Volontairement NON appliqué aux boutons de 36 px : dans une interface dense
   comme celle-ci, c'est une hauteur normale, et les élargir relâcherait la
   mise en page. Le confort tactile se joue sur les liens fins, pas sur eux. */
@media (max-width: 820px) {
  .card a:not(.btn):not([class*="btn-"]),
  .set-card a:not(.btn):not([class*="btn-"]),
  .hist-card a:not(.btn):not([class*="btn-"]) {
    position: relative;
  }
  .card a:not(.btn):not([class*="btn-"])::after,
  .set-card a:not(.btn):not([class*="btn-"])::after,
  .hist-card a:not(.btn):not([class*="btn-"])::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    transform: translateY(-50%);
    min-height: 44px; height: 100%;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CHANTIER « RESPONSIVE PARFAIT » — SOCLE DE L'APP — 18/09/2026
   Mesuré avec tools/responsive-audit.mjs (320 → 1366 px, pages connectées) :
   aucun défilement horizontal, mais la coque avait six vrais défauts —
   1. en-tête : avec « space-between », le titre partait se coller au bord DROIT
      (Paramètres, Affiliation) ou tombait seul sous le burger (Historique, Scanner
      en 320 px) ;
   2. bloc crédits : une pilule DANS une pilule (.topbar-credits et ses badges
      partagent le même style) → 2 badges empilés dans une grosse gélule en 320 px ;
   3. tiroir mobile : 100vh (le bloc utilisateur passait sous la barre du
      navigateur), pas de défilement interne sur écran bas, aucun bouton Fermer
      (en 320 px il ne restait que 40 px de voile à viser) ;
   4. tiroir FERMÉ encore atteignable au clavier et lu par les lecteurs d'écran ;
   5. rail (≥ 801 px) : menu utilisateur ouvert sans survol (tablette tactile) =
      rogné dans 64 px ; voile du tiroir qui restait affiché après une rotation ;
   6. « Thème » 10,5 px et « Plan Pro » 11,5 px dans le tiroir entre 601 et 800 px.
   Le rendu ordinateur à la souris ne change pas.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 + 2. En-tête .topbar-app sur mobile/tablette étroite ─────────────────── */
@media (max-width: 800px) {
  /* burger + titre sur UNE ligne, titre à gauche ; le bloc de droite passe dessous s'il ne tient pas */
  .topbar-app { align-items: center; justify-content: flex-start; }
  .topbar-app > .app-burger + * { flex: 1 1 200px; min-width: 0; }
  .topbar-app h1 { overflow-wrap: anywhere; }
  .topbar-app p { overflow-wrap: anywhere; }
  .topbar-app .topbar-credits { flex-wrap: wrap; max-width: 100%; min-width: 0; }
  /* la gélule extérieure ne sert à rien quand elle contient déjà des badges-pilules */
  .topbar-credits:has(> .credit-badge, > .daily-badge) { background: none; border: 0; padding: 0; border-radius: 0; }
  .app-burger { width: 44px; height: 44px; }
}

@media (max-width: 400px) {
  /* 320-400 px : les deux badges du Scanner tiennent côte à côte au lieu de s'empiler */
  .topbar-credits > .credit-badge, .topbar-credits > .daily-badge { padding: 6px 11px; font-size: 12.5px; gap: 6px; }
}

/* ── 3 + 4 + 6. Tiroir mobile ───────────────────────────────────────────────── */
@media (max-width: 800px) {
  .sidebar {
    width: min(280px, calc(100vw - 44px));         /* 320 px : il reste 44 px de voile pour refermer au doigt */
    height: 100vh; height: 100dvh;                 /* dvh : la barre d'URL mobile ne cache plus le bloc utilisateur */
    /* marges resserrées : les 13 liens + thème + utilisateur tiennent sans défiler sur un téléphone courant */
    padding: 16px 16px max(16px, env(safe-area-inset-bottom)); gap: 14px;
    overscroll-behavior: contain;                  /* le défilement du menu n'entraîne pas la page derrière */
    visibility: hidden;                            /* fermé = hors tabulation et hors lecteur d'écran */
    transition: left .3s ease, visibility 0s linear .3s;
  }
  .sidebar.open { visibility: visible; transition: left .3s ease, visibility 0s; }
  /* écran bas (téléphone en paysage, SE) : la liste défile, logo/thème/utilisateur restent en place */
  .sidebar .logo, .sidebar-themesw, .sidebar-user { flex: none; }
  .sidebar .logo { min-height: 44px; margin-bottom: 0; align-self: flex-start; }   /* largeur du mot seul : la droite de la ligne revient au bouton Fermer */
  .sidebar-nav {
    min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
    /* ombres de défilement : un liseré n'apparaît en haut/en bas QUE s'il reste des liens cachés */
    background:
      linear-gradient(var(--surface) 40%, transparent) top / 100% 24px no-repeat local,
      linear-gradient(transparent, var(--surface) 60%) bottom / 100% 24px no-repeat local,
      linear-gradient(var(--border-strong), transparent) top / calc(100% - 6px) 8px no-repeat scroll,
      linear-gradient(transparent, var(--border-strong)) bottom / calc(100% - 6px) 8px no-repeat scroll;
    /* (liserés 6 px moins larges que leur cache : sinon un filet d'1 px dépasse sur les bords, vu en 320 px) */
  }
  .sidebar-link { min-height: 44px; padding-top: 0; padding-bottom: 0; flex: none; }
  .sidebar-themesw .st-lbl.st-lbl, .sidebar-user-plan.sidebar-user-plan { font-size: 12px; }
  .sidebar-overlay { -webkit-tap-highlight-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar.open { transition: none; }
}

/* ── 5. Rail ≥ 801 px : tablette tactile et retour de rotation ──────────────── */
@media (min-width: 801px) {
  /* le voile appartient au tiroir : ouvert en portrait puis passé en paysage, il restait sur la page */
  .sidebar-overlay, .sidebar-overlay.show { display: none; }
  /* menu utilisateur ouvert = rail déployé, même SANS survol (au doigt, :hover n'est pas fiable) :
     sinon le menu s'affichait rogné dans les 64 px du rail. */
  .sidebar:has(.sidebar-user.open) { width: 252px; background: var(--surface); box-shadow: 0 18px 50px rgba(0, 0, 0, .16); }
  .sidebar:has(.sidebar-user.open) .nav-sep::before { opacity: 1; }
  .sidebar:has(.sidebar-user.open) .nav-sep::after { opacity: 0; }
  .sidebar:has(.sidebar-user.open) .sidebar-themesw { display: block; }
  .sidebar:has(.sidebar-user.open) .sidebar-user-info,
  .sidebar:has(.sidebar-user.open) .user-menu-chevron { opacity: 1; }
}
@media (min-width: 801px) and (pointer: coarse) {
  /* au doigt : 44 px par lien du rail (40 à la souris, inchangé) ; la liste défile déjà si l'écran est bas */
  .sidebar-link { height: 44px; }
  .sidebar .logo { min-height: 44px; }
}

/* ── Boutons génériques au doigt ────────────────────────────────────────────
   .btn fait 41 px de haut, et plusieurs pages le resserrent à 31-36 px dans les
   cartes. On ne touche PAS à l'aspect : une zone transparente porte la surface
   tactile à 44 px (même technique que les pastilles de thème, 18/08). */
@media (pointer: coarse) {
  /* (.btn-ghost/.btn-secondary… portés SANS .btn : « ← Annuler » de la veille, 39 px) */
  .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger { position: relative; }
  .btn::after, .btn-primary::after, .btn-secondary::after, .btn-ghost::after, .btn-danger::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 44px; min-height: 100%; transform: translateY(-50%);
  }
  /* liens d'action des tableaux génériques (« Voir → » de l'historique : 39 × 20 px mesurés) :
     même zone étendue, 44 × 44 au minimum, le texte ne bouge pas. */
  tbody td > a:not(.btn) { position: relative; }
  tbody td > a:not(.btn)::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 100%; min-width: 44px; height: 44px; transform: translate(-50%, -50%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — SOCLE, PASSE 2 (contre-vérification du 18/09/2026)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tableau générique : le lien d'action ne se coupe plus (« Voir » / « → » orphelin
   dessous, mesuré sur l'historique entre 601 et 800 px alors que les colonnes voisines
   avaient de la place). ─────────────────────────────────────────────────────── */
/* (dernière colonne SEULEMENT = la colonne d'actions : ailleurs un lien peut être un long titre d'annonce —
   tableau de l'audit dressing — qui doit continuer à passer à la ligne) */
tbody td:last-child > a:not(.btn) { white-space: nowrap; }
/* idem pour la date (« 17 sept., » / « 19:14 » sur deux lignes) : une date courte ne se coupe pas */
tbody td[data-label="Date"] { white-space: nowrap; }

@media (max-width: 800px) {
  /* En-tête : le burger s'aligne sur la ligne du TITRE. Centré sur le bloc titre + sous-titre,
     il flottait au milieu du paragraphe dès que le sous-titre faisait 3-4 lignes (Veille,
     Audit, Tendances en 320 px). Le bloc titre, lui, reste centré quand il est plus court. */
  .topbar-app .app-burger { align-self: flex-start; }

  /* Pages SANS en-tête (Mes filtres) : le burger flottant défile désormais avec la page, comme
     celui des autres pages. Fixe, il recouvrait le contenu qui passait dessous (début des puces,
     coin des cartes). Le dégagement de 60 px en haut du contenu existe déjà. */
  .app-burger--float { position: absolute; }
}

/* ── Tiroir sur écran BAS (téléphone en paysage : ≤ 480 px de haut) ─────────────
   Logo + thème + bloc utilisateur figés ne laissaient que 126 px aux 13 liens (mesuré en
   360 × 360). Ici tout le tiroir défile d'un bloc ; le bouton Fermer reste collé en haut
   (sinon il partirait avec le contenu) et le menu utilisateur s'arrête dessous. */
@media (max-width: 800px) and (max-height: 480px) {
  .sidebar { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sidebar-nav { overflow: visible; flex: none; background: none; }
  .sidebar .sidebar-close {
    position: sticky; top: 0; right: auto; z-index: 210; flex: none;
    align-self: flex-end; margin: 0 -4px -58px 0;      /* -58 = ses 44 px + l'écart de 14 : le logo ne bouge pas */
    background: var(--surface);
  }
  .sidebar .user-menu { max-height: calc(100vh - 160px); max-height: calc(100dvh - 160px); }
}