/* Pilot lot "qc-hubs" (inc-pilote-hubs.php): brands ranking cards, duel FAQ, comparisons index.
   Loaded only on /marques/, the comparisons index and duel pages of a pilot site. Secondary text
   uses --ink-soft (not --ink-mute, 3:1 on the sage background, audit 30/09). */

/* (a) Brands ranking */
.qos-hubs-marques{margin:8px 0 40px}
.qos-hubs-marques>h2{font-size:clamp(24px,2.4vw,32px);margin:0 0 6px}
.qos-hubs-lead,.qos-hubs-note{color:var(--ink-soft);font-size:15px;line-height:1.55;max-width:760px;margin:0 0 20px}
.qos-hubs-note{font-size:13.5px;margin:18px 0 0}
.qos-hubs-marques-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.qos-hubs-marque{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:calc(16px*var(--rk,1));padding:16px 18px 18px;box-shadow:var(--shadow-sm)}
.qos-hubs-rang{position:absolute;top:12px;left:12px;z-index:1;min-width:34px;height:34px;padding:0 8px;border-radius:999px;background:var(--forest-deep);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.qos-hubs-visuel{display:block;aspect-ratio:16/10;border-radius:calc(12px*var(--rk,1));background:var(--cream);overflow:hidden}
.qos-hubs-visuel img{width:100%;height:100%;object-fit:contain;display:block}
.qos-hubs-visuel svg{width:60%;height:100%;margin:0 auto;display:block;color:var(--line)}
.qos-hubs-marque h3{font-size:21px;margin:4px 0 0}
.qos-hubs-marque h3 a{color:var(--ink);text-decoration:none}
.qos-hubs-marque h3 a:hover{text-decoration:underline}
.qos-hubs-chiffres{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;font-size:14px;color:var(--ink-soft)}
.qos-hubs-chiffres strong{color:var(--ink);font-size:16px;font-variant-numeric:tabular-nums}
.qos-hubs-meilleur{margin:0;font-size:14.5px;color:var(--ink-soft)}
.qos-hubs-meilleur a{color:var(--forest-deep);font-weight:600}
.qos-hubs-meilleur .num{font-weight:700;color:var(--ink);white-space:nowrap}
.qos-hubs-hors{margin:0;font-size:13.5px;color:var(--ink-soft);font-style:italic}
.qos-hubs-lien{margin-top:auto;padding-top:6px;font-weight:600;font-size:14.5px;color:var(--forest-deep);text-decoration:none}
.qos-hubs-lien:hover{text-decoration:underline}
@media(max-width:980px){.qos-hubs-marques-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.qos-hubs-marques-grille{grid-template-columns:1fr}}

/* (b) Duel FAQ */
.qos-hubs-faq{margin:40px 0}
.qos-hubs-faq>h2{margin:0 0 14px}
.qos-hubs-faq-item{border-top:1px solid var(--line);padding:16px 0}
.qos-hubs-faq-item:last-child{border-bottom:1px solid var(--line)}
.qos-hubs-faq-item h3{font-size:17px;margin:0 0 6px;color:var(--ink)}
.qos-hubs-faq-item p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink);max-width:820px}

/* (c) Comparisons index */
.qos-hubs-duels{margin:18px 0 40px}
.qos-hubs-filtres{background:var(--paper);border:1px solid var(--line);border-radius:calc(14px*var(--rk,1));padding:14px 16px;margin:0 0 20px;display:flex;flex-direction:column;gap:10px}
.qos-hubs-filtre{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.qos-hubs-filtre-k{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);min-width:130px}
.qos-hubs-puce{font:inherit;font-size:13.5px;border:1px solid var(--line);background:var(--cream);color:var(--ink);border-radius:999px;padding:5px 12px;cursor:pointer}
.qos-hubs-puce .num{font-size:12px;color:var(--ink-soft);margin-left:2px}
.qos-hubs-puce:hover{border-color:var(--forest)}
.qos-hubs-puce.is-on{background:var(--forest-deep);border-color:var(--forest-deep);color:#fff}
.qos-hubs-puce.is-on .num{color:#fff}
.qos-hubs-puce:focus-visible{outline:2px solid var(--forest);outline-offset:2px}
.qos-hubs-compte{margin:0;font-size:13.5px;color:var(--ink-soft)}
.qos-hubs-duels-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.qos-hubs-duel{display:flex;flex-direction:column;gap:8px;background:var(--paper);border:1px solid var(--line);border-radius:calc(14px*var(--rk,1));padding:12px 12px 14px;color:var(--ink);text-decoration:none;box-shadow:var(--shadow-sm);transition:border-color .15s,transform .15s}
.qos-hubs-duel:hover{border-color:var(--forest);transform:translateY(-2px)}
.qos-hubs-duel[hidden]{display:none}
.qos-hubs-duel-photos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.qos-hubs-duel-photos img,.qos-hubs-duel-photos svg{width:100%;aspect-ratio:1/1;height:auto;object-fit:contain;background:var(--cream);border-radius:calc(10px*var(--rk,1));display:block}
.qos-hubs-duel-photos svg{color:var(--line);padding:18%}
.qos-hubs-ou{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--gold);color:#fff;font-style:italic;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.qos-hubs-duel-noms{font-size:15px;line-height:1.4}
.qos-hubs-duel-noms span{color:var(--ink-soft);font-style:italic}
.qos-hubs-duel-meta{font-size:13.5px;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.qos-hubs-vide{color:var(--ink-soft);padding:16px 0}
@media(max-width:980px){.qos-hubs-duels-grille{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.qos-hubs-duels-grille{grid-template-columns:1fr}.qos-hubs-filtre-k{min-width:0;width:100%}}