/* ══════════════════════════════════════════════════
   benevole.css — Page Comment devenir bénévole
   Stains Espoir · Symfony 7 · Asset Mapper
   IMPORTANT: Aucun opacity:0 sur du contenu réel —
   GSAP anime uniquement transform (y/x).
══════════════════════════════════════════════════ */

/* ── Container centré ── */
.bv-page {
  --bv-r: min(860px, 100% - 3rem);
  --bv-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  background: var(--cream, #FFFBF7);
}
.bv-r {
  width: var(--bv-r);
  margin-inline: auto;
}

/* ══ SKELETON ══ */
#bv-skeleton {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--warm, #FFF8F0);
  overflow: hidden;
  transition: opacity .5s ease;
  pointer-events: all;
}
@keyframes bv-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.bv-sk-bone {
  background: linear-gradient(90deg, #ede0f5 0%, #ddc8f0 40%, #ede0f5 80%);
  background-size: 600px 100%;
  animation: bv-shimmer 1.6s infinite linear;
  border-radius: 10px;
}
.bv-sk-layout {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ══ HERO ══ */
.bv-hero {
  background: #FFF8F0;
  padding: 4rem 0 3.5rem;
  position: relative;
  overflow: hidden;
  border-bottom: 2px solid var(--text, #2B1A1A);
}
.bv-hero-bg-num {
  position: absolute;
  bottom: -0.15em;
  right: -0.04em;
  font-family: var(--bv-serif);
  font-size: clamp(8rem, 22vw, 18rem);
  font-weight: 900;
  font-style: italic;
  color: var(--brand, #6A1B9A);
  opacity: .055;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.bv-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--brand-light, #F3E5F5);
  color: var(--brand, #6A1B9A);
  font-size: .72rem;
  font-weight: 700;
  padding: .25rem .85rem;
  border-radius: 20px;
  margin-bottom: 1rem;
  width: fit-content;
}
.bv-hero-num {
  font-family: var(--bv-serif);
  font-size: clamp(4.5rem, 12vw, 7rem);
  font-weight: 900;
  font-style: italic;
  color: var(--brand, #6A1B9A);
  line-height: .9;
  display: block;
}
.bv-hero-unit {
  font-family: var(--bv-serif);
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  font-style: italic;
  color: var(--brand, #6A1B9A);
  margin-bottom: .75rem;
  display: block;
}
.bv-hero-statement {
  font-family: var(--bv-serif);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  color: var(--text, #2B1A1A);
  line-height: 1.15;
  margin-bottom: .85rem;
}
.bv-hero-lead {
  font-size: 1rem;
  color: #5a3a3a;
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 48ch;
}
.bv-hero-btns {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
}

/* ══ BLOCS D'IMPACT (alternance de fond) ══ */
.bv-impact {
  border-bottom: 1px solid rgba(0, 0, 0, .055);
}
.bv-impact--white  { background: #ffffff; }
.bv-impact--purple { background: var(--brand, #6A1B9A); border-color: rgba(255,255,255,.08); }
.bv-impact--warm   { background: #FFF8F0; }

.bv-impact-inner {
  width: var(--bv-r, min(860px, 100% - 3rem));
  margin-inline: auto;
  padding: 2.2rem 0;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.bv-impact-icon {
  font-size: 3rem;
  flex-shrink: 0;
  line-height: 1;
}
.bv-impact-text h3 {
  font-family: var(--bv-serif);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 800;
  margin-bottom: .4rem;
  line-height: 1.2;
}
.bv-impact-text p {
  font-size: .92rem;
  line-height: 1.7;
}
.bv-impact--white .bv-impact-text h3,
.bv-impact--warm  .bv-impact-text h3 { color: var(--text, #2B1A1A); }
.bv-impact--purple .bv-impact-text h3 { color: #fff; }
.bv-impact--white .bv-impact-text p,
.bv-impact--warm  .bv-impact-text p  { color: var(--muted, #7B5B5B); }
.bv-impact--purple .bv-impact-text p  { color: rgba(255,255,255,.72); }

/* ══ BANDE STATS ══ */
.bv-stats {
  background: #2B1A1A;
  display: flex;
}
.bv-stat {
  flex: 1;
  padding: 1.6rem 1rem;
  text-align: center;
  border-right: 1px solid rgba(255,255,255,.08);
}
.bv-stat:last-child { border-right: none; }
.bv-stat-num {
  font-family: var(--bv-serif);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 900;
  color: #e9c8ff;
  display: block;
  line-height: 1;
}
.bv-stat-lbl {
  font-size: .63rem;
  color: rgba(255,255,255,.38);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: .35rem;
  display: block;
}

/* ══ ÉTAPES ══ */
.bv-steps-section {
  background: #ffffff;
  padding: 3rem 0;
  border-bottom: 1px solid rgba(0,0,0,.055);
}
.bv-steps-header {
  width: var(--bv-r, min(860px, 100% - 3rem));
  margin-inline: auto;
  margin-bottom: 1.5rem;
}
.bv-steps-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--muted, #7B5B5B);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.bv-steps-label::before {
  content: '';
  width: 18px;
  height: 1.5px;
  background: currentColor;
  display: block;
}
.bv-steps-list {
  width: var(--bv-r, min(860px, 100% - 3rem));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.bv-step {
  display: flex;
  align-items: stretch;
}
.bv-step-n {
  width: 52px;
  flex-shrink: 0;
  background: var(--brand, #6A1B9A);
  color: #fff;
  font-family: var(--bv-serif);
  font-size: 1.6rem;
  font-weight: 900;
  font-style: italic;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px 0 0 10px;
}
.bv-step-body {
  flex: 1;
  background: var(--cream, #FFFBF7);
  border: 1px solid #EDE5D8;
  border-left: none;
  border-radius: 0 10px 10px 0;
  padding: .9rem 1.3rem;
}
.bv-step-body h4 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text, #2B1A1A);
  margin-bottom: .3rem;
}
.bv-step-body p {
  font-size: .82rem;
  color: var(--muted, #7B5B5B);
  line-height: 1.55;
}
.bv-step-chips {
  display: flex;
  gap: .4rem;
  margin-top: .6rem;
  flex-wrap: wrap;
}
.bv-chip {
  font-size: .68rem;
  padding: .22rem .75rem;
  border-radius: 20px;
  background: var(--brand-light, #F3E5F5);
  color: var(--brand, #6A1B9A);
  font-weight: 600;
  text-decoration: none;
  transition: background .2s;
}
.bv-chip:hover { background: var(--brand-pale, #FAF5FF); }
.bv-step-hint {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .72rem;
  color: #9b6b2a;
  background: #FFF8F0;
  border: 1px solid #E8D5C0;
  padding: .25rem .85rem;
  border-radius: 20px;
  margin-top: .65rem;
}

/* ══ CTA FINAL ══ */
.bv-cta {
  background: linear-gradient(140deg, #FFF8F0 0%, var(--brand-pale, #FAF5FF) 100%);
  padding: 4rem 0;
  text-align: center;
}
.bv-cta-inner {
  width: var(--bv-r, min(860px, 100% - 3rem));
  margin-inline: auto;
}
.bv-cta h2 {
  font-family: var(--bv-serif);
  font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  font-weight: 800;
  color: var(--text, #2B1A1A);
  margin-bottom: .6rem;
  line-height: 1.2;
}
.bv-cta p {
  font-size: .95rem;
  color: var(--muted, #7B5B5B);
  margin-bottom: 1.75rem;
}
.bv-cta-btns {
  display: flex;
  gap: .75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ══ HELPERS ANIMATION ══ */
/* Pas de opacity:0 — GSAP n'anime que transform (y/x) */
.bv-anim { will-change: transform; }

/* ══ RESPONSIVE ══ */
@media (max-width: 600px) {
  .bv-hero { padding: 1.5rem 0 2.5rem; }
}
@media (max-width: 640px) {
  .bv-impact-inner { flex-direction: column; gap: 1rem; }
  .bv-impact-icon { font-size: 2.2rem; }
  .bv-hero-btns { flex-direction: column; }
  .bv-hero-btns .btn { justify-content: center; }
  .bv-hero-bg-num { font-size: 45vw; }
}