/* The supplied film is rendered frame by frame, with the original 23.5° tilt. */
.hero-scroll-track,.hero-sticky,.hero-visual-slot,.hero-copy-stack{display:contents}
.hero-implant-canvas,.hero-mobile-details,.hero-handoff{display:none}
.js-video{--hero-header-height:7.05394vw;--hero-pin-height:calc(100svh - var(--hero-header-height));--hero-scroll-distance:900px;scroll-padding-top:var(--header-visible-height,var(--hero-header-height))}
.js-video #accueil{scroll-margin-top:calc(var(--hero-header-height) - var(--header-visible-height,var(--hero-header-height)))}
.js-video #accueil .hero-scroll-track{display:block;position:relative;height:calc(var(--hero-pin-height) + var(--hero-scroll-distance))}
.js-video #accueil .hero-sticky{display:grid;place-items:center;position:sticky;top:var(--hero-header-height);height:var(--hero-pin-height);overflow:visible;isolation:isolate;background:#f2d9b9 url('assets/hero-decor.png') center/100% 100% no-repeat}
/* Extend only the decor into the header's reserved space; content and scroll geometry stay fixed. */
.js-video #accueil .hero-sticky::before{content:"";position:absolute;inset:calc(var(--header-visible-height,var(--hero-header-height)) - var(--hero-header-height)) 0 0;background:inherit;z-index:-1;pointer-events:none;transition:top .24s ease}
.js-video #accueil .hero-scene{width:100%;height:100%;aspect-ratio:auto;min-height:0;background:none;overflow:visible}
.js-video #accueil .hero-doctor-name{top:8.5%;font-size:min(2.766251cqw,4.5svh)}
.js-video #accueil h1{top:17%;font-size:min(4.426003cqw,7.5svh)}
.js-video #accueil .hero-contact-details{top:39%;font-size:clamp(18px,1.4cqw,24px);line-height:1.45}
.js-video #accueil .hero-contact-label{font-size:clamp(16px,1.18cqw,19px);line-height:1.5}
.js-video #accueil .hero-phone-block{margin-top:18px}
.js-video #accueil .hero-copy-stack{display:block;position:absolute;left:64.591978%;top:31%;width:30.912863%;z-index:2}
.js-video #accueil .hero-introduction{position:static;width:auto;font-size:clamp(16px,1.18cqw,19px);line-height:1.37}
.js-video #accueil .hero-actions{position:static;width:min(100%,367px);margin-top:24px;gap:14px}
.js-video #accueil .hero-actions a{height:46px;min-height:44px;font-size:15px}
.js-video #accueil .hero-signature{left:auto;right:24px;top:auto;bottom:40px;width:min(13.7621cqw,160px)}
.js-video #accueil .hero-implant-shadow{display:none}
.js-video #accueil .hero-visual-slot{display:block;position:absolute;inset:0;pointer-events:none}
.js-video #accueil .hero-implant{left:calc(52% - var(--hero-pin-height)*.16);top:18%;width:calc(var(--hero-pin-height)*.58);aspect-ratio:4/5}
.js-video #accueil .hero-implant-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;opacity:0}
.js-video #accueil .hero-implant-poster{transition:none}
.js-video #accueil.video-ready .hero-implant-canvas{opacity:1}
.js-video #accueil.video-ready .hero-implant-poster{opacity:0}
#accueil .hero-implant img.is-assembled{clip-path:none}
.js-video #accueil .hero-handoff{display:block;position:absolute;inset:auto 0 0;height:34px;background:linear-gradient(transparent,#193f50);opacity:var(--hero-handoff,0);pointer-events:none;z-index:4}

@media(max-width:1200px),(max-height:720px){
  .js-video{--hero-header-height:88px;--hero-scroll-distance:700px}
  .js-video #accueil .hero-sticky{background-size:cover;background-position:42% center}
  .js-video #accueil .hero-scene{width:100%;height:100%;aspect-ratio:auto;padding:24px 36px 28px;display:grid;grid-template-columns:1fr;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:'name' 'title' 'implant' 'actions';gap:12px;overflow:hidden}
  .js-video #accueil .hero-copy-stack{display:contents}
  .js-video #accueil .hero-doctor-name{position:static;grid-area:name;font-size:28px;line-height:1.2}
  .js-video #accueil h1{position:static;grid-area:title;font-size:clamp(30px,5vw,42px);line-height:1.08;margin:0;letter-spacing:-.4px}
  .js-video #accueil h1 span{white-space:normal}
  .js-video #accueil .hero-visual-slot{position:relative;inset:auto;grid-area:implant;width:100%;height:100%;min-height:0;container-type:size}
  .js-video #accueil .hero-implant{position:absolute;left:50%;top:50%;width:min(94cqw,88cqh);height:auto;max-width:none;margin:0;transform:translate(-50%,-50%) rotate(23.5deg);transform-origin:center}
  .js-video #accueil .hero-actions{position:static;grid-area:actions;display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:820px;justify-self:center;gap:12px;margin:0;z-index:5}
  .js-video #accueil .hero-actions a{height:48px;min-height:44px;font-size:15px;white-space:normal;text-align:center;padding:8px 12px;background:#fff9ed80}
  .js-video #accueil .hero-mobile-details{display:grid;gap:28px;padding:34px 36px 40px;background:#f4e0c8;font-family:HeroQuestrial,'Century Gothic',sans-serif;color:#203239}
  .js-video #accueil .hero-mobile-details>*{grid-area:auto}
  .js-video #accueil .hero-mobile-details .hero-introduction{position:static;width:auto;font-size:18px;line-height:1.55;margin:0;text-align:left}
  .js-video #accueil .hero-mobile-details .hero-contact-details{position:static;display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0;margin:0;font-size:18px;line-height:1.5}
  .js-video #accueil .hero-mobile-details .hero-phone-block{margin:0}
  .js-video #accueil .hero-mobile-details .hero-contact-label{font-size:16px;line-height:1.5;margin-bottom:3px}
  .js-video #accueil .hero-mobile-details .hero-signature{position:static;width:170px;margin:0 0 0 auto}
  .js-video #accueil .hero-handoff{height:28px;background:linear-gradient(transparent,#f4e0c8)}
}
@media(max-width:800px){
  .js-video{--hero-pin-height:calc(100svh - var(--hero-header-height) - var(--hero-footer-height,66px))}
  #accueil+.intro-bar .text-link{display:inline-flex;margin-top:8px;font-size:.85rem}
}
@media(max-width:600px){
  .js-video{--hero-header-height:80px;--hero-scroll-distance:550px}
  .js-video #accueil .hero-scene{padding:18px 24px 20px;gap:10px}
  .js-video #accueil .hero-doctor-name{font-size:22px}
  .js-video #accueil h1{font-size:clamp(26px,7.2vw,34px);line-height:1.08}
  .js-video #accueil .hero-actions{grid-template-columns:1fr;gap:8px}
  .js-video #accueil .hero-actions a{height:44px;font-size:14px}
  .js-video #accueil .hero-mobile-details{padding:30px 24px 34px;gap:24px}
  .js-video #accueil .hero-mobile-details .hero-introduction{font-size:17px}
  .js-video #accueil .hero-mobile-details .hero-contact-details{font-size:16px;gap:14px}
}
@media(max-height:720px) and (min-aspect-ratio:1/1){
  .js-video #accueil .hero-scene{padding:12px 22px;grid-template-columns:1.15fr 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'name implant' 'title implant' 'actions actions';gap:8px 18px}
  .js-video #accueil .hero-doctor-name{font-size:18px}
  .js-video #accueil h1{font-size:clamp(21px,4vw,29px)}
  .js-video #accueil .hero-actions{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.js-video{--hero-scroll-distance:0px}.hero-implant-poster{transition:none!important}.js-video #accueil .hero-sticky::before{transition:none}}