/* ============================================================================ Guide PetConnect — Composants pc-* (charte « Bleu canard », version validée) ---------------------------------------------------------------------------- À coller dans le thème WordPress (style.css du thème enfant, ou enqueue d'un fichier dédié). Implémente TOUTES les classes utilisées par les articles (ALI-02, GPS-01, …) SANS renommage — le visuel change, jamais les noms. Polices : charge Newsreader + Mulish + Manrope (voir l'@import ci-dessous, ou enqueue les Google Fonts dans functions.php — recommandé pour la perf). Couleur par univers (cocon) : ajouter la classe correspondante sur un conteneur de l'article (ex. via body_class(), ou un wrapper). Seul le badge "kicker" reprend la couleur de la rubrique ; le reste de l'article reste teal. ============================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600;6..72,700&family=Mulish:wght@400;500;600;700;800&family=Manrope:wght@700;800&display=swap'); :root{ --pc-accent:#1c6f6b; --pc-accent-d:#155a56; --pc-ink:#16302e; --pc-bg:#f2f5f4; --pc-paper:#ffffff; --pc-line:#dde6e3; --pc-muted:#6f8482; --pc-soft:#e9f3f2; --pc-soft2:#dfeeec; --g1:#2a8a82; --g2:#155a56; /* dégradé teal (en-têtes, blocs note, CTA) */ --rub:#1c6f6b; --rub-soft:#dfeeec; /* couleur de rubrique (kicker) — défaut teal */ --pc-pro-bg:#e7f3e9; --pc-pro-tx:#1a7f4b; --pc-con-bg:#fbeceb; --pc-con-tx:#b3392e; --pc-serif:'Newsreader',Georgia,serif; --pc-sans:'Mulish',system-ui,sans-serif; } /* Palette par univers (cocon) : ne recolore que le kicker, pas tout l'article. Ajouter d'autres cocons sur le même modèle si besoin. */ .cocon-alim{ --rub:#c2772c; --rub-soft:#f4e7d6; } /* Alimentation — ambre */ .cocon-gps{ --rub:#2f6fb0; --rub-soft:#e0ebf6; } /* GPS & Traceurs — bleu */ .cocon-maison{ --rub:#6b54b4; --rub-soft:#eae6f5; } /* Maison connectée — violet */ .cocon-sante{ --rub:#cc4438; --rub-soft:#f7e1de; } /* Santé & Assurance — rouge */ .cocon-vie{ --rub:#2e8b5c; --rub-soft:#dcefe4; } /* Vie pratique — vert */ /* Badge "kicker" de catégorie (ex. "ALIMENTATION · COMPARATIF"). Mettez-lui la classe .pc-kicker pour qu'il prenne la couleur de la rubrique. */ .pc-kicker{ display:inline-block; font:700 12px/1 var(--pc-sans); letter-spacing:.13em; text-transform:uppercase; color:var(--rub); background:var(--rub-soft); padding:6px 12px; border-radius:999px; margin-bottom:16px; } /* ---- Corps d'article ---- */ .pc-article{ font-family:var(--pc-sans); color:var(--pc-ink); font-size:16.5px; line-height:1.75; } .pc-article h2{ font:600 27px/1.2 var(--pc-serif); color:var(--pc-ink); margin:1.7em 0 .55em; letter-spacing:-.01em; } .pc-article h3{ font:600 20px/1.25 var(--pc-serif); color:var(--pc-ink); margin:1.4em 0 .4em; } .pc-article p{ margin:0 0 1.05em; } .pc-article ul{ margin:0 0 1.15em; padding-left:1.3em; } .pc-article li{ margin:.35em 0; } .pc-article ul.wp-block-list{ list-style:none; padding-left:0; } .pc-article ul.wp-block-list li{ position:relative; padding-left:24px; } .pc-article ul.wp-block-list li::before{ content:""; position:absolute; left:4px; top:10px; width:7px; height:7px; border-radius:2px; background:var(--pc-accent); } .pc-article figure{ margin:24px 0; } .pc-article figure img{ width:100%; height:auto; border-radius:14px; display:block; } .pc-article figcaption{ font:400 12.5px/1.5 var(--pc-sans); color:var(--pc-muted); text-align:center; margin-top:8px; } .pc-article strong{ color:var(--pc-ink); font-weight:700; } .pc-article a{ color:var(--pc-accent); } /* ---- Tableau comparatif (pc-table) — bandeau teal + zébré, cadre dégradé ---- */ .pc-table{ width:100%; overflow-x:auto; margin:24px 0; } .pc-table h2{ text-align:center; margin:.2em 0 .7em; } .pc-table table{ width:100%; border-collapse:collapse; min-width:640px; font-family:var(--pc-sans); border:3px solid transparent; border-radius:18px; background:linear-gradient(135deg,var(--g1),var(--g2)) padding-box, linear-gradient(135deg,var(--g1),var(--g2)) border-box; box-shadow:0 10px 30px -16px rgba(21,90,86,.4); overflow:hidden; } .pc-table thead{ background:linear-gradient(135deg,var(--g1),var(--g2)); } .pc-table thead th{ font:700 11px/1.3 var(--pc-sans); letter-spacing:.05em; text-transform:uppercase; color:#fff; background:transparent; text-align:center; padding:15px 14px; vertical-align:bottom; } .pc-table thead th:first-child{ text-align:left; } .pc-table tbody td{ background:var(--pc-paper); border:0; border-bottom:1px solid var(--pc-line); padding:14px; vertical-align:middle; text-align:center; font:600 15px/1.35 var(--pc-serif); color:var(--pc-ink); } /* Colonnes de droite compactes — uniquement sur les tableaux produit (ceux qui ont une cellule .pc-hl) */ .pc-table table:has(td.pc-hl) thead th:nth-last-child(-n+3){ width:1%; padding-left:14px; padding-right:14px; } .pc-table table:has(td.pc-hl) tbody td:nth-last-child(-n+3){ width:1%; white-space:nowrap; padding-left:16px; padding-right:16px; } .pc-table tbody tr:last-child td{ border-bottom:0; } .pc-table tbody tr:nth-child(even) td{ background:#f6faf9; } .pc-row-pick td{ background:#e9f3f2 !important; } .pc-row-pick td:first-child{ box-shadow:inset 4px 0 0 var(--pc-accent); } .pc-cell-model{ text-align:left !important; width:auto; min-width:200px; } .pc-cm{ display:flex; align-items:center; gap:12px; text-align:left; } .pc-cm > div{ font:700 14.5px/1.25 var(--pc-serif); color:var(--pc-ink); } .pc-cm small{ display:block; font:500 11px/1.3 var(--pc-sans); color:var(--pc-muted); margin-top:3px; font-weight:500; } .pc-pick{ display:inline-block; background:var(--pc-accent); color:#fff; font:700 8.5px/1.15 var(--pc-sans); letter-spacing:.03em; text-transform:uppercase; padding:4px 9px; border-radius:999px; margin-bottom:6px; } .pc-thumb{ width:80px; height:80px; flex:none; border-radius:12px; object-fit:cover; border:1px solid var(--pc-line); background:#eef3f1; } .pc-proscons{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; min-width:150px; text-align:left; } .pc-proscons li{ font:500 12px/1.35 var(--pc-sans); padding:5px 10px; border-radius:8px; } .pc-proscons .pro{ background:#cdebd5; color:#136337; border:1px solid #a9d8b6; } .pc-proscons .con{ background:#f7d9d5; color:#9e2f24; border:1px solid #eebcb4; } /* Cellule Note / Coût 3 ans — bloc teal en relief (note menthe, coût blanc) */ .pc-hl{ padding:10px !important; } .pc-stack{ display:flex; flex-direction:column; align-items:center; gap:8px; background:linear-gradient(135deg,var(--g1),var(--g2)); border-radius:13px; padding:13px 12px; box-shadow:0 8px 20px -10px rgba(21,90,86,.55); } .pc-stat{ display:flex; flex-direction:column; align-items:center; } .pc-stat__val{ font:600 18px/1 var(--pc-serif); color:#fff; white-space:nowrap; } .pc-stat--lead .pc-stat__val{ font-size:30px; color:#d4f3ee; } .pc-stat__label{ font:600 9.5px/1.2 var(--pc-sans); text-transform:uppercase; letter-spacing:.05em; color:#bfe0dc; margin-top:4px; } .pc-stat:not(.pc-stat--lead){ border-top:1px solid rgba(255,255,255,.2); padding-top:8px; width:100%; } .pc-maj{ font:500 13px/1.5 var(--pc-sans); color:var(--pc-muted); font-style:italic; } /* l'en-tête de colonne porte déjà "Note / Coût sur 3 ans" → on masque le label redondant en cellule */ .pc-table .pc-stat:not(.pc-stat--lead) .pc-stat__label{ display:none; } /* ---- Fiches produit (pc-pcard) ---- */ .pc-pcard{ background:var(--pc-paper); border:1px solid var(--pc-line); border-radius:16px; padding:22px; margin:18px 0; box-shadow:0 6px 18px rgba(14,59,46,.05); } .pc-pcard--pick{ border-color:#bfe0dc; box-shadow:0 14px 38px rgba(28,111,107,.13); } .pc-pcard--out{ border-style:dashed; background:#fafbfa; } .pc-pcard__head{ display:flex; align-items:flex-start; gap:14px 16px; flex-wrap:wrap; border-bottom:1px solid var(--pc-line); padding-bottom:16px; } .pc-pcard__media{ width:100px; height:100px; flex:none; border-radius:13px; object-fit:cover; border:1px solid var(--pc-line); background:#eef3f1; } .pc-pcard__id{ flex:1 1 150px; min-width:140px; } .pc-pcard__id h3{ font:600 20px/1.15 var(--pc-serif); color:var(--pc-ink); margin:2px 0 4px; } .pc-pcard__sub{ font:500 12.5px/1.4 var(--pc-sans); color:var(--pc-muted); } .pc-pcard__corner{ display:flex; flex-direction:column; align-items:flex-end; gap:11px; margin-left:auto; } .pc-pcard__badge{ background:var(--pc-soft); color:var(--pc-accent); font:700 10px/1 var(--pc-sans); letter-spacing:.06em; text-transform:uppercase; padding:6px 11px; border-radius:999px; white-space:nowrap; } .pc-pcard__badge--out{ background:#f0ece3; color:#8a7a4a; } .pc-pcard__statbox{ display:flex; gap:12px; background:linear-gradient(135deg,var(--g1),var(--g2)); border:0; border-radius:13px; padding:12px 16px; box-shadow:0 8px 20px -10px rgba(21,90,86,.55); } .pc-pcard__stat{ display:flex; flex-direction:column; align-items:center; text-align:center; } .pc-pcard__stat + .pc-pcard__stat{ border-left:1px solid rgba(255,255,255,.2); padding-left:12px; margin-left:2px; } .pc-pcard__num{ font:600 26px/1 var(--pc-serif); color:#fff; white-space:nowrap; } .pc-pcard__stat:first-child .pc-pcard__num{ color:#d4f3ee; } .pc-pcard__num small{ font:500 12px/1 var(--pc-sans); color:#bfe0dc; } .pc-pcard__statlabel{ font:600 9.5px/1.2 var(--pc-sans); text-transform:uppercase; letter-spacing:.05em; color:#bfe0dc; margin-top:4px; } .pc-pcard__verdict{ font:400 14.5px/1.6 var(--pc-sans); color:var(--pc-ink); margin:14px 0 4px; } /* ---- Critères (pc-crit) ---- */ .pc-crit{ background:var(--pc-soft); border-radius:11px; padding:13px 15px; margin-top:11px; } .pc-crit__top{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; } .pc-crit__name{ font:600 14px/1.3 var(--pc-sans); color:var(--pc-ink); } .pc-crit__score{ font:600 16px/1 var(--pc-serif); color:var(--pc-accent); flex:none; } .pc-crit__score small{ font:500 11px/1 var(--pc-sans); color:var(--pc-muted); } .pc-crit__track{ height:8px; background:#fff; border-radius:99px; overflow:hidden; } .pc-crit__fill{ height:100%; background:var(--pc-accent); border-radius:99px; } .pc-crit__desc{ font:400 13px/1.5 var(--pc-sans); color:var(--pc-ink); margin:9px 0 0; } .pc-crit__chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:9px; } .pc-crit__chip{ font:500 12px/1.35 var(--pc-sans); padding:4px 11px; border-radius:999px; } .pc-crit__chip--ok{ background:var(--pc-pro-bg); color:var(--pc-pro-tx); } .pc-crit__chip--no{ background:var(--pc-con-bg); color:var(--pc-con-tx); } /* ---- Autres composants ---- */ .pc-veto{ background:var(--pc-soft); border-left:4px solid var(--pc-accent); border-radius:0 14px 14px 0; padding:16px 20px; font:400 14.5px/1.65 var(--pc-sans); color:var(--pc-muted); margin:28px 0; } .pc-veto strong{ color:var(--pc-accent); } .pc-btn{ display:inline-block; background:var(--pc-accent); color:#fff; font:700 14px/1 var(--pc-sans); padding:13px 22px; border-radius:999px; text-decoration:none; cursor:pointer; } .pc-article a.pc-btn{ color:#fff; } /* garde le texte blanc malgré .pc-article a */ .pc-btn--lavande{ background:#fff; color:var(--pc-accent); border:1.5px solid var(--pc-accent); } .pc-article a.pc-btn--lavande{ color:var(--pc-accent); } .pc-buybox{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; background:var(--pc-soft); border:1px solid #cfe6e2; border-radius:13px; padding:14px 16px; margin-top:16px; } .pc-buybox__info{ flex:1 1 200px; } .pc-buybox__name{ font:700 13px/1.3 var(--pc-sans); color:var(--pc-ink); display:block; } .pc-buybox__price{ font:600 20px/1.1 var(--pc-serif); color:var(--pc-ink); display:block; margin-top:3px; } .pc-buybox__sub{ font:500 11.5px/1.3 var(--pc-sans); color:var(--pc-muted); display:block; margin-top:2px; } .pc-buybox .pc-amazon{ font:600 11px/1.3 ui-monospace,monospace; color:#8a7a4a; background:#f0ece3; border-radius:999px; padding:11px 15px; } .pc-related{ background:var(--pc-soft2); border-left:4px solid var(--pc-accent); border-radius:0 14px 14px 0; padding:16px 20px; margin:28px 0; } .pc-related b{ display:block; font:700 11.5px/1 var(--pc-sans); letter-spacing:.12em; text-transform:uppercase; color:var(--pc-accent); margin-bottom:10px; } .pc-readmore{ font:600 15px/1.5 var(--pc-sans); color:var(--pc-ink); display:block; margin-top:8px; text-decoration:none; } .pc-readmore::before{ content:"→"; color:var(--pc-accent); font-weight:700; margin-right:8px; } .pc-infotable{ width:100%; border-collapse:separate; border-spacing:0 8px; font:400 14px/1.5 var(--pc-sans); margin:22px 0; } .pc-infotable th{ text-align:left; padding:10px 14px; font:700 12px/1 var(--pc-sans); letter-spacing:.05em; text-transform:uppercase; color:var(--pc-accent); } .pc-infotable td{ padding:14px; border:1px solid var(--pc-line); vertical-align:top; } .pc-infotable td:first-child{ border-right:0; border-radius:12px 0 0 12px; font:600 15px/1.4 var(--pc-sans); color:var(--pc-accent); white-space:nowrap; } .pc-infotable td:last-child{ border-left:0; border-radius:0 12px 12px 0; color:var(--pc-ink); } /* ---- Composants historiques GPS (compatibilité ascendante) ---- */ .pc-scorecard{ background:var(--pc-paper); border:1px solid var(--pc-line); border-radius:16px; padding:20px; margin:18px 0; } .pc-scorecard__head{ display:flex; align-items:center; gap:14px; } .pc-scorecard__media{ width:90px; height:90px; border-radius:12px; object-fit:cover; flex:none; background:#eef3f1; border:1px solid var(--pc-line); } .pc-scorecard__sub{ font:500 12.5px/1.4 var(--pc-sans); color:var(--pc-muted); } .pc-score{ font:600 30px/1 var(--pc-serif); color:var(--pc-accent); margin-left:auto; } .pc-verdict{ font:400 14.5px/1.6 var(--pc-sans); color:var(--pc-ink); margin-top:12px; } @media(max-width:640px){ .pc-pcard__corner{ margin-left:0; align-items:flex-start; width:100%; } .pc-article{ font-size:16px; } }