/*
  AFH / TYPOGRAPHY & OVERFLOW V4
  --------------------------------
  Final readability layer loaded after the studio styles.
  It preserves the visual direction and native scrolling while preventing
  oversized headings, clipped accents/descenders and narrow-screen overflow.
*/

:root {
  /* A safer fallback than Impact when the Google font is unavailable. */
  --studio-display: "Archivo Black", "Arial Black", "Helvetica Neue", Arial, sans-serif;
}

/* -------------------------------------------------------------------------- */
/* Global type safety                                                          */
/* -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  max-width: 100%;
  line-height: .92;
  letter-spacing: -.058em;
  text-wrap: balance;
  overflow-wrap: normal;
  word-break: normal;
}

h1 em,
h2 em,
h3 em,
h4 em {
  display: inline;
  padding-inline: .015em;
  line-height: 1;
}

p,
li,
dd,
blockquote,
.section-intro,
.lead {
  overflow-wrap: break-word;
}

/* Keep the word-mask animation, but enlarge its clipping box so accents,
   ascenders and descenders are never sliced. */
.word-reveal {
  padding-bottom: .13em;
}

.word-reveal .word {
  padding: .12em .018em .17em;
  margin: -.12em -.018em -.17em;
  overflow: hidden;
  vertical-align: baseline;
}

.word-reveal .word > span {
  padding-bottom: .02em;
}

/* Buttons previously inherited an extremely tight line-height. */
.btn,
.header-cta,
.afh-video-primary,
.afh-video-secondary,
.studio-menu-actions > a {
  height: auto;
  line-height: 1.25 !important;
}

.btn {
  padding-block: 12px !important;
}

.contact-line strong,
.footer-newsletter,
.footer-contact,
.legal-card,
.news-article,
.form-field,
.form-field input,
.form-field textarea,
.form-field select {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* -------------------------------------------------------------------------- */
/* Home video hero                                                             */
/* -------------------------------------------------------------------------- */

.afh-video-hero-copy {
  min-width: 0;
}

.afh-video-hero-copy h1 {
  max-width: 8.1ch;
  font-size: clamp(4.75rem, 10.6vw, 10.8rem);
  line-height: .82;
  letter-spacing: -.078em;
}

.afh-video-hero-copy h1 span,
.afh-video-hero-copy h1 em {
  width: fit-content;
  max-width: 100%;
  padding-top: .07em;
  padding-bottom: .11em;
}

.afh-video-hero-copy h1 span:nth-child(2) {
  margin-left: 14%;
  font-size: .34em;
  line-height: 1.12;
}

.afh-video-hero-copy h1 em {
  margin-left: 21%;
  font-size: .51em;
  line-height: .95;
}

.afh-video-hero-intro > p {
  line-height: 1.58;
}

/* -------------------------------------------------------------------------- */
/* Fullscreen menu                                                             */
/* -------------------------------------------------------------------------- */

.primary-nav.studio-menu-v3 {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

.studio-menu-v3 .studio-menu-shell {
  min-height: 100svh;
  height: auto;
}

.studio-menu-v3 .nav-link {
  min-height: clamp(58px, 7.3vh, 78px) !important;
  font-size: clamp(1.85rem, 3.45vw, 4.2rem) !important;
  line-height: .94 !important;
  letter-spacing: -.06em !important;
  overflow: visible !important;
}

.studio-menu-label {
  min-width: 0;
  padding-block: .08em .12em;
}

.studio-menu-detail {
  line-height: 1.55;
}

/* -------------------------------------------------------------------------- */
/* Interior page heroes                                                        */
/* -------------------------------------------------------------------------- */

.page-hero {
  min-height: clamp(650px, 78svh, 860px) !important;
  height: auto !important;
  padding: clamp(86px, 8vw, 124px) 0 clamp(72px, 6.4vw, 96px) !important;
}

.page-hero .container {
  min-width: 0;
  padding-bottom: .1em;
}

.breadcrumbs {
  margin-bottom: clamp(28px, 3.6vw, 52px) !important;
}

.page-hero h1 {
  max-width: 11.8ch !important;
  font-size: clamp(3.9rem, 7.5vw, 8.75rem) !important;
  line-height: .9 !important;
  letter-spacing: -.065em !important;
  padding-bottom: .17em;
}

.page-hero .lead {
  max-width: 58ch !important;
  margin-top: 20px !important;
  font-size: clamp(.98rem, 1.12vw, 1.18rem) !important;
  line-height: 1.58 !important;
}

.page-hero--media {
  min-height: clamp(670px, 84svh, 920px) !important;
}

/* -------------------------------------------------------------------------- */
/* Main editorial headings                                                     */
/* -------------------------------------------------------------------------- */

.section-title {
  max-width: 11ch !important;
  font-size: clamp(3.4rem, 5.9vw, 6.8rem) !important;
  line-height: .9 !important;
}

.studio-prologue-copy h2 {
  font-size: clamp(4.2rem, 8.7vw, 10.2rem);
  line-height: .84;
}

.studio-prologue-side blockquote {
  line-height: 1.02;
}

.studio-act-cover h2 {
  max-width: 9.4ch;
  font-size: clamp(4rem, 8.25vw, 9.8rem);
  line-height: .84;
  letter-spacing: -.065em;
}

.studio-act-kinetic > div {
  font-size: clamp(3.8rem, 7.8vw, 8.8rem);
  line-height: .9;
}

.studio-act-intro h3 {
  font-size: clamp(3.1rem, 5.35vw, 6.2rem);
  line-height: .92;
}

.studio-act-quote {
  font-size: clamp(2.8rem, 5.1vw, 5.9rem);
  line-height: .98;
}

.studio-orientation h2 {
  max-width: 8.4ch;
  font-size: clamp(4.8rem, 9vw, 10.5rem);
  line-height: .84;
}

.recommender-head h2 {
  max-width: 9ch !important;
  font-size: clamp(3.5rem, 6vw, 7rem) !important;
  line-height: .9 !important;
}

.recommender-result h3 {
  max-width: 9ch !important;
  font-size: clamp(2.8rem, 5vw, 5.8rem) !important;
  line-height: .92 !important;
}

.value-card h3 {
  max-width: 11ch !important;
  font-size: clamp(2.35rem, 3.65vw, 4.35rem) !important;
  line-height: .94 !important;
}

.event-feature h2 {
  max-width: 9.5ch !important;
  font-size: clamp(3.5rem, 6vw, 7rem) !important;
  line-height: .9 !important;
}

.team-card h3 {
  font-size: clamp(2.35rem, 3.65vw, 4.35rem) !important;
  line-height: .92 !important;
}

.faq-question span:first-child {
  font-size: clamp(1.55rem, 2.65vw, 3.25rem) !important;
  line-height: 1 !important;
}

.callout h2 {
  max-width: 10ch !important;
  font-size: clamp(4rem, 7.4vw, 8.7rem) !important;
  line-height: .88 !important;
}

.story-copy h2 {
  max-width: 10ch !important;
  font-size: clamp(3.6rem, 6.2vw, 7.2rem) !important;
  line-height: .9 !important;
}

.catalog-content h2 {
  max-width: 10.5ch !important;
  font-size: clamp(3.2rem, 5.5vw, 6.35rem) !important;
  line-height: .91 !important;
}

.location-content h3 {
  max-width: 10.5ch !important;
  font-size: clamp(3rem, 4.8vw, 5.6rem) !important;
  line-height: .92 !important;
}

.team-person h2 {
  max-width: 10.5ch !important;
  font-size: clamp(3.5rem, 5.9vw, 6.8rem) !important;
  line-height: .9 !important;
}

.agenda-main h2 {
  font-size: clamp(2rem, 3.15vw, 3.8rem) !important;
  line-height: .94 !important;
}

.news-card h2 {
  font-size: clamp(2rem, 3vw, 3.55rem) !important;
  line-height: .94 !important;
}

.form-aside h2 {
  font-size: clamp(2.7rem, 4.1vw, 4.8rem) !important;
  line-height: .92 !important;
}

.form-step h2 {
  font-size: clamp(3rem, 4.8vw, 5.5rem) !important;
  line-height: .92 !important;
}

.contact-info h2 {
  font-size: clamp(3.25rem, 5.35vw, 6.15rem) !important;
  line-height: .9 !important;
}

.footer-claim h2 {
  max-width: 10.5ch !important;
  font-size: clamp(4rem, 7.2vw, 8.4rem) !important;
  line-height: .88 !important;
}

.footer-newsletter h3 {
  font-size: clamp(2rem, 3vw, 3.5rem) !important;
  line-height: .94 !important;
}

.footer-brand strong {
  font-size: clamp(4.2rem, 7vw, 7.7rem);
  line-height: .88;
}

/* -------------------------------------------------------------------------- */
/* Tablet                                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .afh-video-hero-copy h1 {
    max-width: 8.4ch;
    font-size: clamp(4.7rem, 11.8vw, 8.7rem);
  }

  .studio-menu-v3 .nav-link {
    font-size: clamp(1.8rem, 4.4vw, 3.8rem) !important;
  }

  .page-hero h1 {
    max-width: 12.5ch !important;
    font-size: clamp(3.7rem, 8.5vw, 7.2rem) !important;
  }
}

@media (max-width: 820px) {
  h1,
  h2,
  h3,
  h4 {
    letter-spacing: -.052em;
  }

  .studio-menu-v3 .nav-link {
    min-height: 62px !important;
    font-size: clamp(2rem, 7.7vw, 3.65rem) !important;
    line-height: .96 !important;
  }

  .afh-video-hero-copy h1 {
    max-width: 8.8ch;
    font-size: clamp(4.05rem, 13vw, 7rem);
    line-height: .85;
  }

  .afh-video-hero-copy h1 span:nth-child(2) { margin-left: 10%; }
  .afh-video-hero-copy h1 em { margin-left: 15%; }

  .page-hero {
    min-height: 620px !important;
    padding: 74px 0 66px !important;
  }

  .page-hero h1 {
    max-width: 100% !important;
    font-size: clamp(3.15rem, 10.8vw, 5.65rem) !important;
    line-height: .92 !important;
    letter-spacing: -.058em !important;
  }

  .page-hero .lead {
    margin-top: 18px !important;
    font-size: 1rem !important;
  }

  .section-title {
    max-width: 12ch !important;
    font-size: clamp(3rem, 9vw, 5.25rem) !important;
  }

  .studio-prologue-copy h2 {
    font-size: clamp(3.7rem, 10.5vw, 6.4rem);
    line-height: .87;
  }

  .studio-act-cover h2 {
    max-width: 10ch;
    font-size: clamp(3.5rem, 10.8vw, 6.25rem);
    line-height: .87;
  }

  .studio-act-kinetic > div {
    font-size: clamp(3.1rem, 9.8vw, 5.6rem);
  }

  .studio-act-intro h3,
  .story-copy h2,
  .catalog-content h2,
  .team-person h2,
  .contact-info h2 {
    max-width: 12ch !important;
    font-size: clamp(3rem, 9.2vw, 5.15rem) !important;
    line-height: .92 !important;
  }

  .studio-orientation h2,
  .callout h2,
  .footer-claim h2 {
    font-size: clamp(3.7rem, 11.5vw, 6.5rem) !important;
    line-height: .9 !important;
  }

  .recommender-head h2,
  .event-feature h2,
  .form-step h2 {
    font-size: clamp(3rem, 9.7vw, 5.3rem) !important;
    line-height: .92 !important;
  }
}

/* -------------------------------------------------------------------------- */
/* Phones                                                                      */
/* -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .afh-video-hero {
    min-height: max(100svh, 690px);
  }

  .afh-video-hero-shell {
    min-height: max(100svh, 690px);
  }

  .afh-video-hero-copy {
    padding-block: 28px 20px;
  }

  .afh-video-hero-copy h1 {
    max-width: 100%;
    font-size: clamp(3.45rem, 16.2vw, 5.1rem);
    line-height: .86;
    letter-spacing: -.066em;
  }

  .afh-video-hero-copy h1 span:nth-child(2) {
    margin-left: 8%;
    font-size: .36em;
  }

  .afh-video-hero-copy h1 em {
    margin-left: 13%;
    font-size: .53em;
  }

  .studio-menu-v3 .nav-link {
    min-height: 56px !important;
    font-size: clamp(1.75rem, 8.4vw, 2.8rem) !important;
    letter-spacing: -.05em !important;
  }

  .page-hero {
    min-height: 570px !important;
    padding: 62px 0 56px !important;
  }

  .breadcrumbs {
    margin-bottom: 24px !important;
  }

  .page-hero h1 {
    font-size: clamp(2.75rem, 12.5vw, 4.35rem) !important;
    line-height: .94 !important;
    letter-spacing: -.052em !important;
    padding-bottom: .12em;
  }

  .page-hero .lead {
    max-width: 36ch !important;
    margin-top: 15px !important;
    font-size: .94rem !important;
    line-height: 1.55 !important;
  }

  .section-title {
    max-width: 100% !important;
    font-size: clamp(2.6rem, 11.7vw, 3.9rem) !important;
    line-height: .94 !important;
  }

  .studio-prologue-copy h2,
  .studio-act-cover h2,
  .studio-act-intro h3,
  .story-copy h2,
  .catalog-content h2,
  .team-person h2,
  .contact-info h2 {
    max-width: 100% !important;
    font-size: clamp(2.75rem, 12vw, 4.1rem) !important;
    line-height: .94 !important;
  }

  .studio-act-kinetic > div {
    font-size: clamp(2.7rem, 11.5vw, 3.9rem);
    line-height: .94;
  }

  .studio-act-quote {
    font-size: clamp(2.35rem, 10vw, 3.5rem);
    line-height: 1.02;
  }

  .studio-orientation h2,
  .callout h2,
  .footer-claim h2 {
    max-width: 100% !important;
    font-size: clamp(3rem, 13vw, 4.5rem) !important;
    line-height: .92 !important;
  }

  .recommender-head h2,
  .recommender-result h3,
  .event-feature h2,
  .form-step h2,
  .form-aside h2,
  .location-content h3 {
    max-width: 100% !important;
    font-size: clamp(2.65rem, 11.5vw, 4rem) !important;
    line-height: .94 !important;
  }

  .value-card h3,
  .team-card h3,
  .agenda-main h2,
  .news-card h2,
  .footer-newsletter h3 {
    max-width: 100% !important;
    font-size: clamp(2rem, 8.8vw, 3rem) !important;
    line-height: .98 !important;
  }

  .faq-question span:first-child {
    font-size: clamp(1.45rem, 6.8vw, 2.3rem) !important;
    line-height: 1.02 !important;
  }

  .btn {
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .word-reveal .word {
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   V4.1 — Responsive content safety
   Removes the remaining sources of clipped copy on tablets and phones.
   -------------------------------------------------------------------------- */

.detail-layout,
.detail-copy,
.detail-sidebar,
.schedule-wrap,
.catalog-card,
.catalog-content,
.team-person,
.team-person-copy,
.contact-grid,
.form-shell {
  min-width: 0;
  max-width: 100%;
}

/* Keep the button fill effect inside the button without increasing its
   measured scroll height. */
.btn::before {
  transform: scaleY(0) !important;
  transform-origin: 50% 100%;
}

.btn:hover::before,
.btn:focus-visible::before {
  transform: scaleY(1) !important;
}

/* Do not hide captions on touch devices where hover does not exist. */
@media (hover: none), (pointer: coarse) {
  .gallery-caption {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  /* The desktop table used a fixed 820px minimum width. On smaller screens it
     now becomes a readable list of cards instead of being clipped or forcing
     the whole formation detail column wider than the viewport. */
  .schedule-wrap {
    overflow: visible !important;
    border: 0 !important;
    background: transparent !important;
  }

  .schedule {
    display: block;
    width: 100% !important;
    min-width: 0 !important;
    border-collapse: separate;
  }

  .schedule thead {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .schedule tbody {
    display: grid;
    width: 100%;
    gap: 14px;
  }

  .schedule tr,
  .schedule td {
    display: block;
    width: 100%;
  }

  .schedule tr {
    padding: 4px 16px;
    border: 1px solid var(--studio-line, rgba(16, 15, 13, .18));
    background: var(--studio-paper-2, #f5f0e8);
  }

  .schedule td {
    display: grid;
    grid-template-columns: minmax(92px, .34fr) minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 13px 0 !important;
    border-top: 1px solid var(--studio-line, rgba(16, 15, 13, .18)) !important;
    overflow-wrap: anywhere;
  }

  .schedule td:first-child {
    border-top: 0 !important;
  }

  .schedule td::before {
    align-self: baseline;
    color: inherit;
    font-family: var(--studio-mono, monospace);
    font-size: .58rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .045em;
    text-transform: uppercase;
    opacity: .56;
  }

  .schedule td:nth-child(1)::before { content: "Parcours"; }
  .schedule td:nth-child(2)::before { content: "Jour & heure"; }
  .schedule td:nth-child(3)::before { content: "Lieu"; }
  .schedule td:nth-child(4)::before { content: "Intervenant·e"; }
  .schedule td:nth-child(5)::before { content: "Tarif annuel"; }

  .schedule strong,
  .schedule small {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .section--ink .schedule tr {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .055);
    color: #fff;
  }

  .section--ink .schedule td {
    border-color: rgba(255, 255, 255, .16) !important;
  }

  .section--ink .schedule small {
    color: rgba(255, 255, 255, .64) !important;
  }
}

@media (max-width: 540px) {
  .schedule tr {
    padding-inline: 14px;
  }

  .schedule td {
    grid-template-columns: minmax(82px, .38fr) minmax(0, 1fr);
    gap: 10px;
    font-size: .9rem;
  }

  .schedule strong {
    font-size: .96rem !important;
    line-height: 1.32;
  }
}

@media (max-width: 560px) {
  /* Leave room for the two fixed utility buttons so the season and video
     control are not visually covered at the bottom of the opening film. */
  .afh-video-hero-bottom {
    padding-inline: 58px;
  }
}

/* --------------------------------------------------------------------------
   V4.2 — Full-screen menu: always contained inside the viewport
   -------------------------------------------------------------------------- */

.primary-nav.studio-menu-v3 {
  overflow: hidden !important;
}

.studio-menu-v3 .studio-menu-shell {
  width: 100%;
  height: 100svh !important;
  min-height: 0 !important;
  padding-top: clamp(88px, 11vh, 100px) !important;
  padding-bottom: 18px !important;
  overflow: hidden;
}

.studio-menu-v3 .studio-menu-layout {
  min-height: 0;
  padding-block: clamp(14px, 2.3vh, 24px) !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}

.studio-menu-v3 .studio-menu-navigation,
.studio-menu-v3 ul,
.studio-menu-v3 .studio-menu-aside,
.studio-menu-v3 .studio-menu-preview {
  min-height: 0;
}

.studio-menu-v3 .nav-link {
  min-height: clamp(52px, 6.4vh, 66px) !important;
  font-size: clamp(1.9rem, 3.15vw, 3.8rem) !important;
  line-height: .92 !important;
}

.studio-menu-v3 .studio-menu-label {
  white-space: nowrap;
}

.studio-menu-v3 .studio-menu-preview-frame {
  min-height: 170px;
}

.studio-menu-actions > a {
  min-height: 74px;
}

.studio-menu-v3 .studio-menu-bottom {
  min-height: 30px;
  padding-top: 12px;
}

@media (max-width: 1180px) {
  .studio-menu-v3 .studio-menu-shell {
    padding-top: 86px !important;
  }

  .studio-menu-v3 .nav-link {
    min-height: clamp(52px, 6.7vh, 62px) !important;
    font-size: clamp(1.8rem, 4vw, 3.25rem) !important;
  }
}

@media (max-width: 820px) {
  .studio-menu-v3 .studio-menu-shell {
    height: 100svh !important;
    padding: 84px 20px 14px !important;
  }

  .studio-menu-v3 .studio-menu-layout {
    padding-block: 14px !important;
  }

  .studio-menu-v3 .nav-link {
    min-height: 54px !important;
    font-size: clamp(1.8rem, 6.6vw, 3.05rem) !important;
    line-height: .94 !important;
  }

  .studio-menu-v3 .studio-menu-aside {
    padding-top: 14px;
  }

  .studio-menu-v3 .studio-menu-preview-frame {
    min-height: 150px;
  }

  .studio-menu-actions > a {
    min-height: 54px;
  }

  .studio-menu-v3 .studio-menu-bottom {
    min-height: 27px;
    padding-top: 9px;
  }
}

@media (max-width: 560px) {
  .studio-menu-v3 .studio-menu-shell {
    padding: 82px 14px 12px !important;
  }

  .studio-menu-v3 .nav-link {
    min-height: 49px !important;
    font-size: clamp(1.62rem, 7.5vw, 2.35rem) !important;
    line-height: .96 !important;
  }

  .studio-menu-v3 .studio-menu-layout {
    padding-block: 10px !important;
  }

  .studio-menu-actions > a {
    min-height: 62px;
  }

  .studio-menu-v3 .studio-menu-bottom {
    padding-top: 8px;
  }
}

@media (max-height: 720px) and (min-width: 821px) {
  .studio-menu-v3 .studio-menu-shell {
    padding-top: 78px !important;
    padding-bottom: 12px !important;
  }

  .studio-menu-v3 .studio-menu-layout {
    padding-block: 10px !important;
  }

  .studio-menu-v3 .nav-link {
    min-height: 48px !important;
    font-size: clamp(1.75rem, 2.8vw, 3.2rem) !important;
  }

  .studio-menu-v3 .studio-menu-preview-frame {
    min-height: 130px;
  }

  .studio-menu-actions > a {
    min-height: 62px;
  }
}

/* Utility buttons must never cover menu labels or actions. */
body.no-scroll .floating-book,
body.no-scroll .access-toggle,
body.no-scroll .access-panel {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (min-width: 821px) {
  .studio-menu-v3 .studio-menu-layout {
    padding-block: clamp(10px, 1.5vh, 18px) !important;
  }
}

@media (max-width: 560px) {
  /* The three quick actions already expose trial, agenda and contact. The
     extra contact strip was redundant and could become cramped on 320px. */
  .studio-menu-v3 .studio-menu-bottom {
    display: none !important;
  }
}

/* Match the higher specificity of the legacy studio menu rules. */
.primary-nav.studio-menu.studio-menu-v3 .nav-link {
  min-height: clamp(52px, 6.4vh, 66px) !important;
  font-size: clamp(1.9rem, 3.15vw, 3.8rem) !important;
  line-height: .92 !important;
  letter-spacing: -.055em !important;
}

@media (max-width: 1180px) {
  .primary-nav.studio-menu.studio-menu-v3 .nav-link {
    min-height: clamp(52px, 6.7vh, 62px) !important;
    font-size: clamp(1.8rem, 4vw, 3.25rem) !important;
  }
}

@media (max-width: 820px) {
  .primary-nav.studio-menu.studio-menu-v3 .nav-link {
    min-height: 54px !important;
    font-size: clamp(1.8rem, 6.6vw, 3.05rem) !important;
    line-height: .94 !important;
  }
}

@media (max-width: 560px) {
  .primary-nav.studio-menu.studio-menu-v3 .nav-link {
    min-height: 49px !important;
    font-size: clamp(1.62rem, 7.5vw, 2.35rem) !important;
    line-height: .96 !important;
    letter-spacing: -.045em !important;
  }
}

@media (max-height: 720px) and (min-width: 821px) {
  .primary-nav.studio-menu.studio-menu-v3 .nav-link {
    min-height: 48px !important;
    font-size: clamp(1.75rem, 2.8vw, 3.2rem) !important;
  }
}

/* Desktop studio rules forced section headings into two columns even on
   phones. This is the source of the title/paragraph collision seen around
   Horaires, Équipe, Galerie and other section introductions. */
@media (max-width: 900px) {
  .section-head {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 22px !important;
    margin-bottom: clamp(42px, 9vw, 68px) !important;
  }

  .section-head > * {
    min-width: 0;
    max-width: 100%;
  }

  .section-head .section-intro {
    justify-self: start;
    max-width: 48ch !important;
  }
}

/* --------------------------------------------------------------------------
   V4.3 — Form controls and decorative overflow
   -------------------------------------------------------------------------- */

/* Radio buttons are visually represented by their adjacent labels. The base
   form rule gave the invisible native input a 100% width while it remained
   absolutely positioned, which enlarged the form's internal scroll area and
   made some controls appear cut on narrow screens. Keep the native control
   accessible without letting it affect the layout. */
.choice-chip {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

.choice-chip > input {
  position: absolute !important;
  width: 1px !important;
  min-width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}

.choice-chip > span {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.form-main,
.form-step,
.form-grid,
.form-actions,
.choice-list {
  min-width: 0;
  max-width: 100%;
}

.form-field input:not([type="checkbox"]):not([type="radio"]),
.form-field select,
.form-field textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* The horse illustration intentionally exceeds its frame on desktop. On
   phones and tablets it is clipped locally so it cannot create any hidden
   horizontal overflow around the accompanying text. */
@media (max-width: 900px) {
  .story-media {
    overflow: clip;
  }
}
