/* experience-footer — page-specific section for src/capsule/experience/
 *
 * Figma: Boukan — Capsule
 *   desktop 3988:4670 "footer_01" (frame 2602:865)
 *   mobile  3988:4736 "footer_01" (frame 2935:868)
 *
 * The Figma layer is named footer_01, which is an Eazyclick-library id; the
 * Maju catalog (this project's library) has no footer section, so this is built
 * page-specific per figma-rules/08-catalog-vs-page-specific.md.
 *
 * Deviations from the Figma source:
 *   - Copy differs between the two frames and is ported as drawn: the address
 *     label reads "[ adresse ]" on desktop and "[ Adresse du bureau ]" on
 *     mobile, and the middle legal link reads "Mentions légales" on desktop and
 *     "Termes & conditions" on mobile. Both flagged for the client.
 *   - The email address is rendered as a mailto: link and every footer link
 *     carries the repo's gradient underline animation
 *     (figma-rules/12-clickable-text-links.md); Figma draws them as plain text.
 *   - Figma draws the newsletter field as a static box with grey placeholder
 *     text and a pre-checked consent box. Built as a real <form> with an
 *     <input type="email" required> and a checkbox; the focus state (border
 *     colour + shadow, 300ms) follows figma-rules/11-forms.md and uses the
 *     form's own accent, Brand/dark gray #21262A. The required asterisk in
 *     the consent label uses that same accent.
 *   - The consent label is 16px on desktop and 14px on mobile — a real Figma
 *     difference, not a resize.
 *   - Figma's placeholder reads "Adresse email" on desktop and "Adresse e-mail"
 *     on mobile; one input cannot carry both, so the mobile spelling is used at
 *     every breakpoint.
 */

.experience-footer,
.experience-footer *,
.experience-footer *::before,
.experience-footer *::after { box-sizing: border-box; }
.experience-footer :where(p, h2, ul, li) { margin: 0; }
.experience-footer ul { list-style: none; padding: 0; }
.experience-footer img { display: block; max-width: 100%; }

.experience-footer {
  display: grid;
  grid-template-columns: repeat(26, minmax(0, 1fr));
  width: 100%;
  padding: 64px 0 32px;
  background: var(--color-brand-light-grey, #F6F6F6);
  font-family: var(--font-body, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
}

.experience-footer__inner {
  grid-column: 1 / 27;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 0 15px;
}

/* ------------------------------------------------------------- newsletter */

.experience-footer__newsletter {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.experience-footer__newsletter-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.experience-footer__newsletter-title {
  font-family: var(--font-heading, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-lg, 20px);
  font-weight: 500;
  line-height: 30px;
  color: var(--color-gray-900, #101828);
}

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

.experience-footer__form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.experience-footer__field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 6px 6px 16px;
  border: 1px solid var(--color-gray-300, #D0D5DD);
  background: var(--color-surface, #FFFFFF);
  transition: border-color 300ms ease, box-shadow 300ms ease;
}

.experience-footer__field:focus-within {
  border-color: var(--color-brand-dark-gray, #21262A);
  box-shadow: 0 0 0 3px rgba(33, 38, 42, 0.12);
}

.experience-footer__input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: var(--fs-base, 16px);
  font-weight: 300;
  line-height: 1.5;
  color: var(--color-gray-900, #101828);
}

.experience-footer__input::placeholder { color: #A4A4A4; }
.experience-footer__input:focus { outline: none; }

.experience-footer__submit {
  flex-shrink: 0;
  padding: 10px 20px;
  border: 0;
  background: var(--color-brand-dark-gray, #21262A);
  font-family: inherit;
  font-size: var(--fs-sm, 14px);
  font-weight: 500;
  line-height: 1.46;
  color: var(--color-text-inverse, #FFFFFF);
  cursor: pointer;
  transition: background-color 300ms ease;
}

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

.experience-footer__consent {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-sm, 14px);
  font-weight: 300;
  line-height: 1.46;
  color: var(--color-brand-dark-gray, #21262A);
}

.experience-footer__checkbox {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  border-radius: 2px;
  background: var(--color-brand-dark-gray, #21262A);
}

.experience-footer__checkbox input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.experience-footer__checkbox img { width: 16px; height: 16px; }

.experience-footer__checkbox input:not(:checked) + img { opacity: 0; }

.experience-footer__required { color: var(--color-brand-dark-gray, #21262A); }

/* ------------------------------------------------------------------ links */

/* Mobile stacks every block with the same 40px rhythm as the section itself. */
.experience-footer__top,
.experience-footer__columns,
.experience-footer__info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.experience-footer__rule { display: none; }

.experience-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.experience-footer__nav-link {
  font-family: var(--font-heading, "Space Grotesk", ui-sans-serif, system-ui, sans-serif);
  font-size: var(--fs-30, 30px);
  font-weight: 500;
  line-height: 1.26;
  color: var(--color-gray-900, #101828);
}

/* Repo-wide clickable-text underline (figma-rules/12-clickable-text-links.md):
   two stacked 1px gradients, revealed from the opposite side on hover/focus. */
.experience-footer a {
  text-decoration: none;
  color: inherit;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 100% 100%, 0 100%;
  background-size: 0 1px, 0 1px;
  transition: background-size 400ms ease;
}

.experience-footer a:hover,
.experience-footer a:focus-visible {
  background-size: 0 1px, 100% 1px;
}

.experience-footer__info-block {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.experience-footer__info-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.experience-footer__overline {
  font-size: var(--fs-sm, 14px);
  font-weight: 500;
  line-height: 1.46;
  text-transform: uppercase;
  color: var(--color-brand-dark-grey, #4C5155);
}

.experience-footer__info-text {
  font-size: var(--fs-md, 18px);
  font-weight: 500;
  line-height: 1.54;
  color: var(--color-gray-900, #101828);
}

.experience-footer__info-text--light {
  font-weight: 300;
  color: var(--color-brand-dark-grey, #4C5155);
}

.experience-footer__socials {
  display: flex;
  gap: 24px;
}

.experience-footer__socials a { background-image: none; }

.experience-footer__socials img { width: 24px; height: 24px; }

.experience-footer__hours {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.experience-footer__hours-row {
  display: flex;
  gap: 8px;
  font-size: var(--fs-md, 18px);
  line-height: 1.54;
  color: var(--color-gray-900, #101828);
}

.experience-footer__hours-day {
  flex: 1 1 auto;
  font-weight: 500;
}

.experience-footer__hours-time { font-weight: 300; white-space: nowrap; }

/* ------------------------------------------------------------------- base */

.experience-footer__base {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.experience-footer__logo { width: 100%; height: 64px; }

.experience-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-base, 16px);
  font-weight: 500;
  line-height: 1.5;
  text-align: center;
  color: var(--color-gray-600, #475467);
}

.experience-footer__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  white-space: nowrap;
}

.experience-footer__legal-desktop,
.experience-footer__label-desktop { display: none; }

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

@media (min-width: 1024px) {
  .experience-footer { padding: 80px 0 32px; }

  .experience-footer__inner {
    grid-column: 3 / 25;
    gap: 100px;
    padding: 0;
  }

  .experience-footer__top { gap: 56px; }

  .experience-footer__newsletter {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 56px;
  }

  .experience-footer__newsletter-text {
    flex: 0 0 497px;
    width: 497px;
  }

  .experience-footer__newsletter-title { font-size: var(--fs-xl, 24px); line-height: 1.32; }

  .experience-footer__newsletter-description {
    font-size: var(--fs-md, 18px);
    line-height: 1.54;
  }

  .experience-footer__form {
    flex: 0 0 551px;
    width: 551px;
  }

  .experience-footer__consent { font-size: var(--fs-base, 16px); line-height: 1.5; }

  .experience-footer__rule {
    display: block;
    height: 1px;
    border: 0;
    margin: 0;
    background: var(--color-gray-300, #D0D5DD);
  }

  .experience-footer__columns {
    flex-direction: row;
    gap: 112px;
    align-items: flex-start;
  }

  .experience-footer__nav {
    flex: 0 0 331px;
    width: 331px;
  }

  .experience-footer__info {
    flex: 1 1 auto;
    flex-direction: row;
    gap: 112px;
    align-items: flex-start;
    min-width: 0;
  }

  .experience-footer__info-block--location {
    flex: 0 0 332px;
    width: 332px;
  }

  .experience-footer__info-block--access {
    flex: 1 1 auto;
    min-width: 0;
  }

  .experience-footer__base { gap: 32px; }

  .experience-footer__logo { width: 706px; height: 132px; }

  .experience-footer__meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }

  .experience-footer__legal { flex-wrap: nowrap; justify-content: flex-end; }

  .experience-footer__legal-mobile,
  .experience-footer__label-mobile { display: none; }

  .experience-footer__legal-desktop,
  .experience-footer__label-desktop { display: inline; }
}