/* ===========================
   CCX Homepage Clair — Premium Light (FULL)
   Fix: logo, couleurs, deals du jour (2 lignes + scroll)
   + neutralisation slider interne du shortcode [ccx_hero_deals]
   =========================== */

.ccx-home-light{
  background: #f5f7fb;
  padding: 18px 0 40px;
}

/* Container / sections */
.ccxhl-section{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 12px;
}

.ccxhl-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 10px;
}

.ccxhl-h2{
  margin: 18px 0 12px;
  font-size: 22px;
  letter-spacing: -.3px;
  color:#121722 !important;
}

/* Anti-héritage Divi: couleurs lisibles partout */
.ccxhl-section, .ccxhl-section *{ color:#121722; }
.ccxhl-section a{ color:inherit; }

/* ===========================
   HERO
   =========================== */
.ccxhl-hero{ padding: 22px 12px 10px; }

.ccxhl-hero-inner{
  max-width: 1180px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.10);
  border: 1px solid rgba(10,20,30,.06);
  overflow: hidden;
  padding: 26px 28px;
}

/* Couleurs stables (évite blanc sur blanc Divi) */
.ccxhl-hero-inner, .ccxhl-hero-inner *{
  color: #121722 !important;
}

.ccxhl-logo{
  font-weight: 950;
  font-size: 30px;          /* ✅ plus gros */
  letter-spacing: -.6px;
  line-height: 1;
  margin-bottom: 6px;
}

.ccxhl-logo .c{ color:#ff7a00 !important; }     /* C orange */
.ccxhl-logo .mon{ color:#111 !important; }      /* mon noir */
.ccxhl-logo .choix{ color:#00b85a !important; } /* choix vert */
.ccxhl-logo .dotcom{ color:#111 !important; }   /* .com noir */

.ccxhl-hook{
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(18,23,34,.72) !important;
}
.ccxhl-hook-strong{ font-weight: 900; color:#121722 !important; }
.ccxhl-hook-accent{ font-weight: 950; color:#00b85a !important; }

.ccxhl-h1{
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: -.7px;
  color:#121722 !important;
}

.ccxhl-sub{
  margin: 0 0 16px;
  color: rgba(18,23,34,.72) !important;
  font-size: 15px;
  line-height: 1.55;
  max-width: 860px;
}

/* CTA */
.ccxhl-cta{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 6px; }

.ccxhl-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 850;
  font-size: 13px;
  text-decoration:none !important;
  border: 1px solid rgba(15,20,30,.14);
  background:#fff;
  color:#121722 !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.ccxhl-btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 32px rgba(0,0,0,.08); }

.ccxhl-btn-primary{
  background: #0f1216;
  color:#fff !important;
  border-color: rgba(0,0,0,.12);
}
.ccxhl-btn-primary .star{ color:#ffd54a !important; }

.ccxhl-btn-ghost{
  background:#fff;
  border-color: rgba(15,20,30,.14);
  color:#121722 !important;
}

/* ===========================
   DEALS DU JOUR — 2 lignes + scroll horizontal
   =========================== */
.ccxhl-deals-title{
  color:#121722 !important;
}

.ccxhl-deals-panel{
  position: relative;
  max-width: 1180px;
  margin: 10px auto 0;
  padding: 16px 52px;              /* ✅ place pour flèches */
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(10,20,30,.06);
  border-radius: 22px;
  box-shadow: 0 18px 50px rgba(0,0,0,.08);
  overflow: hidden;
}

/* Le scroller (2 lignes, colonnes qui partent vers la droite) */
.ccxhl-deals{
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto); /* ✅ 2 lignes */
  grid-auto-columns: 170px;            /* largeur carte */
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  padding: 2px;
  scrollbar-width: none;
}
.ccxhl-deals::-webkit-scrollbar{ display:none; }

/* ✅ IMPORTANT : neutralise le slider interne du shortcode si présent */
.ccxhl-deals .ccx-hero-deals,
.ccxhl-deals .ccx_hero_deals,
.ccxhl-deals .ccx-hero-deals-wrap,
.ccxhl-deals .ccx-hero-deals-inner,
.ccxhl-deals .ccx-hero-deals-track,
.ccxhl-deals .swiper,
.ccxhl-deals .swiper-wrapper,
.ccxhl-deals .slick-list,
.ccxhl-deals .slick-track,
.ccxhl-deals .tns-outer,
.ccxhl-deals .tns-inner,
.ccxhl-deals .tns-ovh{
  display: contents !important;       /* ✅ aplatit les wrappers */
}

/* Supprime transforms/largeurs que les sliders injectent */
.ccxhl-deals [style*="transform"],
.ccxhl-deals .swiper-wrapper,
.ccxhl-deals .slick-track{
  transform: none !important;
  width: auto !important;
}

/* Si le shortcode utilise des "slides" */
.ccxhl-deals .swiper-slide,
.ccxhl-deals .slick-slide,
.ccxhl-deals .tns-item{
  width: auto !important;
  flex: none !important;
}

/* Cache toutes flèches/boutons du shortcode (on garde NOS flèches) */
.ccxhl-deals-panel .ccx-hero-deals-nav,
.ccxhl-deals-panel .ccx-hero-deals-prev,
.ccxhl-deals-panel .ccx-hero-deals-next,
.ccxhl-deals-panel .swiper-button-prev,
.ccxhl-deals-panel .swiper-button-next,
.ccxhl-deals-panel .slick-arrow,
.ccxhl-deals-panel .tns-controls,
.ccxhl-deals-panel .tns-nav{
  display: none !important;
}

/* Nos flèches (propres) */
.ccxhl-nav{
  position:absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index: 5;

  font-size: 22px;      /* ✅ visible */
  font-weight: 950;
  line-height: 1;
  color: #111 !important;
  user-select:none;
}
.ccxhl-nav:hover{ transform: translateY(-50%) scale(1.03); }
.ccxhl-prev{ left: 10px; }
.ccxhl-next{ right: 10px; }

/* ===========================
   Categories (cards)
   =========================== */
.ccxhl-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.ccxhl-card{
  display:block;
  background:#fff;
  border-radius: 16px;
  border: 1px solid rgba(10,20,30,.06);
  box-shadow: 0 16px 40px rgba(0,0,0,.06);
  padding: 14px 14px 12px;
  text-decoration:none !important;
}

.ccxhl-card h3{ margin: 0 0 6px; font-size: 15px; color:#111 !important; }
.ccxhl-card p{ margin: 0 0 8px; color: rgba(18,23,34,.65) !important; font-size: 12.5px; line-height: 1.45; }
.ccxhl-link{ color:#111 !important; font-weight:850; font-size: 12.5px; }

/* Responsive */
@media (max-width: 980px){
  .ccxhl-hero-inner{ padding: 18px 16px; }
  .ccxhl-h1{ font-size: 28px; }
  .ccxhl-logo{ font-size: 26px; }
  .ccxhl-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccxhl-deals{ grid-auto-columns: 160px; }
}

@media (max-width: 560px){
  .ccxhl-grid{ grid-template-columns: 1fr; }
  .ccxhl-h1{ font-size: 24px; }
  .ccxhl-logo{ font-size: 24px; }
  .ccxhl-deals-panel{ padding: 14px 46px; }
  .ccxhl-deals{ grid-auto-columns: 155px; }
}

/* ===========================
   FIX shortcode ccx_hero_deals (structure réelle: ccx-hd-*)
   => on aplatit wrap/row pour que les cartes deviennent items de la grille
   =========================== */
.ccxhl-deals .ccx-hd-wrap,
.ccxhl-deals .ccx-hd-row{
  display: contents !important;
}

/* Cache les flèches/controles internes du shortcode (on garde les nôtres) */
.ccxhl-deals .ccx-hd-prev,
.ccxhl-deals .ccx-hd-next,
.ccxhl-deals .ccx-hd-nav,
.ccxhl-deals .ccx-hd-dots,
.ccxhl-deals .ccx-hd-controls{
  display:none !important;
}

/* ===========================
   FIX images: elles doivent remplir la vignette
   =========================== */
.ccxhl-deals a.ccx-hd-card{
  width: 100%;
}

.ccxhl-deals .ccx-hd-thumb{
  width: 100% !important;
  height: 110px !important;           /* ajuste si tu veux plus grand */
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
}

.ccxhl-deals .ccx-hd-thumb img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;      /* mets "cover" si tu veux remplir + crop */
  display:block !important;
}


/* Quand il y a peu de deals : on évite l’impression “vide” */
.ccxhl-deals{
  justify-content: start;
  align-content: start;
}

/* Un fond subtil derrière la grille pour remplir visuellement */
.ccxhl-deals-panel{
  background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.60));
}


/* Flèches premium */
.ccxhl-nav{
  width: 42px;
  height: 42px;
  font-size: 22px;
  border: 1px solid rgba(15,20,30,.10);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.ccxhl-nav:hover{
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 18px 44px rgba(0,0,0,.18);
}
.ccxhl-nav:active{
  transform: translateY(-50%) scale(.98);
}

/* Cache les flèches si JS dit “pas scrollable” */
.ccxhl-deals-panel.ccxhl-no-scroll .ccxhl-nav{
  opacity: 0;
  pointer-events: none;
}

/* ===========================
   DEALS DU JOUR — BADGES (FINAL CLEAN)
   =========================== */

/* la carte doit être le repère */
.ccxhl-deals-panel a.ccx-hd-card{
  position: relative !important;
}

/* BADGE % (petit, coin haut-gauche, sans “double pastille”) */
.ccxhl-deals-panel .ccx-hd-badge{
  position: absolute !important;
  top: 8px !important;
  left: 8px !important;
  z-index: 20 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 26px !important;            /* plus petit */
  min-width: 58px !important;
  padding: 0 10px !important;

  border-radius: 999px !important;
  line-height: 1 !important;
  white-space: nowrap !important;

  color: #0b1a10 !important;
  font-weight: 950 !important;
  font-size: 12.5px !important;
  letter-spacing: -0.2px !important;

  /* vert + relief propre */
  background: linear-gradient(180deg, #bfffc8 0%, #4fe16d 100%) !important;
  border: 1px solid rgba(0,0,0,.12) !important;

  /* IMPORTANT: ombre diffuse (évite l’effet “badge derrière”) */
  box-shadow: 0 10px 24px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.70) !important;

  /* stop héritages */
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Zéro pseudo-éléments = zéro reflet parasite */
.ccxhl-deals-panel .ccx-hd-badge::before,
.ccxhl-deals-panel .ccx-hd-badge::after{
  content: none !important;
  display: none !important;
}

/* BADGE MARCHAND (toujours lisible sur fond clair) */
.ccxhl-deals-panel .ccx-hd-merchant{
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 20 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  height: 24px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;

  background: rgba(245,247,251,.95) !important; /* un poil grisé -> visible */
  border: 1px solid rgba(10,20,30,.14) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.10) !important;

  color: #111827 !important;
  font-weight: 850 !important;
  font-size: 12px !important;

  max-width: 92px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
}

/* Parent = repère + contexte */
.ccxhl-deals-panel a.ccx-hd-card{
  position: relative !important;
  z-index: 1 !important;
  overflow: hidden !important; /* évite que des overlays passent au-dessus */
}

/* La vignette/overlay doit rester derrière le badge */
.ccxhl-deals-panel .ccx-hd-thumb{
  position: relative !important;
  z-index: 1 !important;
}
.ccxhl-deals-panel .ccx-hd-thumb::before,
.ccxhl-deals-panel .ccx-hd-thumb::after{
  z-index: 1 !important;
}

/* Badge AU PREMIER PLAN */
.ccxhl-deals-panel .ccx-hd-badge,
.ccxhl-deals-panel .ccx-hd-merchant{
  position: absolute !important;
  z-index: 9999 !important;
  isolation: isolate !important;
}


/* Badge % propre, sans “bandes” */
.ccxhl-deals-panel .ccx-hd-badge{
  background: linear-gradient(180deg, #bfffd0 0%, #6eea86 100%) !important;
  border: 1px solid rgba(0,0,0,.12) !important;

  /* IMPORTANT: enlève l’inset qui fait la ligne du haut */
  box-shadow: 0 10px 22px rgba(0,0,0,.12) !important;

  /* au cas où */
  filter: none !important;
  background-image: linear-gradient(180deg, #bfffd0 0%, #6eea86 100%) !important;
}

/* coupe le reflet */
.ccxhl-deals-panel .ccx-hd-badge::after{
  content: none !important;
  display: none !important;
}


/* ===== OVERRIDE FINAL: badge % clean (plus de bandes) ===== */
.ccxhl-deals-panel .ccx-hd-badge{
  border: 0 !important;                 /* <- supprime la source des bandes */
  outline: 0 !important;

  /* gradient OK, mais sans border */
  background: linear-gradient(180deg, #caffd1 0%, #62e57a 100%) !important;

  /* “contour” propre via ring + ombre */
  box-shadow:
    0 10px 22px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.12) !important;

  background-clip: padding-box !important; /* évite artefacts au bord */
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari/Chrome arrondis propres */
}

/* Zéro reflet / zéro pseudo-element */
.ccxhl-deals-panel .ccx-hd-badge::before,
.ccxhl-deals-panel .ccx-hd-badge::after{
  content: none !important;
  display: none !important;
}

/* ===========================
   Categories — image au-dessus
   =========================== */
.ccxhl-card{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.ccxhl-card-media{
  height: 64px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(245,247,251,1), rgba(255,255,255,1));
  border: 1px solid rgba(10,20,30,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.ccxhl-card-media img{
  width: 56px;
  height: 56px;
  object-fit: contain;
  display:block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.10));
  transition: transform .15s ease;
}

.ccxhl-card:hover .ccxhl-card-media img{
  transform: translateY(-1px);
}

/* ===========================
   CATEGORIES — images full width
   =========================== */

.ccxhl-card{
  overflow: hidden; /* pour garder les coins arrondis propres */
}

.ccxhl-card-media{
  width: 100%;
  height: 92px;                 /* ajuste: 80-110 selon ton goût */
  margin: 0 0 10px;
  border-radius: 14px;
  background: rgba(245,247,251,.95);
  border: 1px solid rgba(10,20,30,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ccxhl-card-media img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;      /* ✅ plus de crop */
  object-position: center;
}

/* CATEGORIES — image full largeur, sans déformation */
.ccxhl-card-media{
  width: 100%;
  height: 86px;                 /* ajuste 80–100 si tu veux */
  border-radius: 14px;
  background: #f5f7fb;
  border: 1px solid rgba(10,20,30,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: 10px;
  padding: 6px 10px;            /* évite que ça touche les bords */
}

.ccxhl-card-media img{
  width: 100%;
  height: 100%;
  object-fit: contain;          /* IMPORTANT: pas de crop, pas de stretch */
  object-position: center;
  display: block;
}


/* CATEGORIES — image plein cadre (sans déformation) */
.ccxhl-card-media{
  width:100%;
  height: 86px;                 /* ajuste 80–110 */
  padding: 0 !important;        /* IMPORTANT */
  overflow:hidden;
  border-radius:14px;
  background:#f5f7fb;
  border:1px solid rgba(10,20,30,.06);
  margin-bottom:10px;
}

.ccxhl-card-media img{
  width:100% !important;
  height:100% !important;
  max-width:none !important;    /* IMPORTANT (anti Divi) */
  object-fit: cover !important; /* remplit le cadre */
  object-position:center !important;
  display:block !important;
}


/* ===========================
   CATEGORIES — IMAGE FULL WIDTH (ENTIÈRE, PAS DE CROP)
   =========================== */

/* carte */
.ccxhl-card{
  display:block;
  overflow:hidden; /* coins propres */
}

/* le cadre image : PAS de height fixe */
.ccxhl-card-media{
  width: 100%;
  margin: 0 0 10px;
  border-radius: 14px;
  overflow: hidden;
  background: #f5f7fb;
  border: 1px solid rgba(10,20,30,.06);
  padding: 0 !important; /* anti anciens essais */
  height: auto !important;
}

/* l’image : elle prend toute la largeur et garde le ratio */
.ccxhl-card-media img{
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: initial !important; /* neutralise contain/cover précédents */
  object-position: center !important;
  filter: none !important; /* neutralise drop-shadow des anciens essais */
}


/* ===========================
   CATEGORIES — Apple premium (sobre)
   =========================== */

/* Card: plus clean + micro-lift */
.ccxhl-card{
  border-radius: 18px;
  border: 1px solid rgba(15,20,30,.07);
  box-shadow: 0 14px 36px rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  will-change: transform;
}
.ccxhl-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 54px rgba(0,0,0,.10);
  border-color: rgba(15,20,30,.10);
}

/* Zone image: plus “Apple card” */
.ccxhl-card-media{
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(248,250,252,1), rgba(242,246,250,1));
  border: 1px solid rgba(15,20,30,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 10px 22px rgba(0,0,0,.05);
  overflow: hidden;
}

/* Image: pleine largeur, sans déformation + micro zoom au hover */
.ccxhl-card-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important; /* pas de crop */
  transform: translateZ(0);
  transition: transform .18s ease, filter .18s ease;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.10));
}
.ccxhl-card:hover .ccxhl-card-media img{
  transform: scale(1.02);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.12));
}

/* Titres + textes: un peu plus “Apple” */
.ccxhl-card h3{
  font-size: 15.5px;
  letter-spacing: -.2px;
}
.ccxhl-card p{
  color: rgba(17,24,39,.62) !important;
}

/* Lien: plus propre */
.ccxhl-link{
  display:inline-flex;
  gap:6px;
  align-items:center;
  font-weight: 900;
  letter-spacing: -.1px;
}


/* ===========================
   DEALS DU JOUR — Hover premium (Apple)
   =========================== */

/* La carte */
.ccxhl-deals .ccx-hd-card{
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  will-change: transform;
}

/* Si ta carte est un <a class="ccx-hd-card"> (cas actuel) */
.ccxhl-deals a.ccx-hd-card{
  border: 1px solid rgba(15,20,30,.08);
  box-shadow: 0 14px 36px rgba(0,0,0,.06);
}

/* Hover */
.ccxhl-deals a.ccx-hd-card:hover{
  transform: translateY(-2px);
  border-color: rgba(15,20,30,.12);
  box-shadow: 0 24px 56px rgba(0,0,0,.12);
}

/* Vignette: petit “gloss” + micro zoom */
.ccxhl-deals a.ccx-hd-card .ccx-hd-thumb{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
}

.ccxhl-deals a.ccx-hd-card .ccx-hd-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: 0;
  transition: opacity .18s ease;
  background: radial-gradient(120% 80% at 30% 10%, rgba(255,255,255,.65), transparent 55%);
}

.ccxhl-deals a.ccx-hd-card:hover .ccx-hd-thumb::after{
  opacity: .28;
}

.ccxhl-deals a.ccx-hd-card .ccx-hd-thumb img{
  transition: transform .18s ease, filter .18s ease;
  transform: translateZ(0);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.08));
}

.ccxhl-deals a.ccx-hd-card:hover .ccx-hd-thumb img{
  transform: scale(1.02);
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.12));
}

/* Badge/merchant toujours au premier plan */
.ccxhl-deals a.ccx-hd-card .ccx-hd-badge,
.ccxhl-deals a.ccx-hd-card .ccx-hd-merchant{
  z-index: 9999 !important;
}

/* Accessibilité : pas d’animation si réduit */
@media (prefers-reduced-motion: reduce){
  .ccxhl-deals a.ccx-hd-card,
  .ccxhl-deals a.ccx-hd-card .ccx-hd-thumb::after,
  .ccxhl-deals a.ccx-hd-card .ccx-hd-thumb img{
    transition: none !important;
  }
}