/* Thème de PokéGator : la carte à collectionner comme langage d'interface.
 *
 * Retenue le 24 août 2026 parmi huit propositions. Le raisonnement : ce site
 * compare des objets de collection ; l'interface emprunte donc la grammaire
 * de l'objet lui-même.
 * Chaque surface est une carte : coins arrondis francs (16 à 22 px), cadre
 * bleu affirmé (2 à 3 px), ombre COLORÉE douce (jamais noire), et le liseré
 * holographique est réservé aux pièces rares : l'offre vedette du hero, le
 * meilleur total d'une fiche, la meilleure rangée d'offres, la tuile vedette
 * de la grille, la carte de recherche de la cotation quand elle est active.
 * Un liseré partout ne signalerait plus rien (rapport, piège n°3).
 *
 * La palette (couleurs de Pokémon, sourcées) est déclarée dans
 * pokegateur.css sous :root ; cette feuille ne la redéclare pas. Elle ne pose
 * que des dérivés nouveaux (teintes du liseré, ombres colorées translucides),
 * tous calculés par color-mix depuis les variables : changer une couleur de
 * marque suffit à faire virer le liseré, sans toucher ici.
 *
 * Les sélecteurs portent `:root` en préfixe. Ce n'est pas décoratif : cette
 * feuille était scopée `[data-theme="holo"]` du temps où plusieurs thèmes
 * cohabitaient, et `:root` pèse exactement autant qu'un sélecteur d'attribut.
 * Retirer le préfixe au lieu de le remplacer aurait fait perdre un cran de
 * spécificité et réveillé des règles du socle que cette feuille surcharge. Le mot-clé
 * « white » n'apparaît que dans les teintes du liseré holo (exception prévue
 * au contrat), et « #fff » que dans des masques.
 *
 * Techniques employées, pour qu'on sache pourquoi et pas seulement quoi :
 *
 *   1. LISERÉ HOLO : un pseudo-élément débordant (inset négatif) porte un
 *      conic-gradient, et un masque en deux couches (content-box XOR boîte
 *      pleine) ne laisse visible que l'anneau extérieur. C'est la seule
 *      version du faux border-gradient qui respecte le border-radius ET
 *      laisse le fond de la carte intact : un pseudo en z-index négatif
 *      peindrait PAR-DESSUS le fond de l'hôte (ordre de peinture d'un
 *      contexte d'empilement), le masque évite le problème entièrement.
 *
 *   2. ÉTOILES à quatre branches : deux pseudo-éléments en fuseau
 *      (clip-path) croisés à 90°, ancrés sur des enfants statiques de
 *      l'offre vedette pour se positionner par rapport à son cadre. Elles
 *      mordent les coins comme les paillettes d'une holo.
 *
 *   3. TABLEAU D'OFFRES : un <tr> ne porte ni border-radius fiable ni
 *      pseudo-élément débordant. Le tableau est donc masqué à toutes les
 *      largeurs et les cartes d'offre (déjà rendues par PG.renderOffers)
 *      deviennent des rangées-cartes dans un « classeur » : le conteneur
 *      bordé joue la page de classeur, chaque offre est une carte glissée
 *      dedans, la meilleure porte le liseré. Aucune donnée n'est perdue :
 *      les cartes portent vendeur, badges, étiquette de gouvernance, total,
 *      port, délai, stock horodaté.
 *
 *   4. ACCUEIL MOBILE : l'avenant exige l'offre vedette au premier écran.
 *      Sur une colonne, elle arrivait sous les stats, donc sous le pli. La
 *      colonne gauche du hero passe en display:contents sous 1024 px et
 *      l'ordre des éléments est recomposé : accroche, titre, phrase, CARTE
 *      VEDETTE, recherche, raccourcis, stats. Les sélecteurs restent sur
 *      l'arbre DOM, display:contents n'y change rien.
 *
 * Titres contenus (avenant) : titre de page 64 px au plus, prix héro 72 px
 * au plus. L'affirmation vient des cadres, des capsules et du liseré.
 */

/* ======================================================================
   0. Dérivés propres à la variante (calculés, jamais recopiés)
   ====================================================================== */

/* Teintes du liseré : mélanges de l'accent, du vert de stock et de blanc,
   comme le contrat l'autorise pour le liseré holo. Les ombres sont l'accent
   rendu translucide : variables plus transparent, aucune couleur en dur.
   Ce sont des COULEURS simples (pas des raccourcis composés) : elles suivent
   correctement un changement de thème à chaud, voir la note sur --ring dans
   pokegateur.css. */
:root {
  --holo-lavande: color-mix(in oklab, var(--primary) 50%, white);
  /* La seconde teinte du liseré vient de la couleur d'appoint du thème,
     pas du vert de stock : une identité à deux couleurs (un accent et un
     appoint) doit pouvoir traverser le liseré sans détourner une couleur
     d'état de son sens. */
  --holo-menthe: color-mix(in oklab, var(--accent-2) 42%, white);
  --holo-nacre: color-mix(in oklab, var(--primary) 10%, white);
  --holo-ombre: color-mix(in oklab, var(--primary) 24%, transparent);
  --holo-ombre-douce: color-mix(in oklab, var(--primary) 14%, transparent);
}

/* ======================================================================
   1. Socle : typographie et sélection
   ====================================================================== */

/* Bricolage Grotesque est chaleureuse mais dense : on relâche le
   resserrement du socle (-0.045em) qui la ferait se toucher en graisse 800. */
:root h1,
:root h2,
:root h3,
:root h4 {
  letter-spacing: -0.02em;
  font-weight: 800;
}

:root ::selection {
  background: var(--primary);
  color: var(--primary-fg);
}

/* Titres de page contenus : 54 px au maximum du clamp (plafond exigé 72). */
:root .pg-h1 {
  margin-top: 10px;
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.02;
}
:root .pg-h2 { font-size: clamp(22px, 3vw, 34px); }
:root .pg-intro { color: var(--muted-fg); }

/* Les prix sont la donnée : chasse fixe (Fragment Mono), chiffres tabulaires
   hérités du socle, jamais posés sur un dégradé. */
:root .pg-card__price,
:root .pg-offer-card__total,
:root .pg-radar__price,
:root .pg-ticker__price,
:root .pg-sticky-cta__price,
:root .pg-stat dd {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}

/* ======================================================================
   2. Composants communs : boutons, champs, puces, badges
   ====================================================================== */

/* Boutons : pilules franches. Le primaire projette une ombre violette douce,
   jamais noire : c'est la règle d'ombre de toute la variante. */
:root .pg-btn--primary {
  box-shadow: 0 12px 26px -12px color-mix(in oklab, var(--primary) 45%, transparent);
}
:root .pg-btn--primary:hover {
  background: var(--primary-dark);
  box-shadow: 0 14px 30px -12px color-mix(in oklab, var(--primary) 55%, transparent);
}
:root .pg-btn--outline {
  box-shadow: inset 0 0 0 2px var(--border-fort);
}
:root .pg-btn--outline:hover {
  box-shadow: inset 0 0 0 2px var(--primary);
  background: var(--popover);
  color: var(--primary-dark);
}

/* Champs : capsules blanches à cadre affirmé (2 px, pas 1). */
:root .pg-input,
:root .pg-select,
:root .pg-textarea {
  background: var(--card);
  box-shadow: 0 0 0 2px var(--border-fort);
}
:root .pg-input:focus-visible,
:root .pg-select:focus-visible,
:root .pg-textarea:focus-visible {
  box-shadow: 0 0 0 3px var(--primary);
}
:root .pg-textarea { border-radius: 16px; }
:root .pg-switch__track { box-shadow: 0 0 0 2px var(--border-fort); background: var(--secondary); }

/* Puces et pilules : tuiles blanches à bordure bleutée, l'active en violet
   plein avec son ombre colorée (la « tuile active » de la grammaire). */
:root .pg-pill,
:root .pg-chip {
  background: var(--card);
  box-shadow: 0 0 0 2px var(--border);
}
:root .pg-pill:hover,
:root .pg-chip:hover {
  color: var(--primary-dark);
  box-shadow: 0 0 0 2px var(--border-fort);
}
:root .pg-chip--active,
:root .pg-chip[aria-pressed="true"] {
  background: var(--primary);
  color: var(--primary-fg);
  box-shadow: 0 0 0 2px var(--primary), 0 10px 22px -10px color-mix(in oklab, var(--primary) 50%, transparent);
}

/* Badges : pilules nettes, graisse forte. Les couleurs sémantiques sont
   respectées : le socle mappe « stock » sur l'accent (thème menthe où les
   deux coïncident), ici l'accent est violet, donc « En stock » est ramené
   explicitement au vert de stock, et sa pastille avec. */
:root .pg-badge { font-weight: 700; }
/* Le vert de marque a été descendu jusqu'à franchir 4,5:1 **sur du blanc** ;
   posé sur sa propre teinte à 12 %, il retombe à 4,28 en thème clair. On lit
   donc le jeton de texte, qui tire la couleur vers le premier plan et répare
   les deux thèmes dans leur sens respectif (voir `--stock-texte`). */
:root .pg-badge--stock {
  background: color-mix(in oklab, var(--stock) 12%, transparent);
  color: var(--stock-texte);
}
:root .pg-stock .pg-badge--stock .pg-dot { background: var(--stock); }
/* Rupture : une croix en plus de la couleur, pour que l'état se lise sans le
   rouge (rapport, piège n°6). Scopée aux badges de stock : le même variant
   sert ailleurs à « En tension », où la croix serait un contresens. */
:root .pg-stock .pg-badge--oos::before {
  content: "✕";
  font-size: 9px;
  font-weight: 900;
}
/* « Meilleur » : rempli, c'est l'événement de la liste. */
:root .pg-badge--best {
  background: var(--primary);
  color: var(--primary-fg);
}
/* Étiquettes de gouvernance : [FAIT] est un tampon plein cadre, [HYPOTHÈSE]
   un pointillé ambre : la nature de la preuve se lit à la forme ET à la
   couleur. Le box-shadow du variant outline est éteint pour ne pas doubler
   le trait. */
:root .pg-badge--fait {
  box-shadow: none;
  border: 2px solid var(--border-fort);
  background: var(--card);
  color: var(--fg);
  font-weight: 800;
}
:root .pg-badge--hypothese {
  box-shadow: none;
  border: 2px dashed var(--low);
  background: transparent;
  color: var(--low);
}

/* ======================================================================
   3. En-tête, navigations, bandeau, pied, dialogues
   ====================================================================== */

:root .pg-header {
  background: var(--card-70);
  border-bottom: 2px solid var(--border);
}
:root .pg-logo__word { font-weight: 800; }
:root .pg-nav__link[aria-current="page"] {
  background: var(--primary-10);
  color: var(--primary-dark);
}
:root .pg-cmdk {
  background: var(--card);
  box-shadow: 0 0 0 2px var(--border);
}
:root .pg-cmdk:hover { box-shadow: 0 0 0 2px var(--border-fort); }
:root .pg-mobile-nav {
  background: var(--card);
  border-top: 2px solid var(--border);
}

:root .pg-bottomnav {
  background: var(--card-80);
  border-top: 2px solid var(--border);
}
:root .pg-bottomnav a[aria-current="page"] { color: var(--primary-dark); }

/* Le bandeau de démonstration reste visible et lisible : il devient une
   carte ambrée à coins francs, dans la grammaire de la variante. */
:root .pg-banner__inner {
  border-radius: 16px;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--low) 40%, transparent);
}

:root .pg-footer {
  background: var(--card-70);
  border-top: 2px solid var(--border);
}

/* Dialogues et listes flottantes : cadre violet, ombre colorée (le socle
   projette du noir, hors de la grammaire pastel). */
:root .pg-dialog {
  border-radius: 22px;
  box-shadow: 0 0 0 3px var(--border-fort), 0 40px 80px -30px var(--holo-ombre);
}
:root .pg-radio { box-shadow: 0 0 0 2px var(--border-fort); border-radius: 14px; }
:root .pg-toast {
  border: 2px solid var(--border-fort);
  border-radius: 14px;
  box-shadow: 0 20px 40px -20px var(--holo-ombre);
}
:root .pg-search__list {
  border-radius: 18px;
  box-shadow: 0 0 0 2px var(--border), 0 18px 40px -18px var(--holo-ombre);
}

/* ======================================================================
   4. Hero de l'accueil : décor pastel et titres contenus
   ====================================================================== */

/* Le décor : la grille et les halos passent du menthe codé en dur du socle
   à des voiles lavande et menthe dérivés des variables, plus une trame de
   points en demi-teinte dans le coin haut gauche (élément visuel pur CSS,
   masqué en dégradé ; le #000 du masque est l'exception prévue). */
:root .pg-ambient {
  background:
    radial-gradient(ellipse 50% 40% at 72% 0%, var(--primary-16), transparent 60%),
    radial-gradient(ellipse 42% 52% at 8% 85%, color-mix(in oklab, var(--stock) 10%, transparent), transparent 55%);
}
:root .pg-grid-fade {
  background-image:
    linear-gradient(to right, var(--primary-10) 1px, transparent 1px),
    linear-gradient(to bottom, var(--primary-10) 1px, transparent 1px);
}
:root .pg-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--primary-10) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 55% 50% at 18% 12%, #000, transparent 72%);
  mask-image: radial-gradient(ellipse 55% 50% at 18% 12%, #000, transparent 72%);
}

/* Titre contenu : 64 px au plus. L'énergie est dans la carte vedette. */
:root .pg-hero__title {
  font-size: clamp(34px, 5.5vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.03em;
}
:root .pg-hero__title .pg-primary { color: var(--primary-dark); }
:root .pg-search--lg .pg-input {
  background: var(--card);
  box-shadow: 0 0 0 2px var(--border-fort);
}

/* Stats : trois tuiles bento blanches à bordure lavande. */
:root .pg-stat {
  background: var(--card);
  border-radius: 16px;
  box-shadow: 0 0 0 2px var(--border), 0 10px 24px -16px var(--holo-ombre-douce);
}
:root .pg-stat dd { font-weight: 700; }

/* Accueil mobile : la carte vedette remonte au premier écran (avenant).
   La colonne gauche se dissout (display:contents), ses enfants deviennent
   des éléments de la grille du hero et se réordonnent autour de la carte.
   Le gap de 40 px de la grille est coupé : les marges du socle suffisent. */
@media (max-width: 1023px) {
  :root .pg-hero__grid { gap: 0; }
  :root .pg-hero__grid > div:first-child { display: contents; }
  :root .pg-hero__grid > div:first-child > .pg-eyebrow { order: 1; }
  :root .pg-hero__grid > div:first-child > .pg-hero__title { order: 2; }
  :root .pg-hero__grid > div:first-child > .pg-hero__lead { order: 3; }
  :root .pg-hero__grid > .pg-rise { order: 4; margin-top: 30px; }
  :root .pg-hero__grid > div:first-child > .pg-hero__search { order: 5; }
  :root .pg-hero__grid > div:first-child > .pg-hero__pills { order: 6; }
  :root .pg-hero__grid > div:first-child > .pg-stats { order: 7; }
}

/* ======================================================================
   5. L'offre vedette : la carte à collectionner géante
   ====================================================================== */

/* Le cadre : carte blanche, coins 22 px, bordure violette 3 px, ombre
   violette portée. Le fond translucide et le flou du socle sont retirés :
   une carte de collection est opaque. */
:root .pg-hero-deal {
  background: var(--card);
  border: 3px solid var(--border-fort);
  border-radius: 22px;
  padding: 26px 22px 30px;
  margin-bottom: 26px; /* place du sticker boutique qui chevauche le bord */
  box-shadow: 0 26px 52px -24px var(--holo-ombre);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Le liseré holographique : anneau de 6 px autour du cadre. Le pseudo
   déborde de 6 px, porte le conic-gradient, et le masque content-box XOR
   pleine boîte ne garde que l'anneau : le centre reste transparent, le fond
   blanc et la bordure violette de la carte restent intacts. Pas de liseré
   sur l'état vide : il n'y a rien à célébrer. */
:root .pg-hero-deal:not(.pg-hero-deal--vide)::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 28px;
  padding: 6px;
  background: conic-gradient(from 210deg,
    var(--holo-lavande),
    var(--holo-menthe) 22%,
    var(--holo-nacre) 47%,
    var(--holo-lavande) 62%,
    var(--holo-menthe) 80%,
    var(--holo-lavande));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* L'accroche « Meilleure offre du moment » : un sticker violet qui mord le
   bord supérieur gauche, légèrement incliné. Sa pastille passe en blanc
   (elle serait violette sur violet). */
:root .pg-hero-deal__eyebrow {
  position: absolute;
  top: -16px;
  left: 20px;
  z-index: 3;
  margin: 0;
  background: var(--primary);
  color: var(--primary-fg);
  border-radius: 999px;
  padding: 7px 14px;
  transform: rotate(-2deg);
  box-shadow: 0 10px 20px -10px color-mix(in oklab, var(--primary) 55%, transparent);
}
:root .pg-hero-deal__eyebrow .pg-dot { background: var(--primary-fg); }

/* Les étoiles à quatre branches : deux fuseaux croisés par étoile, ancrés
   sur des enfants statiques (leurs pseudo-éléments absolus se positionnent
   par rapport au cadre de la carte, seul ancêtre positionné). Une grande en
   haut à droite, une petite en bas à gauche : des paillettes d'holo, pas un
   motif répété. */
:root .pg-hero-deal__body::before,
:root .pg-hero-deal__body::after {
  content: "";
  position: absolute;
  top: -18px;
  right: 28px;
  width: 12px;
  height: 34px;
  z-index: 3;
  background: var(--primary);
  clip-path: polygon(50% 0%, 70% 50%, 50% 100%, 30% 50%);
  pointer-events: none;
}
:root .pg-hero-deal__body::after { transform: rotate(90deg); }
:root .pg-hero-deal__actions::before,
:root .pg-hero-deal__actions::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 18px;
  width: 9px;
  height: 24px;
  z-index: 3;
  background: var(--primary);
  clip-path: polygon(50% 0%, 70% 50%, 50% 100%, 30% 50%);
  pointer-events: none;
}
:root .pg-hero-deal__actions::after { transform: rotate(90deg); }
@media (prefers-reduced-motion: no-preference) {
  :root .pg-hero-deal__body::before,
  :root .pg-hero-deal__body::after {
    animation: holo-scintille 3.4s ease-in-out infinite;
  }
  :root .pg-hero-deal__actions::before,
  :root .pg-hero-deal__actions::after {
    animation: holo-scintille 3.4s ease-in-out 1.1s infinite;
  }
}

/* L'illustration : fenêtre d'art de la carte, cadre fin lavande. */
:root .pg-hero-deal__cover {
  border-radius: 16px;
  border: 2px solid var(--border);
}

:root .pg-hero-deal__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 27px);
  letter-spacing: -0.02em;
}

/* Le prix : LA donnée, dans une grande capsule blanche bordée. Fond uni,
   chasse fixe, violet foncé à 8,7:1 sur blanc. 44 px au maximum : le
   plafond de 112 px de l'avenant est loin. */
:root .pg-hero-deal__price {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: clamp(27px, 3vw, 44px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--primary-dark);
  background: var(--card);
  border: 3px solid var(--border-fort);
  border-radius: 999px;
  padding: 8px 22px;
  box-shadow: 0 12px 26px -14px var(--holo-ombre);
}

/* La boutique : un sticker qui chevauche le bord inférieur de la carte,
   comme une vignette collée. Le DOM garde la phrase entière (« chez X ·
   port »), donc le sticker est une capsule et non un rond parfait : couper
   la phrase pour isoler le nom demanderait de toucher au HTML. */
:root .pg-hero-deal__meta {
  position: absolute;
  left: 50%;
  bottom: -20px;
  z-index: 3;
  transform: translateX(-50%) rotate(-1.5deg);
  max-width: calc(100% - 28px);
  margin: 0;
  background: var(--card);
  border: 2px solid var(--border-fort);
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 14px;
  text-align: center;
  color: var(--fg);
  box-shadow: 0 10px 22px -10px var(--holo-ombre);
}
:root .pg-hero-deal__meta a { color: var(--primary-dark); font-weight: 800; }

/* ======================================================================
   6. Bento de l'accueil : radar, arguments, ticker, sections
   ====================================================================== */

:root .pg-radar {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 16px 36px -20px var(--holo-ombre-douce);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
:root .pg-radar__head { border-bottom: 2px solid var(--border); }
:root .pg-radar__price { color: var(--primary-dark); }

/* Les trois arguments : le socle les soude par un filet partagé ; ici,
   trois tuiles bento séparées, chacune dans son cadre lavande. */
:root .pg-features {
  gap: 12px;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
:root .pg-feature {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 12px 28px -18px var(--holo-ombre-douce);
}

:root .pg-ticker {
  background: var(--card-70);
  border-top: 2px solid var(--border);
  border-bottom: 2px solid var(--border);
}
:root .pg-ticker__price { color: var(--primary-dark); }

:root .pg-section-head h2 { font-size: clamp(26px, 3.5vw, 40px); }

/* ======================================================================
   7. Cartes produit : tuiles bento, la vedette au liseré
   ====================================================================== */

:root .pg-card {
  border-radius: 20px;
  border: 2px solid var(--border);
  background: var(--card);
  box-shadow: 0 12px 28px -18px var(--holo-ombre-douce);
}
@media (hover: hover) {
  /* Le socle bascule les cartes en perspective 3D au survol : une carte de
     collection se soulève, elle ne se tord pas. */
  :root .pg-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-fort);
    box-shadow: 0 20px 40px -20px var(--holo-ombre);
  }
}
/* L'illustration garde un filet de séparation avec le corps. */
:root .pg-card .pg-cover { border-bottom: 2px solid var(--border); }
/* La silhouette du format : le socle la teinte en --fg-80, clair sur les
   thèmes sombres mais quasi noir ici, invisible sur les fonds d'accent
   foncés des couvertures. Blanc translucide à la place. */
:root .pg-cover__shape { color: var(--card-80); }
/* Pills posées sur la couverture : le voile du socle est calé sur --bg
   (sombre à l'origine) ; sur fond d'art foncé, le texte lavande sombre ne
   tenait plus le contraste. Fond carte opaque, texte du thème. */
/* `:not(.pg-cover--photo)` restreint ces deux règles aux couvertures
   dessinées, c'est-à-dire à celles dont le fond est l'aplat d'accent de
   l'extension. Sur une couverture PHOTO, le fond est la plaque blanche, et
   les incrustations doivent suivre la plaque et non la page : pokegateur.css
   s'en charge, voir la note sur `--sur-plaque`.

   Sans cette restriction, ces deux règles gagnaient sur celles de la plaque à
   égalité de spécificité, simplement parce que cette feuille est chargée en
   second. C'est exactement le piège que l'en-tête de ce fichier signale à
   propos du préfixe `:root` : ici il ne suffisait pas de compter les classes,
   il fallait restreindre la portée. Le symptôme, mesuré : pastille de format
   en texte clair sur fond de carte sombre, posée sur une plaque blanche, et
   légende dont le haut disparaissait dans le dégradé. */
:root .pg-cover:not(.pg-cover--photo) .pg-cover__type {
  background: var(--card);
  color: var(--fg);
  border-radius: 999px;
}
:root .pg-cover__type { border-radius: 999px; }
:root .pg-cover:not(.pg-cover--photo) .pg-cover__caption {
  background: linear-gradient(to top, var(--bg-90) 35%, transparent);
}

/* La tuile vedette de la grille (première carte de l'accueil) : cadre
   violet 3 px et liseré holo, c'est la carte rare du classeur. Le liseré
   déborde, donc l'overflow s'ouvre et la couverture arrondit elle-même ses
   coins hauts (elle n'est plus rognée par le parent). */
:root .pg-card--featured {
  position: relative;
  overflow: visible;
  border: 3px solid var(--border-fort);
}
:root .pg-card--featured .pg-cover { border-radius: 16px 16px 0 0; }
:root .pg-card--featured::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 26px;
  padding: 6px;
  background: conic-gradient(from 210deg,
    var(--holo-lavande),
    var(--holo-menthe) 22%,
    var(--holo-nacre) 47%,
    var(--holo-lavande) 62%,
    var(--holo-menthe) 80%,
    var(--holo-lavande));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

:root .pg-card__price { color: var(--primary-dark); }

/* ======================================================================
   8. Fiche produit : couverture encadrée, meilleur total au liseré,
      classeur d'offres
   ====================================================================== */

:root .pg-product__frame {
  border: 3px solid var(--border-fort);
  border-radius: 24px;
  box-shadow: 0 24px 48px -24px var(--holo-ombre);
}
:root .pg-product__name { font-size: clamp(28px, 4vw, 48px); }

/* Le meilleur total : carte bordée ; s'il est réel (pg-glow), le liseré. */
:root .pg-best {
  position: relative;
  border: 3px solid var(--border-fort);
  border-radius: 22px;
  box-shadow: 0 20px 44px -22px var(--holo-ombre);
}
:root .pg-best.pg-glow::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 28px;
  padding: 6px;
  background: conic-gradient(from 210deg,
    var(--holo-lavande),
    var(--holo-menthe) 22%,
    var(--holo-nacre) 47%,
    var(--holo-lavande) 62%,
    var(--holo-menthe) 80%,
    var(--holo-lavande));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Le prix héros de la fiche : capsule blanche bordée, 72 px au plus
   (plafond exigé : 112). */
:root .pg-best__price {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: clamp(34px, 5.5vw, 72px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--primary-dark);
  background: var(--card);
  border: 3px solid var(--border-fort);
  border-radius: 999px;
  padding: 8px 26px;
  box-shadow: 0 12px 26px -14px var(--holo-ombre);
}

/* La barre d'outils du tri : une réglette capsule. */
:root .pg-toolbar {
  background: var(--card);
  border: 2px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
}

/* Le classeur d'offres. Le tableau du socle est masqué à toutes les
   largeurs (voir l'en-tête, point 3) et les cartes d'offre le remplacent
   partout : rangées-cartes blanches à coins arrondis, glissées dans un
   conteneur bordé sur fond lavande, comme des cartes dans une page de
   classeur. Les sélecteurs scopés battent le display du socle par
   spécificité, sans !important. */
:root .pg-table-wrap { display: none; }
:root .pg-offer-cards {
  display: grid;
  gap: 12px;
  border: 3px solid var(--border-fort);
  border-radius: 24px;
  background: var(--muted);
  padding: 12px;
  box-shadow: 0 20px 44px -24px var(--holo-ombre-douce);
}
:root .pg-offer-card {
  border-radius: 16px;
  border: 2px solid var(--border);
  background: var(--card);
  box-shadow: 0 8px 20px -14px var(--holo-ombre-douce);
}
:root .pg-offer-card.is-oos { background: var(--muted); opacity: .75; }
:root .pg-offer-card__total { color: var(--primary-dark); }

/* La meilleure rangée : cadre violet et liseré holo, la carte rare de la
   page de classeur. L'anneau de 4 px vit dans les 12 px de gouttière. */
:root .pg-offer-card.is-best {
  position: relative;
  border-color: var(--border-fort);
  box-shadow: 0 14px 30px -16px var(--holo-ombre);
}
:root .pg-offer-card.is-best::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 21px;
  padding: 5px;
  background: conic-gradient(from 210deg,
    var(--holo-lavande),
    var(--holo-menthe) 22%,
    var(--holo-nacre) 47%,
    var(--holo-lavande) 62%,
    var(--holo-menthe) 80%,
    var(--holo-lavande));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Sur bureau, la rangée s'étale : vendeur et badges en tête, détails à
   gauche, action à droite. Rien n'est masqué : l'horodatage « Vérifié il y
   a … » et l'étiquette de gouvernance restent sur chaque rangée. */
@media (min-width: 768px) {
  :root .pg-offer-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    padding: 18px 20px;
  }
  :root .pg-offer-card__head { grid-column: 1 / -1; }
  :root .pg-offer-card dl {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin-top: 12px;
  }
  :root .pg-offer-card .pg-btn--block { width: auto; justify-self: end; }
  :root .pg-offer-card__affil { grid-column: 1 / -1; text-align: right; }
}

/* Rappel fixe mobile : capsule blanche au-dessus de la navigation basse. */
:root .pg-sticky-cta {
  background: var(--card-80);
  border-top: 2px solid var(--border);
}
:root .pg-sticky-cta__price { color: var(--primary-dark); }

/* ======================================================================
   9. Vendeurs, vigilance, à propos : le reste du classeur
   ====================================================================== */

:root .pg-vendor {
  border: 2px solid var(--border);
  border-radius: 18px;
  background: var(--card);
  box-shadow: 0 10px 24px -16px var(--holo-ombre-douce);
}
@media (hover: hover) {
  :root .pg-vendor.pg-surface--hover:hover {
    transform: translateY(-3px);
    border-color: var(--border-fort);
    box-shadow: 0 18px 36px -18px var(--holo-ombre);
  }
}
:root .pg-vendor__count strong {
  font-family: var(--font-mono);
  color: var(--primary-dark);
}

:root .pg-kpis {
  border: 2px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 24px -16px var(--holo-ombre-douce);
}
:root .pg-kpis dd { font-family: var(--font-mono); }
:root .pg-factor {
  border: 2px solid var(--border);
  border-radius: 16px;
  box-shadow: none;
}
:root .pg-factor__score { font-family: var(--font-mono); }
:root .pg-callout {
  border-radius: 16px;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--oos) 35%, transparent);
}
:root .pg-callout--low {
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--low) 35%, transparent);
}

/* Vigilance : chaque règle est une carte, son numéro un jeton rond violet
   (pastille de sticker, pas un simple exposant). */
:root .pg-rule {
  border: 2px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 24px -16px var(--holo-ombre-douce);
}
:root .pg-rule__num {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-fg);
  font-weight: 700;
  font-size: 13px;
}
:root .pg-list {
  border: 2px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 24px -16px var(--holo-ombre-douce);
}

:root .pg-article,
:root .pg-panel {
  border: 2px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 24px -16px var(--holo-ombre-douce);
}

/* États vides : une carte en pointillé, l'emplacement libre du classeur. */
:root .pg-empty {
  background: var(--popover);
  border: 2px dashed var(--border);
  border-radius: 20px;
  box-shadow: none;
}
:root .pg-error {
  border-radius: 16px;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--oos) 35%, transparent);
}

/* ======================================================================
   10. Cotation (PokéPaul) : mêmes cartes, même classeur
   ====================================================================== */

/* La carte de recherche est la « tuile active » de cette page : au focus,
   elle gagne le liseré holo (l'anneau apparaît en fondu, coupé net sous
   prefers-reduced-motion par la règle globale du socle). */
:root .pp-card {
  position: relative;
  border: 2px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 16px 36px -20px var(--holo-ombre-douce);
}
:root .pp-card::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 25px;
  padding: 5px;
  background: conic-gradient(from 210deg,
    var(--holo-lavande),
    var(--holo-menthe) 22%,
    var(--holo-nacre) 47%,
    var(--holo-lavande) 62%,
    var(--holo-menthe) 80%,
    var(--holo-lavande));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  opacity: 0;
  transition: opacity 250ms var(--ease);
}
:root .pp-card:focus-within { border-color: var(--border-fort); }
:root .pp-card:focus-within::before { opacity: 1; }
:root .pp-voice { box-shadow: 0 0 0 2px var(--border); }

:root .result-card {
  border: 2px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 10px 24px -16px var(--holo-ombre-douce);
}
/* Le prix de la cote : la même capsule blanche bordée que le comparateur,
   pour qu'une cote se lise comme un total. */
:root .result-price { align-items: center; }
:root .price-main {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.4vw, 40px);
  letter-spacing: -0.02em;
  color: var(--primary-dark);
  background: var(--card);
  border: 2px solid var(--border-fort);
  border-radius: 999px;
  padding: 4px 16px;
}
/* Étiquettes de gouvernance : mêmes formes que côté comparateur : tampon
   plein cadre pour [FAIT], pointillé ambre pour [HYPOTHÈSE]. */
:root .label-FAIT {
  background: var(--card);
  color: var(--fg);
  border: 2px solid var(--border-fort);
}
:root .label-HYPOTHESE {
  background: transparent;
  color: var(--low);
  border: 2px dashed var(--low);
}
:root .result-error {
  border-radius: 16px;
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--oos) 35%, transparent);
}

/* ======================================================================
   11. Animation des étoiles
   ====================================================================== */

/* Un scintillement d'opacité seulement (le transform porte déjà la rotation
   des fuseaux croisés). La règle globale du socle neutralise l'animation
   sous prefers-reduced-motion, et les références sont de toute façon
   scopées au thème dans la section 5. */
@keyframes holo-scintille {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}