/* ImmoTV BeScreen — styles du player.
   Tailles en vmin : rendu identique quelle que soit la résolution.
   Formats : [data-o=landscape|portrait|square|ultrawide] posé par le player.
   AUCUNE troncature CSS (ni line-clamp, ni ellipsis) : le moteur d'ajustement (templates.js)
   réduit les textes / retire des éléments optionnels pour que tout tienne.
   Animations limitées à opacity / transform (GPU du Raspberry Pi). */

@font-face { font-family: "Jakarta"; src: url(fonts/jakarta.woff2) format("woff2"); font-weight: 200 800; font-display: block; }
@font-face { font-family: "Fraunces"; src: url(fonts/fraunces.woff2) format("woff2"); font-weight: 100 900; font-display: block; }
@font-face { font-family: "Oswald"; src: url(fonts/oswald.woff2) format("woff2"); font-weight: 200 700; font-display: block; }

:root { --p: #14213d; --pc: #fff; --a: #c8a45d; --ac: #141414; --ease: cubic-bezier(.2, .75, .2, 1); }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; cursor: none; -webkit-font-smoothing: antialiased; }
body { font-family: "Jakarta", system-ui, sans-serif; color: #fff; font-size: 2.2vmin; line-height: 1.3; }
h1, h2, p { margin: 0; }

#stage { position: fixed; inset: 0; overflow: hidden; background: var(--p); }
#boot { position: absolute; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; background: var(--p); }
#boot .logo { height: 13vmin; max-width: 50vmin; }

/* ---------- Transitions entre diapos ---------- */
.slide { position: absolute; inset: 0; overflow: hidden; opacity: 0; visibility: hidden; z-index: 1; }
.slide.in { visibility: visible; opacity: 1; z-index: 2; transition: opacity 1.3s ease; }
.slide.out { z-index: 1; }

.rv, .dots { opacity: 0; }
.in .rv { animation: rv 1s var(--ease) both; animation-delay: calc(.45s + var(--d, 0) * .13s); }
.in .dots { animation: rv 1s var(--ease) both; animation-delay: 1.1s; }
@keyframes rv { from { opacity: 0; transform: translate3d(0, 3.5vmin, 0); } to { opacity: 1; transform: none; } }
/* La diapo sortante efface vite ses textes : seules les photos se fondent (jamais de textes superposés). */
.slide.out .rv:not(.mos-t):not(.mag-photo):not(.pre-photo), .slide.out .dots { animation: rvout .45s ease both !important; }
@keyframes rvout { from { opacity: 1; } to { opacity: 0; } }
.hold .rv, .hold .dots, .hold .slide.in { animation: none !important; transition: none !important; opacity: 1; }

.push { flex: 1 1 auto; min-height: 0; }

/* ---------- Photos + Ken Burns ---------- */
.ph { position: absolute; inset: 0; overflow: hidden; background: #1c1c1c; --kbd: 20s; }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.3s ease; }
.ph img.on { opacity: 1; }
.in .ph img.on, .in .ph img.was { animation: kb0 var(--kbd) linear both; }
.in .ph img.kb1.on, .in .ph img.kb1.was { animation-name: kb1; }
.in .ph img.kb2.on, .in .ph img.kb2.was { animation-name: kb2; }
.in .ph img.kb3.on, .in .ph img.kb3.was { animation-name: kb3; }
@keyframes kb0 { from { transform: scale(1.03); } to { transform: scale(1.13) translate3d(-1.5%, -1%, 0); } }
@keyframes kb1 { from { transform: scale(1.13) translate3d(1.5%, 1%, 0); } to { transform: scale(1.03); } }
@keyframes kb2 { from { transform: scale(1.08) translate3d(-2%, 0, 0); } to { transform: scale(1.08) translate3d(2%, 0, 0); } }
@keyframes kb3 { from { transform: scale(1.12) translate3d(0, 1.5%, 0); } to { transform: scale(1.04) translate3d(0, -1%, 0); } }
.ph-empty { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--p), #000); color: #fff; }
.ph-empty .ic { width: 18vmin; height: 18vmin; opacity: .2; }

/* Indicateur du nombre de photos */
.dots { position: absolute; z-index: 3; display: flex; align-items: center; gap: .9vmin; padding: 1vmin 1.4vmin; border-radius: 10vmin; background: rgba(0,0,0,.4); pointer-events: none; }
.dots:empty { display: none; }
.dots i { display: block; width: 1vmin; height: 1vmin; border-radius: 50%; background: rgba(255,255,255,.5); transition: transform .5s ease, background-color .5s ease; }
.dots i.on { background: #fff; transform: scale(1.5); }

/* ---------- Composants communs ---------- */
.ic { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.sep { margin: 0 .8vmin; opacity: .5; }

.logo { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 1.1vmin; padding: 1vmin 1.6vmin; height: 7.5vmin; max-width: 30vmin; box-shadow: 0 .4vmin 2vmin rgba(0,0,0,.18); flex: none; }
.logo img { max-height: 100%; max-width: 100%; object-fit: contain; display: block; }
.logo .logo-alt { display: none; color: #1b1b1b; font-weight: 800; font-size: 2.1vmin; line-height: 1.2; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; max-width: 100%; }
.logo-txt .logo-alt, .logo-fail .logo-alt { display: block; }
.logo-xl { height: 17vmin; max-width: 64vmin; padding: 2.2vmin 3.4vmin; border-radius: 2vmin; }
.logo-xl .logo-alt { font-size: 4vmin; }

.price { display: flex; align-items: baseline; gap: .6vmin 1vmin; flex-wrap: wrap; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.price .pv { display: inline-block; font-size: 7vmin; line-height: 1.05; white-space: nowrap; }
.price small { font-size: 2.3vmin; font-weight: 600; opacity: .85; letter-spacing: 0; white-space: nowrap; }

.stats { display: flex; flex-wrap: wrap; gap: 1.4vmin 3.2vmin; }
.st { display: flex; align-items: center; gap: 1.1vmin; font-size: 2.5vmin; min-width: 0; }
.st .ic { width: 3.1vmin; height: 3.1vmin; opacity: .9; }
.st-t { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.st-t b { font-weight: 700; white-space: nowrap; }
.st-t span { font-size: 1.45vmin; opacity: .65; text-transform: uppercase; letter-spacing: .1em; }

.chips { display: flex; flex-wrap: wrap; gap: 1vmin; }
.chip { display: inline-flex; align-items: center; gap: .6vmin; padding: .75vmin 1.5vmin; border-radius: 10vmin; font-size: 1.8vmin; line-height: 1.2; font-weight: 600; background: rgba(128,128,128,.22); border: 1px solid rgba(255,255,255,.2); white-space: nowrap; }
.chip .ic { width: 1.9vmin; height: 1.9vmin; color: var(--a); stroke-width: 2.6; }

.badges { display: flex; gap: 1vmin; flex-wrap: wrap; }
.bdg { display: inline-block; padding: .75vmin 1.6vmin; border-radius: .8vmin; font-size: 1.7vmin; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(0,0,0,.5); color: #fff; line-height: 1.2; white-space: nowrap; }
.bdg-tx { background: var(--a); color: var(--ac); }
.bdg-new { background: #fff; color: #111; }

.where { display: flex; align-items: flex-start; gap: 1vmin; font-size: 2.4vmin; font-weight: 600; line-height: 1.3; }
.where .ic { color: var(--a); width: 2.7vmin; height: 2.7vmin; margin-top: .1vmin; }
.where .cp { opacity: .6; font-weight: 500; }

.nrj { display: flex; gap: 1.2vmin 2.6vmin; flex-wrap: wrap; align-items: center; }
.lab { display: flex; align-items: center; gap: 1vmin; }
.lab-t { font-size: 1.4vmin; font-weight: 800; letter-spacing: .12em; opacity: .8; }
.scale { display: flex; align-items: center; gap: .25vmin; height: 3.4vmin; }
.scale i { display: block; width: 1.2vmin; height: 2vmin; border-radius: .3vmin; }
.scale i.on { width: 3.4vmin; height: 3.4vmin; display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 2vmin; border-radius: .6vmin; }
.lab-v { font-size: 1.35vmin; opacity: .7; white-space: nowrap; }
.nrj-note { font-size: 1.5vmin; opacity: .7; }

.fees { font-size: 1.35vmin; line-height: 1.45; opacity: .72; }
.excerpt { font-size: 2.2vmin; line-height: 1.5; }

/* =========================================================
   1. SIGNATURE
   ========================================================= */
.t-sig { position: absolute; inset: 0; }
.t-sig > .dots { top: 13.5vmin; right: 4.5vmin; }
.sig-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 32%, rgba(0,0,0,0) 60%), linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 22%); }
.sig-top { position: absolute; top: 4vmin; left: 4.5vmin; right: 4.5vmin; display: flex; justify-content: space-between; align-items: flex-start; gap: 3vmin; z-index: 2; }
.sig-badges { min-width: 0; }
.sig-badges .badges { justify-content: flex-end; }
.sig-panel { position: absolute; left: 4.5vmin; right: 4.5vmin; top: 19vmin; bottom: 8.5vmin; display: flex; align-items: stretch; gap: 4vmin; }
.sig-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.9vmin; }
.sig-title { font-size: 5.6vmin; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 .3vmin 2vmin rgba(0,0,0,.35); }
.sig-side { flex: none; max-width: 46%; display: flex; flex-direction: column; align-items: flex-end; gap: 1.6vmin; }
.sig-card { background: var(--a); color: var(--ac); padding: 2.4vmin 3.4vmin; border-radius: 1.6vmin; box-shadow: 0 1vmin 4vmin rgba(0,0,0,.35); max-width: 100%; }
.sig-side .nrj { background: rgba(255,255,255,.96); color: #1b1b1b; padding: 1.2vmin 1.8vmin; border-radius: 1.2vmin; }
.sig-more, .sig-nrj-p { display: none; }
.sig-foot { position: absolute; left: 4.5vmin; right: 4.5vmin; bottom: 1.8vmin; height: 5.8vmin; display: flex; flex-direction: column; }

[data-o=portrait] .t-sig .ph { bottom: 45%; }
[data-o=portrait] .t-sig > .dots { top: auto; right: auto; bottom: calc(45% + 3vmin); left: 5vmin; }
[data-o=portrait] .sig-shade { bottom: 45%; background: linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0) 30%); }
[data-o=portrait] .sig-panel { top: 55%; bottom: 7.5vmin; left: 0; right: 0; padding: 10vmin 5vmin 1vmin; background: var(--p); color: var(--pc); flex-direction: column; gap: 0; }
[data-o=portrait] .sig-main { gap: 2.6vmin; }
[data-o=portrait] .sig-main > .push, [data-o=portrait] .sig-side > .push, [data-o=portrait] .sig-nrj-l { display: none; }
[data-o=portrait] .sig-side { position: absolute; top: -8vmin; right: 5vmin; max-width: calc(100% - 10vmin); }
[data-o=portrait] .sig-card .pv { font-size: 8vmin; }
[data-o=portrait] .sig-title { font-size: 6.4vmin; text-shadow: none; }
[data-o=portrait] .sig-more { display: flex; flex-direction: column; gap: 3.2vmin; margin-top: 1vmin; padding-top: 3.2vmin; border-top: 1px solid rgba(128,128,128,.3); }
[data-o=portrait] .sig-nrj-p { display: flex; }
[data-o=portrait] .sig-ex { font-size: 2.9vmin; line-height: 1.55; opacity: .9; }
[data-o=portrait] .t-sig .where { font-size: 3vmin; }
[data-o=portrait] .t-sig .st { font-size: 3vmin; }
[data-o=portrait] .t-sig .st .ic { width: 3.6vmin; height: 3.6vmin; }
[data-o=portrait] .t-sig .chip { font-size: 2.3vmin; padding: 1vmin 1.9vmin; border-color: rgba(128,128,128,.35); }
[data-o=portrait] .t-sig .stats { gap: 2.4vmin 4vmin; }
[data-o=portrait] .sig-foot { color: var(--pc); bottom: 1.6vmin; height: 5.4vmin; }
[data-o=portrait] .t-sig .fees { font-size: 1.6vmin; }
[data-o=square] .sig-panel { flex-direction: column; gap: 2.4vmin; }
[data-o=square] .sig-side { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2vmin 3vmin; }
[data-o=square] .sig-side > .push { display: none; }

/* =========================================================
   2. MOSAÏQUE
   ========================================================= */
.t-mos { position: absolute; inset: 0; display: flex; background: var(--p); color: var(--pc); }
.mos-grid { position: relative; flex: 0 0 60%; min-width: 0; min-height: 0; display: grid; gap: .8vmin; padding: .8vmin; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.mos-t { position: relative; overflow: hidden; border-radius: .5vmin; min-height: 0; min-width: 0; }
.mos-t .ph { --kbd: 22s; }
.mos-t .dots { left: 1.8vmin; bottom: 1.8vmin; }
.in .mos-t.rv { animation-name: tile; }
@keyframes tile { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.mos-a { grid-row: 1 / 3; }
.mos-n1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.mos-n1 .mos-a { grid-row: auto; }
.mos-n2 .mos-b { grid-row: 1 / 3; }
.mos-panel { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 4.5vmin 4.5vmin 3.5vmin; gap: 2.4vmin; }
.mos-body { margin: auto 0; display: flex; flex-direction: column; gap: 2.2vmin; }
.mos-title { font-size: 4.3vmin; line-height: 1.12; font-weight: 800; letter-spacing: -.015em; }
.mos-price .pv { color: var(--a); font-size: 7.4vmin; }
.mos-panel .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2.2vmin 2vmin; }
.mos-panel .st .ic { color: var(--a); opacity: 1; }
.mos-foot { display: flex; flex-direction: column; gap: 1.6vmin; }
.mos-panel .bdg:not(.bdg-tx):not(.bdg-new) { background: rgba(128,128,128,.25); color: inherit; }

[data-o=portrait] .t-mos { flex-direction: column; }
[data-o=portrait] .mos-grid { flex: 0 0 50%; grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; }
[data-o=portrait] .mos-a, [data-o=square] .mos-a { grid-row: auto; grid-column: 1 / 3; }
[data-o=portrait] .mos-n1 .mos-a, [data-o=square] .mos-n1 .mos-a { grid-row: 1 / 3; }
[data-o=portrait] .mos-n2 .mos-b, [data-o=square] .mos-n2 .mos-b { grid-row: auto; grid-column: 1 / 3; }
[data-o=portrait] .mos-panel { padding: 4.5vmin 5vmin; }
[data-o=portrait] .mos-title { font-size: 5vmin; }
[data-o=square] .mos-grid { flex: 0 0 46%; grid-template-columns: 1fr; grid-template-rows: 2fr 1fr; }
[data-o=square] .mos-a, [data-o=square] .mos-n1 .mos-a, [data-o=square] .mos-n2 .mos-b { grid-column: auto; grid-row: auto; }
[data-o=square] .mos-c, [data-o=square] .mos-d { display: none; }
[data-o=square] .mos-panel { padding: 3.5vmin 4.5vmin; gap: 1.6vmin; }
[data-o=square] .mos-body { gap: 1.6vmin; }
[data-o=square] .mos-title { font-size: 3.8vmin; }
[data-o=ultrawide] .mos-grid { flex: 0 0 64%; grid-template-columns: 1.7fr 1fr 1fr 1fr; grid-template-rows: 1fr; }
[data-o=ultrawide] .mos-a, [data-o=ultrawide] .mos-n2 .mos-b { grid-row: auto; }

/* =========================================================
   3. MAGAZINE
   ========================================================= */
.t-mag { position: absolute; inset: 0; display: flex; background: #f5f1ea; color: #1c1b19; }
.mag-photo { position: relative; order: 2; flex: 0 0 52%; min-width: 0; margin: 3.5vmin 3.5vmin 3.5vmin 0; overflow: hidden; border-radius: .4vmin; }
.mag-photo .dots { right: 2.5vmin; bottom: 2.5vmin; }
.mag-tag { position: absolute; left: 0; top: 3vmin; background: var(--a); color: var(--ac); padding: 1.1vmin 2.4vmin; font-weight: 700; font-size: 1.7vmin; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; }
.mag-text { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 4.5vmin 5vmin 3.5vmin 6vmin; gap: 2.4vmin; }
.mag-top { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6vmin 2.4vmin; }
.mag-top .logo { box-shadow: none; border: 1px solid rgba(0,0,0,.08); height: 6.5vmin; }
.mag-kicker { flex: 1 1 24vmin; min-width: 0; font-size: 1.7vmin; line-height: 1.35; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.mag-mid { margin: auto 0; display: flex; flex-direction: column; gap: 2.4vmin; }
.mag-title { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 6vmin; line-height: 1.08; letter-spacing: -.01em; }
.mag-rule { width: 11vmin; height: .45vmin; background: var(--a); transform-origin: left center; }
.in .mag-rule.rv { animation-name: rule; }
@keyframes rule { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
.mag-ex { font-size: 2.15vmin; line-height: 1.6; color: #45413b; }
.mag-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(22vmin, 1fr)); column-gap: 3vmin; border-top: 1px solid rgba(0,0,0,.16); }
.mag-st { min-width: 0; padding: 1.6vmin 0; display: flex; flex-direction: column; gap: .5vmin; border-bottom: 1px solid rgba(0,0,0,.12); }
.mag-st b { display: block; font-family: "Fraunces", Georgia, serif; font-size: 3vmin; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.mag-st span { font-size: 1.35vmin; letter-spacing: .14em; text-transform: uppercase; opacity: .55; }
.mag-bottom { display: flex; align-items: flex-end; justify-content: space-between; gap: 2vmin; flex-wrap: wrap; }
.mag-price .pv { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: 7vmin; letter-spacing: -.01em; }
.t-mag .fees { opacity: .6; }

[data-o=portrait] .t-mag { flex-direction: column; }
[data-o=portrait] .mag-photo { order: 0; flex: 0 0 42%; margin: 3.5vmin 3.5vmin 0; }
[data-o=portrait] .mag-text { padding: 4vmin 5vmin 3.5vmin; }
[data-o=portrait] .mag-ex { font-size: 2.4vmin; }
[data-o=square] .mag-photo { flex: 0 0 46%; }
[data-o=square] .mag-title { font-size: 4.8vmin; }
[data-o=square] .mag-ex { font-size: 1.95vmin; }
[data-o=ultrawide] .mag-photo { flex: 0 0 40%; }
[data-o=ultrawide] .mag-title { font-size: 5.4vmin; }

/* =========================================================
   4. VITRINE
   ========================================================= */
.t-vit { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--p); color: var(--pc); padding: 3.5vmin 4vmin 4vmin; gap: 3vmin; }
.vit-head { flex: none; display: flex; align-items: center; gap: 3vmin; }
.vit-h1 { flex: 1; min-width: 0; font-size: 4vmin; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; }
.vit-phone { flex: none; max-width: 45%; display: flex; align-items: center; gap: 1vmin; font-size: 3.2vmin; font-weight: 800; color: var(--a); }
.vit-phone span { display: block; line-height: 1.2; white-space: nowrap; }
.vit-grid { flex: 1; min-height: 0; display: grid; gap: 2.6vmin; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); }
[data-o=portrait] .vit-grid, [data-o=square] .vit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
[data-o=ultrawide] .vit-grid { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); }
.vit-card { position: relative; display: flex; flex-direction: column; background: #fff; color: #1b1b1b; border-radius: 1.6vmin; overflow: hidden; min-height: 0; min-width: 0; box-shadow: 0 1vmin 3vmin rgba(0,0,0,.25); }
.vit-ph { position: relative; flex: 1 1 auto; min-height: 38%; }
.vit-ph .ph { --kbd: 24s; }
.vit-ph .dots { top: 1.6vmin; right: 1.6vmin; padding: .8vmin 1.1vmin; }
.vit-badges { position: absolute; top: 1.6vmin; left: 1.6vmin; right: 9vmin; z-index: 2; }
.vit-price { position: absolute; left: 1.6vmin; bottom: 1.6vmin; max-width: calc(100% - 3.2vmin); z-index: 2; background: var(--a); color: var(--ac); padding: 1.1vmin 1.8vmin; border-radius: 1vmin; box-shadow: 0 .6vmin 2vmin rgba(0,0,0,.3); }
.vit-price .pv { font-size: 3.6vmin; }
.vit-price small { font-size: 1.7vmin; }
.vit-info { flex: none; padding: 2vmin 2.2vmin 2.2vmin; display: flex; flex-direction: column; gap: 1.2vmin; }
.vit-type { font-size: 1.55vmin; line-height: 1.3; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #7a7a7a; white-space: nowrap; }
.vit-title { font-size: 2.5vmin; line-height: 1.2; font-weight: 700; }
.vit-card .stats { gap: 1vmin 2.2vmin; }
.vit-card .st { font-size: 1.9vmin; }
.vit-card .st .ic { width: 2.4vmin; height: 2.4vmin; color: #666; }
.vit-dpe .lab + .lab, .vit-dpe .lab-v { display: none; }
.vit-dpe .lab-t { color: #555; }
[data-o=ultrawide] .vit-title { font-size: 2.3vmin; }

/* =========================================================
   5. CINÉMA
   ========================================================= */
.t-cin { position: absolute; inset: 0; background: #000; }
.t-cin .ph { --kbd: 10s; }
.t-cin > .dots { top: 13vmin; right: 5vmin; }
.cin-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,.5) 38%, rgba(0,0,0,0) 62%), linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 22%); }
.t-cin .cin-kicker, .t-cin .cin-type, .t-cin .cin-title, .t-cin .cin-stats, .t-cin .cin-price { text-shadow: 0 .2vmin 1.6vmin rgba(0,0,0,.55); }
.cin-top { position: absolute; top: 4vmin; left: 5vmin; right: 5vmin; display: flex; justify-content: space-between; align-items: center; gap: 3vmin; }
.cin-kicker { flex: 1; min-width: 0; text-align: right; font-family: "Oswald", sans-serif; font-size: 2.5vmin; line-height: 1.3; letter-spacing: .3em; text-transform: uppercase; font-weight: 400; }
.cin-kicker .sep { color: var(--a); opacity: 1; }
.cin-bottom { position: absolute; left: 5vmin; right: 5vmin; top: 20vmin; bottom: 8.5vmin; display: flex; align-items: stretch; justify-content: space-between; gap: 5vmin; }
.cin-left { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cin-type { font-family: "Oswald", sans-serif; font-size: 2.3vmin; line-height: 1.3; letter-spacing: .35em; text-transform: uppercase; color: #fff; font-weight: 500; display: flex; gap: 1.6vmin; align-items: center; flex-wrap: wrap; }
.cin-type > span[data-fit] { white-space: nowrap; }
.cin-type .bdg { letter-spacing: .1em; font-family: "Jakarta", sans-serif; text-shadow: none; }
.cin-title { font-family: "Oswald", sans-serif; margin: 1.2vmin 0 1.8vmin; font-size: 6.6vmin; line-height: 1.16; font-weight: 600; text-transform: uppercase; }
.cin-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2vmin 2.2vmin; font-family: "Oswald", sans-serif; font-size: 2.8vmin; line-height: 1.35; font-weight: 300; letter-spacing: .06em; text-transform: uppercase; }
.cin-stats i { width: .8vmin; height: .8vmin; border-radius: 50%; background: var(--a); }
.cin-right { flex: none; max-width: 48%; display: flex; flex-direction: column; align-items: flex-end; gap: 2vmin; }
.cin-price { font-family: "Oswald", sans-serif; justify-content: flex-end; }
.cin-price .pv { font-size: 9.5vmin; line-height: 1.32; font-weight: 500; letter-spacing: 0; }
.cin-price small { line-height: 1.5; }
.cin-right .nrj { background: rgba(0,0,0,.5); padding: 1vmin 1.6vmin; border-radius: 1vmin; }
.cin-foot { position: absolute; left: 5vmin; right: 5vmin; bottom: 1.8vmin; height: 5.8vmin; display: flex; flex-direction: column; }

[data-o=portrait] .cin-bottom, [data-o=square] .cin-bottom { flex-direction: column; justify-content: flex-start; gap: 3vmin; top: 24vmin; bottom: 8vmin; }
[data-o=portrait] .cin-right, [data-o=square] .cin-right { align-items: flex-start; max-width: none; }
[data-o=portrait] .cin-right > .push, [data-o=square] .cin-right > .push { display: none; }
[data-o=portrait] .cin-price, [data-o=square] .cin-price { justify-content: flex-start; }
[data-o=portrait] .cin-title { font-size: 6.4vmin; }
[data-o=portrait] .cin-shade { background: linear-gradient(to top, rgba(0,0,0,.92), rgba(0,0,0,.4) 48%, rgba(0,0,0,0) 65%), linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,0) 18%); }

/* =========================================================
   6. PRESTIGE
   ========================================================= */
.t-pre { position: absolute; inset: 0; display: flex; background: #0d0d0e; color: #efe9df; }
.pre-photo { position: relative; flex: 0 0 57%; min-width: 0; margin: 4vmin 0 4vmin 4vmin; }
.pre-photo .ph { --kbd: 22s; }
.pre-photo .dots { left: 50%; bottom: 4vmin; margin-left: -6vmin; }
.pre-frame { position: absolute; inset: 1.8vmin; border: 1px solid rgba(255,255,255,.55); pointer-events: none; z-index: 2; }
.pre-text { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 5vmin 5.5vmin; }
.pre-mid { margin: auto 0; display: flex; flex-direction: column; gap: 2.4vmin; }
.pre-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 1vmin 1.6vmin; font-size: 1.7vmin; line-height: 1.3; letter-spacing: .32em; text-transform: uppercase; color: var(--a); font-weight: 600; }
.pre-dash { width: 4vmin; height: 1px; background: var(--a); }
.pre-title { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 5vmin; line-height: 1.12; }
.pre-rule { width: 100%; height: 1px; background: linear-gradient(to right, var(--a), rgba(255,255,255,0)); transform-origin: left center; }
.in .pre-rule.rv { animation-name: rule; }
.pre-price .pv { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 6.6vmin; color: var(--a); letter-spacing: 0; }
.pre-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3vmin; }
.pre-st { display: flex; align-items: center; gap: 1.4vmin; padding: 1.5vmin 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 2.2vmin; line-height: 1.2; }
.pre-st .ic { color: var(--a); width: 2.6vmin; height: 2.6vmin; stroke-width: 1.4; }
.pre-st b { font-weight: 500; white-space: nowrap; }
.pre-chips { font-size: 1.7vmin; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; opacity: .8; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2vmin 1.6vmin; }
.pre-chip { display: inline-flex; align-items: center; gap: 1.6vmin; white-space: nowrap; }
.pre-dot { width: .5vmin; height: .5vmin; background: var(--a); border-radius: 50%; }
.pre-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 2vmin; margin-top: 1vmin; }
.t-pre .logo { height: 6vmin; box-shadow: none; }

[data-o=portrait] .t-pre { flex-direction: column; }
[data-o=portrait] .pre-photo { flex: 0 0 46%; margin: 4vmin 4vmin 0; }
[data-o=portrait] .pre-text { padding: 4vmin 6vmin; }
[data-o=square] .pre-photo { flex: 0 0 50%; }
[data-o=square] .pre-title { font-size: 4.2vmin; }
[data-o=ultrawide] .pre-photo { flex: 0 0 45%; }

/* =========================================================
   Diapo AGENCE
   ========================================================= */
.t-agc { position: absolute; inset: 0; background: var(--p); color: var(--pc); }
.agc-bg { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
.agc-bg-0 { display: none; }
.agc-bg-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.agc-bg-2, .agc-bg-3 { grid-template-rows: 1fr; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
[data-o=portrait] .agc-bg { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); }
.agc-tile { position: relative; overflow: hidden; }
.agc-tile .ph { --kbd: 24s; }
.agc-veil { position: absolute; inset: 0; background: var(--p); opacity: .82; }
.agc-card { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 6vmin; text-align: center; }
.agc-mid { margin: auto; max-width: 100%; display: flex; flex-direction: column; align-items: center; gap: 2.6vmin; }
.agc-wait .ic { width: 14vmin; height: 14vmin; color: var(--a); opacity: .9; stroke-width: 1.4; }
.agc-name { font-size: 5vmin; line-height: 1.12; font-weight: 800; letter-spacing: -.01em; max-width: 100%; }
.agc-lines { display: flex; flex-direction: column; gap: 1.3vmin; align-items: center; max-width: 100%; }
.agc-l { display: flex; align-items: center; gap: 1.2vmin; font-size: 2.6vmin; line-height: 1.3; max-width: 100%; }
.agc-l .ic { color: var(--a); width: 3vmin; height: 3vmin; }
.agc-phone { font-size: 4.4vmin; font-weight: 800; }
.agc-phone .ic { width: 4vmin; height: 4vmin; }
.agc-count { font-size: 2.6vmin; line-height: 1.3; padding: 1.3vmin 3vmin; border-radius: 10vmin; background: var(--a); color: var(--ac); font-weight: 600; }
.agc-count b { font-weight: 800; }
.agc-qr { display: flex; align-items: center; gap: 2vmin; font-size: 2.1vmin; line-height: 1.3; font-weight: 600; }
.qr { width: 14vmin; height: 14vmin; flex: none; background: #fff; padding: 1.2vmin; border-radius: 1.2vmin; }
.qr svg { width: 100%; height: 100%; display: block; }

.tpl-agency-prestige .t-agc, .tpl-agency-cinema .t-agc { background: #0d0d0e; color: #efe9df; }
.tpl-agency-prestige .agc-veil, .tpl-agency-cinema .agc-veil { background: #0d0d0e; opacity: .8; }
.tpl-agency-magazine .t-agc { background: #f5f1ea; color: #1c1b19; }
.tpl-agency-magazine .agc-veil { background: #f5f1ea; opacity: .88; }
.tpl-agency-magazine .agc-name, .tpl-agency-prestige .agc-name { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 6vmin; }
.tpl-agency-cinema .agc-name { font-family: "Oswald", sans-serif; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Badge nombre de photos ---------- */
.ph-count { position: absolute; z-index: 3; left: 1.8vmin; top: 1.8vmin; display: inline-flex; align-items: center; gap: .8vmin; padding: .8vmin 1.5vmin; border-radius: 10vmin; background: rgba(0,0,0,.5); color: #fff; font-size: 1.7vmin; line-height: 1.2; font-weight: 700; white-space: nowrap; }
.ph-count .ic { width: 2.1vmin; height: 2.1vmin; }
.ph-count-soft, .duo-tr .ph-count, .pel-tr .ph-count { position: static; }
.ph-count-soft { background: rgba(128,128,128,.22); color: inherit; }

/* =========================================================
   7. GALERIE
   ========================================================= */
.t-gal { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--p); color: var(--pc); }
.gal-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: .7vmin; padding: .7vmin .7vmin 0; grid-template-columns: 1.35fr 1fr 1fr; grid-template-rows: 1fr 1fr; }
.gal-t { position: relative; overflow: hidden; border-radius: .5vmin; min-width: 0; min-height: 0; }
.gal-t .ph { --kbd: 22s; }
.in .gal-t.rv { animation-name: tile; }
.gal-big { grid-row: 1 / 3; }
.gal-big .dots { right: 1.8vmin; bottom: 1.8vmin; }
.gal-n0 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.gal-n0 .gal-big { grid-row: auto; }
.gal-n1 { grid-template-columns: 1.6fr 1fr; }
.gal-n1 .gal-s { grid-row: 1 / 3; }
.gal-n2 { grid-template-columns: 1.5fr 1fr; }
.gal-n3 .gal-s:nth-child(4) { grid-column: 2 / 4; }
.gal-band { flex: 0 0 auto; max-height: 40%; min-height: 0; display: flex; flex-direction: column; gap: 1.3vmin; padding: 2.4vmin 3.6vmin 1.8vmin; }
.gal-row { display: flex; align-items: center; gap: 3.2vmin; flex: none; }
.gal-logo { flex: none; }
.gal-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.1vmin; }
.gal-title { font-size: 3.9vmin; line-height: 1.12; font-weight: 800; letter-spacing: -.015em; }
.gal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1vmin 3vmin; }
.gal-band .where .ic, .gal-band .st .ic { color: var(--a); opacity: 1; }
.gal-band .bdg:not(.bdg-tx):not(.bdg-new) { background: rgba(128,128,128,.25); color: inherit; }
.gal-side { flex: none; max-width: 40%; display: flex; flex-direction: column; align-items: flex-end; gap: 1.4vmin; }
.gal-price .pv { color: var(--a); font-size: 6.4vmin; }
[data-o=portrait] .gal-grid, [data-o=square] .gal-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 2.2fr; grid-auto-rows: 1fr; }
[data-o=portrait] .gal-big, [data-o=square] .gal-big { grid-row: auto; grid-column: 1 / 3; }
[data-o=portrait] .gal-n0 .gal-big, [data-o=square] .gal-n0 .gal-big { grid-column: 1 / 3; }
[data-o=portrait] .gal-n1 .gal-s, [data-o=square] .gal-n1 .gal-s { grid-row: auto; grid-column: 1 / 3; }
[data-o=portrait] .gal-n3 .gal-s:nth-child(4) { grid-column: 1 / 3; }
[data-o=square] .gal-grid { grid-template-rows: 1.8fr; }
[data-o=portrait] .gal-band, [data-o=square] .gal-band { max-height: 50%; padding: 3.4vmin 4.5vmin 2.4vmin; gap: 1.8vmin; }
[data-o=portrait] .gal-row, [data-o=square] .gal-row { flex-direction: column; align-items: stretch; gap: 2.2vmin; }
[data-o=portrait] .gal-logo, [data-o=square] .gal-logo { align-self: flex-start; }
[data-o=portrait] .gal-side, [data-o=square] .gal-side { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.6vmin 3vmin; }
[data-o=portrait] .gal-title { font-size: 5vmin; }
/* Paysage « presque carré » (4:3, 3:2) : fiche empilée, le titre garde toute la largeur */
@media (max-aspect-ratio: 3/2) {
  [data-o=landscape] .gal-band { max-height: 46%; padding: 2.8vmin 4vmin 2vmin; gap: 1.6vmin; }
  [data-o=landscape] .gal-row { flex-direction: column; align-items: stretch; gap: 1.8vmin; }
  [data-o=landscape] .gal-logo { align-self: flex-start; }
  [data-o=landscape] .gal-logo .logo { height: 6vmin; }
  [data-o=landscape] .gal-side { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.4vmin 3vmin; }
}
[data-o=ultrawide] .gal-grid { grid-template-columns: 1.6fr; grid-template-rows: 1fr; grid-auto-flow: column; grid-auto-columns: 1fr; }
[data-o=ultrawide] .gal-grid .gal-t { grid-row: auto !important; grid-column: auto !important; }

/* =========================================================
   8. DUO
   ========================================================= */
.t-duo { position: absolute; inset: 0; display: flex; gap: .6vmin; background: #000; }
.duo-p { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; }
.duo-p .ph { --kbd: 20s; }
.duo-p .dots { top: auto; bottom: auto; }
.duo-a .dots { left: 2.4vmin; top: 13vmin; }
.duo-b .dots { right: 2.4vmin; top: 22vmin; }
.duo-1 .duo-a .dots { left: auto; right: 4vmin; top: 22vmin; }
.in .duo-p.rv { animation-name: tile; }
.duo-shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 26%), linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 42%); }
.duo-top { position: absolute; top: 4vmin; left: 4vmin; right: 4vmin; display: flex; justify-content: space-between; align-items: flex-start; gap: 3vmin; }
.duo-tr { display: flex; flex-direction: column; align-items: flex-end; gap: 1.2vmin; min-width: 0; }
.duo-tr .badges { justify-content: flex-end; }
.duo-card { position: absolute; left: 8%; right: 8%; bottom: 4vmin; max-height: 48%; display: flex; flex-direction: column; gap: 1.4vmin; background: rgba(255,255,255,.97); color: #1b1b1b; border-radius: 2vmin; padding: 2.8vmin 3.4vmin 2.2vmin; box-shadow: 0 2vmin 6vmin rgba(0,0,0,.35); }
.duo-row { display: flex; align-items: flex-end; gap: 3vmin; min-height: 0; }
.duo-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.3vmin; }
.duo-title { font-size: 4.2vmin; line-height: 1.12; font-weight: 800; letter-spacing: -.015em; }
.duo-card .st .ic { color: #666; }
.duo-card .chip { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.08); }
.duo-side { flex: none; max-width: 42%; display: flex; flex-direction: column; align-items: flex-end; gap: 1.4vmin; }
.duo-price { background: var(--a); color: var(--ac); padding: 1.4vmin 2.4vmin; border-radius: 1.2vmin; }
.duo-price .pv { font-size: 5.6vmin; }
.duo-card .fees { opacity: .6; }
[data-o=portrait] .t-duo { flex-direction: column; }
[data-o=portrait] .duo-a .dots { left: 2.4vmin; top: 22vmin; }
[data-o=portrait] .duo-b .dots { right: 2.4vmin; top: 2.4vmin; }
[data-o=portrait] .duo-card, [data-o=square] .duo-card { left: 4%; right: 4%; max-height: 52%; }
[data-o=portrait] .duo-row, [data-o=square] .duo-row { flex-direction: column; align-items: stretch; gap: 2vmin; }
[data-o=portrait] .duo-side, [data-o=square] .duo-side { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.6vmin 3vmin; }
[data-o=portrait] .duo-title { font-size: 4.8vmin; }
[data-o=ultrawide] .duo-card { left: 18%; right: 18%; }

/* =========================================================
   9. PELLICULE
   ========================================================= */
.t-pel { position: absolute; inset: 0; display: flex; flex-direction: column; background: #0c0c0e; color: #fff; --strip: 17vmin; }
.pel-main { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pel-main .ph { --kbd: 16s; }
.pel-main .dots { left: 4.5vmin; top: 13.5vmin; }
.pel-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.35) 45%, rgba(0,0,0,0) 66%), linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0) 22%); }
.pel-top { position: absolute; top: 4vmin; left: 4.5vmin; right: 4.5vmin; display: flex; justify-content: space-between; align-items: flex-start; gap: 3vmin; z-index: 2; }
.pel-tr { display: flex; flex-direction: column; align-items: flex-end; gap: 1.2vmin; min-width: 0; }
.pel-tr .badges { justify-content: flex-end; }
.pel-info { position: absolute; left: 4.5vmin; right: 4.5vmin; top: 22vmin; bottom: calc(var(--strip) + 8.5vmin); display: flex; gap: 4vmin; }
.pel-left { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.8vmin; }
.pel-title { font-size: 5.4vmin; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; text-shadow: 0 .3vmin 2vmin rgba(0,0,0,.4); }
.pel-right { flex: none; max-width: 44%; display: flex; flex-direction: column; align-items: flex-end; gap: 1.6vmin; }
.pel-price { background: var(--a); color: var(--ac); padding: 2vmin 3vmin; border-radius: 1.4vmin; }
.pel-price .pv { font-size: 6.4vmin; }
.pel-right .nrj { background: rgba(255,255,255,.95); color: #1b1b1b; padding: 1vmin 1.6vmin; border-radius: 1vmin; }
.pel-strip { flex: 0 0 var(--strip); overflow: hidden; padding-top: 1.2vmin; }
.pel-track { display: flex; height: 100%; width: max-content; }
.pel-loop .pel-track { animation: pel calc(var(--n) * 5s) linear infinite; }
@keyframes pel { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.pel-th { flex: none; height: 100%; width: calc((var(--strip) - 1.2vmin) * 1.5); margin-right: 1.2vmin; border-radius: .6vmin; overflow: hidden; background: #222; }
.pel-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pel-foot { flex: 0 0 6vmin; min-height: 0; padding: .8vmin 4.5vmin 0; display: flex; flex-direction: column; justify-content: center; }
[data-o=portrait] .t-pel, [data-o=square] .t-pel { --strip: 15vmin; }
[data-o=portrait] .pel-main { flex: 0 0 48%; }
[data-o=square] .pel-main { flex: 0 0 38%; }
[data-o=portrait] .pel-info, [data-o=square] .pel-info { position: static; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 2vmin; padding: 3.4vmin 4.5vmin 1vmin; background: var(--p); color: var(--pc); }
[data-o=portrait] .pel-left > .push, [data-o=portrait] .pel-right > .push, [data-o=square] .pel-left > .push, [data-o=square] .pel-right > .push { display: none; }
[data-o=portrait] .pel-right, [data-o=square] .pel-right { max-width: none; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.6vmin 3vmin; }
[data-o=portrait] .pel-title, [data-o=square] .pel-title { text-shadow: none; }
[data-o=portrait] .pel-title { font-size: 5.6vmin; }
[data-o=portrait] .pel-right .nrj, [data-o=square] .pel-right .nrj { background: none; color: inherit; padding: 0; }

/* =========================================================
   10. ALBUM
   ========================================================= */
.t-alb { position: absolute; inset: 0; display: flex; background: var(--p); color: var(--pc); overflow: hidden; }
.t-alb::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 28% 45%, rgba(255,255,255,.13), rgba(255,255,255,0) 62%); }
.alb-prints { position: relative; flex: 0 0 56%; min-width: 0; min-height: 0; }
.alb-print { position: absolute; }
/* Rotation portée par le tirage (statique) ; le flottement anime uniquement la carte en translate (GPU). */
.alb-print { transform: rotate(var(--r)); }
.in .alb-print.rv { animation-name: albin; }
@keyframes albin { from { opacity: 0; transform: rotate(var(--r)) scale(.92); } to { opacity: 1; transform: rotate(var(--r)); } }
.alb-card { width: 100%; height: 100%; background: #fff; padding: 1.4vmin 1.4vmin 5vmin; border-radius: .4vmin; box-shadow: 0 2vmin 5vmin rgba(0,0,0,.38); animation: albfloat 9s ease-in-out infinite alternate; will-change: transform; }
.alb-p2 .alb-card { animation-duration: 11s; animation-delay: -4s; }
.alb-p3 .alb-card { animation-duration: 10s; animation-delay: -7s; }
@keyframes albfloat { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -1.1vmin, 0); } }
.alb-img { position: relative; width: 100%; height: 100%; overflow: hidden; background: #ddd; }
.alb-img .ph { --kbd: 24s; }
.alb-p1 { left: 6%; top: 8%; width: 58%; height: 48%; --r: -5deg; z-index: 1; }
.alb-p2 { left: 38%; top: 29%; width: 54%; height: 44%; --r: 4deg; z-index: 2; }
.alb-p3 { left: 10%; top: 55%; width: 46%; height: 37%; --r: -2deg; z-index: 3; }
.alb-k1.alb-p1 { left: 10%; top: 12%; width: 78%; height: 72%; --r: -3deg; }
.alb-k2.alb-p1 { left: 6%; top: 10%; width: 60%; height: 52%; }
.alb-k2.alb-p2 { left: 34%; top: 40%; width: 58%; height: 50%; }
.alb-info { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; padding: 5vmin 5vmin 4vmin 2vmin; position: relative; }
.alb-mid { margin: auto 0; display: flex; flex-direction: column; gap: 2vmin; }
.alb-head { display: flex; align-items: center; flex-wrap: wrap; gap: 1.6vmin 2vmin; }
.alb-title { font-family: "Fraunces", Georgia, serif; font-size: 4.8vmin; line-height: 1.1; font-weight: 600; }
.alb-price .pv { color: var(--a); font-size: 6.6vmin; }
.alb-info .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2vmin; }
.alb-info .st .ic, .alb-info .where .ic { color: var(--a); opacity: 1; }
.alb-info .bdg:not(.bdg-tx):not(.bdg-new) { background: rgba(128,128,128,.25); color: inherit; }
.alb-foot { display: flex; flex-direction: column; gap: 1.4vmin; }
[data-o=portrait] .t-alb { flex-direction: column; }
[data-o=portrait] .alb-prints { flex: 0 0 46%; }
[data-o=portrait] .alb-info { padding: 2vmin 5.5vmin 4vmin; }
[data-o=square] .alb-prints { flex: 0 0 50%; }
[data-o=square] .alb-info { padding: 4vmin 4vmin 3vmin 1vmin; }
[data-o=ultrawide] .alb-prints { flex: 0 0 42%; }

/* ---------- Mode allégé (Raspberry Pi, écran modeste, ou réglage « Toujours allégées ») ----------
   Aucune micro-animation : pas de texte qui monte, pas de zoom lent, pas de ruban ni de flottement.
   Seuls restent les fondus entre annonces et entre photos (une seule opacité animée à la fois). */
.lite .ph img.on, .lite .ph img.was { animation: none !important; transform: none !important; }
.lite .alb-card, .lite .pel-track { animation: none !important; }
.lite .in .rv, .lite .in .dots, .lite .in .mos-t.rv, .lite .in .mag-rule.rv, .lite .in .pre-rule.rv, .lite .in .alb-print.rv,
.lite .slide.out .rv:not(.mos-t):not(.mag-photo):not(.pre-photo), .lite .slide.out .dots { animation: none !important; opacity: 1; }
.lite .rv, .lite .dots { opacity: 1; }
.lite .dots i { transition: none; }
.lite .slide.in { transition-duration: .9s; }
.lite .ph img { transition-duration: .9s; }
.lite .sig-card, .lite .vit-card, .lite .alb-card, .lite .duo-card, .lite .logo { box-shadow: none !important; }

/* ---------- Rendu logiciel (aucune carte graphique : SwiftShader sur Raspberry Pi) ----------
   Un fondu plein écran oblige à recalculer tout l'écran au processeur à chaque image → saccades.
   On passe donc en coupes franches (annonces et photos) et on ne garde que de petits fondus de
   texte, bloc par bloc : seule leur petite zone est redessinée, ce qui reste parfaitement fluide. */
.soft .slide.in, .soft .ph img { transition: none !important; }
.soft .in .rv:not(.mos-t):not(.mag-photo):not(.pre-photo):not(.gal-t):not(.duo-p):not(.alb-print):not(.vit-card):not(.duo-card):not(.pel-strip) {
  animation: softin .55s ease-out both !important;
  animation-delay: calc(.05s + var(--d, 0) * .09s) !important;
}
@keyframes softin { from { opacity: 0; } to { opacity: 1; } }
.hold.soft .in .rv { animation: none !important; opacity: 1; }