/* MA SELECTION (inc-pilote-selection.php), pilot site only. Mobile first: base rules target a
 * phone screen, the min-width query below only adds room a wider viewport has to spare.
 *
 * The heart is always a SIBLING of a card's <a>/a fiche's gallery, absolutely positioned against
 * that ancestor (".card-wrap", ".fiche-media"): fixed size, fixed spot, so it never shifts the
 * layout of the photo or the text under it. */

.card-wrap{position:relative}
.fiche-media{position:relative}

.qos-coeur{position:absolute;top:10px;right:10px;z-index:3;width:34px;height:34px;border:0;
  border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);display:grid;
  place-items:center;color:var(--ink-mute,#6b7a72);cursor:pointer;padding:0}
.qos-coeur .qos-svg{width:17px;height:17px}
.qos-coeur[aria-pressed="true"]{color:#c2334d}
.qos-coeur[aria-pressed="true"] .qos-svg{fill:currentColor}
.qos-coeur:hover{color:#c2334d}
.qos-coeur--fiche{top:16px;right:16px;width:44px;height:44px}
.qos-coeur--fiche .qos-svg{width:22px;height:22px}

/* The card's own top-right badge (.card .ph .tag, app.css) sits at the exact same corner as
 * the heart: pushed down to clear it rather than moving the heart away from the convention a
 * wishlist reader expects (top-right of the photo). Sized to the heart's own box + a gap; the
 * score badge stays top-LEFT (app.css), so it is never touched. */
.card-wrap:has(.qos-coeur) .card .ph .tag{top:50px}
@media(max-width:560px){
  .qos-coeur{top:8px;right:8px;width:30px;height:30px}
  .qos-coeur .qos-svg{width:15px;height:15px}
  .card-wrap:has(.qos-coeur) .card .ph .tag{top:42px}
}

@media (prefers-reduced-motion: no-preference){
  .qos-coeur.est-ajoute,.qos-sel-compteur.est-ajoute{animation:qos-bump .38s ease}
}
@media (prefers-reduced-motion: reduce){
  .qos-coeur.est-ajoute,.qos-sel-compteur.est-ajoute{animation:none}
}
@keyframes qos-bump{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}

/* ---------- header counter ---------- */
.qos-sel-compteur{display:inline-flex;align-items:center;gap:4px;height:38px;min-width:38px;
  padding:0 10px;border-radius:19px;color:var(--ink,#1b2a22);text-decoration:none;flex:none;
  box-sizing:border-box}
.qos-sel-compteur .qos-svg{width:19px;height:19px;flex:none}
.qos-sel-n{display:inline-block;min-width:14px;font-size:13px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
/* visibility, not display: the counter's own width stays constant whether or not a number
 * shows, so the heart icon next to it never nudges left/right when the count appears. */
.qos-sel-n:empty{visibility:hidden}

/* header.php's ".right" is display:none from 861px up (assets/app.css: it only ever held the
 * mobile burger); made visible again ONLY when it carries this counter, with the burger itself
 * hidden in that case, so the counter reaches desktop too. */
@media (min-width:861px){
  header.site .nav .right:has(.qos-sel-compteur){display:flex;align-items:center;gap:8px}
  header.site .nav .right:has(.qos-sel-compteur) .burger{display:none}
}

/* ---------- "Comparer" / "Retirer" row under a selection card ---------- */
.qos-sel-carte{display:flex;flex-direction:column}
.qos-sel-gestes{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 14px 12px}
.qos-sel-geste{display:inline-flex;align-items:center;gap:6px;border:0;background:none;
  padding:4px 0;font-size:13px;color:var(--ink-mute,#6b7a72);cursor:pointer}
.qos-sel-case{width:16px;height:16px;border:1.5px solid var(--line,#d8e2dc);border-radius:4px;
  flex:none;display:inline-block}
.qos-sel-geste[aria-pressed="true"] .qos-sel-case{background:var(--forest,#1b5e3f);
  border-color:var(--forest,#1b5e3f)}
.qos-sel-geste--retirer{color:#b3243a}

/* ---------- /ma-selection/ page ---------- */
.qos-selection-page .qos-selection{padding-top:22px}
.qos-sel-tete{margin-bottom:18px}
.qos-sel-surtitre{font-size:13px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ink-mute,#6b7a72);display:flex;align-items:center;gap:8px}
.qos-sel-compte{font-size:13px;font-weight:600}
.qos-sel-chapeau{color:var(--ink-mute,#6b7a72);margin-top:6px}
.qos-sel-barre{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:18px}
.qos-sel-retour{width:100%;font-size:13.5px;color:var(--forest,#1b5e3f)}

.qos-sel-cartes{margin-bottom:8px}

/* Comparison table: borrows the theme's own .qc-table/.cmp-best (assets/app.css), already
 * mobile first (stacked cards under its own breakpoint); this file only styles what wraps it. */
.qos-sel-comparer{margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--line,#d8e2dc)}
.qos-sel-comparer-tete{display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px}
.qos-sel-fermer{border:0;background:none;color:var(--ink-mute,#6b7a72);font-size:13px;
  text-decoration:underline;cursor:pointer;padding:0}
.qos-sel-table thead th img{border-radius:8px;display:block;margin-bottom:6px}
/* The theme's own .qc-table switches every cell to display:flex/block under its own mobile
 * breakpoint (assets/app.css), which otherwise beats the browser's default [hidden] rule: an
 * unticked column would still show on a phone. !important is the only thing that wins here. */
.qos-sel-table [hidden]{display:none!important}

/* Screen-reader-only label (a "Critère" column head no sighted reader needs): named with this
 * lot's own prefix, the theme carries no such utility class to reuse. */
.qos-visuellement-cache{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px}

/* Empty state */
.qos-sel-vide h2{margin-bottom:6px}
.qos-sel-vide p{color:var(--ink-mute,#6b7a72);max-width:46em}
.qos-sel-attente{display:flex;gap:6px;padding:30px 0}
.qos-sel-attente span{width:9px;height:9px;border-radius:50%;background:var(--line,#d8e2dc);
  display:inline-block}
@media (prefers-reduced-motion: no-preference){
  .qos-sel-attente span{animation:qos-pulse 1.1s ease-in-out infinite}
  .qos-sel-attente span:nth-child(2){animation-delay:.15s}
  .qos-sel-attente span:nth-child(3){animation-delay:.3s}
}
@keyframes qos-pulse{0%,100%{opacity:.25}50%{opacity:.9}}

.qos-sel-erreur{color:var(--ink-mute,#6b7a72)}

/* Toast announcement (also read by a screen reader as aria-live="polite") */
.qos-annonce{position:fixed;left:16px;right:16px;bottom:16px;z-index:60;background:var(--ink,#1b2a22);
  color:#fff;padding:12px 16px;border-radius:12px;font-size:13.5px;box-shadow:0 6px 20px rgba(0,0,0,.22);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .18s,transform .18s}
.qos-annonce a{color:#fff;text-decoration:underline}
.qos-annonce.est-visible{opacity:1;transform:translateY(0);pointer-events:auto}

@media (min-width:768px){
  .qos-annonce{left:auto;right:24px;bottom:24px;max-width:360px}
  .qos-sel-gestes{padding:8px 16px 14px}
}

/* ---------- lot n7-selection: "Imprimer" / "Continuer sur mon telephone" (QR) / "M'envoyer
 * ma selection par e-mail" -- same markup/classes whether inc-pilote-selection.php renders a
 * SHARED list or assets/pilote-selection.js renders the reader's OWN one. ---------- */
.qos-sel-actions{display:flex;flex-wrap:wrap;gap:10px;margin:2px 0 20px}
.qos-sel-qr-panneau{display:flex;flex-direction:column;align-items:flex-start;gap:10px;
  margin-top:2px;padding:16px;border:1px solid var(--line,#d8e2dc);border-radius:12px;
  background:#fff;width:100%;box-sizing:border-box}
.qos-sel-qr-panneau canvas{border-radius:8px;max-width:100%;height:auto}
.qos-sel-qr-lien{font-size:12.5px;color:var(--ink-mute,#6b7a72);word-break:break-all;margin:0}
.qos-sel-qr-lien a{color:inherit}
/* QosQr.toCanvas() failed (payload too long for this file's small vendor encoder, or the
 * library did not load): hide the empty/broken canvas, the plain-text link stays the fallback. */
.qos-qr-echec{display:none}

/* ---------- lot n7-selection: "Vous aviez garde N modeles" reminder banner. Any OTHER page,
 * return visit only (never on /ma-selection/ itself); built entirely by JS from localStorage,
 * dismissible. ---------- */
.qos-sel-rappel{position:relative;z-index:40;display:flex;align-items:center;gap:10px;
  justify-content:space-between;background:var(--forest,#1b5e3f);color:#fff;font-size:13.5px;
  padding:10px 16px}
.qos-sel-rappel p{margin:0}
.qos-sel-rappel a{color:#fff;text-decoration:underline}
.qos-sel-rappel button{border:0;background:none;color:#fff;font-size:20px;line-height:1;
  cursor:pointer;padding:0 4px;flex:none}

/* ---------- lot n7-selection: printable A4 version of /ma-selection/ (mission: notes, key
 * specs, a QR to each fiche, NEVER a price on an Amazon-only site -- already guaranteed by
 * quel_os_pilote_selection_prix_visible(), so nothing below ever reveals one -- and no
 * price-drop message of any kind either). Hidden on screen; shown only on paper. ---------- */
.qos-sel-imprimer{display:none}
@media print{
  @page{size:A4;margin:14mm}
  header.site,footer.site,.qos-sel-rappel,.qos-annonce,.qos-coeur,.qos-sel-gestes,
  .qos-sel-actions,.qos-sel-comparer,.qos-sel-surtitre,.qos-sel-retour,
  [data-qos-selection-importer],.qos-sel-vide{display:none!important}
  body{color:#000;background:#fff}
  .qos-selection{padding-top:0}
  .qos-sel-tete{margin-bottom:10px}
  .qos-sel-cartes{display:block;margin:0}
  .qos-sel-carte{display:flex;gap:12px;align-items:flex-start;page-break-inside:avoid;
    break-inside:avoid;border-bottom:1px solid #ccc;padding:10px 0;margin:0}
  .qos-sel-carte .card{flex:1 1 auto;display:flex;gap:12px;text-decoration:none;color:#000}
  .qos-sel-carte .ph{width:90px;height:68px;flex:none}
  .qos-sel-carte .ph .score{background:#000;color:#fff}
  .qos-sel-carte .row .see{display:none}
  .qos-sel-imprimer{display:flex!important;align-items:flex-start;gap:10px;flex:none}
  .qos-sel-imprimer-note{font-size:11px;font-weight:600;margin:0 0 3px}
  .qos-sel-imprimer-specs{list-style:none;margin:0;padding:0;font-size:10.5px}
  .qos-sel-imprimer-specs li{display:flex;gap:4px}
  .qos-sel-imprimer-specs li b{font-weight:600}
  .qos-sel-qr-fiche{width:64px;height:64px;flex:none}
  .qos-qr-echec.qos-sel-qr-fiche{display:none}
  .qos-sel-imprimer-lien{font-size:9px;color:#444;max-width:130px;word-break:break-all;
    margin:2px 0 0}
}

/* ---------- audit3-fixes (01/10/2026): the action buttons of /ma-selection/ ("Imprimer ma
 * sélection", "Continuer sur mon téléphone", "M'envoyer ma sélection par e-mail", "Enregistrer
 * dans ma sélection", "Réessayer") carry class "bouton", which no sheet styles: they showed as
 * raw browser buttons next to a plain-text link. Same look as the theme's .btn .btn-ghost
 * (app.css), the import button filled like .btn-primary. ---------- */
.qos-selection .bouton{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border:1px solid var(--line,#d8e2dc);border-radius:999px;
  background:transparent;color:var(--ink,#1b2a22);font-family:var(--sans,inherit);font-size:14px;
  font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;box-sizing:border-box}
.qos-selection .bouton:hover,.qos-selection .bouton:focus-visible{border-color:var(--forest,#1b5e3f);
  color:var(--forest,#1b5e3f)}
.qos-selection .bouton .qos-svg{width:18px;height:18px;flex:none}
.qos-selection .bouton:not(.bouton--discret){background:var(--forest,#1b5e3f);border-color:var(--forest,#1b5e3f);color:#f2fbf5}
.qos-selection .bouton:not(.bouton--discret):hover,.qos-selection .bouton:not(.bouton--discret):focus-visible{color:#fff;filter:brightness(1.08)}
@media(max-width:560px){.qos-sel-actions .bouton{flex:1 1 100%}}

/* Print (audit3-fixes): pilote-visuel.css lays .grille-produits out as a 4-column grid, which
 * also applied on paper: each fiche got a quarter of the A4 width (tiny photo, specs in a narrow
 * column, the address cut mid-word). On paper: one fiche per row, photo, then note and specs,
 * then the QR with its address. */
@media print{
  body.is-pilote .qos-selection .grille-produits.qos-sel-cartes{display:block!important}
  .qos-sel-carte{display:grid!important;grid-template-columns:120px minmax(0,1fr);gap:6px 14px;
    align-items:start}
  .qos-sel-carte .card{display:contents!important}
  .qos-sel-carte .ph{width:120px!important;height:90px!important;position:relative;overflow:hidden;border-radius:6px}
  .qos-sel-carte .ph img{width:100%;height:100%;object-fit:cover}
  .qos-sel-carte .ph .score{font-size:13px;padding:3px 7px}
  .qos-sel-carte .body{min-width:0;padding:0}
  .qos-sel-carte .body h3{font-size:15px;margin:2px 0 6px}
  .qos-sel-imprimer{grid-column:2;justify-content:space-between}
  .qos-sel-imprimer-note{flex:none;width:96px}
  .qos-sel-imprimer-specs{flex:1 1 auto;columns:2;column-gap:18px}
  .qos-sel-imprimer-specs li{display:block;break-inside:avoid;margin:0 0 2px}
  .qos-sel-imprimer-specs li b{white-space:nowrap}
  #cookie-notice,.cookie-notice-container,.cn-revoke-cookie{display:none!important}
  .qos-sel-imprimer-lien{max-width:none;word-break:normal;overflow-wrap:anywhere;font-size:9.5px}
}