/* =====================================================================
   KIT AFFILIATION MAISON — styles (repris du kit Romain + comparateur)
   ===================================================================== */
/* Polices = stack système (0 requête externe, rapide + RGPD-friendly, pas de Google Fonts) */

/* ---------- Bouton CTA sticky (kit Romain) ---------- */
html .sticky-button{position:fixed;left:0;right:0;bottom:10px;z-index:9999;width:auto;margin-left:auto;margin-right:auto;white-space:nowrap;background-color:var(--kaf-accent);color:var(--kaf-white);padding:15px 30px;font-size:15px;border:none;border-radius:5px;text-align:center;box-shadow:0 2px 5px var(--kaf-shadow-1);text-decoration:none;font-weight:bold}
html .sticky-button:hover{background-color:var(--kaf-black);color:var(--kaf-white);cursor:pointer}

body:not(.home) h1{margin-top:50px}

/* ---------- Boîtes produit .azonpress (kit Romain) ---------- */
.azonpress{box-sizing:border-box;font-family:var(--kaf-font);width:100%;max-width:800px;margin:0 auto;padding:20px;background:var(--kaf-white);border-radius:10px;box-shadow:0 4px 12px var(--kaf-shadow-2);display:flex;flex-direction:column;align-items:stretch;cursor:pointer;transition:box-shadow .3s ease}
.azonpress:hover{box-shadow:0 12px 30px var(--kaf-shadow-3);transform:scale(1.02);transition:box-shadow .3s ease,transform .3s ease}
.azonpress-image img{max-width:100%;width:32%;height:auto;display:block;margin:0 auto 20px;border-radius:8px}
.azonpress-title{font-size:24px;font-weight:600;text-align:center;margin-bottom:20px}
.azonpress-arguments{display:flex;flex-wrap:wrap;justify-content:space-between;width:100%;margin-bottom:20px;gap:10px}
.azonpress-pros,.azonpress-cons{flex:1 1 calc(50% - 10px);background:var(--kaf-success-bg);padding:15px;border-radius:8px;box-sizing:border-box}
.azonpress-cons{background:var(--kaf-danger-bg)}
.azonpress-pros h4,.azonpress-cons h4{font-size:18px;font-weight:600;margin-bottom:10px}
.azonpress-pros h4{color:var(--kaf-success)}.azonpress-cons h4{color:var(--kaf-danger)}
.azonpress-pros ul,.azonpress-cons ul{list-style:none;padding-left:0;margin:0}
.azonpress-pros ul li,.azonpress-cons ul li{position:relative;padding-left:25px;font-size:16px;line-height:1.6;margin-bottom:8px}
.azonpress-pros ul li::before,.azonpress-cons ul li::before{position:absolute;left:0;top:0;font-weight:bold}
.azonpress-pros ul li::before{content:"+";color:var(--kaf-success)}.azonpress-cons ul li::before{content:"-";color:var(--kaf-danger)}
.azonpress-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;width:100%;margin-top:10px;padding-top:10px;border-top:1px solid var(--kaf-border)}
.azonpress-button{background:var(--kaf-accent);color:var(--kaf-white);padding:12px 30px;font-size:15px;border-radius:5px;text-align:center;text-decoration:none;display:inline-block;transition:background-color .3s ease}
.azonpress-button:hover{background:var(--kaf-black)}
@media(max-width:768px){.azonpress{padding:15px}.azonpress-title{font-size:18px}.azonpress-arguments{flex-direction:column}.azonpress-pros,.azonpress-cons{flex:1 1 100%}.azonpress-image img{width:60%}.azonpress-button{padding:8px 15px;font-size:13px;margin-left:auto}}

/* ---------- Bulles de maillage .qc-bubbles (kit Romain) ---------- */
.qc-collections{margin:24px 0}
.qc-bubbles{--size:148px;--ring:3px;--gap:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--gap)}
.qc-bubble{text-decoration:none;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;color:inherit}
.qc-thumb{width:var(--size);height:var(--size);border-radius:999px;overflow:hidden;display:grid;place-items:center;position:relative;background:var(--kaf-surface-muted);box-shadow:0 0 0 var(--ring) var(--kaf-shadow-5),0 8px 20px var(--kaf-shadow-4);transition:transform .18s ease,box-shadow .18s ease}
.qc-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.qc-label{font-size:.98rem;font-weight:700;letter-spacing:.2px}
.qc-bubble:hover .qc-thumb{transform:translateY(-2px);box-shadow:0 0 0 var(--ring) rgba(0,0,0,.10),0 14px 28px rgba(0,0,0,.14)}
@media(max-width:860px){.qc-bubbles{display:flex;gap:14px;overflow-x:auto;padding:4px 2px 8px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.qc-bubble{min-width:120px;scroll-snap-align:start}.qc-thumb{--size:116px}}

/* ---------- Onglets / accordéon .qc-tabs (kit Romain) ---------- */
.qc-tabs{max-width:1400px;margin:40px auto;padding:24px 40px;background:var(--kaf-surface-faq);border-radius:22px;box-shadow:0 10px 28px var(--kaf-shadow-6)}
.qc-tabs__tablist{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.qc-tab{display:block;padding:14px 18px;border:1px solid #e3ece9;border-radius:14px;background:var(--kaf-white);font-weight:800;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;text-align:left}
.qc-tab:hover{transform:translateY(-2px);box-shadow:0 18px 40px var(--kaf-shadow-7)}
.qc-tab.is-active,.qc-tab[aria-selected="true"]{background:var(--kaf-white);border-color:#ceddda}
.qc-tabpanel__content{padding:22px 26px 26px;font-size:17px;line-height:1.7;color:var(--kaf-text-subtle-2)}
.qc-acc__btn{display:none}
@media(max-width:980px){.qc-tabs{padding:14px}.qc-tabs__tablist-wrap{display:none}.qc-acc__btn{display:grid;grid-template-columns:1fr 18px;gap:12px;width:100%;padding:14px;border:1px solid #e3ece9;border-radius:12px;background:var(--kaf-white);font-weight:800;cursor:pointer;margin-top:10px}.qc-panel-wrap.is-open .qc-acc__chev{transform:rotate(180deg)}}

/* ---------- Wrapper grille (kit Romain) ---------- */
.wpgb-wrapper{box-sizing:border-box;width:100%;max-width:1400px;margin:0 auto;padding:0 50px}
@media(max-width:980px){.wpgb-wrapper{padding:0 20px}}
@media(max-width:768px){.wpgb-wrapper{padding:0}}

/* ---------- Beau tableau comparatif (.kaf-table) ---------- */
.kaf-table{margin:28px auto;max-width:1000px;overflow-x:auto;border-radius:14px;box-shadow:0 6px 24px var(--kaf-shadow-4)}
.kaf-table table{width:100%;border-collapse:collapse;font-family:var(--kaf-font);background:var(--kaf-white);overflow:hidden;border-radius:14px}
.kaf-table thead th{background:var(--kaf-accent);color:var(--kaf-white);font-weight:600;text-align:left;padding:14px 16px;font-size:15px;border:none}
.kaf-table tbody td{padding:13px 16px;border-top:1px solid var(--kaf-line);font-size:14.5px;color:var(--kaf-text-body);vertical-align:top}
.kaf-table tbody tr:nth-child(even){background:var(--kaf-surface-zebra)}
.kaf-table tbody tr:hover{background:var(--kaf-surface-hover)}
.kaf-table tbody td:first-child{font-weight:600;color:var(--kaf-ink)}
@media(max-width:600px){.kaf-table thead th,.kaf-table tbody td{padding:10px 12px;font-size:13px}}

/* =====================================================================
   COMPARATEUR MAISON (.kaf-*) — remplace WP Grid Builder
   ===================================================================== */
.kaf{font-family:var(--kaf-font);margin:12px auto 26px;max-width:1180px}
.kaf-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:18px}
.kaf-search,.kaf-sort{padding:10px 14px;border:1.5px solid var(--kaf-border-mid);border-radius:8px;font-size:14px;background:var(--kaf-white);box-sizing:border-box;max-width:100%}
.kaf-search:focus,.kaf-sort:focus{outline:none;border-color:var(--kaf-terra);box-shadow:0 0 0 3px rgba(var(--kaf-accent-rgb),.15)}
.kaf-search{flex:1 1 220px}
.kaf-reset{padding:10px 16px;border:1.5px solid var(--kaf-border-mid);border-radius:8px;background:var(--kaf-white);cursor:pointer;font-weight:600}
.kaf-reset:hover{background:var(--kaf-surface-muted);border-color:#8a978f}
.kaf-count{margin-left:auto;font-size:14px;color:var(--kaf-text-muted)}
/* Comparateur : filtres en SIDEBAR à gauche, visibles sur PC (préférence utilisateur).
   align-items:start → les cartes ne sont pas étirées à la hauteur de la colonne filtres. */
.kaf-layout{display:grid;grid-template-columns:230px 1fr;gap:26px;align-items:start}
.kaf-facets{display:flex;flex-direction:column;gap:18px}
.kaf-facet__title{font-size:15px;font-weight:700;margin:0 0 8px}
.kaf-options{display:flex;flex-wrap:wrap;gap:8px}
.kaf-opt{display:inline-flex;align-items:center;gap:6px;padding:7px 13px;border:1.5px solid var(--kaf-border-mid);border-radius:999px;cursor:pointer;font-size:13px;font-weight:600;color:var(--kaf-ink);background:var(--kaf-white);user-select:none;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.kaf-opt:hover{border-color:var(--kaf-terra);box-shadow:0 2px 8px rgba(var(--kaf-accent-rgb),.15)}
.kaf-opt input{display:none}
.kaf-opt:has(input:checked){background:var(--kaf-terra);color:var(--kaf-white);border-color:var(--kaf-terra-d);box-shadow:0 4px 12px rgba(var(--kaf-accent-rgb),.30)}
.kaf-range{display:flex;align-items:center;gap:8px}
.kaf-range input{width:80px;padding:8px;border:1.5px solid var(--kaf-border-mid);border-radius:8px}
.kaf-range input:focus{outline:none;border-color:var(--kaf-terra);box-shadow:0 0 0 3px rgba(var(--kaf-accent-rgb),.15)}
/* Grille auto-fit : peu de cartes → elles remplissent la largeur (pas de vide) ;
   beaucoup de cartes → 3-4 colonnes régulières. Les colonnes vides se replient. */
.kaf-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;align-items:stretch}
.kaf-card{background:var(--kaf-white);border-radius:14px;border:1px solid #e6ece8;box-shadow:0 1px 2px var(--kaf-shadow-16),0 8px 22px var(--kaf-shadow-8);text-decoration:none;color:inherit;overflow:hidden;transition:box-shadow .3s ease,transform .3s ease,border-color .3s ease;display:flex;flex-direction:column}
.kaf-card:hover{box-shadow:0 16px 38px var(--kaf-shadow-9);transform:translateY(-4px);border-color:#d4e0da}
.kaf-card__media{position:relative;display:block;overflow:hidden}
.kaf-card__media img{width:100%;height:auto;display:block;transition:transform .45s ease}
.kaf-card:hover .kaf-card__media img{transform:scale(1.06)}
.kaf-card__hover{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(6px);background:var(--kaf-overlay-dark);backdrop-filter:blur(2px);color:var(--kaf-white);text-transform:uppercase;font-weight:700;font-size:12px;padding:8px 16px;border-radius:999px;opacity:0;transition:opacity .25s ease,transform .25s ease;white-space:nowrap}
.kaf-card:hover .kaf-card__hover{opacity:1;transform:translate(-50%,-50%) translateY(0)}
.kaf-card__name{padding:12px 14px 2px;font-weight:600;font-size:16px;text-align:center;min-height:2.6em}
.kaf-card__price{padding:0 14px 12px;text-align:center;font-family:Georgia,serif;font-weight:700;font-size:18px;color:var(--kaf-terra-d)}
/* CTA carte : affordance claire et efficace, posée au bas de la carte (pas bling-bling). */
.kaf-card__cta{margin:auto 12px 14px;padding:11px 14px;border-radius:10px;background:var(--kaf-terra);
  color:var(--kaf-white);font-weight:700;font-size:14.5px;text-align:center;letter-spacing:.01em;
  box-shadow:0 4px 12px rgba(var(--kaf-accent-rgb),.28);transition:background .2s ease,transform .15s ease}
.kaf-card:hover .kaf-card__cta{background:var(--kaf-terra-d)}
.kaf-card__cta span{transition:transform .2s ease;display:inline-block}
.kaf-card:hover .kaf-card__cta span{transform:translateX(3px)}
.kaf-card.is-hidden{display:none}
.kaf-empty{text-align:center;color:var(--kaf-text-muted);padding:30px}
.kaf-more-wrap{text-align:center;margin-top:18px}
.kaf-more{padding:12px 30px;border:none;border-radius:5px;background:var(--kaf-terra);color:var(--kaf-white);font-weight:700;cursor:pointer}
.kaf-more:hover{background:var(--kaf-terra-d)}
.kaf-more.is-hidden{display:none}
@media(max-width:980px){
  .kaf-layout{grid-template-columns:1fr}
  /* Pas de survol au doigt → l'étiquette "Lire notre test" reste visible et lisible. */
  .kaf-card__hover{opacity:1;background:var(--kaf-overlay-dark-strong);transform:translate(-50%,-50%)}
}
/* Sur petits écrans : 2 colonnes confortables, puis 1 colonne sous 430px (géré par l'auto-fit). */
@media(max-width:600px){.kaf-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}}

/* ---- Fiche : encart CTA affilié + tableau specs ---- */
.kaf-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;justify-content:space-between;border:1px solid var(--kaf-border-soft);border-left:5px solid var(--kaf-accent);border-radius:10px;padding:16px 18px;margin:22px 0;background:var(--kaf-surface-card)}
.kaf-cta__info{display:flex;flex-direction:column;line-height:1.2}
.kaf-cta__price{font-family:Georgia,serif;font-weight:700;font-size:26px;color:var(--kaf-accent)}
.kaf-cta__merchant{font-size:13px;color:var(--kaf-text-muted)}
.kaf-cta__btn{display:inline-block;background:var(--kaf-accent);color:var(--kaf-white);font-weight:700;text-decoration:none;padding:13px 26px;border-radius:8px;transition:background .25s ease}
.kaf-cta__btn:hover{background:var(--kaf-black);color:var(--kaf-white)}
.kaf-cta__maj{flex-basis:100%;font-size:12px;color:var(--kaf-text-soft)}
.kaf-specs table{width:100%}
.kaf-specs th{width:40%;text-align:left;background:#f4faf6}

/* =====================================================================
   DESIGN SITE (réseau Quel-X) — hero, boutons, sections, footer
   Palette : vert var(--kaf-accent) (accent) · encre #1f2a24 · fond doux #f7f9f8
   ===================================================================== */
:root{
  /* ROBOT = vert profond "outdoor tech" (divergent du terracotta pilote) */
  --kaf-green:#15803D;--kaf-green-d:#166534;
  --kaf-ink:#0F2C1E;--kaf-black:#0b1c14;--kaf-white:#ffffff;
  --kaf-soft:#eef4f0;--kaf-line:#e2e9e5;--kaf-canvas:#f0f5f2;--kaf-cream:#f7faf8;
  --kaf-green-soft:#e8f5ed;--kaf-green-line:#d7e4dc;
  --kaf-accent:#15803D;--kaf-accent-d:#166534;--kaf-accent-soft:#e8f5ed;--kaf-accent-line:#d7e4dc;
  --kaf-accent-rgb:21,128,61;--kaf-accent-d-rgb:22,101,52;--kaf-green-rgb:21,128,61;
  --kaf-terra:#22A356;--kaf-terra-d:#15803D;--kaf-terra-soft:#e8f5ed;
  --kaf-text-body:#26332e;--kaf-text-muted:#5c6b62;--kaf-text-soft:#8a978f;
  --kaf-text-subtle:#41514a;--kaf-text-subtle-2:#3a4a42;--kaf-text-subtle-3:#40514a;
  --kaf-text-subtle-4:#a7bcb0;--kaf-text-subtle-5:#6b7a72;
  --kaf-border:#d7e0da;--kaf-border-soft:#e2e9e5;--kaf-border-mid:#c2cfc8;
  --kaf-border-warm:#cdd8d1;--kaf-border-warm-dark:#a9b8af;
  --kaf-surface-muted:#eef3f0;--kaf-surface-zebra:#f5f8f6;--kaf-surface-hover:#eaf2ed;
  --kaf-surface-faq:#f4f8f6;--kaf-surface-card:#f6faf8;--kaf-surface-image:#ffffff;
  --kaf-overlay-dark:rgba(11,28,20,.72);--kaf-overlay-dark-strong:rgba(11,28,20,.82);
  --kaf-shadow-1:rgba(15,44,30,.14);--kaf-shadow-2:rgba(15,44,30,.08);--kaf-shadow-3:rgba(15,44,30,.16);
  --kaf-shadow-4:rgba(15,44,30,.08);--kaf-shadow-5:rgba(15,44,30,.10);--kaf-shadow-6:rgba(15,44,30,.08);
  --kaf-shadow-7:rgba(15,44,30,.10);--kaf-shadow-8:rgba(15,44,30,.08);--kaf-shadow-9:rgba(15,44,30,.12);
  --kaf-shadow-10:rgba(15,44,30,.07);--kaf-shadow-11:rgba(15,44,30,.08);--kaf-shadow-12:rgba(15,44,30,.10);
  --kaf-shadow-13:rgba(15,44,30,.10);--kaf-shadow-14:rgba(15,44,30,.08);--kaf-shadow-15:rgba(15,44,30,.12);
  --kaf-shadow-16:rgba(15,44,30,.05);--kaf-shadow-17:rgba(15,44,30,.06);--kaf-shadow-18:rgba(15,44,30,.10);
  --kaf-shadow-19:rgba(15,44,30,.14);
  --kaf-shadow-20:rgba(255,255,255,.82);--kaf-shadow-21:rgba(15,44,30,.10);--kaf-shadow-22:rgba(255,255,255,.55);
  --kaf-shadow-23:rgba(255,255,255,.16);--kaf-shadow-24:rgba(255,255,255,.20);--kaf-shadow-25:rgba(255,255,255,.12);
  --kaf-success:#15803D;--kaf-danger:#c0392b;--kaf-success-bg:#e9f7ef;--kaf-danger-bg:#fdece9;
  --kaf-success-soft:#e9f7ef;--kaf-success-line:#bfe6cd;--kaf-success-text:#1b7a43;
  --kaf-danger-soft:#fdeceb;--kaf-danger-line:#f3c9c4;--kaf-danger-text:#b23a2c;
  --kaf-gold:#C9A24A;--kaf-gold-d:#9c7c2f;--kaf-gold-soft:#fbf3dd;
  --kaf-font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --kaf-serif:'Space Grotesk',"Segoe UI",system-ui,sans-serif}

/* Boutons réutilisables */
.kaf-btn{display:inline-block;background:var(--kaf-green);color:var(--kaf-white) !important;font-weight:700;text-decoration:none;padding:14px 30px;border-radius:10px;transition:background .25s ease,transform .2s ease;box-shadow:0 6px 18px rgba(var(--kaf-accent-rgb),.25)}
.kaf-btn:hover{background:var(--kaf-black);transform:translateY(-1px)}
.kaf-btn--ghost{background:transparent;color:var(--kaf-green) !important;border:2px solid var(--kaf-green);box-shadow:none}
.kaf-btn--ghost:hover{background:var(--kaf-green);color:var(--kaf-white) !important}

/* Hero d'accueil */
.kaf-hero{margin:0 0 36px;padding:44px 24px;border-radius:18px;text-align:center;
  background:linear-gradient(135deg,var(--kaf-green-soft) 0%,var(--kaf-canvas) 55%,var(--kaf-cream) 100%);border:1px solid var(--kaf-line)}
.kaf-hero__inner{max-width:760px;margin:0 auto}
.kaf-hero__title{font-size:clamp(28px,5vw,46px);line-height:1.12;margin:0 0 14px;color:var(--kaf-ink)}
.kaf-hero__sub{font-size:clamp(16px,2.2vw,20px);color:var(--kaf-text-subtle);margin:0 0 26px}
.kaf-hero__cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:0}
/* Bande de réassurance (signal « pro/confiance », façon grands comparateurs) */
.kaf-hero__trust{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin:24px 0 0;padding:0}
.kaf-hero__trust li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;color:var(--kaf-ink);
  background:var(--kaf-shadow-20);border:1px solid var(--kaf-shadow-21);border-radius:999px;padding:7px 14px;
  box-shadow:0 4px 14px var(--kaf-shadow-14)}
.kaf-hero__trust li::before{content:"✓";font-weight:900;color:var(--kaf-terra-d);font-size:12px}
@media(max-width:600px){.kaf-hero__trust{gap:8px}.kaf-hero__trust li{font-size:12px;padding:6px 11px}}

/* Liste de guides */
.kaf-guides{list-style:none;padding:0;margin:18px 0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.kaf-guides li{margin:0}
.kaf-guides a{display:block;padding:16px 18px;background:var(--kaf-white);border:1px solid var(--kaf-line);border-left:4px solid var(--kaf-green);border-radius:10px;text-decoration:none;color:var(--kaf-ink);font-weight:600;transition:box-shadow .2s ease,transform .2s ease}
.kaf-guides a:hover{box-shadow:0 8px 22px var(--kaf-shadow-18);transform:translateY(-1px)}
@media(max-width:680px){.kaf-guides{grid-template-columns:1fr}}

/* Footer maison */
.kaf-footer{background:var(--kaf-ink);color:var(--kaf-green-line);margin-top:50px;padding:48px 24px 0}
.kaf-footer a{color:var(--kaf-green-line);text-decoration:none}
.kaf-footer a:hover{color:var(--kaf-white);text-decoration:underline}
.kaf-footer__cols{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.kaf-footer h3{color:var(--kaf-white);font-size:15px;letter-spacing:.04em;text-transform:uppercase;margin:0 0 14px}
.kaf-footer ul{list-style:none;padding:0;margin:0;line-height:2}
.kaf-footer__brand p{color:var(--kaf-text-subtle-4);margin:8px 0 0;font-size:14px;line-height:1.6}
.kaf-footer__bar{max-width:1100px;margin:34px auto 0;padding:18px 0;border-top:1px solid var(--kaf-green-d);font-size:13px;color:var(--kaf-text-subtle-4);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
@media(max-width:780px){.kaf-footer__cols{grid-template-columns:1fr 1fr}.kaf-footer__brand{grid-column:1/-1}}
@media(max-width:480px){.kaf-footer__cols{grid-template-columns:1fr}}

/* Rythme général du contenu */
.wp-block-post-content h2{margin-top:1.6em}
.kaf-table{margin:22px 0}

/* Pas d'affichage de date sur les articles/fiches (évite l'effet « daté »). */
.wp-block-post-date,.wp-block-post-date time{display:none !important}

/* =====================================================================
   RAFFINEMENT DESIGN — police système, header collant, menu, bulles, typo
   ===================================================================== */
body{font-family:var(--kaf-font)}

/* Header collant et épuré (le footer est <footer>, non affecté) */
.wp-site-blocks header.wp-block-template-part{position:sticky;top:0;z-index:1000;background:var(--kaf-white);box-shadow:0 1px 0 var(--kaf-shadow-17),0 6px 18px var(--kaf-shadow-16)}
.wp-block-site-title a{color:var(--kaf-ink);font-weight:800;text-decoration:none;letter-spacing:-.01em}
.wp-block-navigation a{color:var(--kaf-ink);font-weight:600}
.wp-block-navigation a:hover{color:var(--kaf-green)}
.wp-block-navigation .wp-block-navigation__submenu-container{border:1px solid var(--kaf-line);box-shadow:0 14px 32px var(--kaf-shadow-19);border-radius:12px;padding:6px}
.wp-block-navigation .wp-block-navigation__submenu-container a{border-radius:8px;padding:8px 12px}
.wp-block-navigation .wp-block-navigation__submenu-container a:hover{background:var(--kaf-soft);color:var(--kaf-green)}

/* Bulles : pastille dégradée verte quand pas d'image */
.qc-thumb{background:linear-gradient(135deg,var(--kaf-accent-soft),var(--kaf-accent-soft))}
.qc-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 32% 24%,var(--kaf-shadow-22),transparent 62%);pointer-events:none}
.qc-thumb img{position:relative;z-index:1}
.qc-label{color:var(--kaf-ink)}

/* Typographie & lisibilité */
h1,h2,h3{color:var(--kaf-ink)}
.wp-block-post-content{font-size:17px;line-height:1.72}
.wp-block-post-content a:not([class*="kaf-"]):not([class*="btn"]):not(.azonpress-button){text-underline-offset:2px}
.wp-block-post-content h2{font-size:clamp(22px,3vw,30px)}
.wp-block-post-content h3{font-size:clamp(18px,2.2vw,22px)}
.home .wp-block-post-content>h2{margin-top:2.1em}

/* Petits écrans : header non collant pour libérer de la hauteur */
@media(max-width:600px){.wp-site-blocks header.wp-block-template-part{position:static;box-shadow:none}}

/* =====================================================================
   AMBIANCE — réchauffer le site (corrige l'effet « tout blanc »)
   Idée : un fond de page légèrement teinté (canvas) + des composants
   blancs qui ressortent dessus + des accents verts/crème + du rythme.
   ===================================================================== */

/* 1) Le fond de page n'est plus blanc mais une teinte vert-doux très claire.
      Header (blanc collant) et footer (encre) restent inchangés. */
body{background:var(--kaf-canvas)}

/* 2) Le corps de l'article est posé sur une « feuille » blanche arrondie
      → contraste net avec le canvas, lecture plus premium.
      Les blocs pleine largeur (hero, comparateur) gardent leur propre style. */
.wp-block-post-content{background:var(--kaf-white);border:1px solid var(--kaf-line);border-radius:20px;padding:30px clamp(18px,3vw,44px);box-shadow:0 10px 34px var(--kaf-shadow-10)}
.home .wp-block-post-content{background:transparent;border:none;box-shadow:none;padding:0}

/* 3) Titres de section : accent vert sous le H2 (rythme visuel). */
.wp-block-post-content h2{position:relative;padding-bottom:12px}
.wp-block-post-content h2::after{content:"";position:absolute;left:0;bottom:0;width:60px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--kaf-green),#7fc6a1)}

/* 4) Premier paragraphe = chapô plus grand et plus foncé. */
.wp-block-post-content>p:first-of-type{font-size:1.1em;color:#2b3a33}

/* 5) Image à la une : arrondie + ombre douce (au lieu d'un rectangle brut). */
.wp-block-post-featured-image img,.wp-post-image{border-radius:16px;box-shadow:0 14px 34px var(--kaf-shadow-13)}

/* 6) Les bulles de collections posées sur une bande crème encadrée. */
.qc-collections{background:linear-gradient(180deg,var(--kaf-green-soft),var(--kaf-cream));border:1px solid var(--kaf-green-line);border-radius:22px;padding:28px 24px;margin:30px 0}

/* 7) Citations / encadrés : barre verte + fond crème (au lieu de blanc nu). */
.wp-block-post-content blockquote{background:var(--kaf-cream);border-left:5px solid var(--kaf-green);border-radius:0 12px 12px 0;padding:16px 20px;margin:24px 0;font-style:normal;color:#3a4a42}

/* 8) Listes : puces vertes pour casser le noir/blanc. */
.wp-block-post-content ul li::marker{color:var(--kaf-green)}

/* 9) Hero d'accueil enrichi : un soupçon de motif lumineux. */
.kaf-hero{position:relative;overflow:hidden}
.kaf-hero::before{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(var(--kaf-accent-rgb),.14),transparent 68%);pointer-events:none}

/* 10) Cartes comparateur : léger fond crème + bord pour exister sur le canvas. */
.kaf-card{border:1px solid var(--kaf-line)}
.kaf-grid{background:transparent}

/* =====================================================================
   2e ACCENT TERRACOTTA + ENCADRÉS ÉDITORIAUX (pages money)
   Le vert reste la couleur principale ; le terracotta réchauffe et
   signale les zones « bon plan / conversion » propres à la niche.
   ===================================================================== */

/* Touche terracotta sur l'accent de titre (dégradé vert → terracotta). */
.wp-block-post-content h2::after{background:linear-gradient(90deg,var(--kaf-green),var(--kaf-terra))}

/* Survol des liens de TEXTE uniquement (paragraphes/listes), jamais les boutons. */
.wp-block-post-content :is(p,li,td) a:not([class*="kaf-"]):not([class*="btn"]):not(.azonpress-button):hover{color:var(--kaf-terra-d)}

/* ---- Encadré commun ---- */
.kaf-callout{margin:26px 0;padding:18px 20px 6px;border-radius:14px;border:1px solid;border-left-width:6px;
  box-shadow:0 8px 24px var(--kaf-shadow-10)}
.kaf-callout__head{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:18px;font-weight:800;letter-spacing:-.01em}
.kaf-callout__ico{font-size:20px;line-height:1}
.kaf-callout__body{font-size:16.5px;line-height:1.7}
.kaf-callout__body p{margin:.5em 0}
.kaf-callout__body :last-child{margin-bottom:.6em}

/* « Notre avis » = vert (verdict éditorial, confiance). */
.kaf-callout--avis{background:#F5F7F4;border-color:var(--kaf-green-line);border-left-color:var(--kaf-terra)}
.kaf-callout--avis .kaf-callout__head{color:var(--kaf-ink)}

/* « Le bon plan » = vert clair premium (astuce, économie, action). */
.kaf-callout--plan{background:var(--kaf-terra-soft);border-color:var(--kaf-green-line);border-left-color:var(--kaf-terra)}
.kaf-callout--plan .kaf-callout__head{color:var(--kaf-ink)}

/* =====================================================================
   SEO/CONTENU façon grands comparateurs : palmarès, sommaire, scores
   ===================================================================== */

/* ---- Verdict box / palmarès (top 3 badgés) ---- */
.kaf-palmares{margin:8px 0 12px}
.wp-block-post-content .kaf-palmares__title{margin-top:.2em}
.kaf-palmares__title{margin:0 0 16px}
.kaf-palmares__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px}
.kaf-palmares__card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--kaf-white);border:1px solid var(--kaf-line);border-radius:16px;padding:24px 16px 16px;box-shadow:0 8px 24px var(--kaf-shadow-11)}
.kaf-palmares__card--win{border-color:var(--kaf-gold);box-shadow:0 10px 30px rgba(201,162,74,.18)}
.kaf-palmares__card--qp{border-color:var(--kaf-accent-line)}
.kaf-palmares__card--low{border-color:var(--kaf-accent-line)}
.kaf-palmares__badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:12.5px;font-weight:800;padding:6px 14px;border-radius:999px;background:var(--kaf-ink);color:var(--kaf-white)}
.kaf-palmares__card--win .kaf-palmares__badge{background:var(--kaf-gold-d)}
.kaf-palmares__card--qp .kaf-palmares__badge{background:var(--kaf-ink)}
.kaf-palmares__card--low .kaf-palmares__badge{background:var(--kaf-ink)}
.kaf-palmares__media{display:block;width:100%;margin:6px 0 14px}
.kaf-palmares__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:var(--kaf-white);display:block}
.kaf-palmares__name{font-weight:700;color:var(--kaf-ink);text-decoration:none;font-size:16px;line-height:1.3}
.kaf-palmares__name:hover{color:var(--kaf-terra-d)}
.kaf-palmares__price{display:block;margin:8px 0 14px;font-family:Georgia,serif;font-weight:700;font-size:20px;color:var(--kaf-terra-d)}
.kaf-palmares__price small{font-family:var(--kaf-font);font-weight:400;font-size:12px;color:var(--kaf-text-soft)}
.kaf-palmares__cta{margin-top:auto;display:inline-block;background:var(--kaf-green);color:var(--kaf-white);font-weight:700;text-decoration:none;padding:11px 22px;border-radius:9px;transition:background .25s ease}
.kaf-palmares__cta:hover{background:var(--kaf-black);color:var(--kaf-white)}
@media(max-width:780px){.kaf-palmares__grid{grid-template-columns:1fr;gap:22px}}

/* ---- Sommaire ancré (TOC) ---- */
.kaf-toc{background:var(--kaf-green-soft);border:1px solid var(--kaf-green-line);border-radius:14px;padding:16px 22px;margin:22px 0}
.kaf-toc__title{margin:0 0 8px;font-weight:800;color:var(--kaf-ink)}
.kaf-toc__list{margin:0;padding-left:20px;columns:2;column-gap:30px}
.kaf-toc__list li{margin:4px 0;break-inside:avoid}
.kaf-toc__list a{color:var(--kaf-green-d);text-decoration:none}
.kaf-toc__list a:hover{text-decoration:underline;color:var(--kaf-terra-d)}
@media(max-width:600px){.kaf-toc__list{columns:1}}

/* ---- Scores éditoriaux par critère (barres) ---- */
.kaf-scores{margin:22px 0;max-width:560px}
.kaf-scores__title{font-weight:800;margin:0 0 12px;color:var(--kaf-ink)}
.kaf-score{display:grid;grid-template-columns:130px 1fr 54px;align-items:center;gap:12px;margin:9px 0}
.kaf-score__lib{font-size:14px;font-weight:600;color:var(--kaf-ink)}
.kaf-score__bar{height:9px;border-radius:999px;background:var(--kaf-line);overflow:hidden}
.kaf-score__fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--kaf-terra),var(--kaf-green))}
.kaf-score__val{font-size:13px;font-weight:700;color:var(--kaf-terra-d);text-align:right}
@media(max-width:480px){.kaf-score{grid-template-columns:100px 1fr 46px;gap:8px}}

/* =====================================================================
   COLLECTIONS EN CARTES RECTANGULAIRES (remplace les cercles)
   → un format paysage 4:3 montre bien mieux une table (plateau, pieds,
   forme) qu'une vignette ronde qui rogne les angles.
   ===================================================================== */
.qc-bubbles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;overflow:visible}
.qc-bubble{flex-direction:column;min-width:0;gap:12px}
.qc-thumb{width:100%;height:auto;aspect-ratio:4/3;border-radius:16px;
  box-shadow:0 6px 18px var(--kaf-shadow-12);transition:transform .18s ease,box-shadow .18s ease}
.qc-thumb img{width:100%;height:100%;object-fit:cover}
.qc-thumb::after{border-radius:16px}
.qc-label{font-size:1rem;font-weight:700}
.qc-bubble:hover .qc-thumb{transform:translateY(-3px);box-shadow:0 14px 30px var(--kaf-shadow-15)}
/* Mobile : 2 colonnes (au lieu du carrousel de cercles) */
@media(max-width:860px){
  .qc-bubbles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;overflow:visible;scroll-snap-type:none}
  .qc-bubble{min-width:0}
  .qc-thumb{aspect-ratio:4/3}
}
@media(max-width:420px){.qc-bubbles{grid-template-columns:1fr 1fr;gap:10px}}

/* ---- Formulaire de contact [kaf_contact] ---- */
/* Le formulaire est posé sur un panneau crème encadré → ne se fond plus dans le blanc. */
.kaf-form{max-width:680px;margin:18px 0;display:flex;flex-direction:column;gap:16px;
  background:var(--kaf-cream);border:1px solid var(--kaf-accent-line);border-radius:16px;
  padding:26px clamp(18px,3vw,30px);box-shadow:0 10px 30px var(--kaf-shadow-11)}
.kaf-form label{display:flex;flex-direction:column;gap:6px;font-weight:600;color:var(--kaf-ink)}
.kaf-form label span{color:var(--kaf-danger-text)}
/* Champs : bordure nettement plus visible (gris-bois) + fond blanc qui ressort sur le crème. */
.kaf-form input,.kaf-form textarea{font-family:var(--kaf-font);font-size:15px;padding:12px 14px;border:1.5px solid var(--kaf-border-warm);border-radius:10px;background:var(--kaf-white);width:100%;box-sizing:border-box;transition:border-color .15s ease,box-shadow .15s ease}
.kaf-form input:hover,.kaf-form textarea:hover{border-color:var(--kaf-border-warm-dark)}
.kaf-form input:focus,.kaf-form textarea:focus{outline:none;border-color:var(--kaf-terra);box-shadow:0 0 0 3px rgba(var(--kaf-accent-rgb),.18)}
.kaf-form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kaf-form .kaf-btn{border:none;cursor:pointer;align-self:flex-start;font-size:15px;background:var(--kaf-terra);box-shadow:0 6px 18px rgba(var(--kaf-accent-rgb),.28)}
.kaf-form .kaf-btn:hover{background:var(--kaf-terra-d)}
.kaf-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kaf-form__msg{padding:14px 16px;border-radius:10px;margin:0 0 16px;font-weight:600}
.kaf-form__ok{background:#eafaf0;border:1px solid var(--kaf-success-line);color:var(--kaf-success-text)}
.kaf-form__err{background:var(--kaf-danger-soft);border:1px solid var(--kaf-danger-line);color:var(--kaf-danger-text)}
@media(max-width:560px){.kaf-form__row{grid-template-columns:1fr}}

/* =====================================================================
   IDENTITÉ VISUELLE — ne pas ressembler à un WordPress par défaut
   + LISIBILITÉ (textes plus foncés, FAQ/onglets plus visibles)
   ===================================================================== */
:root{
  /* Serif éditorial = signature "magazine / comparateur" (pas le sans générique de WP). 0 requête externe. */
  --kaf-serif:'Space Grotesk',"Segoe UI",system-ui,sans-serif;
  --kaf-text:var(--kaf-text-body); /* encre de lecture, bien contrastée */
}
/* Titres en serif, plus marqués */
h1,h2,h3,h4,
.kaf-hero__title,.kaf-palmares__title,.kaf-faq__title,
.qc-tabs h2,.kaf-scores__title,.kaf-toc__title{
  font-family:var(--kaf-serif);letter-spacing:-.015em;font-weight:700;color:var(--kaf-ink)
}
.wp-block-post-content h2{font-size:clamp(24px,3.3vw,33px)}
.wp-block-post-content h3{font-size:clamp(19px,2.3vw,23px);margin-top:1.4em}

/* Lisibilité : corps de texte plus foncé, un peu plus dense ET un peu plus gras */
body{color:var(--kaf-text)}
.wp-block-post-content{color:var(--kaf-text);font-size:17.5px;line-height:1.75;font-weight:450}
.wp-block-post-content p,.wp-block-post-content li,.wp-block-post-content td{color:var(--kaf-text);font-weight:450}
/* Zones qui paraissaient les plus fines : un cran de graisse en plus */
.qc-tabpanel__content{color:var(--kaf-text);font-size:17px;line-height:1.75;font-weight:480}
.kaf-cta__merchant{color:var(--kaf-text-subtle-5)}
.kaf-card__name{color:var(--kaf-ink)}

/* Liens de contenu plus francs — UNIQUEMENT les liens de texte (pas les boutons/cartes) */
.wp-block-post-content :is(p,li,td) a:not([class*="kaf-"]):not([class*="btn"]){color:var(--kaf-terra-d);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.wp-block-post-content :is(p,li,td) a:not([class*="kaf-"]):not([class*="btn"]):hover{color:var(--kaf-black)}
/* Sécurité : les boutons/cartes sont des <a> → ne jamais leur appliquer le style lien souligné */
.wp-block-post-content .kaf-palmares__cta,
.wp-block-post-content .kaf-cta__btn,
.wp-block-post-content a.kaf-btn,
.wp-block-post-content .azonpress-button{color:var(--kaf-white);text-decoration:none;font-weight:700}
.wp-block-post-content a.kaf-card{color:inherit;text-decoration:none}

/* =====================================================================
   POLICES DE MARQUE auto-hébergées (Space Grotesk titres + Inter corps)
   WOFF2 sous-ensemble latin · font-display:swap · fallback système.
   0 requête externe (RGPD) · ~78 Ko · preload des 2 critiques côté PHP.
   ===================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2')}

/* Variables : Inter (corps) + Space Grotesk (titres) d'abord, stack systeme en secours */
:root{
  --kaf-font:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --kaf-serif:'Space Grotesk',"Segoe UI",system-ui,sans-serif;
}

/* ---- Affinage typo (Space Grotesk titres + Inter corps) ---- */
/* Corps Inter : taille/interligne confortables + léger resserrage */
body{letter-spacing:-.004em}
.wp-block-post-content{font-size:17px;line-height:1.72}
/* Titres : interligne serré, tracking serif doux (au lieu de -.015em trop tendu) */
h1,h2,h3,h4,
.kaf-hero__title,.kaf-palmares__title,.kaf-faq__title,
.qc-tabs h2,.kaf-scores__title,.kaf-toc__title{letter-spacing:-.01em;line-height:1.18}
/* Titres de section en Space Grotesk 600 (plus élégant/lisible que le 700 massif) */
.wp-block-post-content h2,.wp-block-post-content h3,.wp-block-post-content h4,
.kaf-palmares__title,.kaf-faq__title,.kaf-scores__title,.kaf-toc__title,.qc-tabs h2{font-weight:600}
/* On garde le 700 pour les titres forts (H1 + hero) */
h1,.wp-block-post-content h1,.kaf-hero__title{font-weight:700}
/* Sous-titre du hero un peu plus foncé */
.kaf-hero__sub{color:var(--kaf-text-subtle-3)}

/* ---- Maîtrise de la hauteur des images (cartes trop hautes / image à la une trop longue) ---- */
/* Cartes du comparateur : vignette régulière 4:3 (recadrée), au lieu d'une hauteur libre */
.kaf-card__media img{width:100%;aspect-ratio:4/3;object-fit:cover;height:auto;display:block;background:var(--kaf-white)}
/* Image à la une (1re image de la page) : paysage 16:9 plafonné, recadrage propre */
.wp-block-post-featured-image img{aspect-ratio:16/9;object-fit:cover;width:100%;height:auto;max-height:440px}

/* =====================================================================
   RESPONSIVE MOBILE — passe dédiée (filtres repliables + ajustements)
   ===================================================================== */
/* Bouton « Afficher les filtres » : CACHÉ sur PC (filtres déjà visibles en barre),
   VISIBLE sur mobile (les filtres se replient derrière). */
.kaf-filter-toggle{display:none;align-items:center;gap:9px;width:100%;justify-content:flex-start;margin-bottom:16px;
  padding:13px 18px;border:none;border-radius:12px;background:var(--kaf-terra);color:var(--kaf-white);font-weight:700;font-size:15px;
  cursor:pointer;box-shadow:0 4px 12px rgba(var(--kaf-accent-rgb),.25)}
/* Chevron d'affordance (signale clairement que ça déplie) — pseudo non effacé par le JS */
.kaf-filter-toggle::before{content:"≡";font-size:18px;font-weight:700;line-height:1}
.kaf-filter-toggle::after{content:"▾";font-size:13px;transition:transform .2s ease;margin-left:auto}
.kaf.is-filters-open .kaf-filter-toggle::after{transform:rotate(180deg)}

/* MOBILE : layout en pile + filtres repliés derrière le bouton « Afficher les filtres ». */
@media(max-width:768px){
  .kaf-layout{display:block}
  .kaf-filter-toggle{display:flex}
  .kaf-facets{display:none;flex-direction:column;gap:14px;padding:14px;margin-bottom:14px;
    background:var(--kaf-soft);border:1px solid var(--kaf-line);border-radius:12px}
  .kaf.is-filters-open .kaf-facets{display:flex}
}

@media(max-width:600px){
  /* Toolbar : recherche pleine largeur, tri/reset côte à côte */
  .kaf-toolbar{gap:8px}
  .kaf-search{flex:1 1 100%}
  .kaf-sort,.kaf-reset{flex:1 1 auto}
  .kaf-count{flex:1 1 100%;margin-left:0;text-align:right}

  /* Hero plus compact */
  .kaf-hero{padding:38px 18px;border-radius:14px;margin-bottom:28px}

  /* Moins d'espace gaspillé en haut + sections resserrées */
  body:not(.home) h1{margin-top:22px}
  .qc-tabs{margin:22px auto}
  .kaf-palmares{margin:18px 0}
  .wp-block-post-content{padding:22px 16px}

  /* Tableaux : les petits (≤3-4 colonnes) tiennent dans l'écran ; les très larges
     peuvent scroller. Police et marges réduites pour faire entrer le contenu. */
  .wp-block-post-content .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .wp-block-post-content .wp-block-table table{min-width:0;width:100%;font-size:13px}
  .wp-block-post-content .wp-block-table th,.wp-block-post-content .wp-block-table td{padding:8px 10px;word-break:normal;overflow-wrap:break-word}
  /* Comparatif (.kaf-table) large : police compacte + 1re colonne FIGÉE pendant le glissement
     → on garde toujours le repère (Matière…) visible, le scroll devient lisible et minimal. */
  .kaf-table{font-size:11.5px}
  .kaf-table thead th,.kaf-table tbody td{padding:8px 9px}
  .kaf-table th:first-child,.kaf-table td:first-child{position:sticky;left:0;z-index:1}
  .kaf-table tbody td:first-child{background:var(--kaf-white)}
  .kaf-table tbody tr:nth-child(even) td:first-child{background:var(--kaf-surface-zebra)}

  /* CTA fiche : bouton pleine largeur, plus facile au pouce */
  .kaf-cta{flex-direction:column;align-items:stretch;text-align:center}
  .kaf-cta__btn{width:100%}

  /* Sommaire compact */
  .kaf-toc{padding:14px 16px}

  /* Encadrés un peu plus serrés */
  .kaf-callout{padding:16px 16px 4px}
}

@media(max-width:400px){
  .qc-bubbles{gap:9px}
  .kaf-hero__cta{gap:10px}
  .kaf-hero__cta .kaf-btn,.kaf-hero__cta .kaf-btn--ghost{width:100%}
}

/* Anti-débordement global : aucun élément ne crée de scroll horizontal sur mobile
   (un débordement à droite décalait la page → titres rognés à gauche). */
html,body{overflow-x:hidden;max-width:100%}
.wp-site-blocks{overflow-x:clip}
*{min-width:0}
/* Filet de sécurité : aucun bloc du kit ne déborde (box-sizing + largeur bornée)
   → corrige le contenu qui « penche à gauche » sur mobile. */
.wp-block-post-content :is(.azonpress,.kaf-cta,.kaf-callout,.kaf-toc,.kaf-scores,
.kaf-palmares,.kaf-news,.kaf,.wpgb-wrapper,.qc-collections,.kaf-table,.wp-block-table,.kaf-hero){
  box-sizing:border-box;max-width:100%}
@media(max-width:600px){
  /* Home : le corps est transparent (padding:0) → on lui rend un padding latéral
     pour décoller titres, paragraphes et boîtes des bords. */
  .home .wp-block-post-content{padding-left:16px;padding-right:16px}
  /* Sécurité largeur : ces conteneurs ne dépassent jamais la fenêtre. */
  .wp-block-post-content,.kaf,.kaf-layout,.kaf-toolbar,.kaf-filter-toggle,
  .kaf-search,.kaf-sort,.kaf-reset,.kaf-count,.kaf-facets{max-width:100%;box-sizing:border-box}
}

/* =====================================================================
   MENU MOBILE (overlay) — aligné à gauche, lisible, sous-menus en retrait
   Corrige : items collés à droite + sous-menus en « cartes » flottantes.
   ===================================================================== */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
  justify-content:flex-start;align-items:stretch;width:100%}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
  flex-direction:column;align-items:stretch;text-align:left;width:100%;gap:2px}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{width:100%;justify-content:flex-start}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item>a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu>a{
  width:100%;padding:13px 2px;font-size:18px;font-weight:700;font-family:var(--kaf-serif);border-bottom:1px solid var(--kaf-shadow-18)}
/* Sous-menus : pas de carte flottante → simple retrait à gauche */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container{
  position:static !important;border:none !important;box-shadow:none !important;border-radius:0 !important;
  background:transparent !important;padding:0 0 6px 14px !important;width:100%;opacity:1;visibility:visible;transform:none}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item>a{
  font-family:var(--kaf-font);font-size:16px;font-weight:500;padding:10px 2px;border-bottom:none;color:#3a4a43}

/* =====================================================================
   BOUTONS — finition premium, cohérente desktop + mobile
   Dégradé terracotta subtil, survol qui s'enfonce dans le ton (pas de noir
   brutal), micro-relief, état actif, anneau de focus clavier.
   ===================================================================== */
.kaf-btn,.kaf-cta__btn,.kaf-palmares__cta,.azonpress-button,.kaf-more,.kaf-filter-toggle{
  background:linear-gradient(180deg,var(--kaf-accent-d),var(--kaf-accent));
  border:none;border-radius:13px;font-weight:700;letter-spacing:.012em;cursor:pointer;box-sizing:border-box;max-width:100%;
  box-shadow:0 5px 16px rgba(var(--kaf-accent-rgb),.30),inset 0 1px 0 var(--kaf-shadow-23);
  transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.kaf-btn:hover,.kaf-cta__btn:hover,.kaf-palmares__cta:hover,.azonpress-button:hover,.kaf-more:hover,.kaf-filter-toggle:hover{
  background:linear-gradient(180deg,var(--kaf-accent),var(--kaf-accent-d));color:var(--kaf-white);
  transform:translateY(-2px);box-shadow:0 9px 24px rgba(var(--kaf-accent-d-rgb),.38),inset 0 1px 0 var(--kaf-shadow-24)}
.kaf-btn:active,.kaf-cta__btn:active,.kaf-palmares__cta:active,.azonpress-button:active,.kaf-more:active,.kaf-filter-toggle:active{
  transform:translateY(0);box-shadow:0 3px 10px rgba(var(--kaf-accent-d-rgb),.3)}
/* Anneau de focus clavier (accessibilité) */
.kaf-btn:focus-visible,.kaf-cta__btn:focus-visible,.kaf-palmares__cta:focus-visible,.azonpress-button:focus-visible,
.kaf-more:focus-visible,.kaf-reset:focus-visible,.kaf-btn--ghost:focus-visible,.kaf-filter-toggle:focus-visible,.kaf-sort:focus-visible{
  outline:3px solid rgba(var(--kaf-accent-rgb),.45);outline-offset:2px}
/* Bouton secondaire « Nos guides » : rempli foncé (≠ terracotta principal), élégant */
.kaf-btn--ghost{background:var(--kaf-ink) !important;color:var(--kaf-white) !important;border:none !important;
  box-shadow:0 4px 14px rgba(var(--kaf-green-rgb),.22),inset 0 1px 0 var(--kaf-shadow-25) !important}
.kaf-btn--ghost:hover{background:var(--kaf-ink) !important;color:var(--kaf-white) !important;transform:translateY(-2px);
  box-shadow:0 9px 24px rgba(var(--kaf-green-rgb),.32) !important}
/* Bouton « Réinitialiser » (outline) — cohérent et net */
.kaf-reset{font-weight:700;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.kaf-reset:hover{box-shadow:0 4px 12px var(--kaf-shadow-5)}
/* Boutons sur mobile : présents mais pas épais, tactiles, sans débordement */
@media(max-width:600px){
  /* Design mobile : boutons nets, plus rectangulaires (coins légers), tactiles, sans débordement */
  .kaf-btn,.kaf-btn--ghost,.kaf-cta__btn,.kaf-palmares__cta,.azonpress-button,.kaf-more,.kaf-reset,.kaf-filter-toggle{
    min-height:48px;font-size:16px;border-radius:10px;padding-left:18px;padding-right:18px;padding-top:12px;padding-bottom:12px;
    display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;max-width:100%;width:100%}
  /* Boutons d'action principaux en pleine largeur (hero + offre + palmarès) */
  .kaf-hero__cta .kaf-btn,.kaf-hero__cta .kaf-btn--ghost,.kaf-cta__btn,.kaf-palmares__cta{width:100%;max-width:100%}
  .kaf-hero__cta{flex-direction:column;gap:12px;width:100%}
  /* "Trier"/"Réinitialiser" : 2 colonnes égales qui tiennent sans déborder */
  .kaf-sort,.kaf-reset{width:auto;flex:1 1 0}
  /* CTA carte un peu plus généreux au pouce */
  .kaf-card__cta{min-height:44px;display:flex;align-items:center;justify-content:center}
}

/* =====================================================================
   NEWSLETTER [kaf_newsletter]
   ===================================================================== */
.kaf-news{max-width:640px;margin:6px auto 26px;padding:26px clamp(18px,3vw,30px);
  background:linear-gradient(180deg,var(--kaf-green-soft),var(--kaf-cream));border:1px solid var(--kaf-green-line);
  border-radius:18px;box-shadow:0 10px 30px var(--kaf-shadow-10)}
.kaf-news__title{font-family:var(--kaf-serif);font-size:clamp(20px,2.6vw,26px);font-weight:700;color:var(--kaf-ink);margin:0 0 6px}
.kaf-news__intro{margin:0 0 16px;color:var(--kaf-text-subtle-3)}
.kaf-news__row{display:flex;gap:10px;flex-wrap:wrap}
.kaf-news__row input[type=email]{flex:1 1 220px;min-width:0;padding:13px 15px;border:1.5px solid var(--kaf-border-warm);border-radius:12px;font-size:15px;box-sizing:border-box;background:var(--kaf-white)}
.kaf-news__row input[type=email]:focus{outline:none;border-color:var(--kaf-terra);box-shadow:0 0 0 3px rgba(var(--kaf-accent-rgb),.18)}
.kaf-news__row .kaf-btn{white-space:nowrap}
.kaf-news__consent{display:flex;gap:9px;align-items:flex-start;margin-top:12px;font-size:13.5px;color:var(--kaf-text-subtle-4);line-height:1.5}
.kaf-news__consent input{margin-top:3px;flex:0 0 auto}
@media(max-width:560px){.kaf-news__row .kaf-btn{width:100%}}

/* =======================================================================
 * SOCLE RESPONSIVE réseau (aligné pilote quelle-table-a-manger v1.4.6+)
 * Corrige « la page penche à gauche sur mobile » (iOS). RÈGLE : box-sizing
 * global OUI ; max-width sur .alignfull JAMAIS hors media-query mobile.
 * ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{max-width:100%;overflow-x:hidden}
.wp-site-blocks{overflow-x:clip}
img{max-width:100%;height:auto}
.wp-block-post-content :is(table,pre,iframe,video,figure){max-width:100%}
.wp-block-post-content figure{margin-left:auto;margin-right:auto;text-align:center}
.wp-block-post-content figure>a{display:inline-block}
@media(max-width:781px){
  .alignfull,.wp-block-group.alignfull,.entry-content.alignfull,
  .wp-block-post-content.alignfull{max-width:none}
  .wp-block-post-title,.wp-block-post-content h1{font-size:clamp(1.5rem,6vw,2.05rem);line-height:1.16;overflow-wrap:break-word}
  .wp-block-post-content table,.entry-content table{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  input,select,textarea,.wp-block-search__input{font-size:16px}
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
}


/* =====================================================================
   DE-FINGERPRINT ROBOT (v1.6.0) — peau « flat / spec-sheet »
   Typo Space Grotesk (titres) + Inter (corps). Divergence assumee vs le
   pilote (serif magazine + arrondi doux) : coins nets, ombres crispees,
   header a lisere accent, hero a plat, boutons pleins, chips carrees.
   ===================================================================== */
:root{--kaf-radius:9px}

/* Titres en Space Grotesk, tracking serre « techy » */
h1,h2,h3,h4,
.kaf-hero__title,.kaf-palmares__title,.kaf-faq__title,
.qc-tabs h2,.kaf-scores__title,.kaf-toc__title,.kaf-news__title{
  font-family:var(--kaf-serif);letter-spacing:-.02em;font-weight:700}

/* Coins nets (remplace l'arrondi doux 14-22px du pilote) */
.kaf-card,.azonpress,.kaf-hero,.wp-block-post-content,.kaf-callout,.kaf-toc,
.kaf-news,.qc-collections,.kaf-table,.kaf-table table,.kaf-palmares__card,
.kaf-form,.qc-tabs,.kaf-cta,.kaf-opt,.kaf-search,.kaf-sort,.kaf-reset,
.kaf-range input{border-radius:var(--kaf-radius)}
.qc-thumb,.qc-thumb::after{border-radius:8px}
.home .wp-block-post-content{border-radius:0}

/* Cartes comparateur : bord net + ombre discrete, survol qui accroche en vert */
.kaf-card{border:1px solid var(--kaf-border);box-shadow:0 1px 2px var(--kaf-shadow-16)}
.kaf-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px var(--kaf-shadow-8);border-color:var(--kaf-accent)}

/* Header : lisere accent en bas = signature du site (differe du pilote) */
.wp-site-blocks header.wp-block-template-part{box-shadow:none;border-bottom:2px solid var(--kaf-accent)}

/* Hero a plat : panneau clair + filet + barre d'accent en haut, sans halo */
.kaf-hero{background:var(--kaf-cream);border:1px solid var(--kaf-border);border-top:3px solid var(--kaf-accent)}
.kaf-hero::before{display:none}

/* Titres de section : barre courte pleine (le pilote a un degrade) */
.wp-block-post-content h2::after{background:var(--kaf-accent);height:3px;width:46px}

/* Boutons : pleins, coins nets, sans degrade */
.kaf-btn,.kaf-cta__btn,.kaf-palmares__cta,.azonpress-button,.kaf-more,.kaf-filter-toggle{
  background:var(--kaf-accent);border-radius:var(--kaf-radius);box-shadow:0 1px 2px var(--kaf-shadow-4)}
.kaf-btn:hover,.kaf-cta__btn:hover,.kaf-palmares__cta:hover,.azonpress-button:hover,
.kaf-more:hover,.kaf-filter-toggle:hover{
  background:var(--kaf-accent-d);box-shadow:0 3px 10px var(--kaf-shadow-8);transform:translateY(-1px)}
.kaf-card__cta{background:var(--kaf-accent);box-shadow:none}
.kaf-card:hover .kaf-card__cta{background:var(--kaf-accent-d)}

/* Bouton secondaire « Nos guides » : contour accent (differe du plein ink du pilote) */
.kaf-btn--ghost{background:transparent !important;color:var(--kaf-accent) !important;
  border:2px solid var(--kaf-accent) !important;box-shadow:none !important}
.kaf-btn--ghost:hover{background:var(--kaf-accent) !important;color:var(--kaf-white) !important;box-shadow:none !important}

/* Puces vertes accent */
.wp-block-post-content ul li::marker{color:var(--kaf-accent)}

/* Mobile : champs de formulaire >= 16px = pas de zoom auto de Safari iOS au focus (audit 15/08) */
@media (max-width:768px){ input, textarea, select { font-size:16px !important } }