/* PILOT VISUAL FIXES (lot qc-visuel, inc-pilote-visuel.php). Pilot site only: every rule is
 * scoped under body.is-pilote, loaded after app.css and the other pilote-*.css sheets. */

/* ---------- 1. Text contrast: every text token at 4.5:1 or more ----------
 * The pilot palette (Branding machine) set --ink-soft #767d72 and --ink-mute #a1a79e: 3.93:1 and
 * 2.28:1 on the page background, 1.78:1 on the sage cards (--mint). The two text tokens are now
 * derived from the site's own ink, mixed with its own background: they keep the palette's hue on
 * any site of the fleet and stay readable on cream, paper, white and mint (ratios in the lot
 * report). --qos-or-texte is the gold accent darkened for the few places it colours text. */
body.is-pilote{
  --ink-soft:color-mix(in srgb,var(--ink) 86%,var(--cream));
  --ink-mute:color-mix(in srgb,var(--ink) 74%,var(--cream));
  --qos-or-texte:color-mix(in srgb,var(--gold) 45%,var(--ink));
}
body.is-pilote .pod .rank,
body.is-pilote .rappel-src a,
body.is-pilote .lex-voir{color:var(--qos-or-texte)}
/* The smallest grey texts also get a readable size (affiliate disclosure, AI visuals note, the
 * "Note globale" label at 10px). */
body.is-pilote .aff-notice{font-size:12.5px}
body.is-pilote .gallery-note{font-size:12.5px}
body.is-pilote .cta-box .cta-score .lbl{font-size:11.5px}

/* ---------- 2. Pros / cons: one icon per line ----------
 * app.css draws a round icon in li::after (l.722-723) and tried to remove the old text glyph
 * with ".pc li::before{content:none}" (l.720), which loses to ".pc.pros li::before" (l.390-391,
 * higher specificity): every line showed a check twice. */
body.is-pilote .pc.pros li::before,
body.is-pilote .pc.cons li::before{content:none}

/* ---------- 3. Home: the stars say the average score ----------
 * front-page.php passes the score as --qos-note (8/10 = 80%): the five glyphs are painted with a
 * gold part and an empty part at that exact width, instead of five full stars for any score. */
body.is-pilote .hero .trust .stars[style*="--qos-note"]{
  display:inline-block;letter-spacing:0;color:transparent;
  background:linear-gradient(90deg,var(--qos-or-texte) var(--qos-note),color-mix(in srgb,var(--ink) 28%,transparent) var(--qos-note));
  -webkit-background-clip:text;background-clip:text}

/* ---------- 4. Fiche on a phone: title, score and main button before the gallery ----------
 * Same markup, no duplicate: the card box is dissolved (display:contents) so its children
 * become items of the fiche grid, then ordered: badge, H1, brand line and the score + button
 * block first, the gallery next, then the rest of the card (merchants, sharing, sub-scores). */
@media(max-width:860px){
  body.is-pilote.single-test .fiche-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
  body.is-pilote.single-test .fiche-grid > .fiche-card{display:contents}
  body.is-pilote.single-test .fiche-grid > .fiche-media{order:1;margin:18px 0 6px}
  body.is-pilote.single-test .fiche-card > .cta-box ~ *,
  body.is-pilote.single-test .fiche-card > .prefer-box ~ *{order:2}
  body.is-pilote.single-test .fiche-card > .badge{justify-self:start;margin-bottom:10px}
  body.is-pilote.single-test .fiche-card > .cta-box,
  body.is-pilote.single-test .fiche-card > .prefer-box{margin-top:14px}
  body.is-pilote.single-test .fiche-card > .subscores{margin-top:18px}
}

/* ---------- 5. "Ma selection", empty ----------
 * The empty-state cards had no grid at all (".grille-produits" is styled nowhere): one card
 * per line with a 1 200 px photo. Same grid as the collection cards. */
body.is-pilote .qos-selection .grille-produits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
@media(max-width:980px){body.is-pilote .qos-selection .grille-produits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){body.is-pilote .qos-selection .grille-produits{gap:12px}}
body.is-pilote .qos-sel-vide{margin-top:0;padding-top:14px}
body.is-pilote .qos-sel-vide .rubrique{margin:26px 0 14px}
/* The head script (inc-pilote-visuel.php) already knows the list is empty: the server-rendered
 * empty state shows at once, at its final size, and the loading dots never take room. When a
 * list is waiting to be fetched, room for about one row of cards is reserved instead. */
html.qos-sel-vide-sur body.is-pilote .qos-sel-vide[hidden]{display:block}
html.qos-sel-vide-sur body.is-pilote .qos-sel-attente{display:none}
html.qos-sel-pleine body.is-pilote .qos-sel-contenu[aria-busy="true"]{min-height:420px}
@media(max-width:560px){html.qos-sel-pleine body.is-pilote .qos-sel-contenu[aria-busy="true"]{min-height:560px}}

/* ---------- 6. Collection pages ---------- */
/* Filters visible on a computer: the "drawer" and "top" layout variants hid every filter behind
 * a button; on the pilot the filter column is always there from 861px up (same column as the
 * default layout), and the button/sheet mechanics stay for phones. */
@media(min-width:861px){
  body.is-pilote.qv-coll-filters-drawer .coll-layout,
  body.is-pilote.qv-coll-filters-top .coll-layout{grid-template-columns:270px minmax(0,1fr)}
  body.is-pilote.qv-coll-filters-drawer .filters,
  body.is-pilote.qv-coll-filters-top .filters{position:sticky;top:84px;bottom:auto;left:auto;right:auto;width:auto;max-width:none;
    max-height:calc(100vh - 100px);overflow-y:auto;display:block;z-index:1;transform:none;visibility:visible;transition:none;
    border-radius:calc(20px*var(--rk,1));padding:8px 20px 20px;box-shadow:var(--shadow-sm)}
  body.is-pilote.qv-coll-filters-drawer .filters-toggle,
  body.is-pilote.qv-coll-filters-drawer .filters-close,
  body.is-pilote.qv-coll-filters-drawer .filters-apply,
  body.is-pilote.qv-coll-filters-drawer .filters-backdrop,
  body.is-pilote.qv-coll-filters-top .filters-toggle,
  body.is-pilote.qv-coll-filters-top .filters-close,
  body.is-pilote.qv-coll-filters-top .filters-apply,
  body.is-pilote.qv-coll-filters-top .filters-backdrop{display:none}
  body.is-pilote.qv-coll-filters-drawer .filters-head,
  body.is-pilote.qv-coll-filters-top .filters-head{position:static;padding:16px 0 13px}
  body.is-pilote.qv-coll-filters-top .filter-block .filter-opts{max-height:230px}
  /* Four cards across next to a 270px column is too tight: three (app.css default). */
  body.is-pilote.qv-coll-list-grid4 .coll-layout .grid-tests.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* "Nos guides sur ..." block: ".read-also{padding:48px 0 8px}" (app.css) reset the side padding
 * of its own .wrap-wide, so the block touched the window edge at 1440px. */
body.is-pilote .wrap-wide.read-also{padding-left:32px;padding-right:32px}
@media(max-width:860px){body.is-pilote .wrap-wide.read-also{padding-left:18px;padding-right:18px}}

/* ---------- 7. Fiche verdict: stars say the real note, pill is no longer empty (audit3 I1) ----------
 * app.css' .verdict-box .stars is always 5 filled stars, absolutely positioned top-right of the
 * box, and overlaps the "Notre avis final sur..." title once it wraps on a phone. single-test.php
 * (pilot branch) now wraps each icon in a .v-etoile span, counted by
 * quel_os_pilote_visuel_etoiles_remplies(); dim the ones past that count instead of a second icon
 * set, so nothing but opacity changes per star. */
body.is-pilote .verdict-box .stars .v-etoile{opacity:.35}
body.is-pilote .verdict-box .stars .v-etoile.is-pleine{opacity:1}
@media(max-width:860px){
  body.is-pilote .verdict-box{padding-top:30px}
  body.is-pilote .verdict-box .stars{position:static;display:block;text-align:right;margin:0 0 12px}
  body.is-pilote .verdict-box h2{max-width:100%}
}
/* The "pastille" before the verdict intro (.v-ic) was an empty gold circle (nothing was ever
 * printed inside it): single-test.php now puts a check icon in it on a pilot site; make sure it
 * is centered regardless of the icon's own inline spacing. */
body.is-pilote .verdict-box .v-ic svg{vertical-align:middle;margin:0}

/* ---------- 8. Side-scrolling tables: a visible hint that there is more (audit3 B11/B12/I3) ----------
 * .tbl-scroll (duel "Critere par critere", "Fiche technique cote a cote", guide picks table,
 * "Les voisins de gamme") already scrolls (overflow-x:auto) but gives no sign that it does: a
 * phone shows a table cut at the edge with nothing suggesting there is more to the right. A
 * static right-edge fade is enough of a hint without any script (it does not need to react to
 * the scroll position to do its job: it says "there is more", not "there is no more"). */
@media(max-width:860px){
  body.is-pilote .tbl-scroll{position:relative}
  body.is-pilote .tbl-scroll::after{
    content:"";position:absolute;top:0;right:0;bottom:0;width:28px;pointer-events:none;
    background:linear-gradient(to right,transparent,color-mix(in srgb,var(--paper) 85%,var(--ink)) 85%);
  }
}