/* CCXSP_FORCE_TEXT_COLOR_V1 */
.ccxsp-wrap{color:#111}
.ccxsp-wrap a{color:#111}
.ccxsp-wrap .ccxsp-muted{color:rgba(17,17,17,.7)}
.ccxsp-wrap .ccxsp-thead,
.ccxsp-wrap .ccxsp-row,
.ccxsp-wrap .ccxsp-filter label,
.ccxsp-wrap .ccxsp-meta,
.ccxsp-wrap .ccxsp-pageinfo{color:#111}
.ccxsp-wrap .ccxsp-title{color:#111 !important}

.ccxsp-wrap{max-width:1200px;margin:0 auto;padding:16px}
.ccxsp-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:12px}
.ccxsp-filter label{display:block;font-size:12px;opacity:.75;margin-bottom:6px}
.ccxsp-filter select{width:100%;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:10px 12px;background:#fff}
.ccxsp-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.ccxsp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 14px;border:1px solid rgba(0,0,0,.12);background:#111;color:#fff;text-decoration:none;font-weight:600;cursor:pointer}
.ccxsp-btn-secondary{background:#fff;color:#111}
.ccxsp-link{font-size:13px;text-decoration:none;opacity:.75}
.ccxsp-meta{display:flex;justify-content:space-between;align-items:center;margin:14px 2px;color:#111;opacity:.85}
.ccxsp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ccxsp-card{display:grid;grid-template-columns:120px 1fr;gap:12px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px}
.ccxsp-card-media img{width:120px;height:120px;object-fit:contain;border-radius:12px;background:#fafafa;border:1px solid rgba(0,0,0,.06)}
.ccxsp-imgph{width:120px;height:120px;border-radius:12px;background:#fafafa;border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;opacity:.5}
.ccxsp-title{display:block;font-weight:700;line-height:1.2;text-decoration:none;color:#111;margin-bottom:8px}
.ccxsp-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ccxsp-pill{display:inline-flex;align-items:center;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:5px 10px;font-size:12px;opacity:.85;background:#fff}
.ccxsp-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ccxsp-price-val{font-size:18px;font-weight:800}
.ccxsp-price-sub{font-size:12px;opacity:.7;margin-top:2px}
.ccxsp-empty{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px;opacity:.9}
.ccxsp-pagination{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.ccxsp-page{padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:12px;text-decoration:none;color:#111;background:#fff}
.ccxsp-page.is-disabled{opacity:.4;pointer-events:none}
.ccxsp-pageinfo{opacity:.75}

/* OFFERS */
.ccxsp-hero{display:grid;grid-template-columns:160px 1fr;gap:14px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:14px;margin-bottom:14px}
.ccxsp-hero-media img{width:160px;height:160px;object-fit:contain;border-radius:14px;background:#fafafa;border:1px solid rgba(0,0,0,.06)}
.ccxsp-hero-title{font-size:22px;line-height:1.2;margin:0 0 10px}
.ccxsp-hero-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ccxsp-hero-price{margin-top:6px}
.ccxsp-best{margin-top:8px;opacity:.85}
.ccxsp-muted{opacity:.7;font-size:12px}
.ccxsp-section{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:14px}
.ccxsp-h2{margin:0 0 12px;font-size:18px}
.ccxsp-table{display:grid;gap:8px}
.ccxsp-thead{display:grid;grid-template-columns:2fr .8fr .8fr .8fr .8fr 1fr;gap:10px;font-size:12px;opacity:.7;padding:0 6px}
.ccxsp-row{display:grid;grid-template-columns:2fr .8fr .8fr .8fr .8fr 1fr;gap:10px;align-items:center;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:10px 12px}
.ccxsp-merchant-name{font-weight:800}
.ccxsp-cta{text-align:right}
.ccxsp-promo{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.ccxsp-badge{display:inline-flex;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:4px 8px;font-size:12px;background:#fff;opacity:.9}

@media (max-width: 980px){
  .ccxsp-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ccxsp-grid{grid-template-columns:1fr}
  .ccxsp-card{grid-template-columns:100px 1fr}
  .ccxsp-card-media img,.ccxsp-imgph{width:100px;height:100px}
  .ccxsp-hero{grid-template-columns:120px 1fr}
  .ccxsp-hero-media img{width:120px;height:120px}
  .ccxsp-thead{display:none}
  .ccxsp-row{grid-template-columns:1fr;gap:8px}
  .ccxsp-cta{text-align:left}
}

/* CCXSP_OFFERS_PC_STYLE_V1 */
.ccxsp-offers-cards{display:grid;gap:14px;margin-top:10px}
.ccxsp-offer{
  background:#fff;
  border-radius:18px;
  padding:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.ccxsp-offer-best{
  border:2px solid rgba(122,223,154,.9);
  background:linear-gradient(180deg,#f6fff9,#ffffff);
  box-shadow:0 14px 40px rgba(0,0,0,.08);
}
.ccxsp-offer-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.ccxsp-offer-merchant{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ccxsp-merchant-name{font-weight:900;font-size:13px}
.ccxsp-best-badge{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  background:#111;color:#fff;font-weight:800;font-size:12px;
}
.ccxsp-offer-price{text-align:right;min-width:220px}
.ccxsp-offer-total{font-weight:950;font-size:20px}
.ccxsp-offer-sub{margin-top:4px;font-size:12px;opacity:.72;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}
.ccxsp-dot{opacity:.5}
.ccxsp-offer-promos{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ccxsp-offer-cta{margin-top:12px}
.ccxsp-offer-btn{
  display:block;text-align:center;
  padding:12px 14px;border-radius:12px;
  font-weight:900;text-decoration:none;
  color:#111 !important;
  background:linear-gradient(180deg,#f7b55b,#f39c12);
  border:1px solid rgba(0,0,0,.10);
}
.ccxsp-offer-btn:hover{filter:brightness(.98)}
@media (max-width:980px){
  .ccxsp-offer-head{flex-direction:column;align-items:flex-start}
  .ccxsp-offer-price{text-align:left;min-width:auto}
  .ccxsp-offer-sub{justify-content:flex-start}
}

/* CCXSP_MERCHANT_LOGO_STYLE_V1 */
.ccxsp-merchant-logo{display:inline-flex;align-items:center}
.ccxsp-merchant-logo img,
.ccxsp-merchant-logo svg{
  width:22px;height:22px;object-fit:contain;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.ccxsp-offer-merchant{gap:10px}
.ccxsp-merchant-name{letter-spacing:.2px}


/* CCXSP_TABS_CSS_V1 */
.ccxsp-tabbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:14px 0 18px;
}
.ccxsp-tabbtn{
  appearance:none; border:1px solid rgba(0,0,0,.12);
  background:#fff; color:#111; border-radius:999px;
  padding:8px 12px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.ccxsp-tabbtn[aria-selected="true"]{
  border-color: rgba(29,185,84,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.ccxsp-tabcount{
  display:inline-flex; min-width:26px; height:22px;
  padding:0 8px; border-radius:999px;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.06); font-size:12px;
}
.ccxsp-tabpanel{ margin-top:10px; }

.ccxsp-offers-cards{ display:flex; flex-direction:column; gap:12px; }
.ccxsp-offer{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:16px; padding:14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.ccxsp-offer-best{
  border-color: rgba(29,185,84,.35);
  box-shadow: 0 14px 26px rgba(0,0,0,.07);
}
.ccxsp-offer-head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.ccxsp-offer-merchant{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ccxsp-best-badge{
  background:#111; color:#fff; font-weight:800; font-size:12px;
  padding:6px 10px; border-radius:999px;
}
.ccxsp-merchant-name{ font-weight:800; color:#111; }
.ccxsp-offer-price{ font-weight:900; color:#111; font-size:18px; }
.ccxsp-offer-sub{ margin-top:6px; }
.ccxsp-offer-cta{ margin-top:12px; }

.ccxsp-offer-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; border-radius:12px;
  padding:10px 14px; font-weight:800;
  border:1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, #F6B24C 0%, #E79A28 100%);
  color:#111; text-decoration:none;
}
.ccxsp-offer-btn:hover{ filter:brightness(0.98); }


/* CCXSP_TEXTSAFE_V1 */
.ccxsp-wrap, .ccxsp-wrap * { color: inherit; }
.ccxsp-hero-title, .ccxsp-h2 { color:#111; }
.ccxsp-muted { color: rgba(0,0,0,.55) !important; }
.ccxsp-merchant-name { color:#111; font-weight:800; }
.ccxsp-offer, .ccxsp-offer * { color:#111; }
.ccxsp-offer .ccxsp-muted { color: rgba(0,0,0,.55) !important; }
.ccxsp-btn { color:#111 !important; text-decoration:none; }

/* CCXSP_TABS_POLISH_V1 */
.ccxsp-tabbtn{
  color:#111 !important;
  background:#fff !important;
}
.ccxsp-tabbtn[aria-selected="true"]{
  background:rgba(29,185,84,.08) !important;
}
.ccxsp-tabcount{
  color:#111 !important;
}
.ccxsp-pill{
  color:#111 !important;
  background:rgba(0,0,0,.04) !important;
  border:1px solid rgba(0,0,0,.10) !important;
}

/* CCXSP_FIX_WHITE_ON_WHITE_V1 */
.ccxsp-wrap{ color:#111 !important; }
.ccxsp-wrap a{ color:inherit; }

.ccxsp-hero-title,
.ccxsp-h2,
.ccxsp-merchant-name,
.ccxsp-offer-total{
  color:#111 !important;
}

/* textes secondaires */
.ccxsp-muted,
.ccxsp-offer-sub,
.ccxsp-price-sub{
  color: rgba(0,0,0,.58) !important;
}

/* pills / badges */
.ccxsp-pill,
.ccxsp-badge,
.ccxsp-tabcount{
  color:#111 !important;
}

/* boutons */
.ccxsp-offer-btn,
.ccxsp-btn{
  color:#111 !important;
  text-decoration:none;
}


/* CCXSP_FIX_BEST_BADGE_V1 */
.ccxsp-best-badge{
  background: #111 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Optionnel: si un thème force des couleurs bizarres sur le label */
.ccxsp-offer-best .ccxsp-best-badge{
  background: #111 !important;
  color: #fff !important;
}


/* CCXSP_FIX_BEST_BADGE_V1 */
.ccxsp-best-badge{
  background:#111 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

/* CCXSP_FIX_APPLY_BTN_TEXT_V1 */
button.ccxsp-btn{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important; /* cas Chrome/Safari */
  opacity:1 !important;
  visibility:visible !important;
  font-size:13px !important;              /* cas font-size:0 */
  line-height:1.1 !important;
  text-indent:0 !important;               /* cas texte décalé */
}

/* si thème applique un style sur enfant/pseudo */
button.ccxsp-btn *,
button.ccxsp-btn::before,
button.ccxsp-btn::after{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
}


/* CCXSP_FIX_APPLY_BTN_STYLE_V1 */
button.ccxsp-btn{
  background:#111 !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:10px !important;
  padding:10px 14px !important;
  font-weight:800 !important;
}
button.ccxsp-btn:hover{
  filter:brightness(1.08);
}



/* CCXSP_HERO_CSS_V1 */
.ccxsp-hero{
  display:flex;
  justify-content:center;
  margin:28px 0 18px;
}
.ccxsp-hero-card{
  width:100%;
  max-width:760px;
  text-align:center;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:26px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.ccxsp-hero-title{
  margin:0;
  font-size:42px;
  line-height:1.1;
  font-weight:800;
  color:#111;
}
.ccxsp-hero-sub{
  margin:10px 0 0;
  color:rgba(0,0,0,.62);
  font-size:14px;
  font-weight:600;
}

/* cache le titre WP (blanc sur blanc) uniquement sur la page Smartphones */
body.page-id-16436 .entry-title,
body.page-id-16436 .page-title{
  display:none !important;
}

@media (max-width: 640px){
  .ccxsp-hero-card{ padding:22px 14px; }
  .ccxsp-hero-title{ font-size:34px; }
}

/* CCXSP_COLORS_CSS_V1 */
.ccxsp-variants{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ccxsp-variants-label{
  font-size:12px;
  color:#6b7280;
}
.ccxsp-variants-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.ccxsp-variant,
.ccxsp-color{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  font-size:12px;
  color:#111;
  background:#fff;
  text-decoration:none;
  transition: all .15s ease;
}
.ccxsp-variant:hover,
.ccxsp-color:hover{
  border-color: rgba(0,0,0,.16);
  transform: translateY(-1px);
}
.ccxsp-variant.is-active{
  border-color: rgba(16,185,129,.55);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}

.ccxsp-colors{
  margin-top: 8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
/* ======================================
   CCXSP_OFFERS_IDEALO_SKIN_V2
   Idealo-like (Apple clean) WITHOUT hiding offers
   ====================================== */

/* Ne jamais masquer les offres */
.ccxsp-offers-cards{ display:flex !important; flex-direction:column; gap:12px; }

/* Cards offres : look plus "Idealo" (lisible + aligné) */
.ccxsp-offer{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ccxsp-offer:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 26px rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.14);
}

/* Meilleure offre */
.ccxsp-offer-best{
  border-color: rgba(29,185,84,.35) !important;
  background: linear-gradient(180deg, rgba(29,185,84,.08), #fff 60%) !important;
  box-shadow:0 14px 26px rgba(0,0,0,.07);
}

/* Ligne haut : marchand à gauche, prix à droite */
.ccxsp-offer-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

/* Marchand + logo */
.ccxsp-offer-merchant{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ccxsp-merchant-logo img,
.ccxsp-merchant-logo svg{
  width:26px;height:26px;object-fit:contain;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.ccxsp-merchant-name{
  font-weight:900;
  font-size:13px;
  letter-spacing:.2px;
}

/* Badge "Meilleure offre" */
.ccxsp-best-badge{
  background:#111 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  font-weight:900 !important;
  font-size:12px !important;
  line-height:1 !important;
}

/* Bloc prix */
.ccxsp-offer-price{ text-align:right; }
.ccxsp-offer-total{
  font-weight:950;
  font-size:20px;
  color:#111 !important;
}
.ccxsp-offer-sub{
  margin-top:4px;
  font-size:12px;
  color: rgba(0,0,0,.58) !important;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}
.ccxsp-dot{ opacity:.5; }

/* Bouton CTA */
.ccxsp-offer-cta{ margin-top:12px; }
.ccxsp-offer-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  border-radius:14px;
  padding:10px 14px;
  font-weight:900;
  border:1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, #F6B24C 0%, #E79A28 100%);
  color:#111 !important;
  text-decoration:none;
  box-shadow:0 10px 18px rgba(247,178,76,.22);
}
.ccxsp-offer-btn:hover{ filter:brightness(.98); }

/* Si tu as aussi le mode table (thead/row), on améliore sans forcer */
.ccxsp-thead{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.ccxsp-row{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
}
.ccxsp-row:hover{
  box-shadow: 0 14px 26px rgba(0,0,0,.06);
}

/* Mobile */
@media (max-width:980px){
  .ccxsp-offer-head{ flex-direction:column; align-items:flex-start; }
  .ccxsp-offer-price{ text-align:left; }
  .ccxsp-offer-sub{ justify-content:flex-start; }
}


/* ======================================
   CCXSP_OFFERS_PREMIUM_SOFT_V1
   super soft / clean / premium (Apple-like)
   ====================================== */

/* Cards : plus premium */
.ccxsp-offer{
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.04) !important;
  border-radius: 18px !important;
  padding: 14px 14px !important;
}
.ccxsp-offer:hover{
  box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.10) !important;
}

/* “Meilleure offre” : plus soft (moins flashy) */
.ccxsp-offer-best{
  border-color: rgba(16,185,129,.30) !important;
  background: linear-gradient(180deg, rgba(16,185,129,.06), #fff 55%) !important;
}

/* Badge meilleure offre : petit et discret */
.ccxsp-best-badge{
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  background: rgba(17,17,17,.92) !important;
}

/* Bouton CTA : STOP full width, on fait un bouton premium */
.ccxsp-offer-cta{ margin-top: 10px !important; }
.ccxsp-offer-btn{
  width: auto !important;                 /* <-- clé */
  display: inline-flex !important;        /* <-- clé */
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;

  /* look premium soft (pas grosse barre orange) */
  background: rgba(243, 156, 18, .10) !important;
  border: 1px solid rgba(243, 156, 18, .18) !important;
  color: #111 !important;
  box-shadow: none !important;
}
.ccxsp-offer-btn:hover{
  background: rgba(243, 156, 18, .14) !important;
  border-color: rgba(243, 156, 18, .26) !important;
}

/* On aligne le bouton à droite comme Idealo (desktop) */
.ccxsp-offer-cta{
  display:flex !important;
  justify-content:flex-end !important;
}

/* Mobile : bouton full width OK (plus “app-like”) */
@media (max-width: 980px){
  .ccxsp-offer-cta{ justify-content:stretch !important; }
  .ccxsp-offer-btn{
    width: 100% !important;
    justify-content:center !important;
  }
}

/* Prix : un poil plus premium */
.ccxsp-offer-total{ font-size: 19px !important; }
.ccxsp-offer-sub{ font-size: 12px !important; }

/* Les grosses barres oranges venant d’un ancien style : on les neutralise */
.ccxsp-offer-btn{ background-image: none !important; }


/* ======================================
   CCXSP_OFFERS_COMPACT_FILL_V1
   Less empty cards, more info density (premium)
   ====================================== */

/* On resserre la card */
.ccxsp-offer{
  padding: 12px 14px !important;
}

/* Head : on aligne mieux et on réduit l’espace */
.ccxsp-offer-head{
  gap: 10px !important;
  align-items: center !important;
}

/* Zone marchand : on force une vraie colonne "info" */
.ccxsp-offer-merchant{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Nom marchand + badge sur une ligne propre */
.ccxsp-offer-merchant .ccxsp-merchant-name{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.1 !important;
}

/* Prix : bloc plus compact, moins vide */
.ccxsp-offer-price{
  min-width: 190px !important;
}
.ccxsp-offer-total{
  font-size: 18px !important;
  line-height: 1.1 !important;
}
.ccxsp-offer-sub{
  margin-top: 2px !important;
  line-height: 1.2 !important;
  opacity: .75 !important;
}

/* Ajoute une “hairline” subtile entre haut et CTA (effet Apple) */
.ccxsp-offer-cta{
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(0,0,0,.05) !important;
}

/* CTA : place le bouton à droite + ajoute un petit "→" sans toucher au HTML */
.ccxsp-offer-btn{
  gap: 8px !important;
}
.ccxsp-offer-btn::after{
  content: "→";
  font-weight: 900;
  opacity: .6;
}

/* Badge meilleure offre : plus “Apple” (moins massif) */
.ccxsp-best-badge{
  padding: 4px 9px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  background: rgba(17,17,17,.90) !important;
}

/* La carte "best" : un peu moins verte (moins vide visuellement) */
.ccxsp-offer-best{
  background: linear-gradient(180deg, rgba(16,185,129,.05), #fff 62%) !important;
}

/* Mobile : on densifie aussi (CTA full width ok) */
@media (max-width: 980px){
  .ccxsp-offer-price{ min-width: auto !important; }
  .ccxsp-offer-cta{ padding-top: 10px !important; }
  .ccxsp-offer-btn{ width: 100% !important; justify-content: center !important; }
}


/* ======================================
   CCXSP_OFFERS_MOBILE_POLISH_V1
   - center price on mobile
   - remove arrow on CTA
   - softer best badge (not black)
   ====================================== */

@media (max-width: 980px){

  /* 1) Prix centré (bloc prix + sous-texte) */
  .ccxsp-offer-price{
    text-align: center !important;
    width: 100% !important;
  }
  .ccxsp-offer-total{
    text-align: center !important;
    width: 100% !important;
  }
  .ccxsp-offer-sub{
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* 2) CTA : enlever la flèche */
  .ccxsp-offer-btn::after{
    content: "" !important;
    display: none !important;
  }
}

/* 3) Badge "Meilleure offre" : fond soft premium (pas noir) */
.ccxsp-best-badge{
  background: rgba(16,185,129,.12) !important; /* vert très doux */
  color: rgba(0,0,0,.86) !important;
  border: 1px solid rgba(16,185,129,.22) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.04) !important;
}

/* si la carte est best, on peut rendre le badge un poil plus visible */
.ccxsp-offer-best .ccxsp-best-badge{
  background: rgba(16,185,129,.16) !important;
  border-color: rgba(16,185,129,.28) !important;
}


/* ======================================
   CCXSP_OFFERS_BADGE_TABS_V6
   - Best badge: premium text + gold star
   - Tabs: smaller so both fit on one line (mobile)
   ====================================== */

/* 1) Badge "Meilleure offre" premium */
.ccxsp-best-badge{
  /* fond déjà soft vert, on garde, mais texte plus premium */
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  font-size: 11px !important;
  color: rgba(17,17,17,.88) !important;
  border-color: rgba(16,185,129,.22) !important;
  background: rgba(16,185,129,.12) !important;
}

/* Étoile : on la passe en "or" sans toucher au HTML */
.ccxsp-best-badge::before{
  /* si l’étoile est déjà dans le texte, ça n’ajoute rien de gênant.
     Si tu veux uniquement l’étoile en pseudo-element, laisse comme ça. */
  content: "★" !important;
  display: inline-block !important;
  margin-right: 6px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #b7791f !important; /* or premium */
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

/* Si ton template met déjà une étoile dans le texte (ex: "★ Meilleure offre"),
   on évite la double étoile : on masque la première étoile seulement sur mobile
   en réduisant l'opacité du premier caractère via text-indent trick */
@media (max-width: 980px){
  .ccxsp-best-badge{
    /* on évite les surprises, mais si tu vois double étoile, dis-moi et je te fais un fix ciblé HTML */
  }
}

/* 2) Pills Neuf / Reconditionné : plus petits + 1 ligne */
@media (max-width: 980px){
  .ccxsp-tabbar{
    flex-wrap: nowrap !important;     /* force une ligne */
    gap: 8px !important;
    overflow: hidden !important;
  }

  .ccxsp-tabbtn{
    padding: 7px 10px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .ccxsp-tabcount{
    min-width: 22px !important;
    height: 20px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
}


/* ======================================
   CCXSP_HERO_TITLE_MOBILE_V1
   Reduce title size on mobile so image stays visible
   ====================================== */

@media (max-width: 980px){

  /* Hero: on repasse en layout propre si le titre pousse tout */
  .ccxsp-hero{
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Titre : beaucoup plus compact + max 3 lignes */
  .ccxsp-hero-title{
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.2px !important;
    margin: 0 0 8px !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;   /* max 3 lignes */
    overflow: hidden !important;
  }

  /* Image : on force une taille stable pour qu’elle reste visible */
  .ccxsp-hero-media img{
    width: 96px !important;
    height: 96px !important;
  }

  /* Si ton hero passe en colonne sur mobile, on centre l’image */
  .ccxsp-hero-media{
    flex: 0 0 auto !important;
  }
}


/* ======================================
   CCXSP_MOBILE_WIDE_CARDS_V1
   Make offer cards wider on mobile (less outer padding)
   ====================================== */

@media (max-width: 980px){

  /* 1) Page wrapper: moins de padding extérieur */
  .ccxsp-wrap{
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: 100% !important;
  }

  /* 2) Section "Toutes les offres": moins de padding => cards plus larges */
  .ccxsp-section{
    padding: 10px !important;
    border-radius: 16px !important;
  }

  /* 3) Zone des offres: on colle un peu plus */
  .ccxsp-offers-cards{
    gap: 10px !important;
    margin-top: 10px !important;
  }

  /* 4) Card offre: moins de padding interne, plus dense */
  .ccxsp-offer{
    padding: 12px !important;
    border-radius: 16px !important;
  }

  /* 5) CTA: pas trop haut en mobile */
  .ccxsp-offer-btn{
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  /* 6) Bonus: si ton thème impose des marges sur container WP */
  #main-content .container,
  #main-content .et_pb_row,
  #main-content .et_pb_section{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ======================================
   CCXSP_MOBILE_FULLWIDTH_V2
   Force full-width cards on mobile (override max-width centering)
   ====================================== */

@media (max-width: 980px){

  /* 0) WP/Theme containers (Divi) : on enlève les paddings latéraux qui écrasent tout */
  #page-container,
  #main-content,
  #main-content .container{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 1) Notre wrapper : plus de max-width, plus de centrage étroit */
  .ccxsp-wrap{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px !important;   /* safe area apple-like */
  }

  /* 2) Le hero du haut était limité (760px) => on le full-width aussi */
  .ccxsp-hero{
    margin: 14px 0 10px !important;
  }
  .ccxsp-hero-card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  /* 3) La section "Toutes les offres" : full width */
  .ccxsp-section{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  /* 4) Cards : elles doivent prendre toute la largeur dispo */
  .ccxsp-offers-cards{
    width: 100% !important;
    gap: 10px !important;
  }
  .ccxsp-offer{
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  /* 5) CTA compact (évite l’effet "gros bouton") */
  .ccxsp-offer-btn{
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
}


/* ======================================
   CCXSP_HIDE_EAN_NEUF_PILLS_V1
   Hide EAN + Neuf pills under the title (hero)
   ====================================== */

/* Cible la zone de pastilles sous le titre */
.ccxsp-hero-meta .ccxsp-pill:nth-child(1),  /* EAN */
.ccxsp-hero-meta .ccxsp-pill:nth-child(3){  /* Neuf */
  display:none !important;
}


/* ======================================
   CCXSP_TIGHT_TOP_SPACE_V1
   Reduce gap between header and hero/title block
   ====================================== */

/* Moins de padding global en haut */
.ccxsp-wrap{
  padding-top: 6px !important;  /* avant: 16px */
}

/* Moins de marge au-dessus de la hero */
.ccxsp-hero{
  margin-top: 10px !important;  /* avant: 28px */
  margin-bottom: 14px !important;
}

/* Mobile : encore plus serré */
@media (max-width: 980px){
  .ccxsp-wrap{ padding-top: 2px !important; }
  .ccxsp-hero{ margin-top: 6px !important; }
}


/* ======================================
   CCXSP_TIGHT_HEADER_GAP_V1
   Real gap source: cmx-spacer + Divi container padding
   Scoped to offers page (page-id-16495)
   ====================================== */

body.page-id-16495 .cmx-spacer{
  height: 74px !important;  /* ↓ ajuste si besoin (ex: 64px / 70px / 78px) */
  min-height: 0 !important;
}

body.page-id-16495 #main-content{
  padding-top: 0 !important;
}

body.page-id-16495 #main-content > .container{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* En bonus : si Divi ajoute du padding sur la première section */
body.page-id-16495 .et_pb_section:first-of-type{
  padding-top: 0 !important;
}


/* ======================================
   CCXSP_OFFERS_HERO_TIGHT_TITLE_V1
   - moins d'espace header -> hero
   - titre mobile plus petit (ne cache plus l'image)
   - hero/card plus "idealo-like" (compact)
   ====================================== */

/* Hero plus proche du header */
.ccxsp-hero{
  margin: 14px 0 12px !important;
  padding: 0 !important;
}

/* Card hero un peu plus large + moins de padding */
.ccxsp-hero-card{
  max-width: 920px !important;
  padding: 18px 18px !important;
}

/* Titre: plus soft */
.ccxsp-hero-title{
  margin: 0 0 6px !important;
}

/* Mobile: compact + titre réduit */
@media (max-width: 980px){
  .ccxsp-hero{ margin: 8px 0 10px !important; }
  .ccxsp-hero-card{ padding: 14px 14px !important; max-width: 100% !important; }
  .ccxsp-hero-title{
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
  /* Image visible, pas écrasée par le texte */
  .ccxsp-hero-img{ width: 68px !important; height: 68px !important; }
}


/* ======================================
   CCXSP_OFFERS_HIDE_DIVI_ENTRY_TITLE_V1
   - Supprime l'espace inutile du H1 Divi
   - Resserre le haut de page sur /offres/
   (page-id 16495 = /offres/)
   ====================================== */

body.page-id-16495 h1.entry-title.main_title{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  height:0 !important;
}

/* Divi ajoute souvent un padding-top au main content */
body.page-id-16495 #main-content{
  padding-top: 0 !important;
}

/* Container interne: on serre aussi */
body.page-id-16495 #et-main-area{
  padding-top: 0 !important;
}
body.page-id-16495 .container{
  padding-top: 0 !important;
}

/* ======================================
   CCXSP_OFFERS_TITLE_CARD_PADDING_V1
   + d'air dans la carte titre (haut/bas)
   (page-id 16495 = /offres/)
   ====================================== */

/* La carte titre CCX (hero du produit sur /offres/) */
body.page-id-16495 .ccxsp-hero,
body.page-id-16495 .ccxsp-hero-card,
body.page-id-16495 .ccxsp-product-hero,
body.page-id-16495 .ccxsp-product-card{
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Si le padding est géré par un inner wrapper */
body.page-id-16495 .ccxsp-hero .ccxsp-hero-inner,
body.page-id-16495 .ccxsp-product-hero .ccxsp-hero-inner{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* ======================================
   CCXSP_BEST_BADGE_TEXT_BLACK_V1
   "Meilleure offre" en noir
   ====================================== */

.ccxsp-best-badge{
  color: #111 !important;
}

/* si jamais le texte est dans un span interne */
.ccxsp-best-badge *{
  color: #111 !important;
}

/* ======================================
   CCXSP_BEST_BADGE_TEXT_BLACK_FIX_V2
   Force le texte du badge "Meilleure offre" en noir (même si un span interne est en blanc)
   ====================================== */

/* cas le plus fréquent */
body .ccxsp-best-badge,
body .ccxsp-best-badge *{
  color: #111 !important;
}

/* si le badge est dans une offer/row et qu’un style plus spécifique gagne */
body .ccxsp-offer .ccxsp-best-badge,
body .ccxsp-row .ccxsp-best-badge,
body .ccxsp-offer .ccxsp-best-badge *,
body .ccxsp-row .ccxsp-best-badge *{
  color: #111 !important;
}

/* si c’est un lien/bouton */
body a.ccxsp-best-badge,
body button.ccxsp-best-badge{
  color: #111 !important;
}

/* on garde l’étoile en or (au cas où elle se mettrait en noir via *) */
body .ccxsp-best-badge::before{
  color: #b7791f !important;
}


/* ======================================
   CCXSP_BEST_BADGE_REBUILD_CENTER_V3
   - supprime l'étoile noire (texte original)
   - étoile or + texte noir parfaitement centrés
   ====================================== */

body .ccxsp-best-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  /* on cache le texte d'origine (et donc son étoile) */
  font-size: 0 !important;
  color: transparent !important;

  /* pour éviter tout décalage vertical */
  line-height: 1 !important;
  padding: 4px 10px !important; /* ajuste si tu veux +/− */
}

/* étoile premium */
body .ccxsp-best-badge::before{
  content: "★" !important;
  display: inline-block !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #b7791f !important; /* or */
  text-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
}

/* texte premium centré */
body .ccxsp-best-badge::after{
  content: "Meilleure offre" !important;
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;
  color: #111 !important;
}


/* ======================================
   CCXSP_BEST_BADGE_GAP_TIGHT_V1
   - réduit l'espace étoile <-> texte
   ====================================== */
body .ccxsp-best-badge{
  gap: 4px !important;              /* <- avant 6px */
}

body .ccxsp-best-badge::before,
body .ccxsp-best-badge::after{
  margin: 0 !important;
  padding: 0 !important;
}


/* ======================================
   CCXSP_BEST_BADGE_GAP_TIGHT_V2
   - encore moins d'espace étoile <-> texte
   ====================================== */
body .ccxsp-best-badge{
  gap: 2px !important;
}

body .ccxsp-best-badge::before{
  margin-right: 0 !important;
  min-width: 0 !important;
  width: auto !important;
}


/* ======================================
   CCXSP_HERO_TITLE_CLAMP_V1
   - titre produit moins énorme (desktop + mobile)
   ====================================== */

/* On cible large: h1/h2/h3 du hero + classes probables */
.ccxsp-pdp :is(h1,h2,h3),
.ccxsp-hero :is(h1,h2,h3),
.ccxsp-pdp-title,
.ccxsp-hero-title,
.ccxsp-product-title,
.ccxsp-title{
  font-size: clamp(18px, 2.6vw, 34px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.2px !important;
}

/* Sur mobile on serre encore (évite de cacher l'image) */
@media (max-width: 980px){
  .ccxsp-pdp :is(h1,h2,h3),
  .ccxsp-hero :is(h1,h2,h3),
  .ccxsp-pdp-title,
  .ccxsp-hero-title,
  .ccxsp-product-title,
  .ccxsp-title{
    font-size: clamp(16px, 5vw, 22px) !important;
    line-height: 1.15 !important;
  }
}

/* ======================================
   CCXSP_PREMIUM_APPLELIKE_V1
   Premium Apple-like polish (smartphones only)
   ====================================== */

:root{
  --ccxsp-bg: #f6f7fb;
  --ccxsp-card: rgba(255,255,255,.86);
  --ccxsp-border: rgba(17, 24, 39, .08);
  --ccxsp-shadow: 0 12px 28px rgba(17,24,39,.08);
  --ccxsp-shadow-hover: 0 16px 38px rgba(17,24,39,.12);
  --ccxsp-radius: 18px;
}

/* Fond + ambiance premium */
.ccxsp-page,
.ccxsp-wrap{
  background: radial-gradient(1200px 700px at 50% -120px, rgba(34,197,94,.10), transparent 55%),
              radial-gradient(900px 500px at 85% 10%, rgba(255,140,0,.08), transparent 60%),
              linear-gradient(180deg, var(--ccxsp-bg), #ffffff 70%) !important;
}

/* Hero / titre : plus “Apple” */
.ccxsp-hero{
  background: rgba(255,255,255,.65) !important;
  border: 1px solid var(--ccxsp-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 40px rgba(17,24,39,.07) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ccxsp-hero h1,
.ccxsp-title{
  letter-spacing: -0.02em !important;
  font-weight: 750 !important;
}

.ccxsp-hero .ccxsp-subtitle{
  opacity: .78 !important;
  font-weight: 500 !important;
}

/* Bloc filtres : glass + séparation + boutons plus premium */
.ccxsp-filters{
  background: rgba(255,255,255,.70) !important;
  border: 1px solid var(--ccxsp-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(17,24,39,.06) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ccxsp-filters select,
.ccxsp-filters input{
  border-radius: 14px !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 1px 0 rgba(17,24,39,.03) !important;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.ccxsp-filters select:focus,
.ccxsp-filters input:focus{
  outline: none !important;
  border-color: rgba(34,197,94,.35) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12) !important;
}

/* Grille : un peu plus d’air */
.ccxsp-grid{
  gap: 16px !important;
}

/* Cartes : vrai effet “premium” + hover */
.ccxsp-card,
.ccxsp-item{
  background: var(--ccxsp-card) !important;
  border: 1px solid var(--ccxsp-border) !important;
  border-radius: var(--ccxsp-radius) !important;
  box-shadow: var(--ccxsp-shadow) !important;
  overflow: hidden !important;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ccxsp-card:hover,
.ccxsp-item:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--ccxsp-shadow-hover) !important;
  border-color: rgba(17,24,39,.14) !important;
}

/* Image produit : plus nette + arrondie */
.ccxsp-card img,
.ccxsp-thumb img{
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(17,24,39,.08) !important;
}

/* Titre produit : plus clean, meilleure hiérarchie */
.ccxsp-card h3,
.ccxsp-item h3,
.ccxsp-card .ccxsp-name{
  letter-spacing: -0.015em !important;
  font-weight: 730 !important;
  line-height: 1.15 !important;
}

/* Pills (marque/stockage/etat/couleur) : style iOS */
.ccxsp-pill,
.ccxsp-tag,
.ccxsp-chip{
  border-radius: 999px !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  background: rgba(255,255,255,.70) !important;
  box-shadow: 0 1px 0 rgba(17,24,39,.04);
  padding: 4px 10px !important;
  font-weight: 600 !important;
  opacity: .92 !important;
}

/* Prix : plus “focus”, alignement premium */
.ccxsp-price{
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* Bouton “Voir les offres” : Apple-like */
.ccxsp-card .ccxsp-btn,
.ccxsp-item .ccxsp-btn,
.ccxsp-btn{
  border-radius: 14px !important;
  border: 1px solid rgba(17,24,39,.12) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76)) !important;
  box-shadow: 0 10px 26px rgba(17,24,39,.10) !important;
  font-weight: 700 !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ccxsp-btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 34px rgba(17,24,39,.14) !important;
  border-color: rgba(34,197,94,.22) !important;
}

/* Pagination / infos : plus discret */
.ccxsp-meta,
.ccxsp-count,
.ccxsp-pagination{
  opacity: .78 !important;
}

/* Mobile : garde le “premium” sans être lourd */
@media (max-width: 780px){
  .ccxsp-hero{ border-radius: 18px !important; }
  .ccxsp-filters{ border-radius: 18px !important; }
  .ccxsp-grid{ gap: 12px !important; }
}

/* ======================================
   CCXSP_TITLE_SIZE_FIX_V1
   Reduce card title size + clamp to 2 lines
   ====================================== */

.ccxsp-card h3,
.ccxsp-item h3,
.ccxsp-card .ccxsp-name{
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  font-weight: 720 !important;
  margin: 0 0 6px 0 !important;

  /* clamp */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

@media (max-width: 780px){
  .ccxsp-card h3,
  .ccxsp-item h3,
  .ccxsp-card .ccxsp-name{
    font-size: 16px !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* ======================================
   CCXSP_TITLE_STRICT_V2
   Hard cap card titles (smartphones listing)
   ====================================== */

/* Cible la zone contenu des cartes (titre uniquement) */
.ccxsp-grid .ccxsp-item h3,
.ccxsp-grid .ccxsp-card h3,
.ccxsp-grid .ccxsp-item .ccxsp-name,
.ccxsp-grid .ccxsp-card .ccxsp-name{
  font-size: 16px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.012em !important;
  font-weight: 740 !important;
  margin: 0 0 6px 0 !important;
  max-width: 100% !important;

  /* 2 lignes max */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

/* Desktop large : un poil plus grand, mais pas plus */
@media (min-width: 1100px){
  .ccxsp-grid .ccxsp-item h3,
  .ccxsp-grid .ccxsp-card h3,
  .ccxsp-grid .ccxsp-item .ccxsp-name,
  .ccxsp-grid .ccxsp-card .ccxsp-name{
    font-size: 17px !important;
  }
}

/* Mobile : garde lisible sans exploser */
@media (max-width: 780px){
  .ccxsp-grid .ccxsp-item h3,
  .ccxsp-grid .ccxsp-card h3,
  .ccxsp-grid .ccxsp-item .ccxsp-name,
  .ccxsp-grid .ccxsp-card .ccxsp-name{
    font-size: 15.5px !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* ======================================
   CCXSP_CARD_TITLE_SIZE_V1
   Fix huge titles (cards use a.ccxsp-title)
   ====================================== */

.ccxsp-card .ccxsp-title{
  font-size: 16px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.012em !important;
  font-weight: 740 !important;
  margin: 0 0 6px 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

@media (min-width: 1100px){
  .ccxsp-card .ccxsp-title{
    font-size: 17px !important;
  }
}

@media (max-width: 780px){
  .ccxsp-card .ccxsp-title{
    font-size: 15.5px !important;
  }
}

/* ======================================
   CCXSP_HERO_FLAT_V1
   Remove inner small container; keep the big hero container
   ====================================== */

/* Le “grand” conteneur reste premium (déjà stylé).
   Ici on neutralise uniquement le conteneur interne qui fait le petit cadre. */

.ccxsp-hero .ccxsp-hero-inner,
.ccxsp-hero .ccxsp-hero-box,
.ccxsp-hero .ccxsp-hero-content,
.ccxsp-hero .ccxsp-title-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Si le titre était dans un mini bloc arrondi */
.ccxsp-hero .ccxsp-title,
.ccxsp-hero h1{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Un peu plus d'air dans la hero pour compenser */
.ccxsp-hero{
  padding: 26px 22px !important;
}

@media (max-width: 780px){
  .ccxsp-hero{ padding: 18px 14px !important; }
}
/* CCXSP_THUMBS_IDEALO_V2 (safe: pas de wrapper HTML)
   Thumbnail premium: carré, bord doux, pas de déformation, pas de CLS */
img[data-ccx-proxy]{
  width:92px !important;
  height:92px !important;
  max-width:92px !important;
  max-height:92px !important;
  min-width:92px !important;
  min-height:92px !important;

  object-fit:contain !important;
  background:#fff !important;

  border:1px solid rgba(0,0,0,.06) !important;
  border-radius:14px !important;
  box-shadow:0 1px 2px rgba(0,0,0,.04) !important;

  display:block !important;
  padding:6px !important;     /* donne un look plus “pro” */
  box-sizing:border-box !important;

  content-visibility:auto;
  contain-intrinsic-size:92px 92px;
}

* CCXSP_FORCE_TEXT_COLOR_V1 */
.ccxsp-wrap{color:#111}
.ccxsp-wrap a{color:#111}
.ccxsp-wrap .ccxsp-muted{color:rgba(17,17,17,.7)}
.ccxsp-wrap .ccxsp-thead,
.ccxsp-wrap .ccxsp-row,
.ccxsp-wrap .ccxsp-filter label,
.ccxsp-wrap .ccxsp-meta,
.ccxsp-wrap .ccxsp-pageinfo{color:#111}
.ccxsp-wrap .ccxsp-title{color:#111 !important}

.ccxsp-wrap{max-width:1200px;margin:0 auto;padding:16px}
.ccxsp-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;align-items:end;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:12px}
.ccxsp-filter label{display:block;font-size:12px;opacity:.75;margin-bottom:6px}
.ccxsp-filter select{width:100%;border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:10px 12px;background:#fff}
.ccxsp-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end}
.ccxsp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:12px;padding:10px 14px;border:1px solid rgba(0,0,0,.12);background:#111;color:#fff;text-decoration:none;font-weight:600;cursor:pointer}
.ccxsp-btn-secondary{background:#fff;color:#111}
.ccxsp-link{font-size:13px;text-decoration:none;opacity:.75}
.ccxsp-meta{display:flex;justify-content:space-between;align-items:center;margin:14px 2px;color:#111;opacity:.85}
.ccxsp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ccxsp-card{display:grid;grid-template-columns:120px 1fr;gap:12px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:12px}
.ccxsp-card-media img{width:120px;height:120px;object-fit:contain;border-radius:12px;background:#fafafa;border:1px solid rgba(0,0,0,.06)}
.ccxsp-imgph{width:120px;height:120px;border-radius:12px;background:#fafafa;border:1px solid rgba(0,0,0,.06);display:flex;align-items:center;justify-content:center;opacity:.5}
.ccxsp-title{display:block;font-weight:700;line-height:1.2;text-decoration:none;color:#111;margin-bottom:8px}
.ccxsp-pills{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ccxsp-pill{display:inline-flex;align-items:center;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:5px 10px;font-size:12px;opacity:.85;background:#fff}
.ccxsp-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ccxsp-price-val{font-size:18px;font-weight:800}
.ccxsp-price-sub{font-size:12px;opacity:.7;margin-top:2px}
.ccxsp-empty{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:14px;opacity:.9}
.ccxsp-pagination{display:flex;justify-content:space-between;align-items:center;margin-top:14px}
.ccxsp-page{padding:8px 10px;border:1px solid rgba(0,0,0,.12);border-radius:12px;text-decoration:none;color:#111;background:#fff}
.ccxsp-page.is-disabled{opacity:.4;pointer-events:none}
.ccxsp-pageinfo{opacity:.75}

/* OFFERS */
.ccxsp-hero{display:grid;grid-template-columns:160px 1fr;gap:14px;background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:14px;margin-bottom:14px}
.ccxsp-hero-media img{width:160px;height:160px;object-fit:contain;border-radius:14px;background:#fafafa;border:1px solid rgba(0,0,0,.06)}
.ccxsp-hero-title{font-size:22px;line-height:1.2;margin:0 0 10px}
.ccxsp-hero-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.ccxsp-hero-price{margin-top:6px}
.ccxsp-best{margin-top:8px;opacity:.85}
.ccxsp-muted{opacity:.7;font-size:12px}
.ccxsp-section{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:14px}
.ccxsp-h2{margin:0 0 12px;font-size:18px}
.ccxsp-table{display:grid;gap:8px}
.ccxsp-thead{display:grid;grid-template-columns:2fr .8fr .8fr .8fr .8fr 1fr;gap:10px;font-size:12px;opacity:.7;padding:0 6px}
.ccxsp-row{display:grid;grid-template-columns:2fr .8fr .8fr .8fr .8fr 1fr;gap:10px;align-items:center;border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:10px 12px}
.ccxsp-merchant-name{font-weight:800}
.ccxsp-cta{text-align:right}
.ccxsp-promo{margin-top:6px;display:flex;flex-wrap:wrap;gap:6px}
.ccxsp-badge{display:inline-flex;border:1px solid rgba(0,0,0,.12);border-radius:999px;padding:4px 8px;font-size:12px;background:#fff;opacity:.9}

@media (max-width: 980px){
  .ccxsp-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ccxsp-grid{grid-template-columns:1fr}
  .ccxsp-card{grid-template-columns:100px 1fr}
  .ccxsp-card-media img,.ccxsp-imgph{width:100px;height:100px}
  .ccxsp-hero{grid-template-columns:120px 1fr}
  .ccxsp-hero-media img{width:120px;height:120px}
  .ccxsp-thead{display:none}
  .ccxsp-row{grid-template-columns:1fr;gap:8px}
  .ccxsp-cta{text-align:left}
}

/* CCXSP_OFFERS_PC_STYLE_V1 */
.ccxsp-offers-cards{display:grid;gap:14px;margin-top:10px}
.ccxsp-offer{
  background:#fff;
  border-radius:18px;
  padding:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.ccxsp-offer-best{
  border:2px solid rgba(122,223,154,.9);
  background:linear-gradient(180deg,#f6fff9,#ffffff);
  box-shadow:0 14px 40px rgba(0,0,0,.08);
}
.ccxsp-offer-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.ccxsp-offer-merchant{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ccxsp-merchant-name{font-weight:900;font-size:13px}
.ccxsp-best-badge{
  display:inline-flex;align-items:center;
  padding:6px 10px;border-radius:999px;
  background:#111;color:#fff;font-weight:800;font-size:12px;
}
.ccxsp-offer-price{text-align:right;min-width:220px}
.ccxsp-offer-total{font-weight:950;font-size:20px}
.ccxsp-offer-sub{margin-top:4px;font-size:12px;opacity:.72;display:flex;justify-content:flex-end;flex-wrap:wrap;gap:6px}
.ccxsp-dot{opacity:.5}
.ccxsp-offer-promos{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ccxsp-offer-cta{margin-top:12px}
.ccxsp-offer-btn{
  display:block;text-align:center;
  padding:12px 14px;border-radius:12px;
  font-weight:900;text-decoration:none;
  color:#111 !important;
  background:linear-gradient(180deg,#f7b55b,#f39c12);
  border:1px solid rgba(0,0,0,.10);
}
.ccxsp-offer-btn:hover{filter:brightness(.98)}
@media (max-width:980px){
  .ccxsp-offer-head{flex-direction:column;align-items:flex-start}
  .ccxsp-offer-price{text-align:left;min-width:auto}
  .ccxsp-offer-sub{justify-content:flex-start}
}

/* CCXSP_MERCHANT_LOGO_STYLE_V1 */
.ccxsp-merchant-logo{display:inline-flex;align-items:center}
.ccxsp-merchant-logo img,
.ccxsp-merchant-logo svg{
  width:22px;height:22px;object-fit:contain;
  border-radius:6px;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.ccxsp-offer-merchant{gap:10px}
.ccxsp-merchant-name{letter-spacing:.2px}


/* CCXSP_TABS_CSS_V1 */
.ccxsp-tabbar{
  display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin:14px 0 18px;
}
.ccxsp-tabbtn{
  appearance:none; border:1px solid rgba(0,0,0,.12);
  background:#fff; color:#111; border-radius:999px;
  padding:8px 12px; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
}
.ccxsp-tabbtn[aria-selected="true"]{
  border-color: rgba(29,185,84,.35);
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
}
.ccxsp-tabcount{
  display:inline-flex; min-width:26px; height:22px;
  padding:0 8px; border-radius:999px;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.06); font-size:12px;
}
.ccxsp-tabpanel{ margin-top:10px; }

.ccxsp-offers-cards{ display:flex; flex-direction:column; gap:12px; }
.ccxsp-offer{
  background:#fff; border:1px solid rgba(0,0,0,.08);
  border-radius:16px; padding:14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.ccxsp-offer-best{
  border-color: rgba(29,185,84,.35);
  box-shadow: 0 14px 26px rgba(0,0,0,.07);
}
.ccxsp-offer-head{ display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.ccxsp-offer-merchant{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.ccxsp-best-badge{
  background:#111; color:#fff; font-weight:800; font-size:12px;
  padding:6px 10px; border-radius:999px;
}
.ccxsp-merchant-name{ font-weight:800; color:#111; }
.ccxsp-offer-price{ font-weight:900; color:#111; font-size:18px; }
.ccxsp-offer-sub{ margin-top:6px; }
.ccxsp-offer-cta{ margin-top:12px; }

.ccxsp-offer-btn{
  display:flex; align-items:center; justify-content:center;
  width:100%; border-radius:12px;
  padding:10px 14px; font-weight:800;
  border:1px solid rgba(0,0,0,.08);
  background: linear-gradient(180deg, #F6B24C 0%, #E79A28 100%);
  color:#111; text-decoration:none;
}
.ccxsp-offer-btn:hover{ filter:brightness(0.98); }


/* CCXSP_TEXTSAFE_V1 */
.ccxsp-wrap, .ccxsp-wrap * { color: inherit; }
.ccxsp-hero-title, .ccxsp-h2 { color:#111; }
.ccxsp-muted { color: rgba(0,0,0,.55) !important; }
.ccxsp-merchant-name { color:#111; font-weight:800; }
.ccxsp-offer, .ccxsp-offer * { color:#111; }
.ccxsp-offer .ccxsp-muted { color: rgba(0,0,0,.55) !important; }
.ccxsp-btn { color:#111 !important; text-decoration:none; }

/* CCXSP_TABS_POLISH_V1 */
.ccxsp-tabbtn{
  color:#111 !important;
  background:#fff !important;
}
.ccxsp-tabbtn[aria-selected="true"]{
  background:rgba(29,185,84,.08) !important;
}
.ccxsp-tabcount{
  color:#111 !important;
}
.ccxsp-pill{
  color:#111 !important;
  background:rgba(0,0,0,.04) !important;
  border:1px solid rgba(0,0,0,.10) !important;
}

/* CCXSP_FIX_WHITE_ON_WHITE_V1 */
.ccxsp-wrap{ color:#111 !important; }
.ccxsp-wrap a{ color:inherit; }

.ccxsp-hero-title,
.ccxsp-h2,
.ccxsp-merchant-name,
.ccxsp-offer-total{
  color:#111 !important;
}

/* textes secondaires */
.ccxsp-muted,
.ccxsp-offer-sub,
.ccxsp-price-sub{
  color: rgba(0,0,0,.58) !important;
}

/* pills / badges */
.ccxsp-pill,
.ccxsp-badge,
.ccxsp-tabcount{
  color:#111 !important;
}

/* boutons */
.ccxsp-offer-btn,
.ccxsp-btn{
  color:#111 !important;
  text-decoration:none;
}


/* CCXSP_FIX_BEST_BADGE_V1 */
.ccxsp-best-badge{
  background: #111 !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* Optionnel: si un thème force des couleurs bizarres sur le label */
.ccxsp-offer-best .ccxsp-best-badge{
  background: #111 !important;
  color: #fff !important;
}


/* CCXSP_FIX_BEST_BADGE_V1 */
.ccxsp-best-badge{
  background:#111 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
}

/* CCXSP_FIX_APPLY_BTN_TEXT_V1 */
button.ccxsp-btn{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important; /* cas Chrome/Safari */
  opacity:1 !important;
  visibility:visible !important;
  font-size:13px !important;              /* cas font-size:0 */
  line-height:1.1 !important;
  text-indent:0 !important;               /* cas texte décalé */
}

/* si thème applique un style sur enfant/pseudo */
button.ccxsp-btn *,
button.ccxsp-btn::before,
button.ccxsp-btn::after{
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  opacity:1 !important;
  visibility:visible !important;
}


/* CCXSP_FIX_APPLY_BTN_STYLE_V1 */
button.ccxsp-btn{
  background:#111 !important;
  border:1px solid rgba(255,255,255,.18) !important;
  border-radius:10px !important;
  padding:10px 14px !important;
  font-weight:800 !important;
}
button.ccxsp-btn:hover{
  filter:brightness(1.08);
}



/* CCXSP_HERO_CSS_V1 */
.ccxsp-hero{
  display:flex;
  justify-content:center;
  margin:28px 0 18px;
}
.ccxsp-hero-card{
  width:100%;
  max-width:760px;
  text-align:center;
  background:rgba(255,255,255,.98);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:26px 18px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.ccxsp-hero-title{
  margin:0;
  font-size:42px;
  line-height:1.1;
  font-weight:800;
  color:#111;
}
.ccxsp-hero-sub{
  margin:10px 0 0;
  color:rgba(0,0,0,.62);
  font-size:14px;
  font-weight:600;
}

/* cache le titre WP (blanc sur blanc) uniquement sur la page Smartphones */
body.page-id-16436 .entry-title,
body.page-id-16436 .page-title{
  display:none !important;
}

@media (max-width: 640px){
  .ccxsp-hero-card{ padding:22px 14px; }
  .ccxsp-hero-title{ font-size:34px; }
}

/* CCXSP_COLORS_CSS_V1 */
.ccxsp-variants{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ccxsp-variants-label{
  font-size:12px;
  color:#6b7280;
}
.ccxsp-variants-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.ccxsp-variant,
.ccxsp-color{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:999px;
  font-size:12px;
  color:#111;
  background:#fff;
  text-decoration:none;
  transition: all .15s ease;
}
.ccxsp-variant:hover,
.ccxsp-color:hover{
  border-color: rgba(0,0,0,.16);
  transform: translateY(-1px);
}
.ccxsp-variant.is-active{
  border-color: rgba(16,185,129,.55);
  box-shadow: 0 0 0 3px rgba(16,185,129,.12);
}

.ccxsp-colors{
  margin-top: 8px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
/* ======================================
   CCXSP_OFFERS_IDEALO_SKIN_V2
   Idealo-like (Apple clean) WITHOUT hiding offers
   ====================================== */

/* Ne jamais masquer les offres */
.ccxsp-offers-cards{ display:flex !important; flex-direction:column; gap:12px; }

/* Cards offres : look plus "Idealo" (lisible + aligné) */
.ccxsp-offer{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 22px rgba(0,0,0,.05);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.ccxsp-offer:hover{
  transform: translateY(-1px);
  box-shadow:0 14px 26px rgba(0,0,0,.07);
  border-color: rgba(0,0,0,.14);
}

/* Meilleure offre */
.ccxsp-offer-best{
  border-color: rgba(29,185,84,.35) !important;
  background: linear-gradient(180deg, rgba(29,185,84,.08), #fff 60%) !important;
  box-shadow:0 14px 26px rgba(0,0,0,.07);
}

/* Ligne haut : marchand à gauche, prix à droite */
.ccxsp-offer-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
}

/* Marchand + logo */
.ccxsp-offer-merchant{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.ccxsp-merchant-logo img,
.ccxsp-merchant-logo svg{
  width:26px;height:26px;object-fit:contain;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
}
.ccxsp-merchant-name{
  font-weight:900;
  font-size:13px;
  letter-spacing:.2px;
}

/* Badge "Meilleure offre" */
.ccxsp-best-badge{
  background:#111 !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  font-weight:900 !important;
  font-size:12px !important;
  line-height:1 !important;
}

/* Bloc prix */
.ccxsp-offer-price{ text-align:right; }
.ccxsp-offer-total{
  font-weight:950;
  font-size:20px;
  color:#111 !important;
}
.ccxsp-offer-sub{
  margin-top:4px;
  font-size:12px;
  color: rgba(0,0,0,.58) !important;
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:6px;
}
.ccxsp-dot{ opacity:.5; }

/* Bouton CTA */
.ccxsp-offer-cta{ margin-top:12px; }
.ccxsp-offer-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:44px;
  border-radius:14px;
  padding:10px 14px;
  font-weight:900;
  border:1px solid rgba(0,0,0,.10);
  background: linear-gradient(180deg, #F6B24C 0%, #E79A28 100%);
  color:#111 !important;
  text-decoration:none;
  box-shadow:0 10px 18px rgba(247,178,76,.22);
}
.ccxsp-offer-btn:hover{ filter:brightness(.98); }

/* Si tu as aussi le mode table (thead/row), on améliore sans forcer */
.ccxsp-thead{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.05);
}
.ccxsp-row{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(0,0,0,.04);
}
.ccxsp-row:hover{
  box-shadow: 0 14px 26px rgba(0,0,0,.06);
}

/* Mobile */
@media (max-width:980px){
  .ccxsp-offer-head{ flex-direction:column; align-items:flex-start; }
  .ccxsp-offer-price{ text-align:left; }
  .ccxsp-offer-sub{ justify-content:flex-start; }
}


/* ======================================
   CCXSP_OFFERS_PREMIUM_SOFT_V1
   super soft / clean / premium (Apple-like)
   ====================================== */

/* Cards : plus premium */
.ccxsp-offer{
  border: 1px solid rgba(0,0,0,.07) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.04) !important;
  border-radius: 18px !important;
  padding: 14px 14px !important;
}
.ccxsp-offer:hover{
  box-shadow: 0 14px 34px rgba(0,0,0,.06) !important;
  border-color: rgba(0,0,0,.10) !important;
}

/* “Meilleure offre” : plus soft (moins flashy) */
.ccxsp-offer-best{
  border-color: rgba(16,185,129,.30) !important;
  background: linear-gradient(180deg, rgba(16,185,129,.06), #fff 55%) !important;
}

/* Badge meilleure offre : petit et discret */
.ccxsp-best-badge{
  padding: 5px 10px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  background: rgba(17,17,17,.92) !important;
}

/* Bouton CTA : STOP full width, on fait un bouton premium */
.ccxsp-offer-cta{ margin-top: 10px !important; }
.ccxsp-offer-btn{
  width: auto !important;                 /* <-- clé */
  display: inline-flex !important;        /* <-- clé */
  min-height: 38px !important;
  padding: 0 14px !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;

  /* look premium soft (pas grosse barre orange) */
  background: rgba(243, 156, 18, .10) !important;
  border: 1px solid rgba(243, 156, 18, .18) !important;
  color: #111 !important;
  box-shadow: none !important;
}
.ccxsp-offer-btn:hover{
  background: rgba(243, 156, 18, .14) !important;
  border-color: rgba(243, 156, 18, .26) !important;
}

/* On aligne le bouton à droite comme Idealo (desktop) */
.ccxsp-offer-cta{
  display:flex !important;
  justify-content:flex-end !important;
}

/* Mobile : bouton full width OK (plus “app-like”) */
@media (max-width: 980px){
  .ccxsp-offer-cta{ justify-content:stretch !important; }
  .ccxsp-offer-btn{
    width: 100% !important;
    justify-content:center !important;
  }
}

/* Prix : un poil plus premium */
.ccxsp-offer-total{ font-size: 19px !important; }
.ccxsp-offer-sub{ font-size: 12px !important; }

/* Les grosses barres oranges venant d’un ancien style : on les neutralise */
.ccxsp-offer-btn{ background-image: none !important; }


/* ======================================
   CCXSP_OFFERS_COMPACT_FILL_V1
   Less empty cards, more info density (premium)
   ====================================== */

/* On resserre la card */
.ccxsp-offer{
  padding: 12px 14px !important;
}

/* Head : on aligne mieux et on réduit l’espace */
.ccxsp-offer-head{
  gap: 10px !important;
  align-items: center !important;
}

/* Zone marchand : on force une vraie colonne "info" */
.ccxsp-offer-merchant{
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

/* Nom marchand + badge sur une ligne propre */
.ccxsp-offer-merchant .ccxsp-merchant-name{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1.1 !important;
}

/* Prix : bloc plus compact, moins vide */
.ccxsp-offer-price{
  min-width: 190px !important;
}
.ccxsp-offer-total{
  font-size: 18px !important;
  line-height: 1.1 !important;
}
.ccxsp-offer-sub{
  margin-top: 2px !important;
  line-height: 1.2 !important;
  opacity: .75 !important;
}

/* Ajoute une “hairline” subtile entre haut et CTA (effet Apple) */
.ccxsp-offer-cta{
  margin-top: 10px !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(0,0,0,.05) !important;
}

/* CTA : place le bouton à droite + ajoute un petit "→" sans toucher au HTML */
.ccxsp-offer-btn{
  gap: 8px !important;
}
.ccxsp-offer-btn::after{
  content: "→";
  font-weight: 900;
  opacity: .6;
}

/* Badge meilleure offre : plus “Apple” (moins massif) */
.ccxsp-best-badge{
  padding: 4px 9px !important;
  font-size: 11px !important;
  border-radius: 999px !important;
  background: rgba(17,17,17,.90) !important;
}

/* La carte "best" : un peu moins verte (moins vide visuellement) */
.ccxsp-offer-best{
  background: linear-gradient(180deg, rgba(16,185,129,.05), #fff 62%) !important;
}

/* Mobile : on densifie aussi (CTA full width ok) */
@media (max-width: 980px){
  .ccxsp-offer-price{ min-width: auto !important; }
  .ccxsp-offer-cta{ padding-top: 10px !important; }
  .ccxsp-offer-btn{ width: 100% !important; justify-content: center !important; }
}


/* ======================================
   CCXSP_OFFERS_MOBILE_POLISH_V1
   - center price on mobile
   - remove arrow on CTA
   - softer best badge (not black)
   ====================================== */

@media (max-width: 980px){

  /* 1) Prix centré (bloc prix + sous-texte) */
  .ccxsp-offer-price{
    text-align: center !important;
    width: 100% !important;
  }
  .ccxsp-offer-total{
    text-align: center !important;
    width: 100% !important;
  }
  .ccxsp-offer-sub{
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* 2) CTA : enlever la flèche */
  .ccxsp-offer-btn::after{
    content: "" !important;
    display: none !important;
  }
}

/* 3) Badge "Meilleure offre" : fond soft premium (pas noir) */
.ccxsp-best-badge{
  background: rgba(16,185,129,.12) !important; /* vert très doux */
  color: rgba(0,0,0,.86) !important;
  border: 1px solid rgba(16,185,129,.22) !important;
  box-shadow: 0 10px 20px rgba(0,0,0,.04) !important;
}

/* si la carte est best, on peut rendre le badge un poil plus visible */
.ccxsp-offer-best .ccxsp-best-badge{
  background: rgba(16,185,129,.16) !important;
  border-color: rgba(16,185,129,.28) !important;
}


/* ======================================
   CCXSP_OFFERS_BADGE_TABS_V6
   - Best badge: premium text + gold star
   - Tabs: smaller so both fit on one line (mobile)
   ====================================== */

/* 1) Badge "Meilleure offre" premium */
.ccxsp-best-badge{
  /* fond déjà soft vert, on garde, mais texte plus premium */
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  font-size: 11px !important;
  color: rgba(17,17,17,.88) !important;
  border-color: rgba(16,185,129,.22) !important;
  background: rgba(16,185,129,.12) !important;
}

/* Étoile : on la passe en "or" sans toucher au HTML */
.ccxsp-best-badge::before{
  /* si l’étoile est déjà dans le texte, ça n’ajoute rien de gênant.
     Si tu veux uniquement l’étoile en pseudo-element, laisse comme ça. */
  content: "★" !important;
  display: inline-block !important;
  margin-right: 6px !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #b7791f !important; /* or premium */
  text-shadow: 0 1px 0 rgba(255,255,255,.65);
}

/* Si ton template met déjà une étoile dans le texte (ex: "★ Meilleure offre"),
   on évite la double étoile : on masque la première étoile seulement sur mobile
   en réduisant l'opacité du premier caractère via text-indent trick */
@media (max-width: 980px){
  .ccxsp-best-badge{
    /* on évite les surprises, mais si tu vois double étoile, dis-moi et je te fais un fix ciblé HTML */
  }
}

/* 2) Pills Neuf / Reconditionné : plus petits + 1 ligne */
@media (max-width: 980px){
  .ccxsp-tabbar{
    flex-wrap: nowrap !important;     /* force une ligne */
    gap: 8px !important;
    overflow: hidden !important;
  }

  .ccxsp-tabbtn{
    padding: 7px 10px !important;
    font-size: 12px !important;
    border-radius: 999px !important;
    white-space: nowrap !important;
  }

  .ccxsp-tabcount{
    min-width: 22px !important;
    height: 20px !important;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
}


/* ======================================
   CCXSP_HERO_TITLE_MOBILE_V1
   Reduce title size on mobile so image stays visible
   ====================================== */

@media (max-width: 980px){

  /* Hero: on repasse en layout propre si le titre pousse tout */
  .ccxsp-hero{
    align-items: flex-start !important;
    gap: 12px !important;
  }

  /* Titre : beaucoup plus compact + max 3 lignes */
  .ccxsp-hero-title{
    font-size: 22px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.2px !important;
    margin: 0 0 8px !important;

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;   /* max 3 lignes */
    overflow: hidden !important;
  }

  /* Image : on force une taille stable pour qu’elle reste visible */
  .ccxsp-hero-media img{
    width: 96px !important;
    height: 96px !important;
  }

  /* Si ton hero passe en colonne sur mobile, on centre l’image */
  .ccxsp-hero-media{
    flex: 0 0 auto !important;
  }
}


/* ======================================
   CCXSP_MOBILE_WIDE_CARDS_V1
   Make offer cards wider on mobile (less outer padding)
   ====================================== */

@media (max-width: 980px){

  /* 1) Page wrapper: moins de padding extérieur */
  .ccxsp-wrap{
    padding-left: 8px !important;
    padding-right: 8px !important;
    max-width: 100% !important;
  }

  /* 2) Section "Toutes les offres": moins de padding => cards plus larges */
  .ccxsp-section{
    padding: 10px !important;
    border-radius: 16px !important;
  }

  /* 3) Zone des offres: on colle un peu plus */
  .ccxsp-offers-cards{
    gap: 10px !important;
    margin-top: 10px !important;
  }

  /* 4) Card offre: moins de padding interne, plus dense */
  .ccxsp-offer{
    padding: 12px !important;
    border-radius: 16px !important;
  }

  /* 5) CTA: pas trop haut en mobile */
  .ccxsp-offer-btn{
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  /* 6) Bonus: si ton thème impose des marges sur container WP */
  #main-content .container,
  #main-content .et_pb_row,
  #main-content .et_pb_section{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ======================================
   CCXSP_MOBILE_FULLWIDTH_V2
   Force full-width cards on mobile (override max-width centering)
   ====================================== */

@media (max-width: 980px){

  /* 0) WP/Theme containers (Divi) : on enlève les paddings latéraux qui écrasent tout */
  #page-container,
  #main-content,
  #main-content .container{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 1) Notre wrapper : plus de max-width, plus de centrage étroit */
  .ccxsp-wrap{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 8px !important;   /* safe area apple-like */
  }

  /* 2) Le hero du haut était limité (760px) => on le full-width aussi */
  .ccxsp-hero{
    margin: 14px 0 10px !important;
  }
  .ccxsp-hero-card{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  /* 3) La section "Toutes les offres" : full width */
  .ccxsp-section{
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  /* 4) Cards : elles doivent prendre toute la largeur dispo */
  .ccxsp-offers-cards{
    width: 100% !important;
    gap: 10px !important;
  }
  .ccxsp-offer{
    width: 100% !important;
    margin: 0 !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  /* 5) CTA compact (évite l’effet "gros bouton") */
  .ccxsp-offer-btn{
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }
}


/* ======================================
   CCXSP_HIDE_EAN_NEUF_PILLS_V1
   Hide EAN + Neuf pills under the title (hero)
   ====================================== */

/* Cible la zone de pastilles sous le titre */
.ccxsp-hero-meta .ccxsp-pill:nth-child(1),  /* EAN */
.ccxsp-hero-meta .ccxsp-pill:nth-child(3){  /* Neuf */
  display:none !important;
}


/* ======================================
   CCXSP_TIGHT_TOP_SPACE_V1
   Reduce gap between header and hero/title block
   ====================================== */

/* Moins de padding global en haut */
.ccxsp-wrap{
  padding-top: 6px !important;  /* avant: 16px */
}

/* Moins de marge au-dessus de la hero */
.ccxsp-hero{
  margin-top: 10px !important;  /* avant: 28px */
  margin-bottom: 14px !important;
}

/* Mobile : encore plus serré */
@media (max-width: 980px){
  .ccxsp-wrap{ padding-top: 2px !important; }
  .ccxsp-hero{ margin-top: 6px !important; }
}


/* ======================================
   CCXSP_TIGHT_HEADER_GAP_V1
   Real gap source: cmx-spacer + Divi container padding
   Scoped to offers page (page-id-16495)
   ====================================== */

body.page-id-16495 .cmx-spacer{
  height: 74px !important;  /* ↓ ajuste si besoin (ex: 64px / 70px / 78px) */
  min-height: 0 !important;
}

body.page-id-16495 #main-content{
  padding-top: 0 !important;
}

body.page-id-16495 #main-content > .container{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* En bonus : si Divi ajoute du padding sur la première section */
body.page-id-16495 .et_pb_section:first-of-type{
  padding-top: 0 !important;
}


/* ======================================
   CCXSP_OFFERS_HERO_TIGHT_TITLE_V1
   - moins d'espace header -> hero
   - titre mobile plus petit (ne cache plus l'image)
   - hero/card plus "idealo-like" (compact)
   ====================================== */

/* Hero plus proche du header */
.ccxsp-hero{
  margin: 14px 0 12px !important;
  padding: 0 !important;
}

/* Card hero un peu plus large + moins de padding */
.ccxsp-hero-card{
  max-width: 920px !important;
  padding: 18px 18px !important;
}

/* Titre: plus soft */
.ccxsp-hero-title{
  margin: 0 0 6px !important;
}

/* Mobile: compact + titre réduit */
@media (max-width: 980px){
  .ccxsp-hero{ margin: 8px 0 10px !important; }
  .ccxsp-hero-card{ padding: 14px 14px !important; max-width: 100% !important; }
  .ccxsp-hero-title{
    font-size: 18px !important;
    line-height: 1.15 !important;
  }
  /* Image visible, pas écrasée par le texte */
  .ccxsp-hero-img{ width: 68px !important; height: 68px !important; }
}


/* ======================================
   CCXSP_OFFERS_HIDE_DIVI_ENTRY_TITLE_V1
   - Supprime l'espace inutile du H1 Divi
   - Resserre le haut de page sur /offres/
   (page-id 16495 = /offres/)
   ====================================== */

body.page-id-16495 h1.entry-title.main_title{
  display:none !important;
  margin:0 !important;
  padding:0 !important;
  height:0 !important;
}

/* Divi ajoute souvent un padding-top au main content */
body.page-id-16495 #main-content{
  padding-top: 0 !important;
}

/* Container interne: on serre aussi */
body.page-id-16495 #et-main-area{
  padding-top: 0 !important;
}
body.page-id-16495 .container{
  padding-top: 0 !important;
}

/* ======================================
   CCXSP_OFFERS_TITLE_CARD_PADDING_V1
   + d'air dans la carte titre (haut/bas)
   (page-id 16495 = /offres/)
   ====================================== */

/* La carte titre CCX (hero du produit sur /offres/) */
body.page-id-16495 .ccxsp-hero,
body.page-id-16495 .ccxsp-hero-card,
body.page-id-16495 .ccxsp-product-hero,
body.page-id-16495 .ccxsp-product-card{
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

/* Si le padding est géré par un inner wrapper */
body.page-id-16495 .ccxsp-hero .ccxsp-hero-inner,
body.page-id-16495 .ccxsp-product-hero .ccxsp-hero-inner{
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}

/* ======================================
   CCXSP_BEST_BADGE_TEXT_BLACK_V1
   "Meilleure offre" en noir
   ====================================== */

.ccxsp-best-badge{
  color: #111 !important;
}

/* si jamais le texte est dans un span interne */
.ccxsp-best-badge *{
  color: #111 !important;
}

/* ======================================
   CCXSP_BEST_BADGE_TEXT_BLACK_FIX_V2
   Force le texte du badge "Meilleure offre" en noir (même si un span interne est en blanc)
   ====================================== */

/* cas le plus fréquent */
body .ccxsp-best-badge,
body .ccxsp-best-badge *{
  color: #111 !important;
}

/* si le badge est dans une offer/row et qu’un style plus spécifique gagne */
body .ccxsp-offer .ccxsp-best-badge,
body .ccxsp-row .ccxsp-best-badge,
body .ccxsp-offer .ccxsp-best-badge *,
body .ccxsp-row .ccxsp-best-badge *{
  color: #111 !important;
}

/* si c’est un lien/bouton */
body a.ccxsp-best-badge,
body button.ccxsp-best-badge{
  color: #111 !important;
}

/* on garde l’étoile en or (au cas où elle se mettrait en noir via *) */
body .ccxsp-best-badge::before{
  color: #b7791f !important;
}


/* ======================================
   CCXSP_BEST_BADGE_REBUILD_CENTER_V3
   - supprime l'étoile noire (texte original)
   - étoile or + texte noir parfaitement centrés
   ====================================== */

body .ccxsp-best-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  /* on cache le texte d'origine (et donc son étoile) */
  font-size: 0 !important;
  color: transparent !important;

  /* pour éviter tout décalage vertical */
  line-height: 1 !important;
  padding: 4px 10px !important; /* ajuste si tu veux +/− */
}

/* étoile premium */
body .ccxsp-best-badge::before{
  content: "★" !important;
  display: inline-block !important;
  font-size: 12px !important;
  line-height: 1 !important;
  color: #b7791f !important; /* or */
  text-shadow: 0 1px 0 rgba(255,255,255,.65) !important;
}

/* texte premium centré */
body .ccxsp-best-badge::after{
  content: "Meilleure offre" !important;
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;
  color: #111 !important;
}


/* ======================================
   CCXSP_BEST_BADGE_GAP_TIGHT_V1
   - réduit l'espace étoile <-> texte
   ====================================== */
body .ccxsp-best-badge{
  gap: 4px !important;              /* <- avant 6px */
}

body .ccxsp-best-badge::before,
body .ccxsp-best-badge::after{
  margin: 0 !important;
  padding: 0 !important;
}


/* ======================================
   CCXSP_BEST_BADGE_GAP_TIGHT_V2
   - encore moins d'espace étoile <-> texte
   ====================================== */
body .ccxsp-best-badge{
  gap: 2px !important;
}

body .ccxsp-best-badge::before{
  margin-right: 0 !important;
  min-width: 0 !important;
  width: auto !important;
}


/* ======================================
   CCXSP_HERO_TITLE_CLAMP_V1
   - titre produit moins énorme (desktop + mobile)
   ====================================== */

/* On cible large: h1/h2/h3 du hero + classes probables */
.ccxsp-pdp :is(h1,h2,h3),
.ccxsp-hero :is(h1,h2,h3),
.ccxsp-pdp-title,
.ccxsp-hero-title,
.ccxsp-product-title,
.ccxsp-title{
  font-size: clamp(18px, 2.6vw, 34px) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.2px !important;
}

/* Sur mobile on serre encore (évite de cacher l'image) */
@media (max-width: 980px){
  .ccxsp-pdp :is(h1,h2,h3),
  .ccxsp-hero :is(h1,h2,h3),
  .ccxsp-pdp-title,
  .ccxsp-hero-title,
  .ccxsp-product-title,
  .ccxsp-title{
    font-size: clamp(16px, 5vw, 22px) !important;
    line-height: 1.15 !important;
  }
}

/* ======================================
   CCXSP_PREMIUM_APPLELIKE_V1
   Premium Apple-like polish (smartphones only)
   ====================================== */

:root{
  --ccxsp-bg: #f6f7fb;
  --ccxsp-card: rgba(255,255,255,.86);
  --ccxsp-border: rgba(17, 24, 39, .08);
  --ccxsp-shadow: 0 12px 28px rgba(17,24,39,.08);
  --ccxsp-shadow-hover: 0 16px 38px rgba(17,24,39,.12);
  --ccxsp-radius: 18px;
}

/* Fond + ambiance premium */
.ccxsp-page,
.ccxsp-wrap{
  background: radial-gradient(1200px 700px at 50% -120px, rgba(34,197,94,.10), transparent 55%),
              radial-gradient(900px 500px at 85% 10%, rgba(255,140,0,.08), transparent 60%),
              linear-gradient(180deg, var(--ccxsp-bg), #ffffff 70%) !important;
}

/* Hero / titre : plus “Apple” */
.ccxsp-hero{
  background: rgba(255,255,255,.65) !important;
  border: 1px solid var(--ccxsp-border) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 40px rgba(17,24,39,.07) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ccxsp-hero h1,
.ccxsp-title{
  letter-spacing: -0.02em !important;
  font-weight: 750 !important;
}

.ccxsp-hero .ccxsp-subtitle{
  opacity: .78 !important;
  font-weight: 500 !important;
}

/* Bloc filtres : glass + séparation + boutons plus premium */
.ccxsp-filters{
  background: rgba(255,255,255,.70) !important;
  border: 1px solid var(--ccxsp-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 30px rgba(17,24,39,.06) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.ccxsp-filters select,
.ccxsp-filters input{
  border-radius: 14px !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  background: rgba(255,255,255,.85) !important;
  box-shadow: 0 1px 0 rgba(17,24,39,.03) !important;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

.ccxsp-filters select:focus,
.ccxsp-filters input:focus{
  outline: none !important;
  border-color: rgba(34,197,94,.35) !important;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12) !important;
}

/* Grille : un peu plus d’air */
.ccxsp-grid{
  gap: 16px !important;
}

/* Cartes : vrai effet “premium” + hover */
.ccxsp-card,
.ccxsp-item{
  background: var(--ccxsp-card) !important;
  border: 1px solid var(--ccxsp-border) !important;
  border-radius: var(--ccxsp-radius) !important;
  box-shadow: var(--ccxsp-shadow) !important;
  overflow: hidden !important;
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ccxsp-card:hover,
.ccxsp-item:hover{
  transform: translateY(-2px) !important;
  box-shadow: var(--ccxsp-shadow-hover) !important;
  border-color: rgba(17,24,39,.14) !important;
}

/* Image produit : plus nette + arrondie */
.ccxsp-card img,
.ccxsp-thumb img{
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 8px 18px rgba(17,24,39,.08) !important;
}

/* Titre produit : plus clean, meilleure hiérarchie */
.ccxsp-card h3,
.ccxsp-item h3,
.ccxsp-card .ccxsp-name{
  letter-spacing: -0.015em !important;
  font-weight: 730 !important;
  line-height: 1.15 !important;
}

/* Pills (marque/stockage/etat/couleur) : style iOS */
.ccxsp-pill,
.ccxsp-tag,
.ccxsp-chip{
  border-radius: 999px !important;
  border: 1px solid rgba(17,24,39,.10) !important;
  background: rgba(255,255,255,.70) !important;
  box-shadow: 0 1px 0 rgba(17,24,39,.04);
  padding: 4px 10px !important;
  font-weight: 600 !important;
  opacity: .92 !important;
}

/* Prix : plus “focus”, alignement premium */
.ccxsp-price{
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
}

/* Bouton “Voir les offres” : Apple-like */
.ccxsp-card .ccxsp-btn,
.ccxsp-item .ccxsp-btn,
.ccxsp-btn{
  border-radius: 14px !important;
  border: 1px solid rgba(17,24,39,.12) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.76)) !important;
  box-shadow: 0 10px 26px rgba(17,24,39,.10) !important;
  font-weight: 700 !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ccxsp-btn:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 34px rgba(17,24,39,.14) !important;
  border-color: rgba(34,197,94,.22) !important;
}

/* Pagination / infos : plus discret */
.ccxsp-meta,
.ccxsp-count,
.ccxsp-pagination{
  opacity: .78 !important;
}

/* Mobile : garde le “premium” sans être lourd */
@media (max-width: 780px){
  .ccxsp-hero{ border-radius: 18px !important; }
  .ccxsp-filters{ border-radius: 18px !important; }
  .ccxsp-grid{ gap: 12px !important; }
}

/* ======================================
   CCXSP_TITLE_SIZE_FIX_V1
   Reduce card title size + clamp to 2 lines
   ====================================== */

.ccxsp-card h3,
.ccxsp-item h3,
.ccxsp-card .ccxsp-name{
  font-size: clamp(15px, 1.05vw, 18px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  font-weight: 720 !important;
  margin: 0 0 6px 0 !important;

  /* clamp */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

@media (max-width: 780px){
  .ccxsp-card h3,
  .ccxsp-item h3,
  .ccxsp-card .ccxsp-name{
    font-size: 16px !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* ======================================
   CCXSP_TITLE_STRICT_V2
   Hard cap card titles (smartphones listing)
   ====================================== */

/* Cible la zone contenu des cartes (titre uniquement) */
.ccxsp-grid .ccxsp-item h3,
.ccxsp-grid .ccxsp-card h3,
.ccxsp-grid .ccxsp-item .ccxsp-name,
.ccxsp-grid .ccxsp-card .ccxsp-name{
  font-size: 16px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.012em !important;
  font-weight: 740 !important;
  margin: 0 0 6px 0 !important;
  max-width: 100% !important;

  /* 2 lignes max */
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

/* Desktop large : un poil plus grand, mais pas plus */
@media (min-width: 1100px){
  .ccxsp-grid .ccxsp-item h3,
  .ccxsp-grid .ccxsp-card h3,
  .ccxsp-grid .ccxsp-item .ccxsp-name,
  .ccxsp-grid .ccxsp-card .ccxsp-name{
    font-size: 17px !important;
  }
}

/* Mobile : garde lisible sans exploser */
@media (max-width: 780px){
  .ccxsp-grid .ccxsp-item h3,
  .ccxsp-grid .ccxsp-card h3,
  .ccxsp-grid .ccxsp-item .ccxsp-name,
  .ccxsp-grid .ccxsp-card .ccxsp-name{
    font-size: 15.5px !important;
    -webkit-line-clamp: 2 !important;
  }
}

/* ======================================
   CCXSP_CARD_TITLE_SIZE_V1
   Fix huge titles (cards use a.ccxsp-title)
   ====================================== */

.ccxsp-card .ccxsp-title{
  font-size: 16px !important;
  line-height: 1.12 !important;
  letter-spacing: -0.012em !important;
  font-weight: 740 !important;
  margin: 0 0 6px 0 !important;
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
}

@media (min-width: 1100px){
  .ccxsp-card .ccxsp-title{
    font-size: 17px !important;
  }
}

@media (max-width: 780px){
  .ccxsp-card .ccxsp-title{
    font-size: 15.5px !important;
  }
}

/* ======================================
   CCXSP_HERO_FLAT_V1
   Remove inner small container; keep the big hero container
   ====================================== */

/* Le “grand” conteneur reste premium (déjà stylé).
   Ici on neutralise uniquement le conteneur interne qui fait le petit cadre. */

.ccxsp-hero .ccxsp-hero-inner,
.ccxsp-hero .ccxsp-hero-box,
.ccxsp-hero .ccxsp-hero-content,
.ccxsp-hero .ccxsp-title-wrap{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Si le titre était dans un mini bloc arrondi */
.ccxsp-hero .ccxsp-title,
.ccxsp-hero h1{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Un peu plus d'air dans la hero pour compenser */
.ccxsp-hero{
  padding: 26px 22px !important;
}

@media (max-width: 780px){
  .ccxsp-hero{ padding: 18px 14px !important; }
}
/* CCXSP_THUMBS_IDEALO_V2 (safe: pas de wrapper HTML) */
img[data-ccx-proxy]{
  width:92px !important;
  height:92px !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  display:block;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}



/* CCXSP_THUMBS_FALLBACK_V1 */
img[data-ccx-proxy][src=""],
img[data-ccx-proxy]:not([src]){
  background:#f3f4f6 !important;
}