/* Prix Carburant — habillage « outil ». Couche optionnelle, désactivable dans les réglages : elle reprend le style des pages d'analyse (plan sobre, cartes, tuiles, encadrés) et s'applique uniquement aux pages du plugin, jamais au reste du site. Tout est porté par la classe .pc-skin posée sur , et ne descend que dans .pc-page : aucun sélecteur d'élément nu, aucun !important inutile, le thème garde la main partout ailleurs. */ .pc-skin { --pc-plane: #f9f9f7; --pc-surface: #fcfcfb; --pc-ink: #0b0b0b; --pc-ink-2: #52514e; --pc-muted: #898781; --pc-grid: #e1e0d9; --pc-baseline: #c3c2b7; --pc-ring: rgba(11, 11, 11, .10); --pc-s1: #2a78d6; --pc-s2: #eb6834; --pc-good: #006300; --pc-radius: 10px; } @media (prefers-color-scheme: dark) { .pc-skin { --pc-plane: #0d0d0d; --pc-surface: #1a1a19; --pc-ink: #fff; --pc-ink-2: #c3c2b7; --pc-muted: #898781; --pc-grid: #2c2c2a; --pc-baseline: #383835; --pc-ring: rgba(255, 255, 255, .10); --pc-s1: #3987e5; --pc-s2: #d95926; --pc-good: #0ca30c; } } /* Le plan de la page. Posé sur body pour que la couleur aille jusqu'aux bords, y compris sous l'en-tête et le pied de page du thème. */ .pc-skin { background: var(--pc-plane); } .pc-skin .pc-page { max-width: 980px; padding: 40px 20px 72px; color: var(--pc-ink); font-size: 1rem; line-height: 1.55; } .pc-skin .pc-page * { box-sizing: border-box; } /* Typographie */ .pc-skin .pc-page h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 6px; color: var(--pc-ink); } .pc-skin .pc-page h2 { font-size: 1.1rem; margin: 0 0 4px; color: var(--pc-ink); } .pc-skin .pc-page h3 { font-size: .95rem; margin: 0 0 8px; } .pc-skin .pc-bloc { margin-top: 44px; } .pc-skin .pc-h2note, .pc-skin .pc-sous-titre, .pc-skin .pc-resume { color: var(--pc-ink-2); font-size: .95rem; margin: 0 0 16px; } .pc-skin .pc-economie { color: var(--pc-ink-2); font-size: .95rem; font-weight: 400; margin: 0 0 6px; } .pc-skin .pc-fil, .pc-skin .pc-source, .pc-skin .pc-note { color: var(--pc-muted); font-size: .8rem; } .pc-skin .pc-fil { margin-bottom: 22px; } .pc-skin .pc-source { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--pc-grid); } .pc-skin .pc-page a { color: var(--pc-s1); text-decoration-thickness: 1px; text-underline-offset: 2px; } .pc-skin .pc-fil a { color: var(--pc-muted); } /* Tuiles de chiffres */ .pc-skin .pc-tuiles { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 26px 0 8px; } .pc-skin .pc-tuile { background: var(--pc-surface); border: 1px solid var(--pc-ring); border-radius: var(--pc-radius); } .pc-skin .pc-tuile-v { font-size: 1.85rem; color: var(--pc-ink); } .pc-skin .pc-tuile-l { color: var(--pc-ink-2); } .pc-skin .pc-tuile-n { color: var(--pc-muted); } /* Les graphiques passent dans une carte, comme le reste. */ .pc-skin .pc-graph { --pcg-surface: var(--pc-surface); --pcg-1: var(--pc-s1); --pcg-2: var(--pc-s2); --pcg-grid: var(--pc-grid); --pcg-baseline: var(--pc-baseline); --pcg-muted: var(--pc-muted); --pcg-ink: var(--pc-ink-2); background: var(--pc-surface); border: 1px solid var(--pc-ring); border-radius: var(--pc-radius); padding: 18px 16px 8px; margin: 8px 0 0; } /* Tableaux : une carte, pas une grille de traits. */ .pc-skin .pc-classement, .pc-skin .pc-table-prix { background: var(--pc-surface); border: 1px solid var(--pc-ring); border-radius: var(--pc-radius); overflow: hidden; margin: 8px 0 0; } .pc-skin .pc-classement th, .pc-skin .pc-classement td, .pc-skin .pc-table-prix th, .pc-skin .pc-table-prix td { padding: 11px 14px; border-bottom: 1px solid var(--pc-grid); font-size: .9rem; } .pc-skin .pc-classement thead th, .pc-skin .pc-table-prix thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--pc-ink-2); font-weight: 600; border-bottom: 1px solid var(--pc-grid); background: transparent; } .pc-skin .pc-classement tbody tr:last-child th, .pc-skin .pc-classement tbody tr:last-child td, .pc-skin .pc-table-prix tbody tr:last-child th, .pc-skin .pc-table-prix tbody tr:last-child td { border-bottom: 0; } .pc-skin .pc-classement tbody th, .pc-skin .pc-table-prix tbody th { font-weight: 600; } .pc-skin .pc-prix, .pc-skin .pc-ecart { text-align: right; white-space: nowrap; } .pc-skin .pc-rang { width: 34px; color: var(--pc-muted); } .pc-skin .pc-adresse { color: var(--pc-muted); font-size: .8rem; } /* Dans un tableau dense, le soulignement de chaque ligne fait du bruit : on le garde au survol, là où il sert. */ .pc-skin .pc-classement a, .pc-skin .pc-table-prix a, .pc-skin .pc-maillage a { text-decoration: none; } .pc-skin .pc-classement a:hover, .pc-skin .pc-table-prix a:hover, .pc-skin .pc-maillage a:hover { text-decoration: underline; } .pc-skin .pc-classement tbody tr:hover td, .pc-skin .pc-classement tbody tr:hover th { background: rgba(11, 11, 11, .02); } /* La meilleure ligne est teintée, pas surlignée. La teinte est portée par les cellules : le fond posé sur par front.css resterait clair en thème sombre, puisqu'il est peint sous des cellules transparentes. */ .pc-skin .pc-classement .pc-meilleure { background: transparent; } .pc-skin .pc-classement .pc-meilleure td, .pc-skin .pc-classement .pc-meilleure th { background: rgba(42, 120, 214, .07); } .pc-skin .pc-classement .pc-meilleure .pc-prix { color: var(--pc-good); } /* Fraîcheur du relevé : les teintes de front.css sont calibrées pour un fond clair. En thème sombre, il faut les remonter pour rester lisibles. */ @media (prefers-color-scheme: dark) { .pc-skin .pc-maj.pc-frais { color: #4ec46e; } .pc-skin .pc-maj.pc-moyen { color: #d7b036; } .pc-skin .pc-maj.pc-vieux { color: #e0913f; } .pc-skin .pc-classement .pc-meilleure .pc-prix { color: #4ec46e; } .pc-skin .pc-classement tbody tr:hover td, .pc-skin .pc-classement tbody tr:hover th { background: rgba(255, 255, 255, .03); } .pc-skin .pc-classement .pc-meilleure td, .pc-skin .pc-classement .pc-meilleure th { background: rgba(57, 135, 229, .12); } .pc-skin .pc-rupture { background: #3a1f1e; color: #f08a80; } } /* Encadrés d'analyse */ .pc-skin .pc-callout { background: var(--pc-surface); border: 1px solid var(--pc-ring); border-left: 3px solid var(--pc-s1); border-radius: 8px; padding: 14px 18px; margin-top: 16px; font-size: .92rem; color: var(--pc-ink-2); } .pc-skin .pc-callout strong { color: var(--pc-ink); } .pc-skin .pc-vide { background: var(--pc-surface); border: 1px solid var(--pc-ring); border-radius: var(--pc-radius); color: var(--pc-ink-2); } /* Filtres, badges, services : mêmes pastilles que les cartes. */ .pc-skin .pc-filtre { border-color: var(--pc-ring); background: var(--pc-surface); color: var(--pc-ink-2); text-decoration: none; font-size: .85rem; } .pc-skin .pc-filtre.is-actif { background: var(--pc-s1); border-color: var(--pc-s1); color: #fff; } .pc-skin .pc-badge { background: var(--pc-surface); border-color: var(--pc-ring); color: var(--pc-ink-2); font-size: .75rem; } .pc-skin .pc-services li { background: var(--pc-surface); border: 1px solid var(--pc-ring); border-radius: 999px; color: var(--pc-ink-2); font-size: .82rem; } /* Listes de maillage : deux colonnes lisibles, sans puces. */ .pc-skin .pc-maillage ul { list-style: none; margin: 8px 0 0; padding: 0; column-width: 220px; column-gap: 28px; } .pc-skin .pc-maillage li { margin: 0 0 7px; font-size: .9rem; break-inside: avoid; } .pc-skin .pc-compte { color: var(--pc-muted); font-size: .75rem; } /* Logos : le fond blanc dur jurerait sur le plan crème. */ .pc-skin .pc-logo-img, .pc-skin .pc-logo { background: var(--pc-surface); } .pc-skin .pc-logo-img { border-color: var(--pc-ring); } .pc-skin .pc-logo-neutre { background: var(--pc-plane); border-color: var(--pc-ring); color: var(--pc-muted); } /* Lien d'appel vers l'analyse complète : une carte cliquable. */ .pc-skin .pc-lien-analyse { display: inline-block; margin-top: 14px; padding: 11px 18px; background: var(--pc-surface); border: 1px solid var(--pc-ring); border-left: 3px solid var(--pc-s1); border-radius: 8px; font-size: .92rem; font-weight: 600; text-decoration: none; } .pc-skin .pc-lien-analyse:hover { border-color: var(--pc-s1); } @media (max-width: 600px) { .pc-skin .pc-page { padding: 24px 14px 56px; } .pc-skin .pc-page h1 { font-size: 1.45rem; } .pc-skin .pc-classement tr { border-bottom: 1px solid var(--pc-grid); } .pc-skin .pc-classement tbody tr:last-child { border-bottom: 0; } .pc-skin .pc-classement td, .pc-skin .pc-classement th { padding: 0; } .pc-skin .pc-classement tr { padding: 12px 14px; } }