/* ============================================
   OUTILS : hub, recherche booléenne, taux d'engagement
   (chargé après css/style.css)
   ============================================ */
.tools-hero { padding: var(--space-xl) var(--gutter-width) var(--space-md); max-width: var(--max-content-width); margin: 0 auto; }
.tools-hero h1 { font-size: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem); margin-bottom: var(--space-sm); }
.tools-hero p { color: var(--text-secondary); max-width: 720px; margin: 0; line-height: 1.6; }
.breadcrumb { font-size: var(--font-size-sm); color: var(--text-muted); margin-bottom: var(--space-sm); }
.breadcrumb a { color: var(--text-secondary); }

/* hub */
.tool-grid { display: grid; gap: var(--space-md); grid-template-columns: minmax(0, 1fr); max-width: var(--max-content-width); margin: 0 auto; padding: var(--space-md) var(--gutter-width) var(--space-xl); }
.tool-tile {
  display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg);
  background: var(--color-white); border: 1px solid var(--border-medium); border-radius: var(--radius-xl);
  text-decoration: none; color: inherit; transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}
.tool-tile:hover, .tool-tile:focus-visible { border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tool-tile:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.tool-tile-icon { font-size: 1.75rem; line-height: 1; }
.tool-tile h2 { font-size: var(--font-size-xl); margin: var(--space-xs) 0 0; text-align: left; }
.tool-tile p { margin: 0; color: var(--text-secondary); line-height: 1.5; flex: 1; }
.tool-tile-cta { margin-top: var(--space-sm); font-weight: 700; color: var(--color-primary-text, #1e7e34); }

/* disposition outil : formulaire + résultat */
.tool-layout { display: grid; gap: var(--space-lg); grid-template-columns: minmax(0, 1fr); max-width: var(--max-content-width); margin: 0 auto; padding: var(--space-md) var(--gutter-width) var(--space-xl); align-items: start; }
.tool-panel { background: var(--color-white); border: 1px solid var(--border-medium); border-radius: var(--radius-xl); padding: var(--space-lg); min-width: 0; }
.tool-panel h2 { font-size: var(--font-size-lg); margin: 0 0 var(--space-md); text-align: left; }
.tool-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

.field { display: grid; gap: var(--space-xxs); min-width: 0; margin-bottom: var(--space-md); }
.field label { font-size: var(--font-size-sm); font-weight: 700; color: var(--text-secondary); }
.field .hint { font-size: var(--font-size-sm); color: var(--text-muted); margin: 0; }
.field textarea, .field input[type="text"], .field select {
  width: 100%; min-width: 0; padding: var(--space-sm); font: inherit; font-size: 16px; color: var(--text-primary);
  background: var(--color-white); border: 1px solid var(--border-input, #8a939c); border-radius: var(--radius-md);
}
.field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.field textarea:focus, .field input:focus, .field select:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }
.check { display: flex; align-items: center; gap: var(--space-xs); font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-md); }
.check input { width: 20px; height: 20px; flex: none; }

.btn { min-height: 48px; padding: 0 var(--space-lg); font: inherit; font-weight: 700; border-radius: var(--radius-md); cursor: pointer; border: 1px solid var(--color-primary); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; text-align: center; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover:not(:disabled):not(.is-disabled) { background: var(--color-primary-dark); }
.btn-secondary { background: var(--color-white); color: var(--color-primary-text, #1e7e34); }
.btn-secondary:hover:not(:disabled):not(.is-disabled) { background: var(--color-primary-bg); }
.btn:disabled, .btn.is-disabled { opacity: 0.5; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.link-btn { background: none; border: 0; padding: var(--space-xs); font: inherit; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); text-decoration: underline; cursor: pointer; min-height: 44px; }

/* résultat booléen */
.query-output {
  width: 100%; min-height: 140px; padding: var(--space-sm); font-family: var(--font-family-mono); font-size: 0.9375rem; line-height: 1.5;
  background: var(--color-gray-50); color: var(--text-primary); border: 1px solid var(--border-input, #8a939c); border-radius: var(--radius-md); resize: vertical;
}
.stats-line { margin: var(--space-xs) 0 0; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-secondary); }
.warn { margin: var(--space-sm) 0 0; padding: var(--space-sm); background: #fff8e1; border: 1px solid #f0c36d; border-radius: var(--radius-md); font-size: var(--font-size-sm); color: #5f4600; }
.warn[hidden] { display: none; }

/* calculateur d'engagement */
.post-card { padding: var(--space-md); margin-bottom: var(--space-md); background: var(--color-gray-50); border: 1px solid var(--border-light); border-radius: var(--radius-lg); }
.post-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.post-card-head h3 { font-size: var(--font-size-base); margin: 0; }
.field-grid { display: grid; gap: 0 var(--space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid .field { margin-bottom: var(--space-sm); }
.post-result { margin: var(--space-xs) 0 0; font-size: var(--font-size-sm); font-weight: 700; color: var(--text-secondary); min-height: 1.4em; }
.post-result.has-value { color: var(--color-primary-text, #1e7e34); }
.big-rate { font-size: clamp(2.5rem, 2rem + 3vw, 3.5rem); font-weight: 800; line-height: 1; margin: 0; color: var(--text-primary); }
.big-caption { margin: var(--space-xs) 0 var(--space-sm); color: var(--text-secondary); font-weight: 600; }
.badge { display: inline-block; margin: 0 0 var(--space-md); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: 700; }
.badge-good { background: #d4edda; color: #14532d; }
.badge-mid { background: #e8f0fe; color: #1e3a8a; }
.badge-low { background: #fde8e8; color: #7f1d1d; }
.stat-list { display: grid; grid-template-columns: 1fr auto; gap: var(--space-xs) var(--space-md); margin: 0; }
.stat-list dt { color: var(--text-secondary); }
.stat-list dd { margin: 0; font-weight: 700; text-align: right; }
.muted { color: var(--text-muted); margin: 0; }

/* contenu pédagogique */
.tool-article { max-width: 820px; margin: 0 auto; padding: var(--space-xl) var(--gutter-width); }
.tool-article h2 { text-align: left; font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.625rem); margin: var(--space-xl) 0 var(--space-sm); }
.tool-article h2:first-child { margin-top: 0; }
.tool-article p, .tool-article li { color: var(--text-secondary); line-height: 1.65; }
.tool-article ul { padding-left: var(--space-lg); margin: 0 0 var(--space-md); }
.tool-article code { padding: 1px 6px; background: var(--color-gray-100); border-radius: var(--radius-sm); font-family: var(--font-family-mono); font-size: 0.9em; color: var(--text-primary); }
.syntax-table { width: 100%; border-collapse: collapse; margin: var(--space-sm) 0 var(--space-md); font-size: var(--font-size-sm); }
.syntax-table th, .syntax-table td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--border-light); vertical-align: top; color: var(--text-secondary); }
.syntax-table th { color: var(--text-primary); }
.source-note { font-size: var(--font-size-sm); color: var(--text-muted); }

@media (min-width: 700px) {
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .tool-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .tool-layout .tool-result { position: sticky; top: calc(var(--header-height, 60px) + var(--space-md)); }
}

/* Bloc didactique « À quoi ça sert ? » */
.tool-intro { max-width: 1000px; margin: 0 auto; padding: var(--space-md) var(--gutter-width) var(--space-lg); }
.tool-intro h2 { margin-bottom: var(--space-xs); }
.tool-intro h3 { margin: var(--space-md) 0 var(--space-xs); font-size: 1.05rem; }
.intro-lead { font-size: 1.05rem; line-height: 1.6; margin: 0 0 var(--space-md); max-width: 760px; }
.intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin-bottom: var(--space-md); }
.intro-card { background: var(--color-white); border: 1px solid var(--border-medium); border-radius: 12px; padding: var(--space-md); }
.intro-card h3 { margin: 0 0 4px; font-size: 1rem; }
.intro-card p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--text-secondary, #4f5963); }
.intro-rules { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); }
.intro-rules p { margin: 0; padding: 10px 14px; background: var(--tint-green, #eef6f0); border-left: 4px solid #1e7e34; border-radius: 6px; font-size: .95rem; }
.intro-steps { margin: 0; padding-left: 1.3rem; line-height: 1.6; }
.formula { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; background: var(--tint-green, #eef6f0); border-left: 4px solid #1e7e34; border-radius: 6px; margin-bottom: var(--space-sm); }
.formula-title { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-primary-text, #1e7e34); }
.formula code { font-size: 1rem; white-space: normal; overflow-wrap: anywhere; }
.mini-example { margin: 0; line-height: 1.6; }
@media (max-width: 760px) { .intro-grid, .intro-rules { grid-template-columns: 1fr; } }

/* Tableaux comparatifs et changelog */
.compare-wrap { overflow-x: auto; margin: var(--space-md) 0; border: 1px solid var(--border-medium); border-radius: 12px; background: var(--color-white); }
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .95rem; }
.compare-table th, .compare-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border-light); line-height: 1.45; }
.compare-table thead th { background: var(--tint-green, #eef6f0); font-weight: 700; position: sticky; top: 0; }
.compare-table tbody th { font-weight: 600; width: 22%; color: var(--text-primary); }
.compare-table td:nth-child(2) { background: color-mix(in srgb, var(--tint-green, #eef6f0) 55%, transparent); }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.log-entry { margin: 0 0 var(--space-lg); padding: var(--space-md); background: var(--color-white); border: 1px solid var(--border-medium); border-radius: 12px; }
.log-entry h2 { font-size: 1.15rem; margin: 0 0 var(--space-xs); }
.log-entry time { font-weight: 700; color: var(--color-primary-text, #1e7e34); }
.log-entry ul { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.tools-hero .btn { margin-top: var(--space-sm); }

/* Listes dans les cartes d'introduction (comparatifs) */
.intro-card ul {
  margin: 0;
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-xs);
}