/* Animation « Nos services » de l'accueil (canvas, scroll-scrub). Source : animation-site-services_2026-09-24.html */
@font-face{font-family:'Kalam';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/kalam-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Kalam';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/kalam-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
.mcs-hero, .mcs-hero *, .mcs-hero *::before, .mcs-hero *::after { box-sizing: border-box; }
.mcs-hero { color: var(--mcs-ink); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
  :root {
    --mcs-paper: #0E2424;
    --mcs-ink: #F5EFE3;
    --mcs-sapin: #2C5F5F;
    --mcs-gold: #C9A961;
  }

  /* ---------- Module : s'adapte à la taille de son parent ---------- */
  .mcs-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 600px;
    background: var(--mcs-paper);
    isolation: isolate;
  }
  .mcs-hero[data-scrub="true"] { height: 600vh; height: 600svh; }
  .mcs-hero__stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
  .mcs-hero[data-mode="steps"] { height: 600vh; height: 600svh; }
  /* Au défilement : ~1,2 écran par service */
  .mcs-hero[data-mode="scroll"] { height: 1000vh; height: 1000svh; }
  .mcs-hero[data-mode="steps"] .mcs-hero__stage,
  .mcs-hero[data-mode="scroll"] .mcs-hero__stage { position: sticky; top: var(--mcs-nav, 0px); height: calc(100vh - var(--mcs-nav, 0px)); height: calc(100svh - var(--mcs-nav, 0px)); min-height: 540px; }
  /* Lien pour sauter l'animation, discret, en haut à droite */
  .mcs-hero__skip {
    position: absolute; top: clamp(34px, 4.2vmin, 48px); right: clamp(40px, 4vw, 64px); z-index: 2;
    font: 700 clamp(13px, 1.7vmin, 16px)/1 "Kalam", "Segoe Print", cursive; color: rgba(245,239,227,.55);
    text-decoration: none; padding: 8px 10px; border-radius: 6px; transition: color .2s ease;
  }
  .mcs-hero__skip:hover { color: var(--mcs-ink); }
  .mcs-hero__skip:focus-visible { outline: 2px solid var(--mcs-sapin); outline-offset: 2px; }
  .mcs-hero[data-mode="steps"] .mcs-hero__play,
  .mcs-hero[data-mode="steps"] .mcs-hero__nav,
  .mcs-hero[data-mode="scroll"] .mcs-hero__play,
  .mcs-hero[data-mode="scroll"] .mcs-hero__nav { display: none; }  /* pas d'onglets de chapitres : la section ne doit pas faire « lecteur vidéo » */
  .mcs-hero[data-scrub="true"] .mcs-hero__stage { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 600px; }
  .mcs-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; }

  /* Navigation des chapitres (vrais boutons, accessibles au clavier) */
  .mcs-hero__nav {
    position: absolute; left: 50%; bottom: max(22px, 4.2vmin); transform: translateX(-50%);
    display: flex; align-items: center; gap: clamp(4px, 1.4vw, 18px);
    max-width: calc(100% - 48px);
    font: 700 clamp(13px, 1.9vmin, 18px)/1 "Kalam", "Segoe Print", cursive;
  }
  .mcs-hero__nav button {
    appearance: none; border: 0; background: none; cursor: pointer;
    font: inherit; color: rgba(27,27,26,.42); padding: 8px 4px 10px; position: relative; white-space: nowrap;
    transition: color .25s ease;
  }
  .mcs-hero__nav button:hover { color: rgba(27,27,26,.8); }
  .mcs-hero__nav button[aria-current="true"] { color: var(--mcs-ink); }
  .mcs-hero__nav button::after {
    content: ""; position: absolute; left: 4px; right: 4px; bottom: 3px; height: 3px; border-radius: 2px;
    background: var(--mcs-gold); transform-origin: left; transform: scaleX(0);
  }
  .mcs-hero__nav button[aria-current="true"]::after { transform: scaleX(var(--p, 0)); }
  .mcs-hero__nav button:focus-visible { outline: 2px solid var(--mcs-sapin); outline-offset: 2px; border-radius: 4px; }
  .mcs-hero__nav .n { margin-right: .35em; color: var(--mcs-gold); }
  .mcs-hero__nav .s { display: none; }
  .mcs-hero__nav .mcs-hero__play {
    width: 34px; height: 34px; padding: 0; margin-left: 6px; border-radius: 50%;
    border: 1.5px solid var(--mcs-ink); color: var(--mcs-ink); display: grid; place-items: center;
  }
  .mcs-hero__nav .mcs-hero__play::after { display: none; }
  .mcs-hero__play svg { width: 12px; height: 12px; fill: currentColor; }
  @media (max-width: 760px) {
    .mcs-hero__nav .l, .mcs-hero__nav .n { display: none; }
    .mcs-hero__nav .s { display: inline; }
  }
  .mcs-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* En mode défilement, le bouton lecture/pause n'a pas de sens : c'est la molette qui pilote */
  .mcs-hero[data-scrub="true"] .mcs-hero__play { display: none; }

  /* Rangée de liens vers les pages services, juste sous l'animation */
  .mcs-services-links { background: var(--mcs-paper); padding: 1.5rem 1.5rem 4rem; }
  .mcs-services-links ul { list-style: none; margin: 0 auto; padding: 0; max-width: 1320px; display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 1rem; }
  .mcs-services-links .container-scroll-cta { position: static; transform: none; }