/* mu-plugins/enixo/benefices.css */

/* --- Freins section --- */
.enixo-freins { max-width: 1180px; margin: 0 auto; padding: 64px 24px; }
.enixo-freins-intro { max-width: 640px; margin: 0 auto 44px; text-align: center; }

.enixo-freins-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  align-items: start;
}
.enixo-freins-column {
  padding: 28px;
  border-radius: 24px;
}
.enixo-freins-column--sans { background: #e8e8ec; }
.enixo-freins-column--avec { background: #f0e6f7; }
.enixo-freins-column-header {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 20px;
}
.enixo-freins-column--sans .enixo-freins-column-header { color: #5D6269; }
.enixo-freins-column--avec .enixo-freins-column-header { color: #70247F; }

.enixo-freins-cards { display: flex; flex-direction: column; gap: 16px; }
.enixo-freins-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  border-radius: 16px;
  background: #fff;
}
.enixo-freins-card-icon-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #f2f0f6;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.enixo-freins-card-icon { width: 40px; height: 40px; transition: transform .25s ease; }
.enixo-freins-card:hover .enixo-freins-card-icon { transform: scale(1.12); }
.enixo-freins-card-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: #202F75; }
.enixo-freins-card-text { font-size: 14px; line-height: 1.55; margin: 0; color: #6b6b76; }

.enixo-freins-cards .enixo-reveal:nth-child(1) { transition-delay: 0s; }
.enixo-freins-cards .enixo-reveal:nth-child(2) { transition-delay: .1s; }
.enixo-freins-cards .enixo-reveal:nth-child(3) { transition-delay: .2s; }
.enixo-freins-cards .enixo-reveal:nth-child(4) { transition-delay: .3s; }

.enixo-freins-callout {
  background: linear-gradient(135deg, #202F75, #70247F);
  border-radius: 20px;
  padding: 24px 40px;
  text-align: center;
  max-width: 760px;
  margin: 32px auto 0;
}
.enixo-freins-callout-text { font-size: 16px; line-height: 1.6; color: #fff; font-weight: 600; margin: 0; }

/* Shared section title/subtitle (freins + bénéfices) */
.enixo-section-title { font-size: clamp(26px, 3vw, 34px); font-weight: 800; color: #202F75; margin: 0 0 14px; }
.enixo-section-subtitle { font-size: 17px; line-height: 1.6; color: #6b6b76; margin: 0; }

/* --- Bénéfices section --- */
.enixo-benefices { background: #f2f0f6; position: relative; overflow: hidden; }
.enixo-benefices-inner { max-width: 1180px; margin: 0 auto; padding: 64px 24px; position: relative; }
.enixo-benefices-intro { max-width: 680px; margin: 0 auto 44px; text-align: center; }

.enixo-benefices-diagram {
  position: relative;
  width: min(100%, 640px);
  aspect-ratio: 1 / 1;
  margin: 24px auto 0;
}
.enixo-benefices-diagram img.enixo-benefices-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 19%;
  max-width: 19%;
  height: auto;
  display: block;
  transform: translate(-50%, -50%);
  z-index: 2;
}
.enixo-benefices-arrows {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.enixo-benefice-point {
  position: absolute;
  transform: translate(-50%, -50%);
  width: clamp(120px, 30%, 190px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  z-index: 3;
}
.enixo-benefice-point--n { left: 50%; top: 12.5%; }
.enixo-benefice-point--e { left: 87.5%; top: 50%; }
.enixo-benefice-point--s { left: 50%; top: 87.5%; }
.enixo-benefice-point--w { left: 12.5%; top: 50%; }

.enixo-benefice-icon { width: 84px; height: 84px; transition: transform .25s ease; }
.enixo-benefice-point:hover .enixo-benefice-icon { transform: scale(1.12); }
.enixo-benefice-title { font-size: 15px; font-weight: 700; margin: 0; color: #202F75; }

@media (max-width: 640px) {
  .enixo-benefices-diagram { width: min(86%, 640px); }
  .enixo-benefice-point { width: 34%; }
  .enixo-benefice-icon { width: 56px; height: 56px; }
  .enixo-benefice-title { font-size: 12px; }
}

/* --- Apparition au scroll --- */
.enixo-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.enixo-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.enixo-benefice-point--n.enixo-reveal { transition-delay: 0s; }
.enixo-benefice-point--e.enixo-reveal { transition-delay: .1s; }
.enixo-benefice-point--s.enixo-reveal { transition-delay: .2s; }
.enixo-benefice-point--w.enixo-reveal { transition-delay: .3s; }

/* .enixo-benefice-point is already centered via translate(-50%,-50%); the
   generic .enixo-reveal transform must not clobber that positioning. */
.enixo-benefice-point.enixo-reveal {
  transform: translate(-50%, calc(-50% + 24px));
}
.enixo-benefice-point.enixo-reveal.is-visible {
  transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) {
  .enixo-reveal { opacity: 1; transform: none; transition: none; }
  .enixo-benefice-point.enixo-reveal { opacity: 1; transform: translate(-50%, -50%); transition: none; }
}