/* PokéGator : feuille de style commune (comparateur et cotation). * * Sans framework ni build : les classes sont préfixées `pg-` et nommées par * composant. * * ---------- Comment un thème est défini ---------- * * Un thème ne déclare que **treize couleurs de base**. Tous les dérivés * (voiles, halos, anneaux, survols) sont calculés à partir d'elles par * `color-mix`, une seule fois, dans le bloc « dérivés » plus bas. C'était * l'inverse au départ : quarante variables en dur, dont trente-quatre qui * répétaient les mêmes couleurs à des opacités différentes. Changer d'accent * demandait de recalculer neuf `rgba()` à la main, et une seule oubliée * laissait l'ancienne couleur transparaître sous la nouvelle. * * Pour ajouter un thème : copier le bloc `[data-theme="…"]`, remplacer les * treize valeurs. Rien d'autre. * * Le thème actif se pose sur ``. Sans attribut, c'est * le thème par défaut ci-dessous qui s'applique. */ /* ---------- Tokens non colorés ---------- */ :root { --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 32px; --radius-2xl: 16px; --r22: 22px; --r24: 24px; --r28: 28px; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease: cubic-bezier(.4, 0, .2, 1); --container: 72rem; --narrow: 48rem; } /* ---------- Palette ---------- * * Une seule palette depuis le 24 août 2026 : « holo », choisie parmi huit * propositions, aux couleurs de Pokémon. Le mécanisme de thèmes multiples a * servi à comparer sur de vraies données ; il ne reste que son enseignement, * les seize variables ci-dessous, dont tout le reste de la feuille dérive. * Pour reprendre une comparaison, il suffit d'ajouter un bloc * `[data-theme="nom"]` : le sélecteur local le détecte tout seul. * * Provenance des couleurs, chacune lue dans un fichier réellement chargé * (GOUVERNANCE §3 : une donnée non constatée n'existe pas) : * * bleu #1b53ba CSS de production assets.pokemon.com/static2/_ui/css/main.css * jaune #ffca02 SVG du logo, Wikimedia Commons (attribut fill) * rouge #e3350d même CSS de production * vert #4dad5b même CSS de production * * Trois d'entre elles ne peuvent pas porter de texte : mesurées sur fond * clair, le jaune vaut 1,5:1, le vert 2,8:1 et le rouge 4,4:1, sous le seuil * AA de 4,5:1. Plutôt que de les déformer en silence, chacune garde sa teinte * et sa saturation, et seule sa luminosité descend jusqu'à franchir le seuil * (scratchpad/palette.py) : le vert devient #387d42, le jaune #856b10, le * rouge #d0300c. Le jaune de marque survit intact en couleur d'appoint : il * ne porte jamais de texte, il peint les liserés et les surlignages. * * Ce qui n'est pas repris : ni la composition du logo, ni son dégradé de * contour, ni sa typographie. Le site affiche qu'il n'est affilié ni à * Nintendo, ni à The Pokémon Company, ni à Creatures ; emprunter une famille * de couleurs est une chose, imiter une marque en est une autre. * * Réserve de sourçage : aucune charte officielle n'est publiquement * accessible (les salles de presse répondent 401). Les #FFCB05 et #3D7DCA que * répètent les sites tiers sont absents du CSS de production : non retenus. */ /* ---------- Thème par défaut : sombre ---------- * * Le fond de page est passé au sombre le 25 août 2026, et ce n'est pas un * goût : c'est la conséquence de la plaque blanche des visuels. Les boutiques * photographient leurs produits détourés sur blanc ; la surface qui les porte * doit donc être blanche, sans quoi on voit le rectangle de la photo au lieu * du produit. Une plaque blanche sur une page claire fonctionne, mais elle * fond dans la page et le produit ne se détache plus. Sur fond sombre, la * plaque devient une pièce posée sur une table : c'est la lecture qu'on * cherche pour un comparateur d'objets de collection. * * Les seize couleurs ci-dessous ont été vérifiées au contraste, pas jugées à * l'œil. Sur le fond (#0b1020) et sur la carte (#141b32), toutes dépassent * 4,5:1 : texte 16,0:1, texte secondaire 7,8:1, accent 7,4:1, cadre affirmé * 5,8:1, stock 8,7:1, faible 9,8:1, rupture 6,7:1. * * Une inversion mérite d'être dite parce qu'elle se rate facilement : * `--primary-fg` est le texte POSÉ SUR l'accent. Sur un accent clair, il doit * être sombre. Laisser #ffffff donnait 2,58:1 sur le bouton primaire, très * en dessous du seuil, alors que la couleur du fond de page y donne 7,35:1. */ :root, [data-theme="sombre"] { color-scheme: dark; --bg: #0b1020; --fg: #e8ecf8; --card: #141b32; /* Surface qui porte les visuels marchands. Distincte de `--card` : elle est dictée par les photos, pas par la charte. Les boutiques détourent sur blanc, donc la plaque reste blanche quel que soit le thème. C'est le seul jeton de couleur identique dans les deux palettes, et volontairement. */ --plaque: #ffffff; --popover: #1a2240; --secondary: #1e2745; --muted: #1a2138; --muted-fg: #9aa6c8; --border: #2b3760; --border-fort: #5b8cf0; --primary: #6fa0ff; --primary-fg: #0b1020; /* texte SUR l'accent : sombre, voir l'en-tête */ --primary-dark: #8fb6ff; /* le survol s'éclaircit au lieu de s'assombrir */ --stock: #5fc46f; --low: #e0b53a; --oos: #ff6b4a; --accent-2: #ffca02; /* appoint décoratif, jamais de texte dessus */ --font-sans: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-mono: "Fragment Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* ---------- Variante claire ---------- * * La palette d'origine, conservée intacte. Elle reste atteignable par * `?theme=clair` et par le sélecteur local, et il suffirait d'exposer un * bouton pour en faire un choix offert au visiteur. On ne la supprime pas : * une palette dont on a mesuré les contrastes et éprouvé les composants est * un acquis, et un thème alternatif ne coûte que les seize lignes qui suivent * tant que tout le reste dérive par `color-mix`. */ [data-theme="clair"] { color-scheme: light; --bg: #f4f6fd; --fg: #0f1a35; --card: #ffffff; --plaque: #ffffff; --popover: #ffffff; --secondary: #e4eaf9; --muted: #edf1fc; --muted-fg: #55628a; --border: #ccd7f2; --border-fort: #1b53ba; --primary: #1b53ba; --primary-fg: #ffffff; --primary-dark: #123f92; --stock: #387d42; --low: #856b10; --oos: #d0300c; --accent-2: #ffca02; } /* ---------- Dérivés : calculés, jamais recopiés ---------- */ :root { --primary-05: color-mix(in oklab, var(--primary) 5%, transparent); --primary-10: color-mix(in oklab, var(--primary) 10%, transparent); --primary-15: color-mix(in oklab, var(--primary) 15%, transparent); --primary-16: color-mix(in oklab, var(--primary) 16%, transparent); --primary-28: color-mix(in oklab, var(--primary) 28%, transparent); --primary-35: color-mix(in oklab, var(--primary) 35%, transparent); --primary-40: color-mix(in oklab, var(--primary) 40%, transparent); --primary-50: color-mix(in oklab, var(--primary) 50%, transparent); --primary-70: color-mix(in oklab, var(--primary) 70%, transparent); --oos-10: color-mix(in oklab, var(--oos) 10%, transparent); --oos-15: color-mix(in oklab, var(--oos) 15%, transparent); --low-15: color-mix(in oklab, var(--low) 15%, transparent); --fg-08: color-mix(in oklab, var(--fg) 8%, transparent); --fg-12: color-mix(in oklab, var(--fg) 12%, transparent); --fg-80: color-mix(in oklab, var(--fg) 80%, transparent); --bg-55: color-mix(in oklab, var(--bg) 55%, transparent); --bg-70: color-mix(in oklab, var(--bg) 70%, transparent); --bg-80: color-mix(in oklab, var(--bg) 80%, transparent); --bg-85: color-mix(in oklab, var(--bg) 85%, transparent); --bg-90: color-mix(in oklab, var(--bg) 90%, transparent); --bg-95: color-mix(in oklab, var(--bg) 95%, transparent); --card-40: color-mix(in oklab, var(--card) 40%, transparent); --card-70: color-mix(in oklab, var(--card) 70%, transparent); --card-80: color-mix(in oklab, var(--card) 80%, transparent); --border-50: color-mix(in oklab, var(--border) 50%, transparent); --border-60: color-mix(in oklab, var(--border) 60%, transparent); --border-70: color-mix(in oklab, var(--border) 70%, transparent); --border-80: color-mix(in oklab, var(--border) 80%, transparent); /* Le voile qui adoucit une couverture de produit : sombre sur thème sombre, clair sur thème clair. Sans lui, un thème clair rendait le dégradé des couvertures en noir sur blanc. */ --voile: var(--bg-80); /* Incrustations posées sur la plaque blanche des visuels : pastille de format, crédit du marchand, légende. Elles suivent la PLAQUE, pas la page, et sont donc identiques dans les deux thèmes. C'est pour cette raison qu'elles vivent dans les dérivés partagés et non dans les blocs de palette. Sans elles, le thème sombre cassait deux fois. La pastille de format posait un texte clair sur un voile à 55 % de fond sombre étalé sur du blanc, soit 3,3:1, sous le seuil pour du 10 px capitalisé. Et la légende posait un texte clair sur un dégradé qui s'éteint vers le blanc de la plaque : le haut du libellé disparaissait purement et simplement. */ --sur-plaque: #0f1a35; --sur-plaque-doux: #55628a; --sur-plaque-voile: rgba(255, 255, 255, .9); --sur-plaque-voile-doux: rgba(255, 255, 255, .84); /* Texte des badges d'état, posé sur un fond TEINTÉ de la même couleur. Les couleurs d'état ont été descendues jusqu'à franchir 4,5:1 **sur du blanc** ; sur leur propre teinte à 15 %, elles retombaient à 3,97 (stock), 4,06 (rupture) et 4,20 (faible) dans le thème clair. Le défaut était là avant la bascule et se voyait sur trente-quatre badges de la fiche produit. Le correctif tire la couleur vers le premier plan plutôt que de figer une valeur : sur thème clair, `--fg` est sombre et la couleur fonce ; sur thème sombre, `--fg` est clair et elle s'éclaircit. Le même mélange répare donc les deux sens. À 78 %, la teinte reste franchement reconnaissable et les ratios mesurés vont de 5,37 à 8,51. */ --stock-texte: color-mix(in oklab, var(--stock) 78%, var(--fg)); --low-texte: color-mix(in oklab, var(--low) 78%, var(--fg)); --oos-texte: color-mix(in oklab, var(--oos) 78%, var(--fg)); --primary-texte: color-mix(in oklab, var(--primary) 78%, var(--fg)); --accent: color-mix(in oklab, var(--primary) 18%, var(--card)); --destructive: var(--oos); --watch: var(--low); /* Pas de `--ring` composite ici : une custom property qui compose une valeur de raccourci à partir d'une autre variable (`--ring: 0 0 0 1px var(--border)`) n'est pas réévaluée quand `--border` change à chaud. Reproduit dans Chrome le 23 août 2026 : au changement de thème, le fond et le texte suivaient, les anneaux de toutes les cartes gardaient la couleur du thème précédent. Les anneaux s'écrivent donc en clair : `box-shadow: 0 0 0 1px var(--border)`. Une variable de COULEUR qui en référence une autre (`--primary-10`, via color-mix) suit correctement, elle : c'est la composition d'un raccourci qui pose problème. */ } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg); color: var(--fg); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; } body { margin: 0; min-height: 100dvh; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; background: var(--bg); color: var(--fg); display: flex; flex-direction: column; padding-bottom: 64px; /* place de la barre de navigation basse */ } @media (min-width: 1024px) { body { padding-bottom: 0; } } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); letter-spacing: -0.045em; line-height: 1.02; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } ul, ol { margin: 0; padding: 0; list-style: none; } dl, dd, dt { margin: 0; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } kbd { font-family: var(--font-mono); } img, svg { display: block; max-width: 100%; } code { font-family: var(--font-mono); } ::selection { background: var(--primary-35); color: var(--fg); } :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .pg-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: 1rem; top: 1rem; z-index: 100; padding: .5rem .75rem; background: var(--primary); color: var(--primary-fg); border-radius: 999px; font-weight: 600; } /* `hidden` est un attribut sémantique : aucune règle de mise en page ne doit pouvoir le contredire. La feuille du navigateur ne lui donne qu'un `display: none` de très faible poids, qu'une règle de composant écrase sans le vouloir. Constaté le 24 août 2026 : `.pg-header__search { display: block }` dans une requête de média gagnait sur `hidden`, et la recherche de l'en-tête restait affichée sur l'accueil alors que le routeur la masquait, écrasée à la largeur d'un cercle vide. Le même piège guettait le CTA fixe, la liste d'autocomplétion et le bandeau de provenance. */ [hidden] { display: none !important; } /* ---------- Utilitaires ---------- */ .pg-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; } .pg-narrow { width: 100%; max-width: var(--narrow); margin: 0 auto; padding: 0 16px; } .pg-main { width: 100%; max-width: var(--container); margin: 0 auto; padding: 32px 16px; min-width: 0; } .pg-main--narrow { max-width: var(--narrow); } .pg-main--product { padding-bottom: 144px; } @media (min-width: 1024px) { .pg-main--product { padding-bottom: 64px; } } .pg-mono { font-family: var(--font-mono); } .pg-display { font-family: var(--font-display); } .pg-tabular { font-variant-numeric: tabular-nums lining-nums; } .pg-muted { color: var(--muted-fg); } .pg-primary { color: var(--primary); } .pg-oos { color: var(--oos); } .pg-low { color: var(--low); } .pg-xs { font-size: 12px; line-height: 1rem; } .pg-sm { font-size: 14px; line-height: 1.25rem; } .pg-lg { font-size: 18px; line-height: 1.75rem; } .pg-hidden { display: none !important; } .pg-hide-desktop { display: initial; } .pg-hide-mobile { display: none; } @media (min-width: 1024px) { .pg-hide-desktop { display: none !important; } .pg-hide-mobile { display: initial; } } .pg-mt-1 { margin-top: 4px; } .pg-mt-2 { margin-top: 8px; } .pg-mt-3 { margin-top: 12px; } .pg-mt-4 { margin-top: 16px; } .pg-mt-6 { margin-top: 24px; } .pg-mt-8 { margin-top: 32px; } .pg-mt-10 { margin-top: 40px; } .pg-mt-12 { margin-top: 48px; } .pg-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Eyebrow : petit libellé majuscule menthe, précédé d'un point pulsé. */ .pg-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--primary); } .pg-eyebrow--pill { background: var(--primary-10); border-radius: 999px; padding: 4px 12px; } .pg-eyebrow--oos { color: var(--oos); } .pg-eyebrow--oos .pg-dot { background: var(--oos); } .pg-eyebrow--muted { color: var(--muted-fg); letter-spacing: .16em; } .pg-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--primary); flex: none; } .pg-dot--pulse { animation: pg-pulse-dot 1.6s ease-in-out infinite; } .pg-dot--low { background: var(--low); } .pg-dot--oos { background: var(--oos); } .pg-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-fg); } .pg-label--11 { font-size: 11px; } /* Titres de page */ .pg-h1 { font-size: 36px; font-weight: 700; margin-top: 8px; } .pg-h2 { font-size: 24px; font-weight: 600; } .pg-h3 { font-size: 18px; font-weight: 700; } .pg-intro { margin-top: 8px; max-width: 42rem; color: var(--muted-fg); } @media (min-width: 640px) { .pg-h1 { font-size: 48px; } } /* ---------- Surfaces ---------- */ .pg-surface { background: var(--card); box-shadow: 0 0 0 1px var(--fg-08); transition: transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out); } @media (hover: hover) { .pg-surface--hover:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--primary-40), 0 24px 48px -24px var(--primary-28); } } .pg-ring { box-shadow: 0 0 0 1px var(--border); } .pg-glow { box-shadow: 0 0 0 1px var(--primary-40), 0 18px 48px -22px var(--primary-40); } .pg-box { background: var(--card); border-radius: var(--r24); box-shadow: 0 0 0 1px var(--border); } .pg-box--22 { border-radius: var(--r22); } .pg-box--28 { border-radius: var(--r28); } /* ---------- Boutons ---------- */ .pg-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; white-space: nowrap; border-radius: 999px; height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; line-height: 1; transition: color 150ms ease-out, background-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out, opacity 150ms ease-out; } .pg-btn svg { width: 16px; height: 16px; flex: none; } .pg-btn:active { transform: scale(.96); } .pg-btn:disabled { pointer-events: none; opacity: .5; } .pg-btn--primary { background: var(--primary); color: var(--primary-fg); box-shadow: 0 0 24px -8px var(--primary-70); } .pg-btn--primary:hover { background: var(--primary-dark); } .pg-btn--secondary { background: var(--secondary); color: var(--fg); } .pg-btn--secondary:hover { background: var(--muted); } .pg-btn--outline { background: transparent; color: var(--fg); box-shadow: 0 0 0 1px var(--border-fort); } .pg-btn--outline:hover { box-shadow: 0 0 0 1px var(--primary-50); background: var(--secondary); } .pg-btn--ghost { color: var(--fg); } .pg-btn--ghost:hover { background: var(--secondary); } .pg-btn--link { color: var(--primary); padding: 0; height: auto; } .pg-btn--link:hover { text-decoration: underline; text-underline-offset: 4px; } .pg-btn--destructive { background: var(--destructive); color: var(--primary-fg); } .pg-btn--destructive:hover { opacity: .9; } .pg-btn--sm { height: 36px; padding: 0 14px; } .pg-btn--sm svg { width: 14px; height: 14px; } .pg-btn--lg { height: 48px; padding: 0 24px; font-size: 16px; } .pg-btn--icon { width: 44px; height: 44px; padding: 0; } .pg-btn--block { width: 100%; } /* ---------- Badges ---------- */ .pg-badge { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 600; letter-spacing: .025em; background: var(--secondary); color: var(--fg); white-space: nowrap; } .pg-badge svg { width: 12px; height: 12px; flex: none; } .pg-badge--verified, .pg-badge--stock { background: var(--primary-15); color: var(--primary-texte); } .pg-badge--low { background: var(--low-15); color: var(--low-texte); } .pg-badge--oos { background: var(--oos-15); color: var(--oos-texte); } .pg-badge--watch { background: var(--low-15); color: var(--low-texte); } .pg-badge--outline { background: transparent; box-shadow: 0 0 0 1px var(--border); color: var(--fg); } .pg-badge--muted { background: var(--secondary); color: var(--muted-fg); } .pg-badge--best { background: var(--primary-15); color: var(--primary-texte); padding: 2px 8px; } .pg-badge .pg-tabular { opacity: .8; } .pg-badges { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Ancrage : statut de confiance du projet → variante de badge. */ .pg-trust-verifie { background: var(--primary-15); color: var(--primary); } .pg-trust-surveille { background: var(--low-15); color: var(--watch); } .pg-trust-verifie_propose { background: var(--secondary); color: var(--muted-fg); } .pg-trust-non_verifie { background: var(--secondary); color: var(--muted-fg); } .pg-trust-bloque { background: var(--oos-15); color: var(--oos); } /* ---------- Champs ---------- */ .pg-input { display: flex; width: 100%; height: 44px; border-radius: 999px; background: var(--card); padding: 8px 16px; font-size: 16px; border: 0; box-shadow: 0 0 0 1px var(--border-fort); color: var(--fg); } .pg-input::placeholder { color: var(--muted-fg); } .pg-input:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary); } .pg-input:disabled { opacity: .5; } .pg-input[type="search"]::-webkit-search-decoration, .pg-input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } .pg-textarea { display: block; width: 100%; min-height: 112px; border-radius: var(--radius-md); background: var(--card); padding: 8px 12px; font-size: 16px; border: 0; box-shadow: 0 0 0 1px var(--border-fort); color: var(--fg); resize: vertical; } .pg-textarea:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary); } .pg-select { height: 44px; max-width: 11.5rem; border-radius: 999px; background: var(--card); padding: 0 36px 0 12px; border: 0; box-shadow: 0 0 0 1px var(--border-fort); color: var(--fg); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238aa39b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .pg-select:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--primary); } .pg-field { display: grid; gap: 8px; } .pg-field-label { font-size: 14px; font-weight: 500; line-height: 1; } .pg-field-help { font-size: 12px; color: var(--muted-fg); } /* Interrupteur (case à cocher stylée) */ .pg-switch { display: flex; min-height: 44px; align-items: center; gap: 12px; cursor: pointer; } .pg-switch input { position: absolute; opacity: 0; width: 0; height: 0; } .pg-switch__track { position: relative; display: inline-flex; width: 44px; height: 24px; flex: none; border-radius: 999px; background: var(--muted); box-shadow: 0 0 0 1px var(--border-fort); transition: background-color 150ms var(--ease); } .pg-switch__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--border); transition: transform 150ms var(--ease); } .pg-switch input:checked + .pg-switch__track { background: var(--primary); } .pg-switch input:checked + .pg-switch__track::after { transform: translateX(20px); } .pg-switch input:focus-visible + .pg-switch__track { box-shadow: 0 0 0 2px var(--primary); } .pg-switch__text { display: block; font-size: 14px; font-weight: 500; } .pg-switch__hint { display: block; font-size: 12px; color: var(--muted-fg); font-weight: 400; } .pg-switch--plain .pg-switch__text { font-weight: 400; } .pg-toggles { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; row-gap: 12px; } /* ---------- Recherche ---------- */ .pg-search { position: relative; width: 100%; } .pg-search__box { position: relative; border-radius: 999px; transition: box-shadow 200ms; } .pg-search__icon { position: absolute; left: 16px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--primary); pointer-events: none; } .pg-search .pg-input { padding-left: 44px; } .pg-search--lg .pg-input { height: 56px; padding-right: 64px; background: var(--card-80); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pg-search--lg .pg-search__box:focus-within { box-shadow: 0 0 0 1px var(--primary), 0 0 0 8px var(--primary-16), 0 24px 60px -20px var(--primary-35); } .pg-search__kbd { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); display: none; border-radius: var(--radius-md); background: var(--secondary); padding: 2px 6px; font-family: var(--font-mono); font-size: 10px; color: var(--muted-fg); } @media (min-width: 640px) { .pg-search--lg .pg-search__kbd { display: inline; } } .pg-search__list { position: absolute; z-index: 30; left: 0; right: 0; margin-top: 8px; overflow: hidden; border-radius: var(--radius-2xl); background: var(--popover); padding: 8px 0; box-shadow: 0 0 0 1px var(--border), 0 24px 48px -24px rgba(0, 0, 0, .8); } .pg-search__list[hidden] { display: none; } .pg-search__item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; text-align: left; transition: background-color 150ms; } .pg-search__item:hover, .pg-search__item[aria-selected="true"] { background: var(--secondary); } .pg-search__item-name { display: block; font-size: 14px; font-weight: 500; } .pg-search__item-set { display: block; font-size: 12px; color: var(--muted-fg); } .pg-search__item-type { border-radius: 999px; background: var(--secondary); padding: 2px 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); flex: none; } .pg-search__all { display: block; width: 100%; padding: 10px 16px; text-align: left; font-size: 14px; font-weight: 500; color: var(--primary); } .pg-search__all:hover { background: var(--secondary); } /* Palette ⌘K */ .pg-cmdk { display: inline-flex; height: 44px; min-width: 44px; align-items: center; gap: 8px; flex: none; border-radius: 999px; background: var(--secondary); padding: 0 12px; font-size: 14px; color: var(--muted-fg); box-shadow: 0 0 0 1px var(--border); transition: color 150ms, box-shadow 150ms; } .pg-cmdk svg { width: 16px; height: 16px; color: var(--primary); } .pg-cmdk:hover { color: var(--fg); box-shadow: 0 0 0 1px var(--primary-40); } .pg-cmdk__text { display: none; } .pg-cmdk__kbd { display: none; border-radius: var(--radius-md); background: var(--bg); padding: 2px 6px; font-family: var(--font-mono); font-size: 10px; } @media (min-width: 768px) { .pg-cmdk__text { display: inline; } } @media (min-width: 1024px) { .pg-cmdk__kbd { display: inline; } } /* ---------- Puces ---------- */ .pg-pills { display: flex; flex-wrap: wrap; gap: 8px; } .pg-pill { display: inline-flex; align-items: center; border-radius: 999px; background: var(--secondary); padding: 8px 16px; font-size: 14px; font-weight: 500; box-shadow: 0 0 0 1px var(--border); transition: color 150ms, box-shadow 150ms; } .pg-pill:hover { color: var(--primary); box-shadow: 0 0 0 1px var(--primary-50); } .pg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pg-chip { display: inline-flex; min-height: 44px; align-items: center; border-radius: 999px; padding: 0 14px; font-size: 14px; font-weight: 500; background: var(--card); box-shadow: 0 0 0 1px var(--border); transition: background-color 150ms, color 150ms, box-shadow 150ms; } .pg-chip:hover { box-shadow: 0 0 0 1px var(--primary-40); } .pg-chip--active, .pg-chip[aria-pressed="true"] { background: var(--primary); color: var(--primary-fg); box-shadow: 0 0 0 1px var(--primary); } .pg-tag { display: inline-flex; border-radius: 999px; background: var(--secondary); padding: 4px 12px; font-size: 12px; font-weight: 500; box-shadow: 0 0 0 1px var(--border); } /* ---------- En-tête ---------- */ .pg-header { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border-60); background: var(--bg-70); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .pg-header__row { display: flex; align-items: center; gap: 12px; max-width: var(--container); margin: 0 auto; padding: 12px 16px; } .pg-header__spacer { flex: 1; } .pg-header__search { display: none; flex: 1; /* Une largeur plancher, sinon c'est ce champ que flexbox comprime en premier quand la ligne manque de place : mesuré à 1280 px, il tombait à 60 px et son contenu chevauchait la navigation. Mieux vaut que ce soit les compteurs live qui cèdent, ils sont moins utiles (voir la requête de média plus bas). */ min-width: 12rem; } .pg-header__search-mobile { max-width: var(--container); margin: 0 auto; padding: 0 16px 12px; } @media (min-width: 768px) { .pg-header__search { display: block; } .pg-header__search-mobile { display: none; } } .pg-logo { display: flex; align-items: center; gap: 10px; flex: none; } /* La marque est un dessin large, pas une pastille : sa hauteur est fixée, sa largeur suit. Une boîte carrée l'écraserait au tiers. */ .pg-logo__mark { height: 30px; width: auto; flex: none; display: block; } .pg-logo__word { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.025em; color: var(--fg); } .pg-live-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--primary-10); padding: 2px 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--primary); } .pg-nav { display: none; align-items: center; gap: 2px; } @media (min-width: 1024px) { .pg-nav { display: flex; } } .pg-nav__link { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; border-radius: 999px; padding: 0 14px; font-size: 14px; font-weight: 500; /* Un libellé de navigation ne se casse pas : « À propos » passait sur deux lignes dès que la police du thème était un peu plus large, et déformait la hauteur de la barre. */ white-space: nowrap; color: var(--muted-fg); transition: color 150ms, background-color 150ms; } .pg-nav__link:hover { color: var(--fg); background: var(--secondary); } .pg-nav__link[aria-current="page"] { color: var(--fg); background: var(--secondary); } .pg-nav__link svg { width: 16px; height: 16px; } .pg-nav__link--report { color: var(--fg); font-weight: 600; } .pg-header__live { display: none; align-items: center; gap: 12px; white-space: nowrap; } @media (min-width: 1024px) { .pg-header__live { display: flex; } } .pg-header__live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--primary); } .pg-header__counts { font-family: var(--font-mono); font-size: 11px; color: var(--muted-fg); } .pg-clock { font-family: var(--font-mono); font-size: 11px; color: var(--fg-80); } .pg-burger { width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; } .pg-burger:hover { background: var(--secondary); } .pg-burger svg { width: 20px; height: 20px; } @media (min-width: 1024px) { .pg-burger { display: none; } } .pg-mobile-nav { border-top: 1px solid var(--border); background: var(--bg-95); padding: 12px 16px; } .pg-mobile-nav[hidden] { display: none; } @media (min-width: 1024px) { .pg-mobile-nav { display: none !important; } } .pg-mobile-nav a { display: flex; min-height: 44px; align-items: center; font-size: 14px; font-weight: 500; } .pg-mobile-nav a[aria-current="page"] { color: var(--primary); } /* Widget PokéBalls (gamification) dans l'en-tête */ .pb-widget { display: flex; align-items: center; gap: 8px; } .pb-widget[hidden] { display: none; } .pb-solde { display: inline-flex; align-items: center; gap: 6px; height: 36px; border-radius: 999px; background: var(--secondary); padding: 0 12px; font-size: 13px; box-shadow: 0 0 0 1px var(--border); } .pb-solde:hover { box-shadow: 0 0 0 1px var(--primary-40); } .pb-icone { color: var(--primary); } .pb-total { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; } .pb-unite { display: none; color: var(--muted-fg); } @media (min-width: 1280px) { .pb-unite { display: inline; } } .pb-serie { font-size: 11px; color: var(--low-texte); } .pb-serie[hidden] { display: none; } .pb-titre { display: none; font-size: 11px; color: var(--muted-fg); } .pb-gain { position: fixed; top: 76px; left: 50%; transform: translate(-50%, -8px); z-index: 60; border-radius: 999px; background: var(--card); color: var(--primary); padding: 6px 14px; font-size: 13px; font-weight: 600; box-shadow: 0 0 0 1px var(--border); opacity: 0; pointer-events: none; transition: opacity 200ms, transform 200ms; } .pb-gain.is-visible { opacity: 1; transform: translate(-50%, 0); } /* Sous 1360 px, la ligne d'en-tête n'a plus la place de tout porter : les compteurs live s'effacent avant que la recherche ou la navigation ne soient comprimées. L'horloge et le décompte d'offres restent lisibles sur la page, ce ne sont pas des commandes. */ @media (max-width: 1359px) { .pg-header__live { display: none; } } /* ---------- Navigation basse (mobile) ---------- */ .pg-bottomnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; border-top: 1px solid var(--border-80); background: var(--bg-85); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 1024px) { .pg-bottomnav { display: none; } } .pg-bottomnav ul { display: grid; grid-template-columns: repeat(4, 1fr); } .pg-bottomnav a { display: flex; min-height: 56px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 11px; font-weight: 500; color: var(--muted-fg); } .pg-bottomnav a svg { width: 20px; height: 20px; } .pg-bottomnav a[aria-current="page"] { color: var(--primary); } /* ---------- Pied de page ---------- */ .pg-footer { margin-top: auto; border-top: 1px solid var(--border-70); background: var(--card-40); } .pg-footer__grid { display: grid; gap: 32px; max-width: var(--container); margin: 0 auto; padding: 48px 16px; } @media (min-width: 640px) { .pg-footer__grid { grid-template-columns: repeat(3, 1fr); } } .pg-footer__tagline { margin-top: 12px; max-width: 20rem; font-size: 14px; color: var(--muted-fg); } .pg-footer__title { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--muted-fg); margin-bottom: 12px; } .pg-footer__links a { display: block; padding: 4px 0; font-size: 14px; color: var(--muted-fg); } .pg-footer__links a:hover { color: var(--primary); } .pg-footer__text { font-size: 14px; color: var(--muted-fg); } .pg-footer__legal { border-top: 1px solid var(--border-70); } .pg-footer__legal p { max-width: var(--container); margin: 0 auto; padding: 16px; font-size: 12px; color: var(--muted-fg); } /* ---------- Bandeau provenance des données ---------- */ .pg-banner { max-width: var(--container); margin: 16px auto 0; padding: 0 16px; } .pg-banner[hidden] { display: none; } .pg-banner__inner { border-radius: var(--radius-md); background: var(--low-15); color: var(--low); padding: 10px 14px; font-size: 13px; line-height: 1.5; box-shadow: 0 0 0 1px rgba(232, 180, 90, .35); } .pg-banner__inner strong { color: var(--fg); } .pg-banner__inner a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } /* ---------- Hero ---------- */ .pg-hero { position: relative; overflow: hidden; } .pg-hero__grid { position: relative; display: grid; align-items: center; gap: 40px; max-width: var(--container); margin: 0 auto; padding: 40px 16px 48px; } @media (min-width: 1024px) { .pg-hero__grid { grid-template-columns: 1.05fr 0.95fr; padding-top: 64px; } } .pg-hero__title { margin-top: 20px; font-family: var(--font-display); font-size: 48px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; } .pg-hero__title span { display: block; } .pg-hero__title .pg-primary { margin-top: 4px; } @media (min-width: 640px) { .pg-hero__title { font-size: 72px; } } .pg-hero__lead { margin-top: 20px; max-width: 28rem; font-size: 16px; color: var(--muted-fg); } @media (min-width: 640px) { .pg-hero__lead { font-size: 18px; } } .pg-hero__search { margin-top: 32px; max-width: 36rem; } .pg-hero__pills { margin-top: 20px; } .pg-ambient { pointer-events: none; position: absolute; inset: -20%; background: radial-gradient(ellipse 50% 40% at 70% 0%, rgba(62, 239, 192, .16), transparent 60%), radial-gradient(ellipse 40% 50% at 8% 85%, rgba(62, 239, 192, .08), transparent 55%); animation: pg-ambient-drift 18s ease-in-out infinite alternate; } .pg-grid-fade { pointer-events: none; position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(62, 239, 192, .08) 1px, transparent 1px), linear-gradient(to bottom, rgba(62, 239, 192, .08) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, #000 18%, transparent 78%); mask-image: radial-gradient(ellipse 75% 65% at 50% 25%, #000 18%, transparent 78%); } .pg-cursor-glow { pointer-events: none; position: absolute; inset: 0; display: none; background: radial-gradient(520px circle at var(--glow-x, 72%) var(--glow-y, 18%), var(--primary-16), transparent 58%); } @media (min-width: 768px) { .pg-cursor-glow { display: block; } } /* Stats */ .pg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; } .pg-stat { border-radius: var(--radius-2xl); background: var(--card-80); padding: 16px 12px; box-shadow: 0 0 0 1px var(--border); } .pg-stat dt { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-fg); } .pg-stat dd { margin-top: 4px; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums lining-nums; } @media (min-width: 640px) { .pg-stat dd { font-size: 30px; } } /* Radar */ .pg-radar { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r28); background: var(--card-80); box-shadow: 0 0 0 1px var(--primary-40), 0 18px 48px -22px var(--primary-40); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .pg-radar__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-70); padding: 14px 20px; } .pg-radar__count { font-family: var(--font-mono); font-size: 11px; color: var(--muted-fg); font-variant-numeric: tabular-nums; } .pg-radar__body { position: relative; height: 340px; overflow: hidden; } @media (min-width: 640px) { .pg-radar__body { height: 400px; } } .pg-radar__body::before, .pg-radar__body::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; } .pg-radar__body::before { top: 0; height: 40px; background: linear-gradient(to bottom, var(--card), transparent); } .pg-radar__body::after { bottom: 0; height: 48px; background: linear-gradient(to top, var(--card), transparent); } .pg-radar__track { animation: pg-radar-scroll 26s linear infinite; } .pg-radar:hover .pg-radar__track { animation-play-state: paused; } .pg-radar__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border-50); padding: 14px 20px; transition: background-color 150ms; } .pg-radar__item:hover { background: var(--primary-05); } .pg-radar__name { font-weight: 500; } .pg-radar__meta { margin-top: 2px; font-size: 11px; color: var(--muted-fg); } .pg-radar__price { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; text-align: right; } .pg-radar__stock { font-size: 11px; color: var(--muted-fg); text-align: right; font-variant-numeric: tabular-nums; } .pg-radar__empty { padding: 40px 20px; text-align: center; color: var(--muted-fg); font-size: 14px; } /* Ticker */ .pg-ticker { position: relative; overflow: hidden; border-top: 1px solid var(--border-70); border-bottom: 1px solid var(--border-70); background: var(--card-70); } .pg-ticker::before, .pg-ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 2; pointer-events: none; } .pg-ticker::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); } .pg-ticker::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); } .pg-ticker__track { display: flex; gap: 40px; width: max-content; padding: 14px 0; animation: pg-ticker 36s linear infinite; } .pg-ticker:hover .pg-ticker__track { animation-play-state: paused; } .pg-ticker__item { display: flex; flex: none; align-items: center; gap: 12px; font-size: 14px; } .pg-ticker__type { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-fg); } .pg-ticker__set { font-weight: 500; } .pg-ticker__price { font-family: var(--font-display); font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; } /* Features */ .pg-features { display: grid; gap: 1px; overflow: hidden; border-radius: var(--r28); background: var(--border); } @media (min-width: 640px) { .pg-features { grid-template-columns: repeat(3, 1fr); } } .pg-feature { background: var(--card); padding: 20px; } @media (min-width: 640px) { .pg-feature { padding: 24px; } } .pg-feature__icon { display: flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 999px; background: var(--primary-15); color: var(--primary); } .pg-feature__icon svg { width: 20px; height: 20px; } .pg-feature h2 { margin-top: 16px; font-size: 18px; font-weight: 700; } .pg-feature p { margin-top: 4px; font-size: 14px; color: var(--muted-fg); } /* Section avec en-tête et lien à droite */ .pg-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; } .pg-section-head h2 { margin-top: 4px; font-size: 30px; font-weight: 700; } @media (min-width: 640px) { .pg-section-head h2 { font-size: 36px; } } .pg-section-link { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--primary); white-space: nowrap; } .pg-section-link svg { width: 16px; height: 16px; } /* ---------- Cartes produit ---------- */ .pg-grid { display: grid; gap: 16px; } @media (min-width: 640px) { .pg-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .pg-grid { grid-template-columns: repeat(4, 1fr); } } .pg-grid--3 { grid-template-columns: 1fr; } @media (min-width: 640px) { .pg-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .pg-grid--3 { grid-template-columns: repeat(3, 1fr); } } .pg-card { display: flex; height: 100%; flex-direction: column; overflow: hidden; border-radius: var(--r22); background: var(--card); box-shadow: 0 0 0 1px var(--border); transition: transform 280ms var(--ease-out), box-shadow 280ms var(--ease-out); } @media (hover: hover) { .pg-card:hover { transform: perspective(1200px) rotateX(3deg) rotateY(-5deg) translateY(-6px); box-shadow: 0 0 0 1px var(--primary-40), 0 24px 48px -24px var(--primary-28); } } .pg-card--featured { grid-column: span 1; } @media (min-width: 640px) { .pg-card--featured { grid-column: span 2; } } .pg-card__body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 16px; } .pg-card__set { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--muted-fg); } .pg-card__name { font-family: var(--font-display); font-size: 18px; font-weight: 700; line-height: 1.375; letter-spacing: -0.02em; } .pg-card--featured .pg-card__name { font-size: 24px; } @media (min-width: 640px) { .pg-card--featured .pg-card__name { font-size: 30px; } } .pg-card__foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; padding-top: 12px; gap: 8px; } .pg-card__price { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; } .pg-card--featured .pg-card__price { font-size: 36px; } .pg-card__price--none { color: var(--muted-fg); font-size: 16px; font-weight: 500; } .pg-card__live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted-fg); white-space: nowrap; } /* Couverture (silhouette SVG sur dégradé d'accent) */ .pg-cover { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 4 / 5; background: var(--cover-accent, #1a2628); color: var(--cover-accent2, #3eefc0); } .pg-card--featured .pg-cover { aspect-ratio: 16 / 11; } @media (min-width: 640px) { .pg-card--featured .pg-cover { aspect-ratio: 16 / 10; } } .pg-cover--compact { aspect-ratio: 4 / 3; border-radius: 12px; } .pg-cover__glow1 { position: absolute; inset: 0; opacity: .55; background: linear-gradient(160deg, transparent 28%, var(--cover-accent2, #3eefc0) 140%); } .pg-cover__glow2 { position: absolute; inset: 0; opacity: .25; background: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .35), transparent 36%); } .pg-cover__shape { position: absolute; left: 0; right: 0; top: 16px; bottom: 16px; width: 100%; height: auto; color: var(--fg-80); } .pg-cover--captioned .pg-cover__shape { top: 24px; bottom: auto; height: 55%; } .pg-cover__type { position: absolute; left: 12px; top: 12px; z-index: 10; border-radius: 999px; background: var(--bg-55); padding: 2px 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em; color: var(--fg); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .pg-cover__hot { position: absolute; right: 12px; top: 12px; z-index: 10; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; background: var(--oos); padding: 2px 8px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--primary-fg); } .pg-cover__hot .pg-dot { background: var(--primary-fg); } .pg-cover__caption { position: absolute; left: 0; right: 0; bottom: 0; z-index: 10; padding: 12px; background: linear-gradient(to top, var(--bg-80), transparent); color: var(--fg); } .pg-cover__caption-set { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; opacity: .7; } .pg-cover__caption-name { font-family: var(--font-display); font-size: 16px; font-weight: 700; line-height: 1.25; } .pg-cover--compact .pg-cover__caption-name { font-size: 14px; } /* Reflet diagonal et balayage */ .pg-cover--sheen::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: 5; background: linear-gradient(to right, transparent, rgba(255, 255, 255, .18), transparent); transform: translateX(-120%) skewX(-16deg); animation: pg-sheen 4.5s ease-in-out infinite; pointer-events: none; } .pg-cover--scan::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 28%; z-index: 4; background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .08), transparent); transform: translateY(-100%); animation: pg-scan 5.5s ease-in-out infinite; pointer-events: none; } /* ---------- Variantes d'une catégorie ---------- Une fiche (extension × format) qui a des produits nommés en dessous n'est plus un produit : c'est une catégorie. Ses variantes s'affichent en grille plus dense que les cartes du catalogue, parce qu'on y compare des articles déjà réunis par leur extension et leur format : ce qui les distingue tient en un nom et un prix de départ. */ .pg-variantes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .pg-variante { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-md); text-decoration: none; color: inherit; } .pg-variante__cover { position: relative; } .pg-variante__corps { padding: 12px 14px 14px; display: grid; gap: 3px; } .pg-variante__nom { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.25; margin: 0; } .pg-variante__prix { font-family: var(--font-display); font-size: 19px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; margin: 4px 0 0; } /* ---------- Cartes vendeur ---------- */ .pg-vendors { display: grid; gap: 12px; margin-top: 16px; } .pg-vendor { display: grid; gap: 12px; border-radius: var(--r22); padding: 16px; } @media (min-width: 640px) { .pg-vendor { grid-template-columns: 1fr auto; align-items: center; } } .pg-vendor__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .pg-vendor__name { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; } .pg-vendor__meta { margin-top: 4px; font-size: 14px; color: var(--muted-fg); } .pg-vendor__domain { font-family: var(--font-mono); font-size: 13px; color: var(--muted-fg); } .pg-vendor__domain--link { color: var(--primary); } .pg-vendor__domain--link:hover { text-decoration: underline; text-underline-offset: 3px; } .pg-bar { margin-top: 12px; height: 6px; max-width: 20rem; overflow: hidden; border-radius: 999px; background: var(--secondary); } .pg-bar__fill { height: 100%; border-radius: 999px; background: var(--primary); } .pg-bar__fill--watch { background: var(--watch); } .pg-bar__fill--oos { background: var(--oos); } .pg-bar__fill--muted { background: var(--muted-fg); } .pg-vendor__count { font-size: 14px; color: var(--muted-fg); } @media (min-width: 640px) { .pg-vendor__count { text-align: right; } } .pg-vendor__count strong { display: block; font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; } .pg-vendor__count span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; } /* Fiche vendeur : statistiques 4 colonnes */ .pg-kpis { display: grid; gap: 16px; border-radius: var(--r24); background: var(--card); padding: 20px; box-shadow: 0 0 0 1px var(--border); } @media (min-width: 640px) { .pg-kpis { grid-template-columns: repeat(4, 1fr); } } .pg-kpis dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-fg); } .pg-kpis dd { margin-top: 4px; font-size: 14px; font-weight: 500; } /* Preuves de qualification */ .pg-factors { display: grid; gap: 12px; } .pg-factor { display: grid; gap: 6px; border-radius: var(--r22); background: var(--card); padding: 16px; box-shadow: 0 0 0 1px var(--border); } .pg-factor__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pg-factor__name { font-weight: 600; } .pg-factor__score { font-family: var(--font-display); font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .pg-factor__score--none { color: var(--muted-fg); font-size: 14px; font-weight: 500; } .pg-factor__note { font-size: 13px; color: var(--muted-fg); } .pg-factor__reason { font-size: 13px; color: var(--low); } .pg-factor__src { font-family: var(--font-mono); font-size: 11px; color: var(--muted-fg); word-break: break-all; } /* ---------- Listes ---------- */ .pg-list { overflow: hidden; border-radius: var(--r24); background: var(--card); box-shadow: 0 0 0 1px var(--border); } .pg-list > li { padding: 12px 16px; } .pg-list > li + li { border-top: 1px solid var(--border); } .pg-list__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pg-list__name { font-weight: 500; } a.pg-list__name:hover { color: var(--primary); } .pg-list__note { font-size: 14px; color: var(--muted-fg); } .pg-list__score { flex: none; font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; } .pg-list__domain { font-family: var(--font-mono); font-size: 14px; } .pg-rules { display: grid; gap: 12px; margin-top: 32px; } @media (min-width: 640px) { .pg-rules { grid-template-columns: repeat(2, 1fr); } } .pg-rule { border-radius: var(--r22); background: var(--card); padding: 20px; box-shadow: 0 0 0 1px var(--border); } .pg-rule__num { font-family: var(--font-mono); font-size: 11px; color: var(--primary); } .pg-rule h2, .pg-rule h3 { margin-top: 4px; font-size: 18px; font-weight: 700; } .pg-rule p { margin-top: 4px; font-size: 14px; color: var(--muted-fg); } .pg-cards { display: grid; gap: 12px; } @media (min-width: 640px) { .pg-cards--2 { grid-template-columns: repeat(2, 1fr); } } .pg-article { border-radius: var(--r22); background: var(--card); padding: 20px; box-shadow: 0 0 0 1px var(--border); } .pg-article h2, .pg-article h3 { font-size: 18px; font-weight: 700; } .pg-article h3 { font-size: 16px; } .pg-article p { margin-top: 8px; font-size: 14px; color: var(--muted-fg); } .pg-article__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; } .pg-article__pill { border-radius: 999px; background: var(--primary-10); padding: 2px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .025em; color: var(--primary); } .pg-article__tags { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; } .pg-panel { border-radius: var(--r24); background: var(--card); padding: 24px; box-shadow: 0 0 0 1px var(--border); } .pg-panel h2 { font-size: 24px; font-weight: 600; } .pg-panel p { margin-top: 8px; color: var(--muted-fg); font-size: 14px; } .pg-callout { border-radius: var(--radius-xl); background: var(--oos-10); padding: 16px; font-size: 14px; color: var(--oos); } .pg-callout--low { background: var(--low-15); color: var(--low); } /* ---------- État vide ---------- */ .pg-empty { border-radius: var(--r24); background: var(--card); padding: 48px 20px; text-align: center; box-shadow: 0 0 0 1px var(--border); } .pg-empty--compact { padding: 40px 20px; } .pg-empty__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; } .pg-empty--compact .pg-empty__title { font-size: 18px; } .pg-empty__text { margin-top: 4px; font-size: 14px; color: var(--muted-fg); } .pg-empty__actions { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .pg-error { border-radius: var(--r24); background: var(--oos-10); padding: 20px; color: var(--oos); font-size: 14px; } /* ---------- Fiche produit ---------- */ .pg-crumbs { font-size: 14px; color: var(--muted-fg); } .pg-crumbs a:hover { color: var(--fg); } .pg-crumbs span { margin: 0 6px; } .pg-product { display: grid; gap: 32px; margin-top: 24px; } @media (min-width: 1024px) { .pg-product { grid-template-columns: 320px 1fr; } } .pg-product__cover { margin: 0 auto; width: 100%; max-width: 20rem; } @media (min-width: 1024px) { .pg-product__cover { max-width: none; } } .pg-product__frame { overflow: hidden; border-radius: var(--r28); box-shadow: 0 0 0 1px var(--border); } .pg-product__set { margin-top: 12px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em; color: var(--muted-fg); } .pg-product__name { margin-top: 4px; font-size: 36px; font-weight: 700; } @media (min-width: 640px) { .pg-product__name { font-size: 48px; } } .pg-product__lead { margin-top: 12px; max-width: 36rem; color: var(--muted-fg); } .pg-best { margin-top: 24px; border-radius: var(--r24); background: var(--card); padding: 20px; } .pg-best__price { margin-top: 4px; font-family: var(--font-display); font-size: 48px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; letter-spacing: -0.045em; } @media (min-width: 640px) { .pg-best__price { font-size: 60px; } } .pg-best__meta { margin-top: 4px; font-size: 14px; color: var(--muted-fg); } .pg-best .pg-btn { margin-top: 16px; } .pg-product__ref { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--muted-fg); } .pg-offers-head { display: flex; flex-direction: column; gap: 16px; margin-top: 40px; } @media (min-width: 640px) { .pg-offers-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } } .pg-offers-head h2 { font-size: 24px; font-weight: 600; } .pg-offers-head p { font-size: 14px; color: var(--muted-fg); } .pg-toolbar { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; } .pg-toolbar__count { font-family: var(--font-mono); font-size: 12px; color: var(--muted-fg); font-variant-numeric: tabular-nums; } .pg-toolbar__count strong { color: var(--fg); font-weight: 500; } .pg-toolbar__sort { display: flex; align-items: center; gap: 8px; font-size: 14px; } /* Tableau d'offres (bureau) */ .pg-table-wrap { display: none; overflow: hidden; border-radius: var(--r24); background: var(--card); box-shadow: 0 0 0 1px var(--border); } .pg-offer-cards { display: grid; gap: 12px; } @media (min-width: 768px) { .pg-table-wrap { display: block; } .pg-offer-cards { display: none; } } .pg-table { width: 100%; border-collapse: collapse; font-size: 14px; } .pg-table thead { border-bottom: 1px solid var(--border); text-align: left; } .pg-table th { padding: 12px 16px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .14em; color: var(--muted-fg); } .pg-table td { padding: 12px 16px; vertical-align: top; } .pg-table tbody tr { border-bottom: 1px solid var(--border-70); transition: background-color 150ms; } .pg-table tbody tr:last-child { border-bottom: 0; } .pg-table tbody tr:hover { background: var(--primary-05); } .pg-table tbody tr.is-best { background: var(--primary-10); } .pg-table tbody tr.is-oos { opacity: .5; } .pg-table .pg-offer__vendor { font-weight: 500; } .pg-table .pg-offer__vendor:hover { color: var(--primary); } .pg-table .pg-offer__sub { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; } .pg-table .pg-offer__total { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; } .pg-table .pg-offer__ship-note { display: block; font-size: 11px; color: var(--muted-fg); } .pg-table .pg-offer__affil { margin-top: 4px; font-size: 10px; color: var(--muted-fg); } .pg-table td.pg-offer__delay { color: var(--muted-fg); } .pg-offer__free { color: var(--stock); } /* Cartes d'offre (mobile) */ .pg-offer-card { min-width: 0; border-radius: var(--r22); background: var(--card); padding: 16px; box-shadow: 0 0 0 1px var(--border); } .pg-offer-card.is-oos { opacity: .7; } .pg-offer-card.is-best { box-shadow: 0 0 0 1px var(--primary-40), 0 18px 48px -22px var(--primary-40); } .pg-offer-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .pg-offer-card__vendor { font-weight: 500; } .pg-offer-card__total { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; text-align: right; } .pg-offer-card dl { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 14px; } .pg-offer-card dt { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-fg); } .pg-offer-card dd { margin-top: 2px; display: flex; align-items: center; gap: 6px; } .pg-offer-card dd svg { width: 14px; height: 14px; color: var(--muted-fg); } .pg-offer-card .pg-btn { margin-top: 16px; } .pg-offer-card__affil { margin-top: 6px; text-align: center; font-size: 11px; color: var(--muted-fg); } /* Statut de stock avec sous-ligne de vérification */ .pg-stock { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .pg-stock__when { font-size: 11px; color: var(--muted-fg); } .pg-stock__conf { font-size: 11px; color: var(--muted-fg); } /* CTA mobile fixe */ /* Juste au-dessus de la barre de navigation basse : 56px de contrôle plus la zone sûre de l'appareil. Une valeur en dur laisserait un liseré de fond entre les deux sur un iPhone. */ .pg-sticky-cta { position: fixed; left: 0; right: 0; z-index: 30; bottom: calc(56px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-80); background: var(--bg-90); padding: 12px 16px; backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); } .pg-sticky-cta[hidden] { display: none; } @media (min-width: 1024px) { .pg-sticky-cta { display: none !important; } } .pg-sticky-cta__row { display: flex; max-width: var(--container); margin: 0 auto; align-items: center; justify-content: space-between; gap: 12px; } .pg-sticky-cta__price { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--primary); font-variant-numeric: tabular-nums; } /* ---------- Dialogue ---------- */ .pg-dialog { width: calc(100% - 2rem); max-width: 32rem; border: 0; border-radius: var(--radius-2xl); background: var(--card); color: var(--fg); padding: 24px; box-shadow: 0 0 0 1px var(--border), 0 40px 80px -30px rgba(0, 0, 0, .8); margin: auto; } .pg-dialog::backdrop { background: var(--bg-80); backdrop-filter: blur(8px); } .pg-dialog[open] { animation: pg-zoom-in 150ms var(--ease) both; } .pg-dialog__close { position: absolute; right: 12px; top: 12px; border-radius: var(--radius-md); padding: 8px; color: var(--muted-fg); } .pg-dialog__close:hover { background: var(--secondary); color: var(--fg); } .pg-dialog__close svg { width: 16px; height: 16px; } .pg-dialog__title { font-family: var(--font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.025em; } .pg-dialog__desc { margin-top: 6px; font-size: 14px; color: var(--muted-fg); } .pg-dialog form { display: grid; gap: 16px; margin-top: 16px; } .pg-dialog fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; } .pg-dialog legend { font-size: 14px; font-weight: 500; padding: 0; margin-bottom: 8px; } .pg-radios { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .pg-radio { display: flex; min-height: 44px; align-items: center; gap: 8px; border-radius: var(--radius-md); padding: 0 12px; font-size: 14px; box-shadow: 0 0 0 1px var(--border-fort); cursor: pointer; } .pg-radio:has(input:checked) { background: var(--accent); } .pg-radio input { accent-color: var(--primary); margin: 0; } .pg-dialog--cmdk { padding: 0; overflow: hidden; max-width: 32rem; } .pg-cmdk-row { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); padding: 0 48px 0 16px; } .pg-cmdk-row svg { width: 16px; height: 16px; color: var(--primary); flex: none; } .pg-cmdk-row input { height: 56px; width: 100%; background: transparent; border: 0; font-size: 16px; outline: none; color: var(--fg); } .pg-cmdk-list { max-height: 20rem; overflow-y: auto; padding: 8px 0; } .pg-cmdk-list .pg-search__item-type { background: var(--primary-10); } .pg-status { font-size: 14px; color: var(--muted-fg); min-height: 1.25rem; } .pg-status.is-error { color: var(--oos); } .pg-status.is-ok { color: var(--primary); } .pg-actions { display: flex; flex-wrap: wrap; gap: 8px; } /* Boutique PokéBalls (dialogue existant, restylé) */ .pb-dialog .pb-section { margin-top: 20px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-fg); } .pb-boutique-solde { margin-top: 6px; color: var(--muted-fg); } .pb-progression { margin-top: 12px; height: 6px; border-radius: 999px; background: var(--secondary); overflow: hidden; } .pb-progression-barre { height: 100%; background: var(--primary); border-radius: 999px; } .pb-prochain { margin-top: 6px; font-size: 13px; color: var(--muted-fg); } .pb-gains li, .pb-perks li, .pb-garanties li { padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; } .pb-gains li { display: flex; gap: 12px; } .pb-gain-points { flex: none; color: var(--primary); font-weight: 600; font-variant-numeric: tabular-nums; } .pb-gain-desc { color: var(--muted-fg); font-size: 13px; } .pb-perk-tete { display: flex; justify-content: space-between; gap: 12px; } .pb-perk-cout { color: var(--primary); font-variant-numeric: tabular-nums; } .pb-perk-desc { margin-top: 4px; color: var(--muted-fg); font-size: 13px; } .pb-perk-btn { margin-top: 8px; display: inline-flex; height: 36px; align-items: center; border-radius: 999px; padding: 0 14px; font-size: 13px; font-weight: 600; background: var(--primary); color: var(--primary-fg); } .pb-perk-btn:disabled { background: var(--secondary); color: var(--muted-fg); } .pb-perk.is-owned .pb-perk-btn { background: var(--primary-15); color: var(--primary); } .pb-dialog .pg-actions { margin-top: 20px; } /* ---------- Toasts ---------- */ .pg-toasts { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 70; display: grid; gap: 8px; pointer-events: none; } .pg-toast { border-radius: var(--radius-md); background: var(--card); color: var(--fg); border: 1px solid var(--border); padding: 10px 14px; font-size: 14px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .8); animation: pg-rise 300ms var(--ease-out) both; pointer-events: auto; } .pg-toast--error { border-color: var(--oos); color: var(--oos); } /* ---------- Animations ---------- */ @keyframes pg-rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } .pg-rise { animation: pg-rise 600ms var(--ease-out) both; } .pg-rise-1 { animation-delay: 40ms; } .pg-rise-2 { animation-delay: 90ms; } .pg-rise-3 { animation-delay: 150ms; } .pg-rise-4 { animation-delay: 220ms; } .pg-rise-5 { animation-delay: 300ms; } .pg-rise-6 { animation-delay: 380ms; } .pg-rise-7 { animation-delay: 440ms; } .pg-rise-8 { animation-delay: 500ms; } @keyframes pg-pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.85); } } @keyframes pg-ambient-drift { to { transform: translate3d(-4%, 3%, 0) scale(1.06); } } @keyframes pg-sheen { 0% { transform: translateX(-120%) skewX(-16deg); } 100% { transform: translateX(220%) skewX(-16deg); } } @keyframes pg-scan { 0% { transform: translateY(-100%); opacity: 0; } 15% { opacity: .55; } 100% { transform: translateY(220%); opacity: 0; } } @keyframes pg-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes pg-radar-scroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes pg-zoom-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* Posée le temps d'un rendu par PG.appliquerTheme. Une propriété en transition dont la valeur vient d'une variable CSS n'est pas réévaluée quand la variable change : la transition ne démarre pas et la valeur reste figée. Couper les transitions pendant la bascule est ce qui fait qu'un changement de thème s'applique entièrement. */ .pg-sans-transition, .pg-sans-transition *, .pg-sans-transition *::before, .pg-sans-transition *::after { transition: none !important; } /* ---------- Essai des thèmes (machine de développement seulement) ---------- */ /* Injecté par pg-ui.js sur 127.0.0.1 ou avec ?themes=1. Absent du site déployé : le choix de la palette n'appartient pas aux visiteurs. */ .pg-themes { position: fixed; right: 12px; bottom: 76px; z-index: 80; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: calc(100vw - 24px); padding: 8px 10px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--border), 0 18px 40px -20px rgba(0,0,0,.7); } @media (min-width: 1024px) { .pg-themes { bottom: 12px; } } .pg-themes__titre { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--muted-fg); padding: 0 4px; } .pg-themes__btn { border-radius: 999px; padding: 5px 11px; font-size: 12px; font-weight: 600; color: var(--muted-fg); background: var(--secondary); transition: color 150ms var(--ease), background-color 150ms var(--ease); } .pg-themes__btn:hover { color: var(--fg); } .pg-themes__btn[aria-pressed="true"] { background: var(--primary); color: var(--primary-fg); } .pg-themes__titre--sep { margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--border); } /* ---------- Offre vedette du hero ---------- */ /* La demande est de montrer une offre concrète dès l'accueil : produit, meilleur total, boutique. Le cadre est volontairement le plus affirmé de la page : c'est la preuve que l'outil fait ce qu'il promet. */ .pg-hero-deal { position: relative; display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 20px; align-items: start; border-radius: var(--r24); background: var(--card-80); padding: 20px; box-shadow: 0 0 0 1px var(--primary-40), 0 18px 48px -22px var(--primary-40); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .pg-hero-deal--vide { display: block; box-shadow: 0 0 0 1px var(--border); } .pg-hero-deal__eyebrow { grid-column: 1 / -1; } .pg-hero-deal__cover { display: block; overflow: hidden; border-radius: var(--radius-md); } .pg-hero-deal__set { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .16em; color: var(--muted-fg); } .pg-hero-deal__name { display: block; margin-top: 4px; font-family: var(--font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .pg-hero-deal__name:hover { color: var(--primary); } .pg-hero-deal__price { font-family: var(--font-display); font-size: clamp(36px, 4.5vw, 52px); font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--primary); } .pg-hero-deal__meta { margin-top: 4px; font-size: 14px; color: var(--muted-fg); } .pg-hero-deal__meta a { font-weight: 600; color: var(--fg); } .pg-hero-deal__meta a:hover { color: var(--primary); } .pg-hero-deal__actions { display: flex; flex-wrap: wrap; gap: 8px; } @media (max-width: 479px) { .pg-hero-deal { grid-template-columns: 1fr; } .pg-hero-deal__cover { max-width: 220px; } } /* Radar et arguments côte à côte sous le hero. */ .pg-home-split { display: grid; gap: 16px; align-items: start; } @media (min-width: 1024px) { /* Le radar épouse la hauteur de la colonne voisine. ----------------------------------------------------------------------- Le corps du radar avait une hauteur fixe (400 px), et les trois encarts d'à côté en font ce que leur texte décide : les deux colonnes ne tombaient jamais au même endroit, et le décalage se voyait d'autant plus que les deux blocs sont cadrés et posés côte à côte. C'est le radar qui s'adapte, et pas l'inverse, parce que sa liste défile : elle n'a pas de hauteur propre à respecter, elle occupe ce qu'on lui donne. L'animation translate la piste de -50 % de SA hauteur, pas de celle du conteneur, donc elle suit sans réglage. `align-content: start` sur les encarts empêche le mouvement inverse : si le radar venait à être le plus haut des deux, les trois tuiles s'étireraient pour combler, ce qui déformerait leur cadre. */ .pg-home-split { grid-template-columns: 0.9fr 1.1fr; align-items: stretch; } .pg-home-split__features { grid-template-columns: 1fr; align-content: start; } .pg-home-split__radar { display: flex; min-height: 0; } .pg-home-split__radar .pg-radar { flex: 1; display: flex; flex-direction: column; min-height: 0; } .pg-home-split__radar .pg-radar__body { height: auto; flex: 1; /* Plancher pour que le radar reste lisible le jour où les trois encarts tiendraient en trois lignes. */ min-height: 280px; } /* La piste sort du flux, et c'est la clé de tout ce bloc. ----------------------------------------------------------------------- Elle contient vingt lignes (dix, dupliquées pour que le défilement boucle sans couture), soit 1 450 px. Tant qu'elle reste dans le flux, cette hauteur remonte dans le calcul de la RANGÉE : la grille se réglait sur 1 501 px, et les trois encarts se retrouvaient avec mille pixels de vide en dessous. La hauteur fixe de 400 px sur le corps masquait le problème en bornant la piste ; en la retirant pour laisser le radar s'ajuster, il fallait la sortir du flux. `min-height: 0` sur les conteneurs ne suffisait pas, mesuré : la piste continuait de contribuer. Positionnée en absolu, elle ne contribue plus du tout, et l'animation n'y perd rien puisqu'elle translate de -50 % de SA propre hauteur, pas de celle du conteneur. */ .pg-home-split__radar .pg-radar__track { position: absolute; top: 0; left: 0; right: 0; } } /* ---------- Visuel produit ---------- L'image du marchand recouvre la silhouette dessinée, qui reste dessous et redevient visible si l'image ne charge pas (`onerror` retire la classe). `object-fit: contain` parce qu'un display et un coffret n'ont pas le même format, et qu'un recadrage couperait la boîte. */ .pg-cover__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; z-index: 2; } .pg-cover--photo .pg-cover__shape { opacity: 0; } /* Plaque blanche sous les visuels marchands. ------------------------------------------------------------------------- Les boutiques photographient leurs produits détourés sur fond blanc. Posée sur le dégradé d'accent, une telle image ne montre pas le produit : elle montre le rectangle de la photo, un aplat blanc collé sur du sombre. Le défaut ne vient pas de la couleur du fond de page, il vient de l'écart entre le fond de l'image et la surface qui la porte. C'est pourquoi la plaque devient blanche, et pourquoi le reste de la page n'a pas à changer : le corps des cartes est déjà blanc sur le fond clair, la plaque ne fait qu'y prolonger le même blanc. L'accent d'extension ne disparaît pas pour autant, il se replie sur un liseré haut. Le teinter, même faiblement, ferait réapparaître l'écart que la plaque blanche vient de supprimer. */ .pg-cover--photo { background: var(--plaque); border-top: 3px solid var(--cover-accent2, #3eefc0); } .pg-cover--photo .pg-cover__glow1, .pg-cover--photo .pg-cover__glow2 { opacity: 0; } /* Reflet et balayage sont conçus pour glisser sur un aplat coloré. Sur du blanc ils ne se voient pas, et sur une photo de produit ils passent pour un reflet parasite sur l'emballage. */ .pg-cover--photo.pg-cover--sheen::after, .pg-cover--photo.pg-cover--scan::before { display: none; } /* Les incrustations de la plaque suivent la plaque et non la page : voir la note sur `--sur-plaque` dans les dérivés. */ .pg-cover--photo .pg-cover__type { background: var(--sur-plaque-voile); color: var(--sur-plaque); } .pg-cover--photo .pg-cover__credit { background: var(--sur-plaque-voile-doux); color: var(--sur-plaque-doux); } .pg-cover--photo .pg-cover__caption { background: linear-gradient(to top, rgba(255, 255, 255, .97) 34%, rgba(255, 255, 255, 0)); color: var(--sur-plaque); } .pg-cover__credit { position: absolute; left: 8px; bottom: 8px; z-index: 3; font-size: 10px; line-height: 1.2; letter-spacing: .02em; padding: 3px 7px; border-radius: 999px; background: color-mix(in oklab, var(--bg) 74%, transparent); color: var(--muted-fg); max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pg-cover--captioned .pg-cover__credit { bottom: 56px; } /* Mention « hors port » collée au prix, dans le radar et le bandeau défilant. Le prix y est affiché seul, sans son libellé : sans cette mention, un prix produit se lirait comme un total, ce qui est précisément la confusion que le comparateur existe pour éviter. */ .pg-radar__hp, .pg-ticker__hp { display: inline-block; margin-left: 6px; font-size: 10px; font-weight: 500; letter-spacing: .02em; color: var(--muted-fg); text-transform: uppercase; } /* --- Page Produits : filtres, mise en avant, chargement par tranches --------- * * Tout se joue dans le navigateur (pg-catalogue.js) : le catalogue arrive en * une fois, et rien ne repart au serveur ensuite. Le CSS n'a donc à porter que * trois choses : la barre de filtres, le signal de mise en avant, et l'ancre de * fin de liste. */ /* La barre de filtres. * * Six commandes sur une ligne, c'est six champs trop étroits pour montrer leur * propre invite : Julian ne pouvait pas lire les placeholders. Deux rangées, * et les champs qui portent du texte long (recherche, extension, tri) prennent * deux fois la largeur des autres. */ .pg-filtres { display: grid; gap: 14px 16px; grid-template-columns: 1fr; align-items: end; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 5%, transparent), transparent 60%), var(--card); transition: box-shadow .25s var(--ease); } .pg-filtres:focus-within { box-shadow: 0 0 0 1px var(--primary-40); } @media (min-width: 640px) { .pg-filtres { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { /* Quatre colonnes, et les champs larges en occupent deux : la recherche et l'extension tiennent leur invite en entier, le format et le prix se contentent d'une colonne. */ .pg-filtres { grid-template-columns: repeat(4, 1fr); } .pg-filtre--large { grid-column: span 2; } } .pg-filtre { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .pg-filtre__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted-fg); transition: color .2s var(--ease); } .pg-filtre:focus-within .pg-filtre__label { color: var(--primary); } .pg-filtre__paire { display: flex; gap: 8px; } .pg-filtre__champ { position: relative; display: block; } .pg-filtre__icone { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted-fg); pointer-events: none; } .pg-filtre__champ:focus-within .pg-filtre__icone { color: var(--primary); } .pg-input--orne { padding-left: 38px; } .pg-input--num { width: 100%; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; } /* Le pied prend toute la largeur : les jetons de filtres actifs à gauche, la remise à zéro à droite. */ .pg-filtres__pied { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: space-between; } .pg-filtres__jetons { display: flex; flex-wrap: wrap; gap: 6px; min-height: 1.75rem; align-items: center; } /* Un filtre actif se voit et se retire d'un clic. Sans ça, un filtre posé puis oublié fait passer un catalogue de 1 752 produits pour un catalogue vide. */ .pg-jeton { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--primary-texte); background: color-mix(in oklab, var(--primary) 14%, transparent); border: 1px solid color-mix(in oklab, var(--primary) 30%, transparent); animation: pg-jeton-entre .22s var(--ease-out); } .pg-jeton--fige { padding-right: 12px; opacity: .8; } .pg-jeton__x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 999px; cursor: pointer; color: inherit; background: color-mix(in oklab, var(--primary) 22%, transparent); transition: background .15s var(--ease), transform .15s var(--ease); } .pg-jeton__x svg { width: 11px; height: 11px; } .pg-jeton__x:hover { background: var(--primary); color: var(--primary-fg); transform: rotate(90deg); } @keyframes pg-jeton-entre { from { opacity: 0; transform: translateY(-4px) scale(.92); } to { opacity: 1; transform: none; } } /* Les cartes arrivent par tranches ; sans transition, une tranche entière apparaît d'un bloc et donne l'impression d'un saut. */ .pg-card--catalogue { animation: pg-carte-entre .3s var(--ease-out) both; } @keyframes pg-carte-entre { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .pg-card--catalogue, .pg-jeton { animation: none; } .pg-jeton__x:hover { transform: none; } } .pg-catalogue__etat { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; align-items: baseline; } /* L'ancre de fin de liste. Elle est visible et dit ce qu'il reste : un catalogue qui s'arrête sans le dire se lit comme un catalogue plus petit qu'il n'est. */ .pg-sentinelle { min-height: 2.5rem; display: flex; align-items: center; justify-content: center; text-align: center; } /* --- Mise en avant ----------------------------------------------------------- * * Une vignette qui attire l'œil est une recommandation, et une recommandation * doit dire sur quoi elle repose. Le titre de la pastille porte le fait exact * (« Médiane des displays comparés : 239,90 € »), et un placement payé porte le * mot « Sponsorisé » avant son libellé, jamais après ni ailleurs. * * Trois intensités, pas une : un écart à la médiane est une déduction du * comparateur, une baisse est un fait affiché par le marchand, un placement * payé est un contrat. Elles ne méritent pas le même éclat. */ .pg-card--phare { position: relative; } .pg-card--phare::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; border: 1.5px solid var(--phare, var(--primary)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--phare, var(--primary)) 14%, transparent); } .pg-card--phare-affaire { --phare: var(--stock); } .pg-card--phare-baisse { --phare: var(--accent-2); } .pg-card--phare-dernier { --phare: var(--low); } .pg-card--phare-paye { --phare: var(--primary); } .pg-phare { position: absolute; top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .02em; color: var(--primary-fg); background: var(--phare, var(--primary)); box-shadow: 0 2px 10px color-mix(in oklab, var(--phare, var(--primary)) 40%, transparent); } .pg-phare__paye { padding: 2px 6px; border-radius: 999px; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; background: color-mix(in oklab, var(--primary-fg) 18%, transparent); } /* La pulsation ne s'applique qu'aux deux motifs qui reposent sur un fait daté : une remise annoncée par la boutique, et un placement payé. Faire clignoter toutes les cartes signalées reviendrait à n'en signaler aucune. */ @keyframes pg-phare-pouls { 0%, 100% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--phare) 14%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in oklab, var(--phare) 4%, transparent); } } .pg-card--phare-baisse::after, .pg-card--phare-paye::after { animation: pg-phare-pouls 2.4s var(--ease) infinite; } /* Le mouvement est une préférence système, pas un détail d'accessibilité. */ @media (prefers-reduced-motion: reduce) { .pg-card--phare-baisse::after, .pg-card--phare-paye::after { animation: none; } }