/* Film d'animation MPI (3D) — styles extraits de home.css pour être utilisés sur la page Entreprises et ONG. */

/* --- Héro : film --- */
.hero-film {
  --night: #07111F;
  position: relative; overflow: hidden; isolation: isolate;
  min-height: clamp(560px, calc(100svh - var(--header-h)), 860px);
  display: flex; flex-direction: column; justify-content: center;
  background: var(--night); color: #F2EEE6;
}
.film-stage, .film-backdrop, .film-shade, .film-fade { position: absolute; inset: 0; }
.film-stage { z-index: 0; }
.film-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-film.has-video .film-backdrop { display: none; }
@media (prefers-reduced-motion: reduce) { .film-video { display: none; } .hero-film.has-video .film-backdrop { display: block; } }
/* Décor de secours (sans WebGL, ou avant le chargement) : nuit et grille lumineuse en perspective */
.film-backdrop {
  z-index: 0;
  background:
    radial-gradient(60% 50% at 72% 58%, rgba(244, 166, 42, .22), transparent 60%),
    radial-gradient(80% 70% at 70% 100%, rgba(30, 90, 168, .45), transparent 70%),
    var(--night);
}
.film-backdrop::after {
  content: ""; position: absolute; left: -50%; right: -50%; bottom: -10%; height: 60%;
  background:
    linear-gradient(rgba(76, 201, 182, .35) 1px, transparent 1px) 0 0 / 60px 60px,
    linear-gradient(90deg, rgba(76, 201, 182, .35) 1px, transparent 1px) 0 0 / 60px 60px;
  transform: perspective(500px) rotateX(62deg); transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 90%); mask-image: linear-gradient(to top, #000 10%, transparent 90%);
}
.hero-film.is-live .film-backdrop { display: none; }
.film-shade { z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 17, 31, .88) 0%, rgba(7, 17, 31, .55) 38%, rgba(7, 17, 31, 0) 64%),
              linear-gradient(0deg, rgba(7, 17, 31, .75) 0%, rgba(7, 17, 31, 0) 32%); }
@media (max-width: 959.98px) { .film-shade { background: linear-gradient(0deg, rgba(7, 17, 31, .92) 0%, rgba(7, 17, 31, .55) 55%, rgba(7, 17, 31, .2) 100%); } }
.film-fade { z-index: 2; background: #000; opacity: 0; pointer-events: none; }

.film-content { position: relative; z-index: 3; padding-top: 48px; padding-bottom: 120px; }
@media (max-width: 959.98px) { .film-content { margin-top: auto; padding-bottom: 104px; } }
.film-caps { position: relative; min-height: 220px; max-width: 640px; }
@media (max-width: 599.98px) { .film-caps { min-height: 200px; } }
.cap { position: absolute; left: 0; right: 0; bottom: 0; opacity: 0; will-change: opacity, transform; }
.hero-film:not(.is-live) .cap[data-final], .hero-film.is-static .cap[data-final] { opacity: 1; }
.cap-over { margin: 0 0 12px; font-size: 13px; line-height: 16px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #4CC9B6; }
.cap-big { margin: 0; font-size: clamp(36px, 6.2vw, 64px); line-height: 1.05; font-weight: 800; letter-spacing: -.02em; color: #fff; text-wrap: balance; }
.cap-big em { font-style: normal; color: var(--sun); }
.cap-sub { margin: 14px 0 0; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.5; color: #C9D5E6; max-width: 34em; }
.cap-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.cap-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill);
  background: rgba(76, 201, 182, .14); border: 1px solid rgba(76, 201, 182, .45); color: #fff; font-weight: 700; font-size: 15px; }
.cap-chips b { font-size: 12px; color: #4CC9B6; }
.cap-lockup { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.cap-lockup img { width: 44px; height: 44px; }
.cap-lockup span { font-size: 20px; line-height: 1.1; font-weight: 800; color: #fff; }
.cap-lockup i { display: block; font-style: normal; font-size: 12px; letter-spacing: .3em; color: #4CC9B6; margin-top: 4px; }
.film-lead { margin: 22px 0 0; font-size: 18px; line-height: 28px; color: #E3EAF4; font-weight: 500; }
.hero-film .btn-row { margin-top: 22px; }

.film-controls { position: absolute; left: 0; right: 0; bottom: 20px; z-index: 4; display: flex; align-items: center; gap: 16px; }
.film-scenes { display: flex; gap: 6px; flex: 1; max-width: 640px; }
.film-scenes button {
  flex: 1; min-height: 44px; padding: 18px 0 6px; border: 0; background: transparent; cursor: pointer;
  font: 600 12px/1 var(--font); color: rgba(242, 238, 230, .65); text-align: left; position: relative; transition: color .2s;
}
.film-scenes button::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .22); transition: background .3s; }
.film-scenes button.is-on { color: #fff; }
.film-scenes button.is-on::before { background: var(--sun); }
.film-scenes button:hover { color: #fff; }
@media (max-width: 599.98px) { .film-scenes button { font-size: 0; } }
.film-toggle {
  flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .35); color: #fff;
}
.film-toggle:hover { background: rgba(255, 255, 255, .2); }
.film-toggle svg { width: 18px; height: 18px; fill: currentColor; }
.film-toggle .i-play, .film-toggle.is-paused .i-pause { display: none; }
.film-toggle.is-paused .i-play { display: block; }
.hero-film.is-static .film-controls { display: none; }
.scroll-cue { position: absolute; z-index: 4; right: max(var(--gutter), calc(50% - 600px)); bottom: 82px; width: 26px; height: 42px; border: 2px solid rgba(255, 255, 255, .55); border-radius: 14px; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: cue 1.8s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 80% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 959.98px) { .scroll-cue { display: none; } }


/* Film placé dans une section (encadré arrondi, comme sur l'ancienne section Méthode de l'accueil). */
.x-ong-film{position:relative;z-index:2;padding-bottom:64px}
.x-ong-film .hero-film{border-radius:28px;overflow:hidden;min-height:560px}
@media (max-width:600px){.x-ong-film .hero-film{min-height:480px}.x-ong-film{padding-bottom:40px}}

/* Film en arrière-plan d'un en-tête : [mpi_film bg="1"], sans textes ni commandes */
.x-filmbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.x-filmbg .hero-film{position:absolute;inset:0;min-height:0;height:100%;border-radius:0;margin:0}
.hero-film.is-bg .film-content,.hero-film.is-bg .film-caps,.hero-film.is-bg .film-controls{display:none!important}
.x-hero.is-filmbg{position:relative;overflow:hidden}
.x-hero.is-filmbg::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(11,34,64,.93) 0%,rgba(11,34,64,.72) 42%,rgba(11,34,64,.12) 76%)}
.x-hero.is-filmbg .x-wrap{position:relative;z-index:2;grid-template-columns:minmax(0,680px)}
.x-hero.is-filmbg .x-hero-grid{min-height:540px;align-content:center}
@media (max-width:900px){.x-hero.is-filmbg::after{background:linear-gradient(180deg,rgba(11,34,64,.5) 0%,rgba(11,34,64,.9) 100%)}.x-hero.is-filmbg .x-hero-grid{min-height:460px}}