/* Les deux palettes vivent dans une seule declaration par couleur, `light-dark()` choisissant selon le `color-scheme` calcule. Ecrites en double — une regle claire puis une copie sombre sous media query — elles finissaient toujours par diverger : on corrige une teinte, on oublie l'autre. Ici les deux valeurs sont cote a cote, impossible de n'en changer qu'une par distraction. `color-scheme` est donc le seul levier du theme : le laisser a `light dark` suit le systeme, le fixer bascule toute la page. C'est ce que fait le seleteur du pied de page, via l'attribut `data-theme` pose sur . */ :root { color-scheme: light dark; --bg: light-dark(#f6f7fb, #0f1117); --surface: light-dark(#ffffff, #171a23); --surface-alt: light-dark(#f0f2f8, #1e222e); --border: light-dark(#dfe3ee, #2b3040); --text: light-dark(#171a23, #eef0f6); --text-muted: light-dark(#656c80, #9aa2b8); --accent: light-dark(#4f46e5, #8b87ff); --accent-contrast: light-dark(#ffffff, #12121a); --good: light-dark(#0f7b4f, #6ee7a8); --good-bg: light-dark(#e2f5ec, #133326); --warn: light-dark(#8a5300, #f5c86b); --warn-bg: light-dark(#fdf0d9, #3a2d12); --danger: light-dark(#a12020, #ff9a9a); --danger-bg: light-dark(#fbe6e6, #3a1a1a); --lego: light-dark(#0b6b76, #6fd8e4); --bluray: light-dark(#8b2f7a, #f0a6dd); --livre: light-dark(#6b5b45, #d6c3a5); --radius: 12px; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; padding: clamp(16px, 3vw, 32px); background: var(--bg); color: var(--text); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- En-tete --- */ .topbar { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; } .topbar h1 { margin: 0; font-size: clamp(22px, 3vw, 30px); } .topbar__subtitle { margin: 4px 0 0; color: var(--text-muted); } .topbar__actions { display: flex; align-items: center; gap: 12px; } .freshness { color: var(--text-muted); font-size: 13px; } .button { padding: 9px 16px; border: 1px solid transparent; border-radius: 999px; background: var(--accent); color: var(--accent-contrast); font: inherit; font-weight: 600; cursor: pointer; } .button:hover { filter: brightness(1.08); } .button[disabled] { opacity: 0.55; cursor: progress; } .button--ghost { background: transparent; color: var(--text-muted); border-color: var(--border); font-weight: 500; } /* --- Banniere d'alerte --- */ .banner { padding: 12px 16px; margin-bottom: 20px; border: 1px solid currentColor; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn); font-size: 14px; } .banner--error { background: var(--danger-bg); color: var(--danger); } /* --- Statistiques --- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .stat__value { font-size: 24px; font-weight: 700; } .stat__label { color: var(--text-muted); font-size: 13px; } /* --- Filtres --- */ /*
pour pouvoir les replier sur mobile ; sur grand ecran le resume disparait et le bloc reste toujours deplie. */ .filters__summary { display: none; } .filters { padding: 16px; margin-bottom: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .filters__row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; } .filters__row + .filters__row { margin-top: 16px; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 180px; } .field--grow { flex: 1 1 260px; } .field--inline { flex-direction: row; align-items: center; gap: 8px; color: var(--text-muted); font-size: 14px; } .field__label { color: var(--text-muted); font-size: 13px; font-weight: 600; } input[type="search"], select { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); color: var(--text); font: inherit; } input[type="range"] { accent-color: var(--accent); } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); font: inherit; font-size: 13px; cursor: pointer; } .chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); font-weight: 600; } /* --- Tableau --- */ .table-wrapper { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } table { width: 100%; border-collapse: collapse; font-size: 14px; } th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: middle; } thead th { position: sticky; top: 0; background: var(--surface-alt); color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--surface-alt); } .num { text-align: right; white-space: nowrap; } /* Vignette + texte. La vignette ne se comprime pas, le texte prend le reste. */ .deal { display: flex; align-items: flex-start; gap: 12px; } .deal__body { min-width: 0; } .deal__thumb { flex: 0 0 auto; display: block; width: 56px; height: 56px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); overflow: hidden; } /* `contain` et non `cover` : les jaquettes sont hautes, les boites Lego larges. Recadrer amputerait le visuel exactement la ou il se reconnait. */ .deal__thumb img { width: 100%; height: 100%; object-fit: contain; } .deal-title { color: var(--text); font-weight: 600; text-decoration: none; } .deal-title:hover { color: var(--accent); text-decoration: underline; } /* Le descriptif sert a reconnaitre l'offre, pas a la lire en entier — il est deja tronque a 220 caracteres a la source. Sur dix colonnes, la place revenue au tableau va a la vignette ; le texte complet reste au survol. */ .deal-note { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; color: var(--text-muted); font-size: 12px; } /* Avis sur un deal. Discret au repos — c'est une commande secondaire, pas une information — et franc une fois choisi. */ .vote { display: flex; gap: 4px; margin-top: 6px; } .vote__button { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border: 1px solid var(--border); border-radius: 999px; background: transparent; font-size: 12px; line-height: 1.6; cursor: pointer; opacity: 0.5; transition: opacity 120ms, border-color 120ms; } .vote__button:hover, .vote__button:focus-visible { opacity: 1; } .vote__button[aria-pressed="true"] { opacity: 1; border-color: currentColor; } .vote__button--up[aria-pressed="true"] { background: var(--good-bg); color: var(--good); } .vote__button--down[aria-pressed="true"] { background: var(--danger-bg); color: var(--danger); } /* Le nombre de voix, en chiffres tabulaires : le bouton ne change pas de largeur quand on passe de 9 a 10. */ .vote__count { font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .footer__note--vote { margin-top: 10px; } /* Le verdict du public, lisible sans lire les compteurs : vert quand les pouces leves l'emportent, rouge quand ce sont les baisses. Il tient au **total** et non a l'avis de qui regarde — auparavant le liseré ne s'allumait que pour son propre vote, ce qui n'apprenait rien a personne d'autre. */ tbody tr[data-opinion="positive"] { box-shadow: inset 3px 0 0 var(--good); } tbody tr[data-opinion="negative"] { box-shadow: inset 3px 0 0 var(--danger); } .price { font-weight: 700; } .old-price { color: var(--text-muted); text-decoration: line-through; } .badge { display: inline-block; padding: 3px 9px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); font-size: 12px; white-space: nowrap; } .badge + .badge { margin-left: 4px; } .badge--discount { background: var(--good-bg); color: var(--good); font-weight: 700; } /* Memoire des prix : la remise dit l'ecart, l'historique dit si c'est bon. */ .badge--lowest { display: block; margin-top: 4px; background: var(--good-bg); color: var(--good); font-weight: 700; } .price-seen { display: block; margin-top: 4px; color: var(--text-muted); font-size: 11px; white-space: nowrap; } /* Comparatif des enseignes : la moins chere en resume, les autres depliables. */ .offers > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; } .offers > summary::-webkit-details-marker { display: none; } .offers__count { padding: 1px 6px; border-radius: 999px; background: var(--surface-alt); color: var(--text-muted); font-size: 11px; font-variant-numeric: tabular-nums; } .offers[open] > summary .offers__count { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .offers__list { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12px; color: var(--text-muted); } .offers__list li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; } .offers__price { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Le surcoût par rapport à la meilleure offre. */ .offers__price.is-higher { color: var(--warn); } /* Une teinte par nature de produit, pour reperer le type sans lire l'etiquette. */ .badge--type { font-weight: 600; white-space: nowrap; } .badge--jeu { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .badge--console { background: color-mix(in srgb, var(--good) 18%, transparent); color: var(--good); } .badge--accessoire { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn); } .badge--goodies { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); } .badge--lego { background: color-mix(in srgb, var(--lego) 18%, transparent); color: var(--lego); } .badge--bluray { background: color-mix(in srgb, var(--bluray) 18%, transparent); color: var(--bluray); } .badge--livre { background: color-mix(in srgb, var(--livre) 20%, transparent); color: var(--livre); } .badge--abonnement { background: var(--surface-alt); color: var(--text); } .muted { color: var(--text-muted); } .go-link { display: inline-block; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; color: var(--accent); font-weight: 600; text-decoration: none; white-space: nowrap; } .go-link:hover { border-color: var(--accent); } .empty { padding: 32px; color: var(--text-muted); text-align: center; } /* --- Pied de page --- */ .footer { margin-top: 24px; color: var(--text-muted); font-size: 13px; } .source-status { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; } .source-status__item { padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .source-status__item--ko { background: var(--danger-bg); color: var(--danger); border-color: currentColor; } .footer__note { margin: 0; max-width: 70ch; } /* Choix du theme. En pied de page parce qu'on le regle une fois : le mettre en tete lui donnerait le poids d'un filtre, qu'on manipule a chaque visite. */ .theme { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); } .theme__label { font-weight: 600; } .theme .chip { font-size: 12px; } /* --- Mobile : le tableau devient une liste de cartes --- */ @media (max-width: 760px) { thead { display: none; } /* Les filtres se replient : sans cela, 858 px a faire defiler avant le premier deal, sur un ecran qui en fait 844. */ .filters__summary { display: block; cursor: pointer; font-weight: 600; color: var(--text-muted); list-style: none; } .filters__summary::-webkit-details-marker { display: none; } .filters__summary::after { content: ' ▾'; } .filters[open] .filters__summary { margin-bottom: 16px; } .filters[open] .filters__summary::after { content: ' ▴'; } /* Une cellule vide n'a pas a occuper une ligne pour afficher un tiret. */ td.is-empty { display: none; } /* La carte mobile est plus etroite : deux lignes suffisent a la reconnaitre. */ .deal-note { -webkit-line-clamp: 2; } table, tbody, td { display: block; width: 100%; } /* Deux colonnes : les huit lignes etiquette/valeur s'apparient et la carte perd la moitie de sa hauteur. Le titre et le bouton gardent la largeur. */ tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 12px 14px; border-bottom: 1px solid var(--border); } td:first-child, td:last-child { grid-column: 1 / -1; } td { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border: none; text-align: right; } /* Sans cela, la pastille s'etire sur toute la hauteur de la cellule. */ td .badge, td .chip { flex: 0 0 auto; } td::before { content: attr(data-label); color: var(--text-muted); font-size: 11px; text-transform: uppercase; text-align: left; white-space: nowrap; } td:first-child { display: block; text-align: left; margin-bottom: 6px; } td:first-child::before { content: none; } /* Le bouton "Voir l'offre" se passe d'une etiquette "LIEN". */ td:last-child::before { content: none; } td { padding: 3px 0; } tbody tr { padding: 14px; } } /* --- Pages d'un produit --- */ /* Servies en HTML complet par le serveur : c'est la seule chose qu'un moteur de recherche voit. Elles reprennent le meme habillage que le tableau. */ .topbar__home { color: inherit; text-decoration: none; } .page { max-width: 800px; margin: 0 auto; } .page-deal { display: flex; flex-wrap: wrap; gap: 24px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .page-deal__image { flex: 0 0 auto; width: 200px; height: 200px; object-fit: contain; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); } .page-deal__body { flex: 1 1 320px; min-width: 0; } .page-deal__title { margin: 0 0 8px; font-size: 22px; } .page-deal__note { margin: 0 0 16px; color: var(--text-muted); font-size: 14px; } /* Deux colonnes : le libelle a gauche, la valeur a droite, alignes. */ .page-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0 0 20px; font-size: 14px; } .page-facts dt { color: var(--text-muted); } .page-facts dd { margin: 0; } .page-block { margin-top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .page-block h2 { margin: 0 0 12px; font-size: 16px; } .page-block p { margin: 0; font-size: 14px; } .page-back { margin-top: 24px; font-size: 14px; } .page-back a { color: var(--accent); } @media (max-width: 760px) { .page-deal__image { width: 120px; height: 120px; } } /* --- Pages legales et fin de promotion --- */ .page--legal h2 { margin: 0 0 20px; font-size: 24px; } .page--legal h3 { margin: 0 0 10px; font-size: 16px; } .page--legal .page-block { margin-top: 0; margin-bottom: 16px; } .page--legal p { margin: 0 0 12px; } .page--legal p:last-child { margin-bottom: 0; } .page--legal code { padding: 1px 5px; border-radius: 4px; background: var(--surface-alt); font-size: 13px; } .page--legal a { color: var(--accent); } .page-updated { margin-top: 20px; color: var(--text-muted); font-size: 13px; } /* Promotion terminee : le bandeau doit se lire avant le titre, pour qu'on comprenne l'etat de l'offre sans avoir a chercher. */ .page-deal--expired { border-style: dashed; } .page-deal__flag { display: inline-block; margin: 0 0 8px; padding: 3px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .muted { color: var(--text-muted); font-weight: 400; } .footer__note a { color: var(--text-muted); } .footer__note a:hover { color: var(--accent); }