/* ============================================================
 * Indepro - assets/css/outils.css
 * Page /outils/ - design premium uniforme.
 * Toutes les cards : image carree 1:1 a gauche, contenu a droite.
 * Partenaire : full-width (1 ligne), classiques : 50/50 (1 ligne en dessous).
 * DA stricte (gold + Poppins + dividers #333).
 * ============================================================ */

.indepro-outils-page img {
  height: auto !important;
  max-width: 100% !important;
}

/* ---------- Sections ---------- */
.indepro-outils-page .indepro-outils-section {
  padding: 96px 0 !important;
  border-top: 1px solid #333 !important;
  position: relative !important;
}
.indepro-outils-page .indepro-outils-section:first-of-type {
  border-top: 0 !important;
  padding-top: 64px !important;
}
@media (max-width: 980px) {
  .indepro-outils-page .indepro-outils-section {
    padding: 72px 0 !important;
  }
}

.indepro-outils-page .indepro-outils-section__head {
  max-width: 760px !important;
  margin: 0 auto 56px !important;
  text-align: center !important;
}
.indepro-outils-page .indepro-outils-section__kicker {
  display: inline-block !important;
  font-family: var(--ff, 'Poppins'), sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--gold, #ebbb81) !important;
  margin: 0 0 14px !important;
}
.indepro-outils-page .indepro-outils-section__title {
  font-family: var(--ff, 'Poppins'), sans-serif !important;
  font-size: clamp(30px, 4.4vw, 46px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  margin: 0 0 18px !important;
  color: var(--fg, #fff) !important;
  text-transform: none !important;
}
.indepro-outils-page .indepro-outils-section__lead {
  font-family: var(--ff, 'Poppins'), sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--fg-soft, #b8b8b8) !important;
  margin: 0 !important;
}

/* ---------- Grid : partner full-width row 1, others 50/50 row 2 ---------- */
.indepro-outils-page .indepro-outils-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  align-items: stretch !important;
}
.indepro-outils-page .indepro-outil-card--partner {
  grid-column: 1 / -1 !important;
}
@media (max-width: 720px) {
  .indepro-outils-page .indepro-outils-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
}

/* ---------- Card : image gauche / contenu droite ---------- */
/* Card s'adapte a la hauteur du contenu. Le logo dedans est un bloc 1:1 flottant
   centre verticalement dans la colonne gauche (dark bg). Pas de panneau blanc qui
   s'etire. */
.indepro-outils-page .indepro-outil-card {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  background: #0c0c0c !important;
  border: 1px solid #2a2a2a !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  transition: border-color .35s var(--ease, ease), transform .35s var(--ease, ease), box-shadow .35s var(--ease, ease) !important;
}
.indepro-outils-page .indepro-outil-card:hover {
  border-color: var(--gold, #ebbb81) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 40px -16px rgba(235, 187, 129, 0.18) !important;
}

/* Variante partenaire : full-width, image et contenu plus genereux */
.indepro-outils-page .indepro-outil-card--partner {
  border-color: rgba(235, 187, 129, 0.45) !important;
  background:
    linear-gradient(135deg, rgba(235,187,129,0.06) 0%, transparent 35%),
    #0c0c0c !important;
}

/* ---------- Media : image source 1:1 affichee telle quelle (deja stylisee dark) ---------- */
.indepro-outils-page .indepro-outil-card__media {
  position: relative !important;
  flex: 0 0 38% !important;
  align-self: stretch !important;
  border-right: 1px solid #2a2a2a !important;
  overflow: hidden !important;
  background: #0c0c0c !important;
}
.indepro-outils-page .indepro-outil-card__media img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  object-position: center !important;
}
.indepro-outils-page .indepro-outil-card--partner .indepro-outil-card__media {
  flex: 0 0 26% !important;
}

/* On retire les badges flottants sur l'image - migre vers le contenu */
.indepro-outils-page .indepro-outil-card__num,
.indepro-outils-page .indepro-outil-card__partner {
  display: none !important;
}

/* ---------- Content ---------- */
.indepro-outils-page .indepro-outil-card__content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 26px 28px !important;
  gap: 0 !important;
}

.indepro-outils-page .indepro-outil-card--partner .indepro-outil-card__content {
  padding: 36px 40px !important;
  justify-content: center !important;
}

/* Header pills (numero + partenaire) au-dessus du titre */
.indepro-outils-page .indepro-outil-card__meta {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin: 0 0 14px !important;
}
.indepro-outils-page .indepro-outil-card__meta-num {
  font-family: var(--ff, 'Poppins'), sans-serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  color: var(--fg-soft, #b8b8b8) !important;
  text-transform: uppercase !important;
}
.indepro-outils-page .indepro-outil-card__meta-partner {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  font-family: var(--ff, 'Poppins'), sans-serif !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #1a1a1a !important;
  background: var(--gold, #ebbb81) !important;
  border-radius: 999px !important;
}
.indepro-outils-page .indepro-outil-card__meta-partner svg {
  display: block !important;
}

.indepro-outils-page .indepro-outil-card__title {
  font-family: var(--ff, 'Poppins'), sans-serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  color: var(--fg, #fff) !important;
  margin: 0 0 12px !important;
  letter-spacing: -0.005em !important;
}
.indepro-outils-page .indepro-outil-card--partner .indepro-outil-card__title {
  font-size: 26px !important;
  margin-bottom: 14px !important;
}

.indepro-outils-page .indepro-outil-card__highlight {
  display: inline-flex !important;
  align-self: flex-start !important;
  align-items: center !important;
  padding: 5px 11px !important;
  margin: 0 0 16px !important;
  font-family: var(--ff, 'Poppins'), sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--gold, #ebbb81) !important;
  background: rgba(235, 187, 129, 0.07) !important;
  border: 1px solid rgba(235, 187, 129, 0.22) !important;
  border-radius: 999px !important;
}

.indepro-outils-page .indepro-outil-card__body {
  flex: 1 1 auto !important;
  margin: 0 0 20px !important;
}
.indepro-outils-page .indepro-outil-card__body p {
  font-family: var(--ff, 'Poppins'), sans-serif !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--fg-soft, #b8b8b8) !important;
  margin: 0 0 10px !important;
}
.indepro-outils-page .indepro-outil-card--partner .indepro-outil-card__body p {
  font-size: 14.5px !important;
}
.indepro-outils-page .indepro-outil-card__body p:last-child {
  margin-bottom: 0 !important;
}
.indepro-outils-page .indepro-outil-card__body strong {
  color: var(--fg, #fff) !important;
  font-weight: 600 !important;
}

.indepro-outils-page .indepro-outil-card__cta {
  align-self: flex-start !important;
  margin-top: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* ---------- Mobile : tout en colonne (image en haut) ---------- */
@media (max-width: 720px) {
  .indepro-outils-page .indepro-outil-card,
  .indepro-outils-page .indepro-outil-card--partner {
    display: flex !important;
    flex-direction: column !important;
    aspect-ratio: auto !important; /* on libere la hauteur en mobile */
    grid-template-columns: 1fr !important;
  }
  .indepro-outils-page .indepro-outil-card__media,
  .indepro-outils-page .indepro-outil-card--partner .indepro-outil-card__media {
    width: 200px !important;
    aspect-ratio: 1 / 1 !important;
    margin: 22px auto 0 !important;
    border-right: 0 !important;
    border: 1px solid #2a2a2a !important;
    border-radius: 14px !important;
  }
  .indepro-outils-page .indepro-outil-card__content,
  .indepro-outils-page .indepro-outil-card--partner .indepro-outil-card__content {
    padding: 22px 22px 26px !important;
    overflow: visible !important;
  }
  .indepro-outils-page .indepro-outil-card--partner .indepro-outil-card__title {
    font-size: 20px !important;
  }
}

/* ============================================================
 * Section "Outils secrets" - layout split asymetrique premium
 * ============================================================ */
.indepro-outils-page .indepro-outils-section--secret {
  background:
    radial-gradient(ellipse at 80% 50%, rgba(235,187,129,0.06), transparent 60%),
    var(--bg, #0a0a0a) !important;
}

.indepro-outils-page .indepro-outils-secret {
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) !important;
  gap: 56px !important;
  align-items: center !important;
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 56px !important;
  background: linear-gradient(180deg, #111 0%, #0b0b0b 100%) !important;
  border: 1px solid rgba(235,187,129,0.3) !important;
  border-radius: 28px !important;
  position: relative !important;
  overflow: hidden !important;
}
.indepro-outils-page .indepro-outils-secret::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(235,187,129,0.12) 0%, transparent 45%) !important;
  pointer-events: none !important;
}
@media (max-width: 900px) {
  .indepro-outils-page .indepro-outils-secret {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 36px 26px !important;
    text-align: center !important;
  }
}

.indepro-outils-page .indepro-outils-secret__visual {
  position: relative !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  background: #fff !important;
  border: 1px solid #2a2a2a !important;
}
.indepro-outils-page .indepro-outils-secret__visual img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: blur(14px) saturate(0.8) !important;
}
.indepro-outils-page .indepro-outils-secret__lock {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gold, #ebbb81) !important;
  background: rgba(0,0,0,0.55) !important;
}
.indepro-outils-page .indepro-outils-secret__lock svg {
  width: 56px !important;
  height: 56px !important;
}

.indepro-outils-page .indepro-outils-secret__content {
  position: relative !important;
  z-index: 1 !important;
}
.indepro-outils-page .indepro-outils-secret__content .indepro-outils-section__kicker {
  margin-bottom: 12px !important;
}
.indepro-outils-page .indepro-outils-secret__content .indepro-outils-section__title {
  text-align: left !important;
  font-size: clamp(28px, 3.6vw, 40px) !important;
  margin-bottom: 18px !important;
}
@media (max-width: 900px) {
  .indepro-outils-page .indepro-outils-secret__content .indepro-outils-section__title {
    text-align: center !important;
  }
}
.indepro-outils-page .indepro-outils-secret__text {
  font-family: var(--ff, 'Poppins'), sans-serif !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--fg-soft, #b8b8b8) !important;
  margin: 0 0 28px !important;
}
.indepro-outils-page .indepro-outils-secret__cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}