/* ============================================================
   tool-detail.css — Fiche outil Albexia
   Utilisé par : chatgpt.html, canva.html, et toutes les fiches
   ============================================================ */

/* --- Variables & Reset ------------------------------------ */
:root {
  /* Palette & tokens alignés sur profil.html (guide CSS de référence) */
  --bg:        #0a0a0f;
  --surface:   #16161F;
  --surface2:  #1E1E2A;
  --border:    #26263A;
  --border-strong: #33334A;

  --accent:    #FF6B9D;
  --accent-ink:#E8447C;
  --accent2:   #34D399;
  --danger:    #F87171;

  --text:      #F0F0F5;
  --muted:     #8A8A9E;
  --text-muted:#8A8A9E;
  --text-dim:  #55556E;

  /* alias hérités du markup */
  --bg2:       #16161F;
  --bg3:       #1E1E2A;
  --border-hover: #33334A;
  --accent3:   #34D399;
  --accent-amber: #E8B84B;
  --purple:    #FF6B9D;
  --teal:      #34D399;

  --radius:    4px;
  --radius-sm: 3px;

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after {box-sizing:border-box; margin:0; padding:0;}
html {scroll-behavior:smooth;}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
}

h1, h2, h3 {font-family:var(--serif); letter-spacing:-0.015em;}

/* --- Layout ------------------------------------------------ */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

/* --- Navigation ------------------------------------------- */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10,10,15,0.88);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 32px;
}

.logo {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  margin-right: 40px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text);
}
.logo .dot {color:var(--accent);}

.nav-links {display:flex; gap:4px; flex:1;}

.nav-link {
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  transition: all .2s;
  text-decoration: none;
  border: none;
  cursor: pointer;
}
.nav-link:hover {color:var(--text); background:rgba(255,255,255,0.05);}

.nav-cta {
  padding: 7px 18px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  transition: all .2s;
  text-decoration: none;
}
.nav-cta:hover {background:transparent; border-color:var(--text); color:var(--text);}

/* Kebab menu */
.kebab-wrap {position:relative;}
.kebab-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
  background: none;
  border: none;
  cursor: pointer;
}
.kebab-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: background .2s;
}
.kebab-btn:hover span {background:var(--text);}

.kebab-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--bg2);
  border: 1px solid var(--border-hover);
  border-radius: var(--radius);
  padding: 8px;
  min-width: 240px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  z-index: 200;
}
.kebab-menu.open {display:block;}
.kebab-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  padding: 6px 10px 4px;
  text-transform: uppercase;
}
.kebab-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: background .15s;
  color: var(--text);
}
.kebab-item:hover {background:rgba(255,255,255,0.05);}
.kebab-ico {font-size:18px; width:28px; text-align:center; flex-shrink:0;}
.kebab-item-name {font-size:13px; font-weight:500;}
.kebab-item-sub {font-size:11px; color:var(--text-dim); margin-top:1px;}
.kebab-divider {height:1px; background:var(--border); margin:6px 0;}
.kebab-hub-link .kebab-item-name {color:var(--accent);}

/* --- Breadcrumb ------------------------------------------- */
.tool-breadcrumb {
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 10px 0;
  font-size: 12px;
  color: var(--text-dim);
  position: relative;
  z-index: 1;
}
.tool-breadcrumb .container {display:flex; align-items:center; gap:8px;}
.tool-breadcrumb a {color:var(--text-dim); text-decoration:none;}
.tool-breadcrumb a:hover {color:var(--accent);}

/* --- Hero ------------------------------------------------- */
.tool-hero {
  padding: 48px 0 40px;
  border-bottom: 1px solid rgba(255,107,157,0.15);
  margin-bottom: 40px;
  position: relative;
  overflow: hidden;
}

.hero-glow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 400px;
  pointer-events: none;
}

.tool-hero-left {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  position: relative;
  z-index: 1;
}

.tool-logo-wrap {
  width: 96px;
  height: 96px;
  border-radius: 20px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,107,157,0.2);
  box-shadow: 0 0 24px rgba(255,107,157,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.tool-logo-img {width:64px; height:64px; object-fit:contain;}

.tool-hero-info {flex:1; min-width:0;}

.tool-hero-badges {display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;}

.tool-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  letter-spacing: 0.03em;
}
.badge-cat  {background:rgba(255,107,157,0.15); color:var(--accent); border:1px solid rgba(255,107,157,0.3);}
.badge-freemium {background:rgba(52,211,153,0.12); color:var(--accent2); border:1px solid rgba(52,211,153,0.3);}
.badge-hot  {background:rgba(232,184,75,0.12); color:var(--accent-amber); border:1px solid rgba(232,184,75,0.3);}

.tool-hero-title {
  font-family: var(--serif);
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 600;
  letter-spacing: -1px;
  line-height: 1.1;
  margin-bottom: 6px;
}

.tool-hero-maker {font-size:13px; color:var(--text-dim); margin-bottom:12px;}
.tool-hero-maker strong {color:var(--text-muted);}

.tool-hero-stars {display:flex; align-items:center; gap:4px; margin-bottom:14px;}
.star {color:var(--text-dim); font-size:18px;}
.star.on {color:var(--accent-amber);}
.star-label {font-size:12px; color:var(--text-dim); margin-left:6px;}

.tool-hero-desc {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.75;
  font-weight: 300;
  max-width: 640px;
  margin-bottom: 22px;
}

/* FIX: boutons héro — flex-wrap + gap pour éviter le chevauchement */
.tool-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.btn-try {
  display: inline-block;
  padding: 11px 24px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
  font-family: var(--sans);
  white-space: nowrap;
  border: 1px solid var(--text);
  letter-spacing: .04em;
}
.btn-try:hover {background:var(--accent); border-color:var(--accent); color:#fff;}

.btn-pricing {
  display: inline-block;
  padding: 11px 24px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  font-family: var(--sans);
  white-space: nowrap;
}
.btn-pricing:hover {border-color:var(--text); color:var(--text);}

/* --- Stats bar -------------------------------------------- */
.tool-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 40px;
}

.tool-stat {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.tool-stat:first-child {
  border-color: rgba(255,107,157,0.2);
  background: rgba(255,107,157,0.04);
}

.ts-n {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 4px;
  letter-spacing: -0.5px;
}
.ts-l {font-size:12px; color:var(--text-dim);}

/* --- Two-column layout ------------------------------------ */
/*
  FIX CRITIQUE : La sidebar était en position:sticky ET dans un grid
  sans contrainte de hauteur → les éléments débordaient et se chevauchaient.
  Solution : on isole chaque sidebar-card en sticky indépendamment
  et on s'assure que la sidebar ne force pas la hauteur du grid.
*/
.tool-content {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  margin-bottom: 60px;
  align-items: start;
}

.tool-main {min-width:0;}

/* --- Sections --------------------------------------------- */
.tool-section {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}
.tool-section:last-child {border-bottom:none;}

.tool-section h2 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 16px;
  color: var(--text);
  letter-spacing: -0.3px;
}
.tool-section p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.85;
  margin-bottom: 14px;
  font-weight: 300;
}

/* --- Screenshot ------------------------------------------- */
.screenshot-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,107,157,0.15);
  background: var(--bg3);
  margin-top: 8px;
  position: relative;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.screenshot-wrap img {width:100%; display:block; transition:transform .4s ease;}
.screenshot-wrap:hover img {transform:scale(1.02);}
.screenshot-label {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(10,10,15,0.85);
  backdrop-filter: blur(10px);
  font-size: 11px;
  color: var(--text-muted);
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

/* --- Feature grid ----------------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.feature-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  transition: border-color .2s, transform .2s;
}
.feature-item:hover {border-color:var(--text);}
.fi-icon {font-size:24px; margin-bottom:8px;}
.fi-title {font-size:14px; font-weight:600; color:var(--text); margin-bottom:4px; font-family:var(--serif);}
.fi-desc {font-size:12px; color:var(--text-muted); line-height:1.6;}

/* --- Pricing grid ----------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.pricing-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pricing-card-featured {
  border: 2px solid var(--accent);
  background: var(--surface);
}

.pc-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  white-space: nowrap;
  letter-spacing: 0.05em;
}

.pc-name {font-family:var(--serif); font-size:16px; font-weight:600; color:var(--text); margin-bottom:8px;}
.pc-price {font-family:var(--serif); font-size:28px; font-weight:600; color:var(--accent); margin-bottom:16px; letter-spacing:-1px;}
.pc-price span {font-size:14px; font-weight:400; color:var(--text-dim);}

.pc-features {list-style:none; margin-bottom:20px; flex:1;}
.pc-features li {font-size:12px; color:var(--text-muted); padding:5px 0; border-bottom:1px solid var(--border);}
.pc-features li:last-child {border-bottom:none;}

.pc-btn {
  display: block;
  text-align: center;
  padding: 10px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
  font-family: var(--sans);
  margin-top: auto;
}
.pc-btn-main {background:var(--accent); color:#fff;}
.pc-btn-main:hover {background:var(--accent-ink);}
.pc-btn-outline {background:transparent; color:var(--text-muted); border:1px solid var(--border-hover);}
.pc-btn-outline:hover {border-color:var(--text); color:var(--accent);}

/* --- Use cases -------------------------------------------- */
.usecase-list {display:flex; flex-direction:column; gap:12px; margin-top:8px;}
.usecase-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  transition: border-color .2s;
}
.usecase-item:hover {border-color:var(--text);}
.uc-emoji {font-size:24px; flex-shrink:0;}
.usecase-item div {font-size:14px; color:var(--text-muted); line-height:1.6;}
.usecase-item strong {color:var(--text); font-weight:500;}

/* --- Pros / Cons ------------------------------------------ */
.pros-cons {display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:8px;}
.pros {background:rgba(52,211,153,0.05); border:1px solid rgba(52,211,153,0.15); border-radius:var(--radius); padding:18px;}
.cons {background:rgba(255,107,157,0.05); border:1px solid rgba(255,107,157,0.12); border-radius:var(--radius); padding:18px;}
.pc-title {font-size:14px; font-weight:600; margin-bottom:12px; font-family:var(--serif);}
.pros .pc-title {color:var(--accent2);}
.cons .pc-title {color:var(--accent);}
.pros ul, .cons ul {list-style:none;}
.pros li, .cons li {font-size:13px; color:var(--text-muted); padding:6px 0; border-bottom:1px solid rgba(255,255,255,0.05); line-height:1.5;}
.pros li:last-child, .cons li:last-child {border-bottom:none;}

/* --- Tutorials -------------------------------------------- */
.tutorials-list {display:flex; flex-direction:column; gap:10px; margin-top:8px;}

.tutorial-item {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .2s;
}
.tutorial-item.open {border-color:rgba(255,107,157,0.25);}

.tutorial-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  user-select: none;
  transition: background .2s;
}
.tutorial-header:hover {background:rgba(255,255,255,0.02);}

.tutorial-thumb {
  width: 64px;
  height: 42px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg3);
  border: 1px solid var(--border);
  position: relative;
}
.tutorial-thumb img {width:100%; height:100%; object-fit:cover;}
.tutorial-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.4);
}
.tutorial-thumb-play svg {width:18px; height:18px; fill:#fff; opacity:0.9;}

.tutorial-meta {flex:1; min-width:0;}
.tutorial-title {font-size:14px; font-weight:500; color:var(--text); line-height:1.4; margin-bottom:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tutorial-duration {font-size:11px; color:var(--text-dim);}

.tutorial-toggle {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 14px;
  color: var(--text-dim);
  transition: transform .25s, background .2s, color .2s;
}
.tutorial-item.open .tutorial-toggle {transform:rotate(180deg); background:rgba(255,107,157,0.12); color:var(--accent); border-color:rgba(255,107,157,0.3);}

.tutorial-video {max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(0.4,0,0.2,1);}
.tutorial-item.open .tutorial-video {max-height:400px;}
.tutorial-video-inner {padding:0 18px 18px;}
.video-frame {position:relative; padding-bottom:56.25%; height:0; border-radius:var(--radius); overflow:hidden; background:var(--bg3);}
.video-frame iframe {position:absolute; inset:0; width:100%; height:100%; border:none;}

/* --- Related articles ------------------------------------- */
.related-articles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 8px;
}

.related-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  transition: border-color .2s, transform .25s;
}
.related-card:hover {border-color:var(--text);}
.related-cover {width:100%; height:110px; overflow:hidden; background:var(--bg3);}
.related-cover img {width:100%; height:100%; object-fit:cover; transition:transform .4s;}
.related-card:hover .related-cover img {transform:scale(1.05);}
.related-body {padding:12px 14px;}
.related-title {font-size:13px; font-weight:600; color:var(--text); line-height:1.4; margin-bottom:5px; font-family:var(--serif);}
.related-sub {font-size:11px; color:var(--text-dim); line-height:1.5;}
.related-arrow {font-size:11px; color:var(--accent); margin-top:8px; display:block; font-weight:500;}

/* --- FAQ -------------------------------------------------- */
.faq-list {display:flex; flex-direction:column; gap:8px; margin-top:8px;}
.faq-item {background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;}
.faq-q {
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  width: 100%;
  background: none;
  border: none;
  font-family: var(--sans);
  text-align: left;
}
.faq-q:hover {color:var(--accent);}
.faq-q::after {content:'+'; font-size:20px; color:var(--text-dim); transition:transform .2s;}
.faq-item.open .faq-q::after {transform:rotate(45deg); color:var(--accent);}
.faq-a {display:none; padding:12px 16px 14px; font-size:13px; color:var(--text-muted); line-height:1.7; border-top:1px solid var(--border);}
.faq-item.open .faq-a {display:block;}

/* --- Verdict ---------------------------------------------- */
.tool-verdict {
  background: rgba(255,107,157,0.06);
  border: 1px solid rgba(255,107,157,0.2);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  margin-top: 8px;
}
.verdict-icon {font-size:32px; flex-shrink:0;}
.verdict-title {font-family:var(--serif); font-size:16px; font-weight:600; color:var(--accent); margin-bottom:8px;}
.tool-verdict p {font-size:14px; color:var(--text-muted); line-height:1.75;}

/* --- Sidebar ----------------------------------------------
   FIX CRITIQUE : la sidebar ne doit PAS avoir position:sticky sur le
   conteneur .tool-sidebar lui-même — seulement sur chaque card
   individuellement, sinon les cards se chevauchent sur les petits écrans.
   On utilise align-items:start sur .tool-content pour que les colonnes
   ne s'étirent pas à la hauteur l'une de l'autre.
*/
.tool-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  position: sticky;
  top: 80px;
}

/* FIX : chaque card doit avoir son propre offset sticky croissant
   pour ne jamais se superposer quand elles arrivent en haut */
.tool-sidebar .sidebar-card:nth-child(1) {top:80px;}
.tool-sidebar .sidebar-card:nth-child(2) {top:96px;}
.tool-sidebar .sidebar-card:nth-child(3) {top:112px;}
.tool-sidebar .sidebar-card:nth-child(4) {top:128px;}

.sidebar-card-featured-highlight {
  border-color: rgba(255,107,157,0.25);
  background: var(--surface);
}

.sc-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.sc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.sc-row:last-child {border-bottom:none;}
.sc-label {color:var(--text-dim);}
.sc-val {color:var(--text); font-weight:500;}
.sc-val-green {color:var(--accent2); font-weight:600;}

.alt-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: opacity .15s;
}
.alt-item:hover {opacity:0.75;}
.alt-item:last-of-type {border-bottom:none;}
.alt-item img {width:28px; height:28px; border-radius:var(--radius-sm);}
.alt-name {font-size:13px; font-weight:500; color:var(--text);}
.alt-desc {font-size:11px; color:var(--text-dim); margin-top:1px;}

.alt-more {
  display: block;
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: var(--accent);
  text-decoration: none;
  padding: 8px;
  border-radius: var(--radius-sm);
  background: rgba(255,107,157,0.08);
  transition: background .2s;
}
.alt-more:hover {background:rgba(255,107,157,0.15);}

.sidebar-card-cta {
  background: rgba(255,107,157,0.06);
  border-color: rgba(255,107,157,0.2);
}
.sidebar-card-cta .sc-title {border-color:rgba(255,107,157,0.2); color:var(--accent);}
.sidebar-card-cta p {font-size:13px; color:var(--text-muted); margin-bottom:14px; line-height:1.6;}

.btn-try-full {
  display: block;
  text-align: center;
  padding: 11px;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
  font-family: var(--sans);
  border: 1px solid var(--text);
  letter-spacing: .04em;
}
.btn-try-full:hover {background:var(--accent); border-color:var(--accent); color:#fff;}

/* --- Article link cards ----------------------------------- */
.article-link-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: opacity .2s;
}
.article-link-card:hover {opacity:0.75;}
.article-link-card:last-of-type {border-bottom:none;}
.article-link-thumb {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-sm);
  background: var(--bg3);
  border: 1px solid var(--border);
  overflow: hidden;
  flex-shrink: 0;
}
.article-link-thumb img {width:100%; height:100%; object-fit:cover;}
.article-link-title {font-size:12px; font-weight:500; color:var(--text); line-height:1.4; margin-bottom:3px;}
.article-link-sub {font-size:11px; color:var(--text-dim); line-height:1.4;}

/* --- Footer ----------------------------------------------- */
footer {
  border-top: 1px solid var(--border);
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--text-dim);
  position: relative;
  z-index: 1;
}
footer a {color:var(--accent); text-decoration:none;}

/* --- Responsive ------------------------------------------- */
@media (max-width: 900px) {
  /* FIX : sur mobile, on repasse en colonne — la sidebar descend
     sous le contenu, donc plus aucun risque de chevauchement */
  .tool-content {
  grid-template-columns: 1fr;
}
  /* On désactive sticky sur chaque card en mobile */
  .tool-sidebar .sidebar-card,
  .tool-sidebar .sidebar-card:nth-child(1),
  .tool-sidebar .sidebar-card:nth-child(2),
  .tool-sidebar .sidebar-card:nth-child(3),
  .tool-sidebar .sidebar-card:nth-child(4) {
  position: static;
}
  .tool-stats       {grid-template-columns:repeat(2, 1fr);}
  .pricing-grid     {grid-template-columns:1fr;}
  .pros-cons        {grid-template-columns:1fr;}
  .related-articles {grid-template-columns:1fr;}
}

@media (max-width: 600px) {
  .tool-hero-left   {flex-direction:column;}
  .feature-grid     {grid-template-columns:1fr;}
  .container        {padding:0 16px;}
  .related-articles {grid-template-columns:repeat(2, 1fr);}
  .tool-hero-actions {flex-direction:column; align-items:flex-start;}
  .btn-try, .btn-pricing {width:100%; text-align:center;}
}

/* ═══════════════════════════════════════
   Reviews Widget v3 — Fiche + Page dédiée
   ═══════════════════════════════════════ */

/* Skeleton */
.rv-skeleton-wrap {display:flex; flex-direction:column; gap:14px; padding:8px 0;}
.rv-skeleton-card {display:flex; gap:14px; align-items:flex-start; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px;}
.rv-skeleton {background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%); background-size:200% 100%; animation:rv-shimmer 1.5s infinite; border-radius:var(--radius-sm);}
.rv-sk-avatar {width:36px; height:36px; border-radius:50%; flex-shrink:0;}
.rv-sk-line   {height:12px;}
@keyframes rv-shimmer { 0%{background-position:200% 0}100%{background-position:-200% 0} }

/* Section */
.rv-section {margin:48px 0;}
.rv-title {font-size:1.3rem; font-weight:700; margin-bottom:24px; display:flex; align-items:center; gap:10px;}
.rv-count {background:rgba(255,107,157,0.15); color:var(--accent); border-radius:20px; padding:2px 10px; font-size:.8rem; font-weight:600;}
.rv-empty {text-align:center; padding:32px 20px; color:var(--text-muted); font-size:.9rem;}

/* Formulaire */
.rv-form-card {background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:24px; margin-bottom:28px;}
.rv-form-title {font-size:1rem; font-weight:600; margin-bottom:16px;}
.rv-stars-input {display:flex; gap:6px; margin-bottom:16px;}
.rv-star-btn {font-size:1.6rem; background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.2); transition:color .15s,transform .1s; line-height:1; padding:0;}
.rv-star-btn.on  {color:var(--accent-amber);}
.rv-star-btn:hover {transform:scale(1.15);}
.rv-textarea {width:100%; min-height:100px; background:var(--bg3); border:1px solid var(--border); border-radius:var(--radius); color:var(--text); font-family:var(--sans); font-size:.9rem; padding:12px 14px; resize:vertical; outline:none; transition:border-color .2s; margin-bottom:12px; box-sizing:border-box;}
.rv-textarea:focus {border-color:var(--accent);}
.rv-char-count {text-align:right; font-size:.75rem; color:var(--text-muted); margin-bottom:12px; margin-top:-8px;}
.rv-form-footer {display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.rv-submit-btn {padding:10px 20px; background:var(--accent); border:none; border-radius:var(--radius); color:#fff; font-size:.875rem; font-weight:600; cursor:pointer; font-family:inherit; transition:opacity .2s;}
.rv-submit-btn:hover    {opacity:.85;}
.rv-submit-btn:disabled {opacity:.45; cursor:not-allowed;}
.rv-delete-btn {padding:10px 16px; background:rgba(255,71,87,0.1); border:1px solid rgba(255,71,87,0.25); border-radius:var(--radius); color:#ff6b78; font-size:.875rem; font-weight:500; cursor:pointer; font-family:inherit; transition:opacity .2s;}
.rv-delete-btn:hover {opacity:.8;}
.rv-error {color:#ff6b78; font-size:.85rem; display:none;}
.rv-login-prompt {display:flex; align-items:center; gap:12px; padding:16px 20px; background:rgba(255,107,157,0.08); border:1px solid rgba(255,107,157,0.2); border-radius:var(--radius); font-size:.9rem; color:var(--accent); margin-bottom:28px;}
.rv-login-link {color:var(--accent); font-weight:600; text-decoration:none;}
.rv-login-link:hover {text-decoration:underline;}

/* Cartes avis */
.rv-list  {display:flex; flex-direction:column; gap:14px;}
.rv-card  {background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:18px 20px; transition:border-color .2s;}
.rv-card:hover {border-color:var(--text);}
.rv-card-head {display:flex; align-items:center; gap:12px; margin-bottom:12px;}

/* Avatar (Lien cliquable) */
.rv-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rv-avatar img {width:100%; height:100%; object-fit:cover;}
.rv-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 0 3px rgba(255,107,157,0.3);
}

.rv-meta {flex:1; min-width:0;}

/* Auteur (Lien cliquable) */
.rv-author {
  font-size: .875rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  max-width: 100%;
  text-decoration: none;
  color: var(--text);
  transition: color 0.15s ease;
}
.rv-author:hover {
  color: var(--accent);
  text-decoration: underline;
}

.rv-date   {font-size:.75rem; color:var(--text-muted);}
.rv-stars-display {color:var(--accent-amber); font-size:.95rem; letter-spacing:1px;}
.rv-stars-display .off {color:rgba(255,255,255,0.15);}
.rv-comment {font-size:.875rem; line-height:1.6; color:var(--text-muted);}

/* Votes */
.rv-vote-row {display:flex; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border);}
.rv-vote-label {font-size:.75rem; color:var(--text-dim); margin-right:4px; flex:1;}
.rv-vote-btn {display:flex; align-items:center; gap:5px; padding:5px 12px; border-radius:20px; font-size:.8rem; font-family:inherit; cursor:pointer; transition:all .15s; background:var(--bg3); border:1px solid var(--border); color:var(--text-muted);}
.rv-vote-btn:hover {border-color:var(--text); color:var(--text);}
.rv-vote-btn:disabled {opacity:.4; cursor:not-allowed;}
.rv-vote-yes.voted {background:rgba(52,211,153,0.1); border-color:rgba(52,211,153,0.35); color:var(--accent2);}
.rv-vote-no.voted  {background:rgba(255,107,157,0.1); border-color:rgba(255,107,157,0.35); color:var(--accent);}
.rv-vote-num  {font-weight:600;}
.rv-vote-own  {font-size:.8rem; color:var(--text-dim); margin-left:auto;}
.rv-report-btn {background:none; border:none; color:var(--text-dim); font-size:.75rem; cursor:pointer; padding:4px 8px; border-radius:var(--radius-sm); font-family:inherit; transition:color .15s,background .15s; margin-left:auto;}
.rv-report-btn:hover {color:#ff6b78; background:rgba(255,71,87,0.08);}
.rv-report-btn:disabled {opacity:.4; cursor:not-allowed;}

/* Bouton "Voir tous les avis" sur fiche */
.rv-see-all-wrap {display:flex; justify-content:center; margin-top:24px;}
.rv-see-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 28px;
  border-radius: 24px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .2s;
}
.rv-see-all-btn:hover {border-color:var(--text); color:var(--accent);}
.rv-see-all-count {font-size:.8rem; color:var(--text-dim);}

/* Bouton "Voir plus" page dédiée */
.rv-load-more-wrap {display:flex; justify-content:center; margin-top:20px;}
.rv-load-more {padding:10px 28px; background:none; border:1px solid var(--border); border-radius:24px; color:var(--text-muted); font-size:.875rem; font-weight:500; font-family:inherit; cursor:pointer; transition:all .2s;}
.rv-load-more:hover {border-color:var(--text); color:var(--text);}
.rv-load-more-count {font-size:.75rem; color:var(--text-dim); margin-left:4px;}

/* Résumé + distribution (page dédiée) */
.rv-summary {display:flex; gap:32px; align-items:center; background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:24px 28px; margin-bottom:28px;}
.rv-summary-left {text-align:center; min-width:90px;}
.rv-avg-score {font-size:3rem; font-weight:600; line-height:1; color:var(--text); font-family:var(--serif);}
.rv-avg-stars {font-size:1.1rem; margin:6px 0 4px; letter-spacing:2px;}
.rv-avg-stars .on  {color:var(--accent-amber);}
.rv-avg-stars .off {color:rgba(255,255,255,0.15);}
.rv-avg-count {font-size:.8rem; color:var(--text-muted);}
.rv-dist-bars {flex:1; display:flex; flex-direction:column; gap:7px;}
.rv-dist-row {display:flex; align-items:center; gap:10px; background:none; border:1px solid transparent; border-radius:var(--radius-sm); padding:4px 8px; cursor:pointer; transition:border-color .15s,background .15s; font-family:inherit; color:var(--text);}
.rv-dist-row:hover  {border-color:var(--text); background:var(--bg3);}
.rv-dist-row.active {border-color:rgba(255,107,157,0.35); background:rgba(255,107,157,0.08);}
.rv-dist-label {font-size:.8rem; color:var(--text-muted); min-width:22px; text-align:right;}
.rv-dist-bar-bg   {flex:1; height:7px; background:var(--bg3); border-radius:var(--radius-sm); overflow:hidden;}
.rv-dist-bar-fill {height:100%; background:var(--accent); border-radius:var(--radius-sm); transition:width .4s ease;}
.rv-dist-count {font-size:.75rem; color:var(--text-dim); min-width:22px;}

/* Contrôles filtre + tri */
.rv-controls {display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:20px;}
.rv-filter-group,.rv-sort-group {display:flex; gap:6px; flex-wrap:wrap;}
.rv-ctrl-btn,.rv-sort-btn {padding:6px 14px; border-radius:20px; font-size:.8rem; font-weight:500; font-family:inherit; cursor:pointer; background:var(--bg2); border:1px solid var(--border); color:var(--text-muted); transition:all .15s;}
.rv-ctrl-btn:hover,.rv-sort-btn:hover {border-color:var(--text); color:var(--text);}
.rv-ctrl-btn.active {background:rgba(255,107,157,0.12); border-color:rgba(255,107,157,0.35); color:var(--accent);}
.rv-sort-btn.active {background:rgba(255,107,157,0.12); border-color:rgba(255,107,157,0.35); color:var(--accent);}

/* Header page dédiée */
.avo-header {margin-bottom:32px;}
.avo-skeleton-header {display:flex; gap:16px; align-items:center;}
.avo-header-inner {display:flex; flex-direction:column; gap:16px;}
.avo-back {font-size:.85rem; color:var(--text-muted); text-decoration:none; transition:color .15s;}
.avo-back:hover {color:var(--accent);}
.avo-tool-info {display:flex; align-items:center; gap:16px;}
.avo-tool-logo {width:56px; height:56px; border-radius:var(--radius); object-fit:contain; background:var(--bg2); border:1px solid var(--border); padding:6px;}
.avo-tool-logo-placeholder {width:56px; height:56px; border-radius:var(--radius); background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:700; color:#fff;}
.avo-tool-name {font-size:1.4rem; font-weight:600; font-family:var(--serif);}
.avo-tool-sub  {font-size:.85rem; color:var(--text-muted); margin-top:2px;}

/* Toast */
.rv-toast {position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--bg2); border:1px solid rgba(255,255,255,0.08); border-radius:24px; padding:10px 20px; font-size:.875rem; color:var(--text); opacity:0; transition:all .25s; z-index:999; white-space:nowrap; pointer-events:none;}
.rv-toast.show {opacity:1; transform:translateX(-50%) translateY(0);}

/* Responsive */
@media (max-width:600px) {
  .rv-summary {flex-direction:column; gap:20px; padding:20px;}
  .rv-summary-left {display:flex; align-items:center; gap:14px;}
  .rv-controls {flex-direction:column; align-items:flex-start;}
  .rv-vote-row {flex-wrap:wrap;}
  .avo-tool-name {font-size:1.1rem;}
}


/* ============================================================
   OFFLINE TAKEOVER — fiche d'un outil dont le lien est mort
   (status='offline' dans Firestore, écrit par check-liens.js)
   Reprend le langage visuel de 404.html : chiffres/texte en
   contour, mot souligné en rose, cartes-liens, ligne meta.
   ============================================================ */

.offline-page {
  position: relative;
  z-index: 1;
  padding: 4rem 2rem 5rem;
}
.offline-container {max-width:720px; margin:0 auto;}

.offline-giant {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.2rem, 10vw, 5rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,107,157,0.25);
  letter-spacing: -0.015em;
  user-select: none;
  margin-bottom: 0.5rem;
  word-break: break-word;
}

.offline-headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  line-height: 1.15;
  margin-bottom: 1.6rem;
}
.offline-headline .word-h {
  position: relative;
  display: inline-block;
  color: var(--accent);
}
.offline-headline .word-h::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

.offline-body-text {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  max-width: 560px;
}
.offline-body-text .em {color:var(--text); font-style:italic; font-weight:400;}

/* Bloc factuel résiduel — sérieux, pour le SEO */
.offline-about {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  margin-bottom: 2.2rem;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text-muted);
}
.offline-about strong {color:var(--text);}

.offline-divider {
  width: 3rem;
  height: 1px;
  background: var(--accent);
  margin-bottom: 1.6rem;
}

.offline-links-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 0.9rem;
}

.offline-links {display:flex; flex-direction:column; gap:0.75rem; margin-bottom:2rem;}
.offline-link-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 300;
  padding: 0.9rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg2);
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}
.offline-link-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.25s ease;
}
.offline-link-item:hover {
  border-color: var(--text);
  background: rgba(255,107,157,0.06);
}
.offline-link-item:hover::before {transform:scaleY(1);}
.offline-link-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.offline-link-main {display:block; font-size:0.95rem;}
.offline-link-sub {display:block; font-size:0.8rem; color:var(--text-dim); margin-top:2px;}
.offline-link-arrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: var(--accent);
  margin-left: auto;
  transition: transform 0.25s;
}
.offline-link-item:hover .offline-link-arrow {}

.offline-foot {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}
.offline-foot span {color:var(--accent);}

@media (max-width: 600px) {
  .offline-page {padding:2.5rem 1.2rem 3rem;}
  .offline-headline {font-size:clamp(1.2rem, 5.5vw, 1.6rem);}
  .offline-body-text {font-size:0.88rem;}
}

/* ── Utilité de l'outil (page des avis) ── */
.rv-summary-left {flex-direction:column;}
.rv-quick {margin-top:16px; padding-top:14px; border-top:1px solid var(--border); text-align:left;}
.rv-quick-q {font-size:.82rem; color:var(--text-muted); margin-bottom:10px;}
.rv-quick-btns {display:flex; gap:8px; flex-wrap:wrap;}
.rv-quick-btn {font-family:inherit; font-size:.82rem; font-weight:600; background:transparent; border:1px solid var(--border-hover); color:var(--text); border-radius:999px; padding:7px 16px; cursor:pointer; transition:background .15s,border-color .15s;}
.rv-quick-btn:hover {background:var(--bg3);}
.rv-quick-btn.yes[aria-pressed="true"] {border-color:var(--accent2); color:var(--accent2); background:rgba(52,211,153,.08);}
.rv-quick-btn.no[aria-pressed="true"]  {border-color:var(--accent); color:var(--accent); background:rgba(255,107,157,.08);}
.rv-useful {min-width:200px; flex:1; max-width:260px;}
.rv-useful-title {font-size:.95rem; font-weight:600; font-family:var(--serif); margin-bottom:10px;}
.rv-useful-pct {font-size:1.5rem; font-weight:800; color:var(--accent2); margin-bottom:6px;}
.rv-useful-counts {font-size:.85rem; color:var(--text-muted); margin-bottom:12px;}
.rv-useful-bar {height:8px; background:var(--bg3); border-radius:var(--radius-sm); overflow:hidden;}
.rv-useful-bar-fill {height:100%; background:var(--accent2); border-radius:var(--radius-sm); transition:width .4s ease;}
.rv-useful-empty {font-size:.85rem; color:var(--text-dim);}
@media (max-width:640px) {
  .rv-useful {max-width:none; width:100%;}
}

/* ── En-tête outil + pagination (page des avis) ── */
.avo-head-row {display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap;}
.avo-tool-desc {font-size:.9rem; color:var(--text-muted); margin-top:4px; max-width:460px;}
.avo-tags {display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.avo-tag {font-size:.75rem; color:var(--text-muted); border:1px solid var(--border-hover); border-radius:999px; padding:3px 12px;}
.avo-actions {display:flex; gap:10px; flex-wrap:wrap;}
.avo-btn {font-size:.82rem; font-weight:600; color:var(--text); text-decoration:none; border:1px solid var(--border-hover); border-radius:999px; padding:8px 16px; transition:background .15s;}
.avo-btn:hover {background:var(--bg3);}
.rv-useful-note {font-size:.8rem; color:var(--text-dim); margin-top:12px;}
.rv-pager {display:flex; justify-content:center; align-items:center; gap:8px; margin-top:28px; flex-wrap:wrap;}
.rv-page {min-width:34px; height:34px; font-family:inherit; font-size:.85rem; background:var(--bg2); border:1px solid var(--border); color:var(--text-muted); border-radius:var(--radius-sm); cursor:pointer;}
.rv-page:hover:not(:disabled) {border-color:var(--text); color:var(--text);}
.rv-page.active {background:var(--accent); border-color:var(--accent); color:#fff;}
.rv-page:disabled {opacity:.35; cursor:default;}
.rv-page-gap {color:var(--text-dim);}

/* ── Filtres des avis ── */
.rv-controls {gap:12px;}
.rv-filter-group {display:flex; gap:8px; overflow-x:auto; flex-wrap:nowrap; max-width:100%; padding-bottom:4px; scrollbar-width:none;}
.rv-filter-group::-webkit-scrollbar {display:none;}
.rv-ctrl-btn {flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.rv-ctrl-count {font-size:.7rem; opacity:.65;}
.rv-ctrl-btn.active {background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; box-shadow:0 0 0 3px rgba(108,92,231,.25);}
.rv-ctrl-btn.active .rv-ctrl-count {opacity:.9;}
.rv-sort-btn.active {font-weight:700;}
.avo-share {display:inline-flex; align-items:center; gap:7px; font-family:inherit; background:transparent; cursor:pointer;}

/* ── Titre de la section des avis ── */
.avo-section-title {font-family:var(--serif); font-size:1.4rem; font-weight:600; color:var(--text); margin:36px 0 16px; letter-spacing:-.01em;}

/* ── Mobile : la répartition des étoiles doit occuper toute la largeur ── */
@media (max-width: 640px) {
  .rv-summary {align-items:stretch;}
  .rv-summary-left {align-items:center;}
  .rv-quick {width:100%;}
  .rv-dist-bars {flex:none; width:100%;}
  .rv-dist-row {width:100%; box-sizing:border-box;}
  .rv-dist-bar-bg {flex:1 1 auto; min-width:60px;}
  .rv-dist-label {min-width:28px;}
  .rv-dist-count {min-width:28px; text-align:right;}
  .rv-useful {min-width:0;}
}