/* experience-cta — page-specific section for src/capsule/experience/
 *
 * Figma: Boukan — Capsule
 *   desktop 2608:1070 (frame 2602:865)   mobile 2935:953 (frame 2935:868)
 *
 * Deviations from the Figma source:
 *   - Desktop and mobile diverge beyond a responsive resize and are ported as
 *     drawn: desktop reads "VOUS VOULEZ DEVENIR MEMBRE ?" (48px) with a single
 *     dark button; mobile reads "Votre capsule vous attend" (36px) plus a
 *     subtitle and TWO stacked buttons ("Réserver une capsule" white, then
 *     "Devenir membre" dark). Flagged for the client — this looks like two
 *     versions of the block rather than one responsive layout.
 *   - The corner notches are cut out of the banner with a mask instead of
 *     Figma's white-filled overlay shape: the banner straddles the white page
 *     and the #F6F6F6 band, so no single overlay colour was ever right, and an
 *     overlay always left a 1px edge. Shapes are inlined as data: URIs because
 *     mask-image is CORS-checked and a file:// document is an opaque origin.
 *   - Button hover states are not in Figma; added per
 *     figma-rules/14-buttons-interactions.md at the repo's 300ms.
 *   - The banner reuses the hero's gradient asset — Figma exports the same
 *     bytes for both nodes.
 */

.experience-cta,
.experience-cta *,
.experience-cta *::before,
.experience-cta *::after { box-sizing: border-box; }
.experience-cta :where(p, h2) { margin: 0; }
.experience-cta a { text-decoration: none; }

.experience-cta {
  position: relative;
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  width: 100%;
  padding: 44px 0;
  background: var(--color-surface, #FFFFFF);
  font-family: var(--font-body, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
}

.experience-cta__band {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 281px;
  background: var(--color-brand-light-grey, #F6F6F6);
}

.experience-cta__banner {
  grid-column: 1 / 27;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  margin: 0 16px;
  padding: 112px 16px;
  border-radius: 0 16px 0 16px;
  overflow: hidden;
  text-align: center;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M0%2083.9678C2.87711e-08%2085.3541%200.15741%2086.7036%200.454102%2088H0V83.9678ZM78.0635%200C68.1224%202.06314e-07%2060.0635%208.05888%2060.0635%2018V42.0635C60.0635%2052.0046%2052.0046%2060.0635%2042.0635%2060.0635H18C8.05887%2060.0635%202.06301e-07%2068.1224%200%2078.0635V0H78.0635ZM88%200.453125C86.7037%200.156465%2085.354%202.87676e-08%2083.9678%200H88V0.453125Z'%20fill='white'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20transform='rotate(180%2044%2044)'%3E%3Cpath%20d='M0%2083.9678C2.87711e-08%2085.3541%200.15741%2086.7036%200.454102%2088H0V83.9678ZM78.0635%200C68.1224%202.06314e-07%2060.0635%208.05888%2060.0635%2018V42.0635C60.0635%2052.0046%2052.0046%2060.0635%2042.0635%2060.0635H18C8.05887%2060.0635%202.06301e-07%2068.1224%200%2078.0635V0H78.0635ZM88%200.453125C86.7037%200.156465%2085.354%202.87676e-08%2083.9678%200H88V0.453125Z'%20fill='white'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
          mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M0%2083.9678C2.87711e-08%2085.3541%200.15741%2086.7036%200.454102%2088H0V83.9678ZM78.0635%200C68.1224%202.06314e-07%2060.0635%208.05888%2060.0635%2018V42.0635C60.0635%2052.0046%2052.0046%2060.0635%2042.0635%2060.0635H18C8.05887%2060.0635%202.06301e-07%2068.1224%200%2078.0635V0H78.0635ZM88%200.453125C86.7037%200.156465%2085.354%202.87676e-08%2083.9678%200H88V0.453125Z'%20fill='white'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='88'%20height='88'%20viewBox='0%200%2088%2088'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20transform='rotate(180%2044%2044)'%3E%3Cpath%20d='M0%2083.9678C2.87711e-08%2085.3541%200.15741%2086.7036%200.454102%2088H0V83.9678ZM78.0635%200C68.1224%202.06314e-07%2060.0635%208.05888%2060.0635%2018V42.0635C60.0635%2052.0046%2052.0046%2060.0635%2042.0635%2060.0635H18C8.05887%2060.0635%202.06301e-07%2068.1224%200%2078.0635V0H78.0635ZM88%200.453125C86.7037%200.156465%2085.354%202.87676e-08%2083.9678%200H88V0.453125Z'%20fill='white'/%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
  -webkit-mask-position: left -2px top -2px, right -2px bottom -2px, left top;
          mask-position: left -2px top -2px, right -2px bottom -2px, left top;
  -webkit-mask-size: 92px 92px, 92px 92px, 100% 100%;
          mask-size: 92px 92px, 92px 92px, 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-composite: xor, xor, source-over;
          mask-composite: exclude, exclude, add;
}

.experience-cta__banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}


.experience-cta__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.experience-cta__title {
  font-family: var(--font-heading, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-36, 36px);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-gray-900, #101828);
}

.experience-cta__subtitle {
  font-size: var(--fs-base, 16px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-brand-dark-grey, #4C5155);
}

.experience-cta__actions {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 241px;
}

.experience-cta__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: var(--fs-base, 16px);
  font-weight: 500;
  line-height: 1.5;
  transition: background-color 300ms ease, color 300ms ease;
}

.experience-cta__button--dark {
  background: var(--color-brand-dark-gray, #21262A);
  color: var(--color-text-inverse, #FFFFFF);
}

.experience-cta__button--dark:hover { background: var(--color-black, #000000); }

.experience-cta__button--light {
  background: var(--color-surface, #FFFFFF);
  color: var(--color-gray-800, #1D2939);
}

.experience-cta__button--light:hover { background: var(--color-gray-200, #EAECF0); }

/* Desktop-only / mobile-only copy (see deviations). */
.experience-cta__title--desktop { display: none; }

/* -------------------------------------------------------------- 1024px + */

@media (min-width: 1024px) {
  .experience-cta__band { height: 220px; }

  .experience-cta__banner {
    grid-column: 2 / 26;
    margin: 0;
    padding: 80px 0;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='126'%20height='126'%20viewBox='0%200%20126%20126'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath%20d='M0%20122C1.98757e-08%20123.363%200.115707%20124.699%200.333984%20126H0V122Z'%20fill='white'/%3E%3Cpath%20d='M110%200C96.7452%201.9329e-07%2086%2010.7452%2086%2024V62C86%2075.2548%2075.2548%2086%2062%2086H24C10.7452%2086%200%2096.7452%200%20110V0H110Z'%20fill='white'/%3E%3Cpath%20d='M126%200.333008C124.699%200.114748%20123.363%200%20122%200H126V0.333008Z'%20fill='white'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='126'%20height='126'%20viewBox='0%200%20126%20126'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20transform='rotate(180%2063%2063)'%3E%3Cg%3E%3Cpath%20d='M0%20122C1.98757e-08%20123.363%200.115707%20124.699%200.333984%20126H0V122Z'%20fill='white'/%3E%3Cpath%20d='M110%200C96.7452%201.9329e-07%2086%2010.7452%2086%2024V62C86%2075.2548%2075.2548%2086%2062%2086H24C10.7452%2086%200%2096.7452%200%20110V0H110Z'%20fill='white'/%3E%3Cpath%20d='M126%200.333008C124.699%200.114748%20123.363%200%20122%200H126V0.333008Z'%20fill='white'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
            mask-image: url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='126'%20height='126'%20viewBox='0%200%20126%20126'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath%20d='M0%20122C1.98757e-08%20123.363%200.115707%20124.699%200.333984%20126H0V122Z'%20fill='white'/%3E%3Cpath%20d='M110%200C96.7452%201.9329e-07%2086%2010.7452%2086%2024V62C86%2075.2548%2075.2548%2086%2062%2086H24C10.7452%2086%200%2096.7452%200%20110V0H110Z'%20fill='white'/%3E%3Cpath%20d='M126%200.333008C124.699%200.114748%20123.363%200%20122%200H126V0.333008Z'%20fill='white'/%3E%3C/g%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg%20preserveAspectRatio='none'%20overflow='visible'%20width='126'%20height='126'%20viewBox='0%200%20126%20126'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cg%20transform='rotate(180%2063%2063)'%3E%3Cg%3E%3Cpath%20d='M0%20122C1.98757e-08%20123.363%200.115707%20124.699%200.333984%20126H0V122Z'%20fill='white'/%3E%3Cpath%20d='M110%200C96.7452%201.9329e-07%2086%2010.7452%2086%2024V62C86%2075.2548%2075.2548%2086%2062%2086H24C10.7452%2086%200%2096.7452%200%20110V0H110Z'%20fill='white'/%3E%3Cpath%20d='M126%200.333008C124.699%200.114748%20123.363%200%20122%200H126V0.333008Z'%20fill='white'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linear-gradient(#000, #000);
    -webkit-mask-size: 130px 130px, 130px 130px, 100% 100%;
            mask-size: 130px 130px, 130px 130px, 100% 100%;
  }

  .experience-cta__text { width: 510px; }

  .experience-cta__title { display: none; }

  .experience-cta__title--desktop {
    display: block;
    font-size: var(--fs-48, 48px);
  }

  .experience-cta__subtitle { display: none; }

  .experience-cta__actions { width: auto; }

  .experience-cta__button--mobile { display: none; }
}