/* 1) HARD RESET (scoped) */
#cpi-home, #cpi-home * , #cpi-home *::before, #cpi-home *::after{
  box-sizing: border-box !important;
}
#cpi-home{
  isolation: isolate;
  contain: paint;
}
#cpi-home :where(h1,h2,h3,p,a,ul,li,figure,img,section,header,div,span,u,b){
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent;
  font: inherit;
  color: inherit;
  vertical-align: baseline;
}
#cpi-home :where(ul,li){ list-style: none !important; }
#cpi-home a{ text-decoration: none !important; }
#cpi-home img{
  display: block !important;
  max-width: 100% !important;
  height: auto !important;
}

/* 2) DESIGN TOKENS */
#cpi-home{
  --cpi-bg: #070a0f;
  --cpi-text: rgba(255,255,255,.92);
  --cpi-muted: rgba(255,255,255,.70);
  --cpi-line: rgba(255,255,255,.12);
  --cpi-shadow: 0 18px 60px rgba(0,0,0,.35);
  --cpi-green: #22c55e;
  --cpi-lime: #a3e635;
  --cpi-blue: #60a5fa;
  --cpi-radius: 22px;
  --cpi-container: 1100px;
  --cpi-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--cpi-text);
  font-family: var(--cpi-font) !important;
}

/* 3) LAYOUT WRAPPER */
#cpi-wrap{
  width: min(var(--cpi-container), calc(100% - 32px)) !important;
  margin: 0 auto !important;
  padding: clamp(22px, 3.5vw, 48px) 0 !important;
}

/* 4) HERO */
#cpi-hero{
  position: relative !important;
  border-radius: var(--cpi-radius) !important;
  border: 1px solid var(--cpi-line) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)),
    radial-gradient(700px 260px at 12% 10%, rgba(34,197,94,.22), transparent 60%),
    radial-gradient(620px 260px at 92% 0%, rgba(96,165,250,.18), transparent 60%),
    linear-gradient(180deg, var(--cpi-bg), #05060a) !important;
  box-shadow: var(--cpi-shadow) !important;
  overflow: hidden !important;
}

#cpi-hero-inner{
  position: relative !important;
  padding: clamp(20px, 3.2vw, 34px) !important;
  min-height: clamp(220px, 22vw, 300px) !important;
}

#cpi-hero::after{
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  background: linear-gradient(90deg, rgba(34,197,94,0), rgba(163,230,53,.22), rgba(34,197,94,0)) !important;
  filter: blur(18px) !important;
  opacity: .55 !important;
  pointer-events: none !important;
}

#cpi-hero-content{
  position: relative !important;
  z-index: 2 !important;
  max-width: 72ch !important;
}

#cpi-home .cpi-p{
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.55 !important;
  color: var(--cpi-muted) !important;
  margin-top: 10px !important;
}
#cpi-home .cpi-p b{ color: var(--cpi-text) !important; font-weight: 750 !important; }
#cpi-home .cpi-p u{
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 4px !important;
  text-decoration-color: rgba(163,230,53,.85) !important;
  color: var(--cpi-text) !important;
}

#cpi-hero-figure{
  position: absolute !important;
  right: clamp(-40px, -2vw, -12px) !important;
  bottom: -10px !important;
  width: clamp(220px, 28vw, 360px) !important;
  height: auto !important;
  opacity: .36 !important;
  filter: saturate(1.05) contrast(1.05) drop-shadow(0 16px 34px rgba(0,0,0,.35)) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* 5) POSTS GRID */
#cpi-posts{
  margin-top: clamp(16px, 2.4vw, 26px) !important;
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 14px !important;
}

#cpi-posts .cpi-card{
  grid-column: span 4 !important;
  display: grid !important;
  grid-template-columns: 120px 1fr !important;
  gap: 14px !important;
  align-items: center !important;
  padding: 14px !important;
  border-radius: var(--cpi-radius) !important;
  border: 1px solid var(--cpi-line) !important;
  background: linear-gradient(180deg, rgb(80,149,199), rgb(78,79,181)) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.22) !important;
  position: relative !important;
  overflow: visible !important;
  cursor: pointer !important;
  transition: transform .25s ease, border-color .25s ease, background .25s ease !important;
}

#cpi-posts .cpi-card::before{
  content: "" !important;
  position: absolute !important;
  inset: -1px !important;
  border-radius: var(--cpi-radius) !important;
  background:
    radial-gradient(360px 160px at 10% 10%, rgba(34,197,94,.20), transparent 62%),
    radial-gradient(280px 170px at 95% 0%, rgba(96,165,250,.16), transparent 60%) !important;
  opacity: 0 !important;
  transition: opacity .25s ease !important;
  pointer-events: none !important;
  clip-path: inset(0 round var(--cpi-radius)) !important;
}

#cpi-posts .cpi-card:hover{
  transform: translateY(-3px) !important;
  border-color: rgba(163,230,53,.45) !important;
  background: linear-gradient(180deg, rgb(78,79,181), rgb(80,149,199)) !important;
}
#cpi-posts .cpi-card:hover::before{ opacity: 1 !important; }

/* FULL-CARD CLICK via ::after sur le lien titre */
#cpi-posts .cpi-h2{
  font-size: 18px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
}

#cpi-posts .cpi-h2{
  color: var(--cpi-text) !important;
}

#cpi-posts .cpi-card-link{
  position: absolute !important;
  inset: 0 !important;
  z-index: 999 !important;
  border-radius: var(--cpi-radius) !important;
  pointer-events: all !important;
  display: block !important;
  cursor: pointer !important;
}

/* Image et CTA au-dessus du ::after */
#cpi-posts .cpi-media{
  position: relative !important;
  z-index: 2 !important;
  width: 120px !important;
  aspect-ratio: 5 / 4 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

#cpi-posts .cpi-media img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: scale(1.01) !important;
  transition: transform .35s ease !important;
}

#cpi-posts .cpi-card:hover .cpi-media img{
  transform: scale(1.06) !important;
}

#cpi-posts .cpi-body{
  position: relative !important;
  z-index: 1 !important;
  min-width: 0 !important;
}

#cpi-posts .cpi-desc{
  color: var(--cpi-muted) !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  margin-bottom: 10px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* CTA décoratif (span) */
#cpi-posts .cpi-cta{
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--cpi-text) !important;
  font-weight: 750 !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  transition: background .2s ease, border-color .2s ease !important;
  position: relative !important;
  z-index: 2 !important;
}

#cpi-posts .cpi-card:hover .cpi-cta{
  background: rgba(34,197,94,.12) !important;
  border-color: rgba(34,197,94,.35) !important;
}

/* 6) RESPONSIVE */
@media (max-width: 980px){
  #cpi-posts .cpi-card{ grid-column: span 6 !important; }
  #cpi-hero-figure{ opacity: .28 !important; }
}

@media (max-width: 640px){
  #cpi-posts{ gap: 12px !important; }
  #cpi-posts .cpi-card{
    grid-column: 1 / -1 !important;
    grid-template-columns: 96px 1fr !important;
    padding: 12px !important;
  }
  #cpi-posts .cpi-media{
    width: 96px !important;
    border-radius: 16px !important;
  }
  #cpi-posts .cpi-h2{ font-size: 17px !important; }
  #cpi-hero-figure{
    right: -60px !important;
    width: 260px !important;
    opacity: .22 !important;
  }
}

/* 7) REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  #cpi-posts .cpi-card,
  #cpi-posts .cpi-media img,
  #cpi-posts .cpi-cta{
    transition: none !important;
  }
}