.motion-shell{--motion-layout:stack;--motion-fit:height;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;width:min(1600px,96vw);margin:auto;padding:1rem 0;box-sizing:border-box}
.motion-shell .booking-header{margin-bottom:0}.motion-shell .booking-header p{margin:.3rem 0 0}
.motion-screen{width:min(100%,var(--motion-film-width,100%));margin-inline:auto;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius,14px);box-shadow:var(--shadow);background:var(--bg)}
.motion-screen canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:pointer;direction:ltr}
.motion-screen{position:relative}
.motion-video-toggle{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:3.5em;height:3.5em;border-radius:50%;display:grid;place-items:center;padding:.8em;opacity:.9}
.motion-video-toggle svg{width:100%;height:100%;fill:currentColor}
.motion-video-toggle[hidden],.motion-video-toggle:not([data-playing=true]) .motion-pause-icon,.motion-video-toggle[data-playing=true] .motion-play-icon{display:none}
.motion-video-toggle:focus-visible{outline:3px solid var(--cream);outline-offset:3px;opacity:1}
.motion-controls{width:min(100%,var(--motion-film-width,100%));max-width:none;margin:0 auto;padding:1rem;box-sizing:border-box}
.motion-chapters,.motion-explore{display:flex;gap:.7rem;align-items:center;flex-wrap:wrap}
.motion-chapters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:1rem 0}
.motion-chapters button{min-width:0;white-space:normal;overflow-wrap:anywhere}
.motion-explore{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));gap:.35rem .7rem;align-items:stretch}
.motion-explore>.booking-field{grid-row:span 2;grid-template-rows:subgrid;min-width:0;max-width:none;margin:0}
.motion-explore>.booking-field>span{line-height:1.25}
#weight-value,#day-time{display:inline;white-space:nowrap;font-variant-numeric:tabular-nums}
.motion-controls input[type=range]{padding:0;accent-color:var(--copper2);direction:ltr}
.motion-controls .booking-help:last-child{margin-bottom:0}
#download{color:var(--cream);text-decoration:none}
#download svg{width:1.5em;height:1.5em}
@media(max-width:600px){.motion-shell .booking-header{align-items:flex-start;flex-direction:column}.motion-chapters{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Sur mobile, la hauteur disponible ne doit jamais réduire la largeur du film. */
@media(max-width:600px), (hover:none) and (pointer:coarse){
  .motion-shell{--motion-fit:width}
  .motion-screen,.motion-controls{width:100%;min-width:0}
}
@media(min-width:1100px) and (max-height:850px), (min-width:1100px) and (min-aspect-ratio:2/1), (min-width:700px) and (max-width:1099px) and (max-height:750px) and (orientation:landscape), (hover:none) and (pointer:coarse) and (orientation:landscape){
  .motion-shell{--motion-layout:side;grid-template-columns:minmax(0,1fr) clamp(18rem,26vw,22rem);align-items:start}
  .motion-shell .booking-header{grid-column:1/-1}
  .motion-screen{grid-column:1;grid-row:2;min-width:0}
  .motion-controls{grid-column:2;grid-row:2;width:100%;min-width:0;margin:0}
  .motion-chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 0 1rem}
  .motion-chapters button{min-width:0;white-space:normal;overflow-wrap:anywhere}
  .motion-explore{grid-template-columns:minmax(0,1fr);gap:.8rem}
  .motion-explore>.booking-field{grid-row:auto;grid-template-rows:auto auto;gap:.35rem}
}
@media(min-width:700px) and (max-width:1099px) and (max-height:750px) and (orientation:landscape), (hover:none) and (pointer:coarse) and (orientation:landscape){
  .motion-shell{--motion-fit:landscape;height:100vh;height:100dvh;grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1fr) clamp(16rem,32vw,22rem);gap:.65rem;padding:.65rem 0}
  .motion-shell .booking-header{flex-direction:row;align-items:center;min-width:0}
  .motion-screen{width:min(100%,var(--motion-film-width,100%))}
  .motion-controls{height:auto;max-height:100%;min-height:0;overflow-y:auto;padding:.5rem;overscroll-behavior:contain}
  .motion-chapters{gap:.35rem;margin:0 0 .5rem}
  .motion-chapters button{padding:.4rem .5rem}
  .motion-controls .booking-help{margin:.5rem 0}
  .motion-explore{gap:.4rem}
}