/* Recherches (Questions), Visibilité Google et carte de chaleur « IA par IA » (Concurrents) : dossier/24, D11 et D12.
   Aucun littéral de couleur : les jetons de ../assets/tokens.css (dont --chaleur-1 à 3, rampe validée par la skill
   dataviz en mode sombre et clair). Chargée après ecrans.css : ses règles de grille de Questions l'emportent. */

/* ---------- Questions : la colonne « Recherches » (volume, petite courbe, CPC et concurrence) ---------- */
@media (min-width: 901px) { /* au-dessous, la grille du téléphone d'ecrans.css (deux colonnes) reste maîtresse */
  .q-entete, .q-bouton { grid-template-columns: minmax(0, 1fr) 156px var(--q-pres, 300px) 112px 20px; }
}
.q-rech { display: grid; align-content: center; gap: 2px; min-width: 0; }
.q-rech-haut { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.q-rech-haut b { font-size: 15px; color: var(--encre); white-space: nowrap; }
.q-rech .q-vol { white-space: nowrap; }
.q-rech-courbe { flex: none; overflow: visible; }
.q-rech-cpc { font-size: var(--taille-etiquette); color: var(--encre-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-rech-vide { font-size: 15px; color: var(--encre-3); }

/* Offre gratuite : des formes floutées (jamais de fausses valeurs) et un cadenas. */
.q-rech-verrou { position: relative; align-content: center; justify-items: start; min-height: 40px; }
.q-rech-flou { display: grid; gap: 6px; width: 100%; filter: blur(3px); opacity: 0.75; }
.q-rech-flou i { display: block; height: 8px; border-radius: var(--rayon-pilule); background: var(--voile-4); }
.q-rech-flou i:nth-child(1) { width: 62%; height: 11px; background: var(--encre-3); }
.q-rech-flou i:nth-child(2) { width: 88%; background: var(--bleu-trait); }
.q-rech-flou i:nth-child(3) { width: 48%; }
.q-rech-cadenas { position: absolute; inset: 0; display: grid; place-items: center; color: var(--encre-2); }

/* Le bloc « Recherches » en tête du détail d'une question */
.q-rech-bloc { display: grid; gap: 14px; margin: 14px 0 6px; padding: 16px 18px; border-radius: var(--rayon-3); background: var(--voile-2); border: 1px solid var(--trait); box-shadow: var(--trait-lumiere); }
.q-rech-bloc-vide { gap: 0; padding: 12px 16px; }
.q-rech-titre { font-size: var(--taille-petit); font-weight: var(--graisse-moyenne); color: var(--encre); overflow-wrap: anywhere; }
.q-rech-chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 12px 24px; }
.q-rech-chiffre { display: grid; gap: 4px; }
.q-rech-chiffre[title] .etiquette { text-decoration: underline dotted var(--encre-3); text-underline-offset: 3px; cursor: help; }
.q-rech-valeur { font-size: 20px; font-weight: var(--graisse-moyenne); line-height: 1.2; color: var(--encre); }
.q-rech-graphe { position: relative; max-width: 600px; }
.q-rech-mois { display: block; width: 100%; height: auto; overflow: visible; }
.q-rech-mois .base { stroke: var(--trait-fort); stroke-width: 1; }
.q-rech-mois .etiq { font-family: var(--police); font-size: 11px; fill: var(--encre-2); }
.q-rech-mois .val { font-family: var(--police); font-size: 12px; font-weight: var(--graisse-moyenne); fill: var(--encre); font-variant-numeric: tabular-nums; }

/* L'aperçu « Disponible avec Solo » (Questions, Visibilité Google) */
.q-rech-apercu {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 18px 28px;
  margin: 0 0 16px; padding: 20px 22px; border-radius: var(--rayon-3); background: var(--voile-2); border: 1px solid var(--trait);
  box-shadow: var(--trait-lumiere); overflow: hidden;
}
.carte .q-rech-apercu { margin: 0; padding: 4px 0 0; background: none; border: 0; box-shadow: none; }
.q-rech-apercu-flou { display: grid; gap: 12px; filter: blur(5px); opacity: 0.85; pointer-events: none; user-select: none; }
.q-rech-fausse-ligne { display: grid; grid-template-columns: minmax(0, 1fr) 64px 60px; align-items: center; gap: 12px; }
.q-rech-fausse-ligne i { display: block; width: var(--l, 70%); height: 10px; border-radius: var(--rayon-pilule); background: var(--voile-4); }
.q-rech-fausse-ligne b { display: block; height: 14px; border-radius: var(--rayon-1); background: var(--encre-3); }
.q-rech-fausse-ligne span { display: block; height: 20px; border-radius: var(--rayon-1); background: linear-gradient(90deg, var(--voile-3), var(--bleu)); opacity: 0.7; }
.q-rech-apercu-texte { display: grid; justify-items: start; gap: 8px; }
.q-rech-apercu-texte .btn { margin-top: 4px; }
.q-rech-apercu-badge {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 12px; border-radius: var(--rayon-pilule);
  background: var(--bleu-voile); border: 1px solid var(--bleu-trait); font-size: var(--taille-etiquette); font-weight: var(--graisse-moyenne); color: var(--bleu-clair);
}
.q-rech-apercu-badge span { display: grid; }
.q-rech-apercu-titre { font-size: var(--taille-h3); font-weight: var(--graisse-moyenne); line-height: 1.3; letter-spacing: var(--approche-h3); color: var(--encre); }
.vg-fausse-ligne { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 12px; }
.vg-fausse-ligne i { display: block; width: 24px; height: 24px; border-radius: 50%; background: var(--voile-4); }
.vg-fausse-ligne b { display: block; width: var(--l, 60%); height: 8px; border-radius: var(--rayon-pilule); background: var(--bleu); opacity: 0.7; }

@media (max-width: 900px) {
  .q-rech { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
  .q-rech-haut { order: 1; justify-content: flex-start; }
  .q-rech .q-vol { order: 2; }
  .q-rech-cpc { order: 3; }
  .q-rech-verrou { display: grid; grid-template-columns: minmax(0, 1fr); width: 160px; min-height: 30px; } /* ecrans.css pose deux colonnes « auto » à .q-demande */
  .q-rech-apercu { grid-template-columns: 1fr; padding: 16px; }
  .q-rech-apercu-flou { order: 2; }
  .q-rech-bloc { padding: 14px; }
}

/* ---------- Concurrents : « IA par IA », la carte de chaleur ---------- */
.carte-chaleur:hover { --carte-voile: var(--voile-2); border-color: var(--trait); } /* la surface du graphique ne bouge pas sous lui */
.chaleur-boite { position: relative; }
.matrice.mat-chaleur { border-collapse: separate; border-spacing: 3px; }
.matrice.mat-chaleur th, .matrice.mat-chaleur td { border-bottom: 0; }
.matrice.mat-chaleur thead th { padding: 6px 4px 10px; border-bottom: 0; }
.matrice.mat-chaleur tbody th { padding: 6px 12px 6px 8px; border-radius: var(--rayon-1); }
.matrice.mat-chaleur tr.moi th { background: var(--bleu-voile); box-shadow: inset 3px 0 0 var(--bleu); }
.matrice.mat-chaleur tr.moi td.inconnu { background: none; }
.matrice.mat-chaleur tr.moi .mat-nom { font-weight: var(--graisse-forte); }
/* Survol calme (dossier/26, R11) : aucune transition ni filtre ; la case survolée prend un contour fin à l'encre du thème.
   L'info-bulle n'a plus d'ombre portée : sa grande ombre assombrissait les cases sous elle, d'une case à l'autre. */
.chaleur-case {
  position: relative; height: 50px; min-width: 64px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--rayon-1);
  text-align: center; vertical-align: middle; cursor: default; outline: none;
}
.matrice.mat-chaleur td.chaleur-case { height: 50px; padding: 0 6px; vertical-align: middle; }
.matrice.mat-chaleur .chaleur-case.c1 { background: var(--chaleur-1); }
.matrice.mat-chaleur .chaleur-case.c2 { background: var(--chaleur-2); }
.matrice.mat-chaleur .chaleur-case.c3 { background: var(--chaleur-3); }
.matrice.mat-chaleur .chaleur-case.c0 { background: none; border: 1px dotted var(--encre-3); }
.chaleur-case.inconnu { color: var(--encre-3); }
.chaleur-v { font-size: 14px; font-weight: var(--graisse-moyenne); color: var(--encre); font-variant-numeric: tabular-nums; }
.chaleur-case.c0 .chaleur-v { color: var(--encre-2); }
.chaleur-case.en-tete::after {
  content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
  border-top: 10px solid var(--encre); border-left: 10px solid transparent; border-top-right-radius: var(--rayon-1);
}
.chaleur-case:hover { box-shadow: inset 0 0 0 1px var(--encre); }
.chaleur-case:focus-visible { box-shadow: var(--anneau-focus); }
.chaleur-bulle {
  position: absolute; top: 0; left: 0; z-index: 5; display: grid; gap: 2px; max-width: 280px; padding: 8px 12px;
  border-radius: var(--rayon-2); background: var(--panneau-2); border: 1px solid var(--trait-fort); box-shadow: var(--trait-lumiere);
  font-size: var(--taille-petit); line-height: 1.4; color: var(--encre-2); pointer-events: none; opacity: 0;
  transition: opacity 80ms linear;
}
.chaleur-bulle b { font-size: 15px; color: var(--encre); }
.chaleur-bulle.visible { opacity: 1; }
.chaleur-legende .chaleur-leg-item { display: inline-flex; align-items: center; gap: 8px; }
.chaleur-legende i.chaleur-leg { position: relative; width: 16px; height: 12px; border-radius: 3px; }
.chaleur-legende i.chaleur-leg.c0 { background: none; border: 1px dotted var(--encre-3); }
.chaleur-legende i.chaleur-leg.c1 { background: var(--chaleur-1); }
.chaleur-legende i.chaleur-leg.c2 { background: var(--chaleur-2); }
.chaleur-legende i.chaleur-leg.c3 { background: var(--chaleur-3); }
.chaleur-legende i.chaleur-leg.tete { background: var(--voile-3); }
.chaleur-legende i.chaleur-leg.tete::after {
  content: ""; position: absolute; top: 0; right: 0; border-top: 7px solid var(--encre); border-left: 7px solid transparent; border-top-right-radius: 3px;
}
@media (max-width: 600px) {
  .matrice.mat-chaleur thead th + th, .matrice.mat-chaleur td { width: 72px; min-width: 72px; }
  .matrice.mat-chaleur tbody th { padding-left: 16px; }
  .matrice.mat-chaleur tr.moi th { background: linear-gradient(var(--bleu-voile), var(--bleu-voile)), linear-gradient(var(--carte-voile), var(--carte-voile)), var(--fond); }
}

/* ---------- Concurrents : « Visibilité Google » ---------- */
.vg-wrap { margin-top: 4px; }
.vg-tableau th:first-child { width: 34%; }
.vg-tableau .mat-nom { font-size: 14px; }
.vg-tableau tr.moi th, .vg-tableau tr.moi td { background: var(--voile-1); }
.vg-tableau tr.moi .mat-nom { font-weight: var(--graisse-forte); }
.vg-tableau tbody th { padding: 10px 12px; border-bottom: 1px solid var(--trait); text-align: left; }
.vg-tableau tr:last-child th { border-bottom: 0; }
.vg-col-trafic { min-width: 200px; }
.vg-trafic { min-width: 200px; }
.vg-trafic .piste { display: block; margin-top: 6px; }
.vg-trafic-v { font-weight: var(--graisse-moyenne); }
.vg-sans td { color: var(--encre-3); }
.vg-note { margin-top: 12px; }
.vg-mois { margin: -4px 0 4px; }
.vg-nom { display: grid; gap: 2px; min-width: 0; white-space: normal; }
.vg-mc { display: none; white-space: nowrap; font-size: var(--taille-etiquette); font-weight: var(--graisse-corps); color: var(--encre-2); font-variant-numeric: tabular-nums; }
/* Téléphone : les mots-clés passent sous le nom (la colonne se cache) ; visites et écart restent sans défilement. */
@media (max-width: 600px) {
  .vg-col-mc, .vg-td-mc { display: none; }
  .vg-mc { display: block; }
  .vg-tableau th, .vg-tableau td, .vg-tableau tbody th { padding-left: 8px; padding-right: 8px; }
  .vg-col-trafic, .vg-trafic { min-width: 104px; }
  .vg-tableau thead th { white-space: normal; vertical-align: bottom; } /* « Month on month » passe sur deux lignes */
  .vg-tableau th:first-child { width: auto; }
}