/* ============================================================
   Avrile — CTA Reveal
   Section sticky avec animation scroll-driven : la carte passe
   de plein-écran à un bloc compact au fil du scroll.
   Variantes : --orange (about/projets), --cyan (creer).
   ============================================================ */

.avr-cta {
  position: relative;
  z-index: 2;
  min-height: 210vh;
  padding: 0;
  background: var(--avr-bg);
}

/* ----------------------------------------------------------
   Sticky wrapper — occupe 100vh, centré
---------------------------------------------------------- */
.avr-cta .avr-cta__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* ----------------------------------------------------------
   Carte — plein-écran au départ, rétrécit au scroll
   --avr-sh (0→1) injecté par cta-reveal.js
---------------------------------------------------------- */
.avr-cta .avr-cta__card {
  position: relative;
  box-sizing: border-box;
  width: calc(100% - var(--avr-sh, 0) * 16vw);
  height: calc(100vh - var(--avr-sh, 0) * 54vh);
  min-height: 0;
  background: var(--avr-color-raisin);
  border-radius: calc(var(--avr-sh, 0) * 22px);
  color: var(--avr-color-cream);
  padding: clamp(40px, 6vh, 104px) clamp(28px, 5vw, 104px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
}

/* ----------------------------------------------------------
   Eyebrow — positionnée absolument en haut
---------------------------------------------------------- */
.avr-cta .avr-cta__pill {
  align-self: flex-start;
  margin: 0 0 40px 0;
  color: rgba(239, 236, 223, 0.7);
}

/* ----------------------------------------------------------
   Intro — texte masqué progressivement au scroll
   max-height et mask-image gérés en JS
---------------------------------------------------------- */
.avr-cta .avr-cta__intro {
  margin: 0;
  font-family: var(--avr-font-body);
  font-weight: 500;
  font-size: clamp(26px, 3.3vw, 50px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  max-width: 22ch;
}

.avr-cta .avr-cta__line {
  display: block;
  overflow: hidden;
  will-change: opacity, max-height;
}

/* ----------------------------------------------------------
   Rangée heading + bouton
   margin-top animé par JS (32→0)
---------------------------------------------------------- */
.avr-cta .avr-cta__headrow {
  margin-top: clamp(22px, 3.5vh, 48px);
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(20px, 3vw, 48px);
  width: 100%;
  flex-wrap: wrap;
}

.avr-cta .avr-cta__head {
  margin: 0;
  flex: 1 1 auto;
  font-family: var(--avr-font-italic);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(34px, 4.4vw, 70px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: #FFFFFF;
}

.avr-cta .avr-cta__head em {
  font-family: var(--avr-font-italic);
  font-style: italic;
  font-size: 1em;
  color: #FFFFFF;
}

/* ----------------------------------------------------------
   Bouton — positionnement dans le headrow
---------------------------------------------------------- */
.avr-cta .avr-cta__btn {
  flex: 0 0 auto;
  margin-bottom: 0.3em;
}

/* ----------------------------------------------------------
   Bouton version de base (fond raisin) — fond clair
---------------------------------------------------------- */
.avr-cta:not(.avr-cta--orange):not(.avr-cta--cyan) .avr-cta__btn {
  background: var(--avr-color-cream);
  color: var(--avr-color-raisin);
}

.avr-cta:not(.avr-cta--orange):not(.avr-cta--cyan) .avr-cta__btn:hover {
  background: #FFFFFF;
  color: var(--avr-color-raisin);
  transform: translateY(-1px);
}

/* ----------------------------------------------------------
   Variante orange (about / projets)
---------------------------------------------------------- */
.avr-cta--orange .avr-cta__card {
  background: var(--avr-color-red);
}

.avr-cta--orange .avr-cta__btn {
  background: var(--avr-color-cream);
  color: #C32E04;
}

.avr-cta--orange .avr-cta__btn:hover {
  background: #FFFFFF;
  color: #C32E04;
  transform: translateY(-1px);
}

/* ----------------------------------------------------------
   Variante cyan (creer)
---------------------------------------------------------- */
.avr-cta--cyan .avr-cta__card {
  background: var(--avr-color-cyan);
  color: #14100F;
}

.avr-cta--cyan .avr-cta__intro,
.avr-cta--cyan .avr-cta__head,
.avr-cta--cyan .avr-cta__head em {
  color: #FFFFFF;
}

.avr-cta--cyan .avr-cta__pill {
  color: rgba(255, 255, 255, 0.9);
}

.avr-cta--cyan .avr-cta__btn {
  background: var(--avr-color-cream);
  color: var(--avr-color-cyan-deeper);
}

.avr-cta--cyan .avr-cta__btn:hover {
  background: #FFFFFF;
  color: var(--avr-color-cyan-deeper);
  transform: translateY(-1px);
}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */
@media (max-width: 760px) {
  .avr-cta {
    min-height: 190vh;
  }

  .avr-cta .avr-cta__headrow {
    align-items: flex-start;
    gap: 22px;
  }

  .avr-cta .avr-cta__btn {
    margin-bottom: 0;
  }
}