/* ============================================================================
   OPAQ — film.css
   ----------------------------------------------------------------------------
   Le film OPAQ (film.js), joué dans l'écran de l'ouverture de l'accueil.
   Refait le 19/10 (lot 2) : il parle en mots, jamais en chiffres. Tout est
   rangé sous .opaq-film : rien ne déborde sur le reste du site. Tailles en
   cqmin (1 % du petit côté du cadre) : le film garde ses proportions à toute
   taille ; le téléphone de la scène 4 est lui-même un cadre (cqw : 1 % de sa
   largeur). Formats : .f169 (16:9), .f916 (9:16), .f11 (1:1), posés sur le
   cadre. Polices du site seulement (Inter et Fraunces, replis de jetons.css).
   Scènes : S1 accroche · S2 marque · S3 tout est compris · S4 la preuve
   (matière, relief, fluidité au doigt) · S5 être trouvé · S6 la maquette
   avant de signer · S7 abonnement ou achat · S8 la devise (dernière image).
   ============================================================================ */
.opaq-film{position:relative; overflow:hidden; container-type:size; aspect-ratio:16/9; width:100%;
  --f-sans:'Inter','Inter-repli',system-ui,sans-serif; --f-serif:'Fraunces','Fraunces-repli',Georgia,serif;
  --k-ink:#1c1c1a; --k-ink2:#2a2a28; --k-cream:#F5F2EB; --k-cream2:#DDD7CC; --k-copper:#c89968; --k-dot:#b8804a; --k-glow:#e3b384; --k-deep:#8a6845;
  background:var(--k-ink); color:var(--k-cream); font-family:var(--f-sans); line-height:1; user-select:none;
  --px:8cqmin; --st:0cqmin; --sb:0cqmin; --hook:18cqmin; --ck:46cqmin; --logo:30cqmin}
.opaq-film.f916{ aspect-ratio:9/16;--px:7cqmin; --st:24cqmin; --sb:36cqmin; --logo:27cqmin; --hook:12.6cqmin; --ck:46cqmin}
.opaq-film.f11{ aspect-ratio:1;--px:7cqmin; --logo:27cqmin; --hook:12.6cqmin; --ck:32cqmin}
/* 9:16 plus large que haut d'ordinaire (tablette en hauteur) : marges de sécurité réduites */
@container (min-aspect-ratio: 5/8){
  .opaq-film.f916 .sc{--st:13cqmin; --sb:21cqmin}
}
.opaq-film p,.opaq-film ul{margin:0; padding:0; list-style:none}
.opaq-film em{font-family:var(--f-serif); font-style:italic; font-weight:500; letter-spacing:-.02em}
.opaq-film .sc{position:absolute; inset:0; overflow:hidden}
.opaq-film .ln{display:block; overflow:hidden; padding:.12em .09em .16em; margin:-.12em -.09em -.16em}
.opaq-film .lw{display:block; will-change:transform}
.opaq-film .w{display:inline-block; white-space:nowrap}
.opaq-film .c{display:inline-block; will-change:transform}
.opaq-film .pt{position:absolute; border-radius:50%; background:var(--k-copper)}
.opaq-film .bug{position:absolute; right:var(--px); bottom:6cqmin; display:flex; align-items:baseline; font-weight:800; font-size:4.2cqmin; letter-spacing:-.043em; color:var(--cf)}
.opaq-film .bug i{width:.229em; height:.229em; border-radius:50%; background:currentColor; margin-left:.2em; position:relative; top:.043em}
.opaq-film.f916 .bug{top:calc(var(--st) + 1cqmin); bottom:auto}
.opaq-film.f11 .bug{top:6.2cqmin; bottom:auto}
.opaq-film .big{font-weight:800; letter-spacing:-.045em; line-height:.98}
/* Phrases révélées lettre à lettre : chaque masque (.ln) ne tient qu'une ligne ; les groupes de
   mots passent à la ligne entre eux, jamais au milieu (sinon une lettre se verrait avant son tour). */
.opaq-film :is(.s4-big,.s6-big,.s7-big) .ln{display:inline-block; vertical-align:top; margin-right:0}

/* S1 — accroche ------------------------------------------------------------------------ */
.opaq-film .s1{display:flex; align-items:center; padding:var(--st) var(--px) var(--sb)}
.opaq-film .hook{position:relative; font-weight:800; font-size:var(--hook); letter-spacing:-.045em; line-height:1.02}
.opaq-film .mk{position:relative; display:inline-block; padding-inline:.13em; margin-inline:-.03em}
.opaq-film .mk .hl{position:absolute; inset:.1em 0 .04em; transform-origin:0 50%}
.opaq-film .mk b{position:relative; font-weight:inherit}
.opaq-film .mk-a .hl{background:var(--k-dot)}
.opaq-film .mk-b .hl{background:var(--k-cream)}
.opaq-film .mk-b b{color:var(--k-ink)}
.opaq-film .qm{display:inline-block; color:var(--k-glow); margin-left:.1em; transform-origin:50% 80%}
.opaq-film .clock{position:absolute; right:var(--px); top:50%; width:var(--ck); height:var(--ck); margin-top:calc(var(--ck) / -2); overflow:visible; fill:none; stroke:var(--k-copper); stroke-width:2.2; stroke-linecap:round}
.opaq-film .clock .cr{stroke-dasharray:290}
.opaq-film .clock .tk{stroke-width:1.6; stroke:var(--k-deep)}
.opaq-film .clock .mh{stroke:var(--k-cream); stroke-width:2}
.opaq-film .clock .pin{fill:var(--k-copper); stroke:none}
.opaq-film.f916 .s1{align-items:flex-start; padding-top:calc(var(--st) + 18cqmin)}
.opaq-film.f916 .clock{top:auto; margin-top:0; bottom:calc(var(--sb) + 2cqmin)}
.opaq-film.f11 .s1{align-items:flex-end; padding-bottom:9cqmin}
.opaq-film.f11 .clock{top:7cqmin; margin-top:0}

/* S2 — marque ------------------------------------------------------------------------- */
.opaq-film .s2{display:grid; place-items:center; padding:var(--st) var(--px) var(--sb)}
.opaq-film .flood{position:absolute; left:50%; top:50%; width:124cqmax; height:124cqmax; margin:-62cqmax 0 0 -62cqmax; border-radius:50%}
.opaq-film .fl-copper{background:var(--k-copper)}
.opaq-film .fl-cream{background:var(--k-cream)}
.opaq-film .s2-in,.opaq-film .s8-in{position:relative; display:flex; flex-direction:column; align-items:center; gap:3.5cqmin; text-align:center}
.opaq-film .logo{display:inline-flex; align-items:baseline; font-weight:800; font-size:var(--logo); letter-spacing:-.043em; line-height:1}
.opaq-film .logo .ln{padding:.06em .02em .26em; margin:-.06em -.02em -.26em}
.opaq-film .wm{display:inline-block; padding-right:.05em; -webkit-background-clip:text; background-clip:text; color:transparent}
.opaq-film .logo-ink .wm{background-image:linear-gradient(90deg,var(--k-ink) 0 55%,rgba(28,28,26,.12) 100%)}
.opaq-film .logo-cream .wm{background-image:linear-gradient(90deg,#fafaf7 0 55%,rgba(250,250,247,.1) 100%)}
.opaq-film .logo .dot{position:relative; flex:none; width:.229em; height:.229em; border-radius:50%; background:var(--k-dot); margin-left:.26em; top:.043em}
.opaq-film .ring{position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 .014em var(--k-copper); opacity:0}
.opaq-film .tag2{color:var(--k-ink); font-weight:800; font-size:7.4cqmin; letter-spacing:-.04em}
.opaq-film .tag2 em{color:var(--k-deep)}

/* Pilules cochées (S3, S5) ------------------------------------------------------------- */
.opaq-film .pills{display:flex; flex-direction:column; align-items:flex-start; gap:2.2cqmin; font-size:4.6cqmin}
.opaq-film .pill{display:inline-flex; align-items:center; gap:.42em; font-weight:700; letter-spacing:-.02em; padding:.5em .95em .5em .55em; border-radius:99cqmin; white-space:nowrap}
.opaq-film .pill .ck{flex:none; width:1.32em; height:1.32em; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.2)}
.opaq-film .pill .ck svg{width:62%; height:62%; overflow:visible}
.opaq-film .pill .ck path{fill:none; stroke:currentColor; stroke-width:3.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:22}

/* S3 — tout est compris (crème) -------------------------------------------------------- */
.opaq-film .s3{background:var(--k-cream); color:var(--k-ink); --cf:var(--k-ink); display:grid; grid-template-columns:.82fr 1.18fr; align-items:center; gap:5cqmin; padding:var(--st) var(--px) var(--sb)}
.opaq-film .s3 .big{font-size:17cqmin}
.opaq-film .s3 .big em{color:var(--k-deep)}
.opaq-film .s3 .sub{margin-top:3.4cqmin; font-size:4cqmin; font-weight:600; letter-spacing:-.015em; color:#4a4843}
.opaq-film .p-a{background:var(--k-ink); color:var(--k-cream)}
.opaq-film .p-b{background:var(--k-copper); color:var(--k-ink); margin-left:5cqmin}
.opaq-film .p-c{background:var(--k-deep); color:var(--k-cream); margin-left:1.5cqmin}
.opaq-film .p-d{background:var(--k-glow); color:var(--k-ink); margin-left:6.5cqmin}
.opaq-film .p-e{background:var(--k-ink2); color:var(--k-cream); margin-left:2.5cqmin}
.opaq-film .p-b .ck,.opaq-film .p-d .ck{background:rgba(28,28,26,.14)}
.opaq-film .mq{position:absolute; left:0; bottom:4.5cqmin; white-space:nowrap; font-weight:900; font-size:9cqmin; letter-spacing:-.04em; text-transform:uppercase; color:transparent; -webkit-text-stroke:.016em #cdc6b8}
.opaq-film.f169 .s3 .bug{display:none}
.opaq-film.f169 .s3 .pills{margin-bottom:8cqmin}
.opaq-film.f916 .s3,.opaq-film.f11 .s3{grid-template-columns:1fr; align-content:center}
.opaq-film.f916 .s3{gap:8cqmin}
.opaq-film.f916 .s3 .big{font-size:18cqmin}
.opaq-film.f916 .s3 .pills{font-size:5cqmin; gap:2.6cqmin}
.opaq-film.f916 .s3 .sub{font-size:4.6cqmin}
.opaq-film.f916 .mq{bottom:calc(var(--sb) - 23cqmin); font-size:12cqmin}
.opaq-film.f11 .s3{gap:4cqmin}
.opaq-film.f11 .s3 .big{font-size:12.5cqmin}
.opaq-film.f11 .s3 .sub{margin-top:2.4cqmin; font-size:3.6cqmin}
.opaq-film.f11 .s3 .pills{font-size:3.9cqmin; gap:1.7cqmin}
.opaq-film.f11 .mq{display:none}

/* S4 — la preuve : une dalle en relief, sur un téléphone, tournée au doigt (anthracite) ---
   .dalle-pied porte --relief (0 : couches posées l'une sur l'autre, 1 : écartées), animé
   par film.js ; les couches en tirent leur hauteur (translateZ) et l'ombre sa taille. */
.opaq-film .s4{background:var(--k-ink); color:var(--k-cream); display:grid; grid-template-columns:minmax(0,96cqmin) auto; justify-content:center; align-items:center; column-gap:13cqmin; padding:var(--st) var(--px) var(--sb)}
.opaq-film .legende{display:flex; flex-wrap:wrap; gap:1.4cqmin; font-size:3.1cqmin; font-weight:700; letter-spacing:-.005em}
.opaq-film .legende li{display:inline-flex; align-items:center; gap:.6em; padding:.6em 1.1em .6em .85em; border-radius:99cqmin; box-shadow:inset 0 0 0 .2cqmin rgba(245,242,235,.24); color:#F5F2EB}
.opaq-film .legende i{width:.52em; height:.52em; border-radius:50%; background:var(--k-copper)}
.opaq-film .s4-big{margin-top:5.5cqmin; font-weight:800; font-size:9.2cqmin; letter-spacing:-.045em; line-height:1.03}
.opaq-film .s4-big em{color:var(--k-glow)}
.opaq-film .tel{--th:80cqmin; position:relative; width:calc(var(--th) / 2.05); height:var(--th); padding:calc(var(--th) * .021);
  border-radius:calc(var(--th) * .085); background:#2a2a28; container-type:size;
  box-shadow:inset 0 0 0 calc(var(--th) * .004) #4a4843, 0 calc(var(--th) * .05) calc(var(--th) * .11) rgba(0,0,0,.5)}
.opaq-film .tel-ecran{position:relative; height:100%; overflow:hidden; border-radius:13cqw; background:var(--k-cream); color:var(--k-ink)}
.opaq-film .tel-barre{display:flex; align-items:center; justify-content:space-between; padding:10cqw 9cqw 0; font-weight:800; font-size:8cqw; letter-spacing:-.043em}
.opaq-film .tel-logo{display:inline-flex; align-items:baseline}
.opaq-film .tel-logo i{width:.229em; height:.229em; margin-left:.2em; border-radius:50%; background:var(--k-dot); position:relative; top:.043em}
.opaq-film .tel-menu{width:9cqw; height:1.3cqw; border-radius:1cqw; background:var(--k-ink); box-shadow:0 2.9cqw 0 var(--k-ink)}
.opaq-film .dalle-pied{--relief:0; position:absolute; left:50%; top:45%; width:88cqw; height:88cqw; margin:-44cqw 0 0 -44cqw; perspective:210cqw}
.opaq-film .dalle-ombre{position:absolute; left:12%; right:12%; top:54%; height:36%; border-radius:50%;
  background:radial-gradient(closest-side, rgba(28,28,26,.34), rgba(28,28,26,0));
  opacity:calc(.4 + var(--relief) * .6); transform:translateY(calc(var(--relief) * 6%)) scale(calc(.8 + var(--relief) * .3))}
.opaq-film .dalle-incl{position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(58deg)}
.opaq-film .dalle{position:absolute; inset:15% 7%; transform-style:preserve-3d; transform:rotate(-34deg)}
.opaq-film .ly{position:absolute; inset:0; border-radius:7cqw}
.opaq-film .l1{background:#2a2a28; box-shadow:inset 0 0 0 1.1cqw var(--k-deep)}
.opaq-film .l2{background:var(--k-copper); transform:translateZ(calc(2.4cqw + var(--relief) * 9cqw))}
.opaq-film .l3{overflow:hidden; background:#fafaf7; transform:translateZ(calc(4.8cqw + var(--relief) * 18cqw)); box-shadow:inset 0 0 0 .5cqw rgba(28,28,26,.07)}
.opaq-film .l3-t{position:absolute; left:10%; top:15%; width:46%; height:10%; border-radius:1.6cqw; background:var(--k-ink)}
.opaq-film .l3-l{position:absolute; left:10%; top:35%; width:62%; height:5.5%; border-radius:1.6cqw; background:var(--k-cream2)}
.opaq-film .l3-c{top:46%; width:40%}
.opaq-film .l3-p{position:absolute; right:10%; bottom:13%; width:18%; aspect-ratio:1; border-radius:50%; background:var(--k-copper)}
.opaq-film .reflet{position:absolute; top:-40%; bottom:-40%; left:0; width:36%; background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8) 50%, rgba(255,255,255,0)); transform:translateX(-140%) skewX(-16deg)}
.opaq-film .tel-ligne{position:absolute; left:12%; bottom:17%; width:76%; height:2.7cqw; border-radius:2cqw; background:var(--k-cream2)}
.opaq-film .tel-ligne-c{bottom:12%; width:46%}
.opaq-film .doigt{position:absolute; left:66%; top:45%; width:22cqw; height:22cqw; margin:-11cqw 0 0 -11cqw; border-radius:50%; background:rgba(28,28,26,.13); box-shadow:inset 0 0 0 .9cqw rgba(28,28,26,.3); opacity:0}
.opaq-film .doigt b{position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 .9cqw rgba(200,153,104,.85); opacity:0}
.opaq-film.f916 .s4{grid-template-columns:1fr; grid-template-rows:auto auto; align-content:center; justify-content:stretch; justify-items:center; row-gap:7cqmin}
.opaq-film.f916 .s4-tx{justify-self:stretch}
.opaq-film.f916 .legende{font-size:3.5cqmin; gap:1.8cqmin}
.opaq-film.f916 .s4-big{margin-top:5cqmin; font-size:8.8cqmin}
.opaq-film.f916 .tel{--th:min(96cqmin, 50cqh)}
.opaq-film.f11 .s4{grid-template-columns:minmax(0,1fr) auto; column-gap:5cqmin}
.opaq-film.f11 .legende{font-size:2.7cqmin; gap:1.2cqmin; flex-direction:column; align-items:flex-start}
.opaq-film.f11 .s4-big{font-size:6.6cqmin}
.opaq-film.f11 .tel{--th:78cqmin}

/* S5 — être trouvé (cuivre) ------------------------------------------------------------- */
.opaq-film .s5{background:var(--k-copper); color:var(--k-ink); --cf:var(--k-ink); display:grid; grid-template-columns:.86fr 1.14fr; align-items:center; column-gap:6cqmin; padding:var(--st) var(--px) var(--sb)}
.opaq-film .s5 .big{font-size:17cqmin}
.opaq-film .s5 .big em{color:var(--k-cream)}
.opaq-film .s5 .pills{margin-top:5cqmin; font-size:3.7cqmin; gap:1.8cqmin}
.opaq-film .s5 .pill{background:var(--k-ink); color:var(--k-cream)}
.opaq-film .s5-vis{display:flex; flex-direction:column; gap:3cqmin; width:100%; max-width:86cqmin; justify-self:end}
.opaq-film .cherche{display:flex; align-items:center; height:10cqmin; padding:0 3.6cqmin; border-radius:99cqmin; background:var(--k-cream); color:var(--k-ink); font-weight:500; font-size:3.5cqmin; letter-spacing:-.01em; white-space:nowrap; box-shadow:0 1.2cqmin 3cqmin rgba(28,28,26,.18)}
/* la frappe : --frappe (0 → 100, film.js) découvre le texte et pousse le curseur */
.opaq-film .cherche-zone{--frappe:100; position:relative; display:inline-block}
.opaq-film .cherche-tx{display:block; clip-path:inset(-20% calc(100% - var(--frappe) * 1%) -20% 0)}
.opaq-film .caret{position:absolute; top:50%; left:calc(var(--frappe) * 1%); width:.32cqmin; height:1.3em; margin:-.65em 0 0 .25cqmin; background:var(--k-ink)}
.opaq-film .fiche{display:grid; grid-template-columns:34cqmin minmax(0,1fr); gap:3.2cqmin; padding:2.4cqmin; border-radius:3cqmin; background:var(--k-cream); color:var(--k-ink); box-shadow:0 1.6cqmin 4cqmin rgba(28,28,26,.22)}
.opaq-film .plan{position:relative; aspect-ratio:1; border-radius:2cqmin; overflow:hidden; background:#E4DCCD}
.opaq-film .route{position:absolute; background:#F5F2EB}
.opaq-film .r1{left:-10%; right:-10%; top:60%; height:7%; rotate:-14deg}
.opaq-film .r2{top:-10%; bottom:-10%; left:36%; width:7%; rotate:10deg}
.opaq-film .r3{left:-10%; right:28%; top:24%; height:4.5%; rotate:24deg; background:#EDE7DB}
.opaq-film .epingle{position:absolute; left:50%; top:44%; width:8cqmin; height:8cqmin; margin:-6.6cqmin 0 0 -4cqmin}
.opaq-film .epingle b{position:absolute; inset:0; border-radius:50% 50% 50% 0; rotate:-45deg; background:radial-gradient(circle, var(--k-cream) 0 19%, var(--k-ink) 21%)}
.opaq-film .fiche-tx{display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:1.8cqmin; font-size:3.2cqmin; font-weight:500; color:#4a4843}
.opaq-film .fiche-tx b{font-size:4.8cqmin; font-weight:800; letter-spacing:-.03em; color:var(--k-ink)}
.opaq-film .fiche-url{color:var(--k-deep); font-weight:650}
.opaq-film.f916 .s5,.opaq-film.f11 .s5{grid-template-columns:1fr; align-content:center; row-gap:7cqmin}
.opaq-film.f916 .s5 .big{font-size:17cqmin}
.opaq-film.f916 .s5 .pills{margin-top:4.5cqmin; font-size:4.5cqmin}
.opaq-film.f916 .s5-vis{max-width:none; justify-self:stretch}
.opaq-film.f916 .cherche{height:12cqmin; font-size:4.3cqmin}
.opaq-film.f916 .fiche{grid-template-columns:34cqmin minmax(0,1fr)}
.opaq-film.f916 .fiche-tx{font-size:3.8cqmin}
.opaq-film.f916 .fiche-tx b{font-size:5.4cqmin}
.opaq-film.f11 .s5{row-gap:4cqmin}
.opaq-film.f11 .s5 .big{font-size:11cqmin}
.opaq-film.f11 .s5 .big .ln{display:inline-block; vertical-align:top; margin-right:.2em}
.opaq-film.f11 .s5 .pills{margin-top:3cqmin; flex-direction:row; flex-wrap:wrap; font-size:3.2cqmin; gap:1.4cqmin}
.opaq-film.f11 .s5-vis{max-width:none; justify-self:stretch; flex-direction:row; align-items:stretch}
.opaq-film.f11 .cherche{display:none}
.opaq-film.f11 .fiche{flex:1; grid-template-columns:32cqmin minmax(0,1fr)}

/* S6 — la maquette avant de signer (crème) --------------------------------------------- */
.opaq-film .s6{background:var(--k-cream); color:var(--k-ink); display:grid; grid-template-columns:.8fr 1.2fr; align-items:center; column-gap:6cqmin; padding:var(--st) var(--px) var(--sb); perspective:150cqmin}
.opaq-film .s6-big{font-weight:800; font-size:8.4cqmin; letter-spacing:-.045em; line-height:1.03}
.opaq-film .s6-big em{color:var(--k-deep)}
.opaq-film .s6-vis{display:flex; flex-direction:column; align-items:stretch; gap:3.6cqmin; --mw:86cqmin}
.opaq-film .mock{--m:calc(var(--mw) / 100); position:relative; width:var(--mw); height:calc(var(--m) * 62.5);
  border-radius:calc(var(--m) * 1.7); overflow:hidden; background:var(--pg); color:var(--pi); font-family:var(--f-sans); box-shadow:0 calc(var(--m) * 3.2) calc(var(--m) * 8) rgba(28,28,26,.28)}
.opaq-film .mbar{height:calc(var(--m) * 5); display:flex; align-items:center; gap:calc(var(--m) * .9); padding-inline:calc(var(--m) * 2); background:color-mix(in srgb,var(--pi) 9%,var(--pg)); position:relative}
.opaq-film .mbar>i{width:calc(var(--m) * 1.25); height:calc(var(--m) * 1.25); border-radius:50%; background:color-mix(in srgb,var(--pi) 26%,var(--pg))}
.opaq-film .murl{position:absolute; left:50%; top:50%; width:calc(var(--m) * 34); margin:calc(var(--m) * -1.5) 0 0 calc(var(--m) * -17); height:calc(var(--m) * 3); border-radius:99cqmin; display:grid; place-items:center;
  font-size:calc(var(--m) * 1.5); background:color-mix(in srgb,var(--pi) 7%,var(--pg)); color:color-mix(in srgb,var(--pi) 70%,var(--pg))}
.opaq-film .mbody{height:calc(var(--m) * 57.5); padding:calc(var(--m) * 3) calc(var(--m) * 5) calc(var(--m) * 5); display:grid; grid-template:"nav nav" auto "txt art" 1fr / 1.12fr .88fr; gap:calc(var(--m) * 1.5) calc(var(--m) * 3)}
.opaq-film .mnav{grid-area:nav; display:flex; align-items:center; gap:calc(var(--m) * 3); font-size:calc(var(--m) * 1.7); font-weight:500}
.opaq-film .mlogo{width:calc(var(--m) * 2.8); height:calc(var(--m) * 2.8); border-radius:50%; background:var(--pa); margin-right:auto}
.opaq-film .mtxt{grid-area:txt; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:calc(var(--m) * 2.3)}
.opaq-film .meye{font-size:calc(var(--m) * 1.6); font-weight:600; text-transform:uppercase; letter-spacing:.15em; color:color-mix(in srgb,var(--pi) 68%,var(--pg))}
.opaq-film .mh{line-height:.98; letter-spacing:-.02em}
.opaq-film .mbtn{position:relative; font-size:calc(var(--m) * 1.9); font-weight:600; padding:calc(var(--m) * 1.35) calc(var(--m) * 2.7); background:var(--pa); color:var(--pb2)}
.opaq-film .mart{grid-area:art; position:relative}
.opaq-film .sh{position:absolute}
.opaq-film .mk-2{--pg:#FAFAF7; --pi:#1c1c1a; --pa:var(--k-ink); --pb2:#FAFAF7}
.opaq-film .mk-2 .mh{font-weight:900; text-transform:uppercase; font-size:calc(var(--m) * 6.4); letter-spacing:-.035em; line-height:1}
.opaq-film .mk-2 .mbtn{border-radius:calc(var(--m) * .7)}
.opaq-film .mk-2 .sh{width:calc(var(--m) * 33); height:calc(var(--m) * 8); left:calc(var(--m) * 2); rotate:-9deg; border-radius:calc(var(--m) * .8); transform-origin:0 50%}
.opaq-film .mk-2 .a{top:calc(var(--m) * 9); background:var(--k-ink)}
.opaq-film .mk-2 .b{top:calc(var(--m) * 19); left:calc(var(--m) * 5); background:var(--k-copper)}
.opaq-film .mk-2 .c{top:calc(var(--m) * 29); background:var(--k-deep)}
.opaq-film .signe{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; column-gap:3cqmin; width:var(--mw); color:#4a4843}
.opaq-film .signe-l{padding-bottom:1.2cqmin; font-size:2.5cqmin; font-weight:650; letter-spacing:.14em; text-transform:uppercase}
.opaq-film .signe-svg{width:min(100%, 44cqmin); height:auto; overflow:visible}
.opaq-film .signe-svg path{fill:none; stroke:var(--k-ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 1}
.opaq-film .signe-trait{grid-column:1 / -1; height:.28cqmin; margin-top:.8cqmin; background:rgba(28,28,26,.32); transform-origin:0 50%}
.opaq-film.f916 .s6,.opaq-film.f11 .s6{grid-template-columns:1fr; align-content:center; row-gap:7cqmin}
.opaq-film.f916 .s6-big{font-size:9.4cqmin}
.opaq-film.f916 .s6-vis{--mw:86cqmin; justify-self:center}
.opaq-film.f916 .signe-l{font-size:3cqmin}
.opaq-film.f11 .s6{row-gap:5cqmin}
.opaq-film.f11 .s6-big{font-size:7cqmin}
.opaq-film.f11 .s6-vis{--mw:72cqmin; justify-self:end}

/* S7 — abonnement ou achat (cuivre profond) --------------------------------------------- */
.opaq-film .s7{background:var(--k-deep); color:var(--k-cream); --cf:var(--k-cream); display:flex; align-items:center; padding:var(--st) var(--px) var(--sb)}
.opaq-film .s7-big{font-weight:800; font-size:11cqmin; letter-spacing:-.045em; line-height:1.03; text-wrap:balance}
.opaq-film.f916 .s7-big{font-size:11cqmin}
.opaq-film.f11 .s7-big{font-size:9.4cqmin}

/* S8 — la devise, dernière image (anthracite) -------------------------------------------- */
.opaq-film .s8{background:var(--k-ink); color:var(--k-cream); display:grid; place-items:center; padding:var(--st) var(--px) var(--sb)}
.opaq-film .s8-in{gap:4.6cqmin}
.opaq-film .devise-film{font-family:var(--f-serif); font-style:italic; font-weight:400; font-size:6cqmin; letter-spacing:-.01em; line-height:1.12; color:#F5F2EB}
.opaq-film .devise-film .ln{display:inline-block; vertical-align:top; margin-right:.2em}
.opaq-film .devise-film em{font-weight:500; color:var(--k-glow)}
.opaq-film .devise-film .lw{text-wrap:balance}
.opaq-film .url{font-weight:800; font-size:4.4cqmin; letter-spacing:-.04em; color:var(--k-glow)}
.opaq-film.f916 .devise-film{font-size:7.6cqmin}
.opaq-film.f11 .devise-film{font-size:6.8cqmin}
.opaq-film.f916 .devise-film .ln,.opaq-film.f11 .devise-film .ln{display:block; margin-right:-.09em}
.opaq-film.f916 .url{font-size:6cqmin}
.opaq-film .strip{position:absolute; left:0; right:0; bottom:0; height:1.7cqmin; display:flex}
.opaq-film .strip i{flex:1; transform-origin:0 50%}
.opaq-film .strip i:nth-child(1){background:var(--k-deep)}
.opaq-film .strip i:nth-child(2){background:var(--k-copper)}
.opaq-film .strip i:nth-child(3){background:var(--k-glow)}
.opaq-film .strip i:nth-child(4){background:var(--k-cream)}

/* Volets de passage vers la dernière image ------------------------------------------------ */
.opaq-film .b1{background:var(--k-ink2)}
.opaq-film .b2{background:var(--k-deep)}
.opaq-film .b3{background:var(--k-glow)}
.opaq-film .b4{background:var(--k-cream)}
.opaq-film .bands{position:absolute; inset:0; display:flex; flex-direction:column; pointer-events:none; visibility:hidden}
.opaq-film.is-live .bands{visibility:visible}
.opaq-film .bands i{flex:1}