/* film360.css · le film de présentation de FLF Corporate, joué dans la page (2/10/2026).
   Tout est en « em » : 1em = 1 % de la largeur de la scène, le film garde ses proportions partout. */
.hero.f3-a #morph{display:none}
.f3{position:absolute;right:30px;top:44%;transform:translateY(-50%);width:min(40vw,560px,58vh);aspect-ratio:1;z-index:4}
.f3-box{position:absolute;inset:0}
.f3-stage{position:absolute;inset:0;container-type:inline-size;border-radius:22px;overflow:hidden;background:#10100E;cursor:pointer;
 box-shadow:0 40px 90px -36px rgba(16,16,14,.55),0 0 0 1px rgba(16,16,14,.1);isolation:isolate;
 transition:box-shadow .5s cubic-bezier(.16,1,.3,1)}
.f3-gl{position:absolute;inset:0;width:100%;height:100%;display:block}
.f3-in{position:absolute;inset:0;font-size:1cqw;font-family:'Grotesk',Helvetica,Arial,sans-serif;line-height:1;user-select:none;-webkit-user-select:none}
.f3-sc{position:absolute;inset:0;overflow:hidden;visibility:hidden;background:none!important}
.f3-plat .f3-sc{background:var(--f3bg)!important}
.f3-slam{font-family:'FLF Etendue','Bricolage',sans-serif;font-weight:800;line-height:1;text-align:center;white-space:nowrap;letter-spacing:-.03em;text-transform:uppercase;transform-origin:50% 50%;z-index:20}
.f3-sc *{position:absolute;box-sizing:border-box;will-change:transform,opacity}
.f3-sc .f3-ch{position:static;display:inline-block;white-space:pre;will-change:auto;transform-origin:50% 100%}
.f3-sc .f3-l{position:static;display:block;white-space:nowrap}
.f3-sc em{position:static}
/* textes */
.f3-k{font-size:1.9em;font-weight:500;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap}
.f3-n{font-family:'Bricolage';font-weight:700;font-size:2.3em;display:flex;align-items:center;justify-content:center;width:3.4em;height:1.9em;border-radius:9em}
.f3-g{font-family:'FLF Etendue','Bricolage';font-weight:800;font-size:34em;line-height:.8;white-space:nowrap;color:transparent;-webkit-text-stroke-width:.012em;letter-spacing:-.02em}
.f3-t{font-family:'Bricolage';font-weight:800;font-variation-settings:'opsz' 96;font-size:7.4em;line-height:.93;letter-spacing:-.03em;text-transform:uppercase}
.f3-d{font-size:2.75em;line-height:1.42;letter-spacing:-.005em}
.f3-i{font-family:'Instrument',Georgia,serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:-.01em}
.f3-pill{font-family:'Bricolage';font-weight:700;font-size:2.5em;padding:.5em 1em;border-radius:9em;white-space:nowrap;letter-spacing:-.01em}
/* commandes */
.f3-bar{position:absolute;left:5%;right:5%;bottom:3.2%;height:3px;display:flex;gap:4px;z-index:40;pointer-events:none}
.f3-bar i{flex:1;border-radius:3px;background:rgba(128,128,128,.34);overflow:hidden;position:relative}
.f3-bar i b{position:absolute;inset:0;background:#fff;mix-blend-mode:difference;transform-origin:0 50%;transform:scaleX(0)}
.f3-go{position:absolute;left:-18px;top:-20px;z-index:6;display:flex;align-items:center;gap:10px;font:700 13px/1 'Bricolage',sans-serif;letter-spacing:.01em;
 color:#10100E;background:#D9FF3F;border:0;border-radius:100px;padding:13px 18px 13px 14px;cursor:pointer;transform:rotate(-5deg);
 box-shadow:0 14px 30px -12px rgba(16,16,14,.5);transition:transform .45s cubic-bezier(.16,1,.3,1),background .3s}
.f3-go:hover{transform:rotate(-2deg) scale(1.05)}
.f3-go i{width:22px;height:22px;border-radius:50%;background:#10100E;display:flex;align-items:center;justify-content:center}
.f3-go i::before{content:'';border-left:7px solid #D9FF3F;border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
.f3-go small{font:500 11px/1 'Grotesk',sans-serif;opacity:.6;letter-spacing:.04em}
.f3-x,.f3-pp{display:none;position:absolute;top:-13px;z-index:7;width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;background:#10100E;color:#FCFCFC;
 font:500 14px/30px 'Grotesk',sans-serif;text-align:center;padding:0;box-shadow:0 8px 18px -8px rgba(16,16,14,.6)}
.f3-x{right:-11px}.f3-pp{right:25px;font-size:11px;letter-spacing:.04em}
.f3-pause .f3-stage::after{content:'';position:absolute;inset:0;z-index:50;background:rgba(16,16,14,.28) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23FCFCFC'/%3E%3Cpath d='M26 20v24l20-12z' fill='%2310100E'/%3E%3C/svg%3E") center/16% no-repeat}
/* visite guidée : le film se range en bas à gauche et la page défile */
.f3-box.f3-dock{position:fixed;inset:auto 22px 92px auto;width:min(300px,42vw);aspect-ratio:1;z-index:900;animation:f3in .7s cubic-bezier(.16,1,.3,1)}
.f3-box.f3-dock .f3-stage{border-radius:16px;box-shadow:0 30px 70px -24px rgba(16,16,14,.6),0 0 0 1px rgba(16,16,14,.14)}
.f3-box.f3-dock .f3-go{display:none}.f3-box.f3-dock .f3-x,.f3-box.f3-dock .f3-pp{display:block}
@keyframes f3in{from{transform:translateY(40px) scale(.9);opacity:0}to{transform:none;opacity:1}}
html.f3-tour{scroll-behavior:auto!important}
.li.f3-on{background:linear-gradient(90deg,color-mix(in srgb,#D9FF3F 58%,transparent),transparent 82%);padding-left:26px}
.li.f3-on .n{background:#10100E}
.f3-cible{outline:2px solid #D9FF3F;outline-offset:14px;border-radius:6px;transition:outline-color .4s}
/* téléphone et tablette : le film passe dans le fil de la page, sous le texte */
@media(max-width:1020px){
 .f3{position:relative;right:auto;top:auto;transform:none;width:100%;max-width:560px;margin:34px auto 0}
 .f3-go{left:-6px;top:-18px}
 .f3-box.f3-dock{width:min(176px,42vw);inset:auto 12px 84px auto}
}
@media(prefers-reduced-motion:reduce){.f3-go{display:none}}