/* V30.165 · Mobile editorial pass — compact, image-led, stable on iOS Safari. */

@media (max-width: 760px) {
  /* Home — explain credits in four quick editorial rows. */
  #home-page .credits-explainer {
    padding: 52px 18px 42px !important;
    background: #f4eee6 !important;
  }
  #home-page .credits-explainer-head {
    margin: 0 0 22px !important;
  }
  #home-page .credits-explainer-head h2 {
    max-width: 330px !important;
    font-size: 0 !important;
  }
  html[lang="fr"] #home-page .credits-explainer-head h2::after { content: "Les crédits, à ton rythme."; }
  html[lang="en"] #home-page .credits-explainer-head h2::after { content: "Credits, at your pace."; }
  #home-page .credits-explainer-head h2::after {
    display: block;
    font-size: clamp(34px, 10.5vw, 44px);
    line-height: .92;
    letter-spacing: -.055em;
  }
  #home-page .credits-explainer-head > p {
    margin: 12px 0 0 !important;
    font-size: 0 !important;
  }
  html[lang="fr"] #home-page .credits-explainer-head > p::after { content: "Choisis une formule, puis utilise tes crédits selon ton projet."; }
  html[lang="en"] #home-page .credits-explainer-head > p::after { content: "Choose a plan, then use your credits where the project needs them."; }
  #home-page .credits-explainer-head > p::after {
    display: block;
    max-width: 340px;
    font-size: 14px;
    line-height: 1.48;
    color: rgba(10, 8, 7, .64);
  }
  #home-page .credits-timeline {
    gap: 0 !important;
    border-bottom: 1px solid rgba(10, 8, 7, .14);
  }
  #home-page .credits-step {
    grid-template-columns: 38px minmax(0, 1fr) !important;
    padding: 16px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(10, 8, 7, .14) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  #home-page .credits-step-no {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    font-size: 9px !important;
    box-shadow: none !important;
  }
  #home-page .credits-step h3 { margin: 4px 0 0 !important; }
  #home-page .credits-step h3::after {
    font-size: 17px !important;
    line-height: 1.05 !important;
  }
  #home-page .credits-step p,
  #home-page .credits-explainer-note { display: none !important; }

  /* The membership title is present before any card animation can run. */
  #home-page .memberships-section .m-hdr {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  /* About — the duo photo becomes a real image block, not a cramped bubble. */
  #about-page .about-history-side {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas: "title" "dash" "orb" !important;
    gap: 18px !important;
    padding: 42px 18px 18px !important;
  }
  #about-page .history-orb,
  #about-page .history-orb:nth-child(n) {
    justify-self: stretch !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    margin: 2px 0 0 !important;
    border-radius: 18px !important;
    box-shadow: none !important;
  }
  #about-page .history-orb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 38% !important;
    transform: none !important;
  }

  /* Projects — real posters prevent the black iOS video surface. */
  #work-page .work-video-card video {
    background: #15110e !important;
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
  }
  #work-page .gautier-videos .work-video-card video {
    aspect-ratio: 4 / 3 !important;
  }

  /* Studios — one consistent rhythm: image, then name and details. */
  #studios-page .studio-block .studio-art,
  #studios-page .studio-block.reverse .studio-art { order: 1 !important; }
  #studios-page .studio-block .studio-copy,
  #studios-page .studio-block.reverse .studio-copy { order: 2 !important; }
  #studios-page .studio-gallery .studio-main,
  #studios-page .studio-art > img {
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }
  #studios-page .studio-copy { padding-top: 4px !important; }
  #studios-page .studio-copy h3 {
    font-size: clamp(38px, 12vw, 54px) !important;
    margin-bottom: 7px !important;
  }
  #studios-page .studio-copy h4 {
    font-size: clamp(20px, 5.8vw, 26px) !important;
    margin-bottom: 15px !important;
  }
  #studios-page .studio-copy ul {
    font-size: 16px !important;
    line-height: 1.43 !important;
  }
  #studios-page .studio-status {
    display: block !important;
    margin-bottom: 12px !important;
    font-size: 9px !important;
    line-height: 1.45 !important;
  }

  /* Services — remove the stacked-card look and the dead white space. */
  #services-page .services-classic {
    padding: 0 !important;
    min-height: 0 !important;
  }
  #services-page .services-classic-visual,
  #services-page .service-production .services-classic-visual,
  #services-page .service-sync .services-classic-visual {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 10 !important;
    margin: 0 !important;
    gap: 0 !important;
  }
  #services-page .services-classic-visual img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
  }
  #services-page .services-classic-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 34%, rgba(0, 0, 0, .62));
    pointer-events: none;
  }
  #services-page .services-classic-title {
    position: absolute !important;
    z-index: 2 !important;
    top: auto !important;
    bottom: 20px !important;
    left: 18px !important;
    right: 18px !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    background: none !important;
  }
  #services-page .services-classic-title span::after { display: none !important; }
  #services-page .services-copy-block {
    padding: 30px 18px 38px !important;
  }
  #services-page .services-copy-block h2 {
    margin-bottom: 18px !important;
    font-size: 31px !important;
  }
  #services-page .services-mini-grid {
    display: block !important;
    margin-top: 16px !important;
  }
  #services-page .services-mini-grid article {
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(92px, .55fr) minmax(0, 1.45fr) !important;
    align-items: start !important;
    gap: 14px !important;
    padding: 16px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(10, 8, 7, .16) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #services-page .services-mini-grid h3 {
    margin: 0 !important;
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.08 !important;
  }
  #services-page .services-mini-grid p {
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: rgba(10, 8, 7, .66) !important;
  }
  #services-page .service-engineering .services-copy-block { padding-bottom: 24px !important; }
  #services-page .services-offer-strip {
    display: block !important;
    padding: 0 18px 46px !important;
  }
  #services-page .services-offer-card,
  #services-page .services-offer-card.dark {
    padding: 24px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(10, 8, 7, .18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #0a0807 !important;
    box-shadow: none !important;
  }
  #services-page .services-offer-card h3 { font-size: 29px !important; }
  #services-page .services-offer-card p {
    max-width: 330px !important;
    margin-bottom: 16px !important;
    font-size: 13px !important;
  }
  #services-page .services-offer-card a,
  #services-page .services-offer-card.dark a {
    min-height: 0 !important;
    padding: 0 0 5px !important;
    border-bottom: 1px solid currentColor !important;
    background: transparent !important;
    color: #0a0807 !important;
  }
  #services-page .services-offer-card a::after { content: ""; }

  /* Sync Pro — fewer layers, one action per audience, concise accordions. */
  #sync-page .sync-intro p + p { display: none !important; }
  #sync-page .sync-trigger__subtitle { display: none !important; }
  #sync-page .sync-trigger { padding: 18px 16px !important; }
  #sync-page .sync-trigger__title { font-size: 21px !important; }
  #sync-page .sync-content-box li:nth-child(n + 4) { display: none !important; }
  #sync-page .sync-offers {
    padding: 44px 18px 52px !important;
    background: #f4efe7 !important;
  }
  #sync-page .sync-offers-inner { gap: 24px !important; }
  #sync-page .sync-offer-text h2 {
    max-width: 340px !important;
    margin-bottom: 12px !important;
    font-size: clamp(38px, 11vw, 48px) !important;
  }
  #sync-page .sync-offer-text p {
    max-width: 340px !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  #sync-page .sync-offer-stack { gap: 0 !important; }
  #sync-page .sync-offer,
  #sync-page .sync-offer.dark {
    padding: 24px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(10, 8, 7, .18) !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #101010 !important;
    box-shadow: none !important;
  }
  #sync-page .sync-offer h3 { font-size: 30px !important; }
  #sync-page .sync-offer p {
    max-width: 330px !important;
    margin-bottom: 15px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  #sync-page .sync-offer-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  #sync-page .sync-btn,
  #sync-page .sync-offer.dark .sync-btn {
    min-height: 0 !important;
    padding: 0 0 5px !important;
    border: 0 !important;
    border-bottom: 1px solid currentColor !important;
    background: transparent !important;
    color: #101010 !important;
  }
  #sync-page .sync-btn::after { content: ""; }
  #sync-page .sync-catalogue-note {
    margin: 0 !important;
    color: rgba(16, 16, 16, .58) !important;
    font-size: 10px !important;
    line-height: 1.4 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
  }
}

@media (max-width: 380px) {
  #about-page .history-orb,
  #about-page .history-orb:nth-child(n) { width: 100% !important; height: auto !important; }
}

@media (prefers-reduced-motion: reduce) {
  #home-page .memberships-section .m-hdr,
  #home-page .credits-step { transition: none !important; }
}