/* Présence : une ouverture courte, puis le film rejoint le noir de la page. */
.cinematic { --arrival: cubic-bezier(.16,1,.3,1); }
.cinematic ::selection { background: #eee; color: #111; }
.cinematic .shade {
  background: linear-gradient(180deg,rgba(0,0,0,.57),rgba(0,0,0,.57) 48%,rgba(0,0,0,.65) 70%,#000 100%);
}
.cinematic .hero-footer { border-top-color: transparent; }
.cinematic .human-intro { padding-top: 70px; padding-bottom: 100px; }
.cinematic .intro h1 { letter-spacing: -.035em; }
.cinematic .hero-channel-note { color: #eee; }
.cinematic .request { transition: background 160ms, transform 160ms var(--arrival); }
.cinematic .request svg { transition: transform 240ms var(--arrival); }
.cinematic .request:hover svg { transform: translateX(4px); }
.cinematic .request:active { transform: scale(.98); }
.cinematic .nav-link { position: relative; border: 0; }
.cinematic .nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 7px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 240ms var(--arrival);
}
.cinematic .nav-link:hover::after,.cinematic .nav-link:focus-visible::after { transform: scaleX(1); }
.cinematic .channel-links a { color: #ddd; transition: color 160ms, opacity 160ms; }
.cinematic .channel-links a:hover { background: none; color: white; }
.cinematic .channel-links:has(a:hover) a:not(:hover) { opacity: .6; }
.cinematic .large-contact span { transition: transform 240ms var(--arrival); }
.cinematic .large-contact:hover span { transform: translate(3px,-3px); }
.cinematic .faq-list details { padding: 0; overflow: clip; }
.cinematic .faq-list summary { padding: 26px 6px; min-height: 76px; text-wrap: pretty; transition: color 150ms; }
.cinematic .faq-list summary:hover { color: #c5c5c5; }
.cinematic .faq-list summary:focus-visible { outline-offset: -3px; }
.cinematic .faq-list summary::after {
  content: ''; width: 16px; height: 16px; flex-shrink: 0;
  background: linear-gradient(#ddd,#ddd) center/100% 1px no-repeat,linear-gradient(#ddd,#ddd) center/1px 100% no-repeat;
  transition: transform 240ms var(--arrival);
}
.cinematic .faq-list details[open] summary::after { content: ''; transform: rotate(45deg); }
.cinematic .faq-list p { margin: 0 34px 26px 6px; }
.cinematic .brand-ending { padding-top: 100px; }
@keyframes signature-enter { from { opacity: .2; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@keyframes title-enter { from { clip-path: inset(0 0 100%); transform: translateY(12px); } to { clip-path: inset(-8% -2% -8%); transform: none; } }
@keyframes contact-enter { from { opacity: .65; } to { opacity: 1; } }
@media(prefers-reduced-motion:no-preference) {
  .cinematic .header .brand { animation: signature-enter 480ms var(--arrival) both; }
  .cinematic .intro h1 { animation: title-enter 700ms 70ms var(--arrival) both; }
  .cinematic .service-intro { animation: contact-enter 500ms 120ms both; }
  .cinematic .intro .request { animation: contact-enter 380ms 180ms both; }
  .cinematic .hero-channel-note { animation: contact-enter 500ms 240ms both; }
}
@media(max-width:700px) {
  .cinematic .hero { min-height: 720px; }
  .cinematic .shade { background: linear-gradient(180deg,rgba(0,0,0,.4),rgba(0,0,0,.45) 42%,rgba(0,0,0,.55) 66%,#000 100%); }
  .cinematic .header { gap: 12px; }
  .cinematic .header nav { gap: 14px; }
  .cinematic .header .nav-link,.cinematic .brand span,.cinematic .ending-meta,.cinematic .film-caption.discover { font-size: 11px; }
  .cinematic .human-intro { padding-top: 42px; padding-bottom: 68px; }
  .cinematic .faq-list summary { padding: 22px 6px; }
  .cinematic .brand-ending { padding-top: 65px; }
  .cinematic .large-contact { font-size: clamp(21px,6vw,26px); }
}
@media(prefers-reduced-motion:reduce) {
  .cinematic *, .cinematic *::after { animation: none!important; transition: none!important; }
  html:has(.cinematic) { scroll-behavior: auto; }
}