/* =========================================================
   PHOTOGRAPHIE & VIDÉOGRAPHIE — concept "LE STUDIO"
   La page = un appareil : obturateur, viseur AF, mise au point,
   pellicule épinglée, flash. Double thème clair/sombre.
   ========================================================= */
#pv{
  /* CLAIR */
  --bg:#F6F4F0; --bg2:#FFFFFF; --ink:#0B0B0A; --soft:rgba(11,11,10,.75); --dim:#6E6E73;
  --line:rgba(11,11,10,.13);   --acc:#FF8A3D; --acc2:#F57323;;
  --serif:"Schibsted Grotesk",system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  position:relative; background:var(--bg); color:var(--ink); font-family:var(--serif);
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}

[data-theme="dark"] #pv{
  --bg:#0A0A09; --bg2:#131211; --ink:#F4F1EB; --soft:rgba(244,241,235,.82); --dim:#98938A;
  --line:rgba(244,241,235,.14);
}
#pv *{ box-sizing:border-box; }
#pv a{ color:inherit; text-decoration:none; }
#pv ::selection{ background:var(--acc); color:#0B0B0A; }
.pv-wrap{ width:min(1240px,calc(100% - 40px)); margin:0 auto; }
.pv-mono{ font-family:var(--mono); }
body.locked{ overflow:auto !important; height:auto !important; }
#intro{ display:none !important; } #cur-dot,#cur-ring{ display:none !important; }

/* grain pellicule */
#pv:after{ content:""; position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
[data-theme="dark"] #pv:after{ mix-blend-mode:screen; opacity:.06; }
#pv > *{ position:relative; z-index:2; }

/* ---------- OBTURATEUR D'OUVERTURE (plein écran, une fois) ---------- */
#pvShutter{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; background:#0A0A09; transition:opacity .5s .1s, visibility 0s .7s; }
#pvShutter.done{ opacity:0; visibility:hidden; pointer-events:none; }
#pvShutter svg{ width:min(52vmin,340px); height:min(52vmin,340px); }
#pvShutter .blade{ fill:#161513; stroke:#2A2825; stroke-width:1; transform-origin:60px 60px; transition:transform 1s cubic-bezier(.7,0,.2,1) var(--bd,0s); }
#pvShutter.open .blade{ transform:rotate(38deg) translate(46px,0) scale(1.25); }
#pvShutter .ring{ fill:none; stroke:var(--acc); stroke-width:1.4; opacity:.85; }
#pvShutter .lbl{ font-family:var(--mono); font-size:6px; fill:#8B857C; letter-spacing:.28em; }

/* ---------- Curseur "bague de mise au point" ---------- */
#pvCur{ position:fixed; z-index:90; top:0; left:0; width:44px; height:44px; border-radius:50%;
  border:1.5px solid var(--dim); pointer-events:none; transform:translate(-50%,-50%); transition:width .25s,height .25s,border-color .25s; }
#pvCur:before,#pvCur:after{ content:""; position:absolute; background:var(--acc); }
#pvCur:before{ left:50%; top:-5px; width:1.5px; height:8px; transform:translateX(-50%); }
#pvCur:after{ top:50%; left:-5px; height:1.5px; width:8px; transform:translateY(-50%); }
#pvCur.big{ width:78px; height:78px; border-color:var(--acc); }
@media(hover:none){ #pvCur{ display:none; } }

/* Progression */
#pvProg{ position:fixed; top:0; left:0; height:2px; width:100%; z-index:95; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg,var(--acc),var(--acc2)); }

/* Reveal */
#pv.is-ready [data-r]{ opacity:0; transform:translateY(26px); }
#pv.is-ready [data-r].in{ opacity:1; transform:none; transition:opacity 1s cubic-bezier(.19,1,.22,1),transform 1s cubic-bezier(.19,1,.22,1); transition-delay:var(--d,0s); }

/* Mise au point : flou -> net à l'entrée */
#pv.is-ready .pv-focus img{ filter:blur(14px) saturate(.75); transform:scale(1.06); }
#pv.is-ready .pv-focus.sharp img{ filter:blur(0) saturate(1); transform:scale(1);
  transition:filter 1.2s cubic-bezier(.19,1,.22,1) var(--fd,0s), transform 1.4s cubic-bezier(.19,1,.22,1) var(--fd,0s); }

.pv-eyebrow{ font-family:var(--mono); font-size:.68rem; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); }
.pv-eyebrow b{ color:var(--acc); }

.pv-btn{ display:inline-flex; align-items:center; gap:.7rem; height:50px; padding:0 1.4rem; border-radius:999px;
  font-family:var(--mono); font-size:.75rem; font-weight:600; border:1.5px solid var(--ink); transition:.4s cubic-bezier(.19,1,.22,1); will-change:transform; }
.pv-btn.fill{ background:var(--acc); border-color:var(--acc); color:#0B0B0A; }
.pv-btn:hover{ background:var(--ink); color:var(--bg); }
.pv-btn.fill:hover{ background:var(--acc2); border-color:var(--acc2); color:#0B0B0A; }

/* ---------------- HERO : LE VISEUR ---------------- */
.pv-hero{ padding:calc(var(--header-h,80px) + 1.4rem) 0 1.6rem; }
.pv-frame{ position:relative; border-radius:10px; overflow:hidden; background:#111; min-height:min(78svh,640px); display:grid; align-items:end; isolation:isolate; }
.pv-frame > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.05); animation:pvKen 16s ease-in-out infinite alternate; }
@keyframes pvKen{ to{ transform:scale(1.12) translate3d(-1.4%,1%,0); } }
.pv-frame:before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 35%,rgba(0,0,0,.62)); }

/* Overlay viseur */
.pv-hud{ position:absolute; inset:0; z-index:2; pointer-events:none; color:#fff; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; }
.pv-hud .grid{ position:absolute; inset:0; }
.pv-hud .grid i{ position:absolute; background:rgba(255,255,255,.14); }
.pv-hud .grid i:nth-child(1){ left:33.33%; top:0; bottom:0; width:1px; }
.pv-hud .grid i:nth-child(2){ left:66.66%; top:0; bottom:0; width:1px; }
.pv-hud .grid i:nth-child(3){ top:33.33%; left:0; right:0; height:1px; }
.pv-hud .grid i:nth-child(4){ top:66.66%; left:0; right:0; height:1px; }
.pv-hud .corner{ position:absolute; width:26px; height:26px; border:2px solid rgba(255,255,255,.75); }
.pv-hud .corner.tl{ top:14px; left:14px; border-right:0; border-bottom:0; }
.pv-hud .corner.tr{ top:14px; right:14px; border-left:0; border-bottom:0; }
.pv-hud .corner.bl{ bottom:14px; left:14px; border-right:0; border-top:0; }
.pv-hud .corner.br{ bottom:14px; right:14px; border-left:0; border-top:0; }
.pv-hud .rec{ position:absolute; top:18px; left:52px; display:inline-flex; align-items:center; gap:.4rem; font-weight:700; }
.pv-hud .rec:before{ content:""; width:8px; height:8px; border-radius:50%; background:#FF3B30; animation:pvBlink 1.1s steps(1) infinite; }
@keyframes pvBlink{ 50%{ opacity:.2; } }
.pv-hud .meta{ position:absolute; top:18px; right:52px; opacity:.85; }
.pv-hud .meta2{ position:absolute; bottom:16px; right:52px; opacity:.85; text-align:right; line-height:1.8; }
.pv-hud .bat{ display:inline-block; width:20px; height:9px; border:1px solid rgba(255,255,255,.8); border-radius:2px; position:relative; vertical-align:-1px; margin-left:.4rem; }
.pv-hud .bat:before{ content:""; position:absolute; inset:1px; right:35%; background:var(--acc); }

/* Cadre autofocus qui suit la souris */
#pvAF{ position:absolute; z-index:3; width:86px; height:86px; pointer-events:none; opacity:0; transition:opacity .3s;
  transform:translate(-50%,-50%); }
#pvAF.on{ opacity:1; }
#pvAF .box{ position:absolute; inset:0; border:1.5px solid var(--acc); }
#pvAF .box:before,#pvAF .box:after{ content:""; position:absolute; background:var(--acc); }
#pvAF .box:before{ left:50%; top:-6px; width:1.5px; height:5px; transform:translateX(-50%); box-shadow:0 92px 0 var(--acc); }
#pvAF .box:after{ top:50%; left:-6px; width:5px; height:1.5px; transform:translateY(-50%); box-shadow:92px 0 0 var(--acc); }
#pvAF .tag{ position:absolute; left:0; top:-20px; font-family:var(--mono); font-size:.58rem; letter-spacing:.18em; color:var(--acc); font-weight:700; }
#pvAF.lock .box{ animation:pvLock .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes pvLock{ 0%{ transform:scale(1.35); } 100%{ transform:scale(1); } }

/* Contenu hero */
.pv-hero-content{ position:relative; z-index:4; padding:clamp(1.2rem,4vw,2.6rem); color:#fff; max-width:720px; }
.pv-hero-content h1{ font-weight:900; letter-spacing:-.045em; line-height:.95; font-size:clamp(2rem,5.4vw,4rem); }
.pv-hero-content h1 span{ color:var(--acc); }
.pv-hero-content p{ margin-top:.9rem; max-width:56ch; font-size:.95rem; line-height:1.6; color:rgba(255,255,255,.85); }
.pv-cta{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.2rem; }
.pv-cta .pv-btn{ border-color:#fff; color:#fff; }
.pv-cta .pv-btn:hover{ background:#fff; color:#0B0B0A; }
.pv-cta .pv-btn.fill{ border-color:var(--acc); color:#0B0B0A; }

/* Marquee plateau */
.pv-marquee{ overflow:hidden; padding:.6rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:1.4rem; }
.pv-track{ display:flex; width:max-content; animation:pvMarq 28s linear infinite; }
.pv-track:hover{ animation-play-state:paused; }
.pv-track span{ font-family:var(--mono); font-weight:600; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; padding:0 1.1rem; color:var(--dim); white-space:nowrap; }
.pv-track .sep{ color:var(--acc); }
@keyframes pvMarq{ to{ transform:translateX(-50%); } }

/* ---------------- MANIFESTE ---------------- */
.pv-manifesto{ padding:clamp(3rem,8vw,5.5rem) 0; }
.pv-mgrid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.pv-quote{ font-weight:800; letter-spacing:-.025em; line-height:1.12; font-size:clamp(1.4rem,3vw,2.3rem); max-width:24ch; margin-top:1rem; }
.pv-quote em{ font-style:normal; color:var(--acc); }
.pv-quote .dim{ color:var(--dim); }
.pv-note{ margin-top:1.6rem; display:flex; gap:1.8rem; flex-wrap:wrap; font-family:var(--mono); font-size:.72rem; color:var(--dim); }
.pv-note b{ color:var(--ink); display:block; }
.pv-polaroid{ position:relative; background:var(--bg2); border:1px solid var(--line); padding:12px 12px 44px; border-radius:6px;
  box-shadow:0 30px 60px -40px rgba(0,0,0,.5); transform:rotate(1.6deg); transition:transform .6s cubic-bezier(.19,1,.22,1); }
.pv-polaroid:hover{ transform:rotate(0) scale(1.015); }
.pv-polaroid .ph{ overflow:hidden; border-radius:3px; height:clamp(240px,40vh,400px); }
.pv-polaroid img{ width:100%; height:100%; object-fit:cover; display:block; }
.pv-polaroid figcaption{ position:absolute; left:14px; bottom:12px; font-family:var(--mono); font-size:.68rem; color:var(--dim); letter-spacing:.08em; }
@media(max-width:820px){ .pv-mgrid{ grid-template-columns:1fr; } }

/* ---------------- PELLICULE (photo services, épinglée) ---------------- */
.pv-reel{ position:relative; }
.pv-reel-head{ display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; padding-top:clamp(2rem,5vw,3.5rem); }
.pv-reel-head h2{ font-weight:900; letter-spacing:-.035em; line-height:1; font-size:clamp(1.5rem,3.2vw,2.4rem); max-width:18ch; }
.pv-reel-bar{ height:2px; background:var(--line); margin-top:1rem; overflow:hidden; }
.pv-reel-bar i{ display:block; height:100%; background:var(--acc); transform:scaleX(.2); transform-origin:0 50%; }
.pv-reel-track{ display:grid; gap:1.2rem; padding:clamp(1.6rem,4vw,2.6rem) 0; }
/* cadre "pellicule" : perforations haut/bas */
.pv-cell{ position:relative; background:#101010; border-radius:10px; overflow:hidden; color:#fff; min-height:min(58vh,430px); display:flex; flex-direction:column; }
.pv-cell:before,.pv-cell:after{ content:""; position:absolute; left:0; right:0; height:14px; z-index:3;
  background-image:radial-gradient(circle at 8px 7px, var(--bg) 4px, transparent 4.5px); background-size:24px 14px; background-repeat:repeat-x; }
.pv-cell:before{ top:0; } .pv-cell:after{ bottom:0; }
.pv-cell .ph{ flex:0 0 56%; overflow:hidden; position:relative; }
.pv-cell .ph img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .9s, transform 1.1s; }
.pv-cell:hover .ph img{ filter:none; transform:scale(1.05); }
/* flash d'obturateur */
.pv-cell .ph i{ position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.pv-cell:hover .ph i{ animation:pvFlash .5s ease-out; }
@keyframes pvFlash{ 0%{ opacity:.85; } 100%{ opacity:0; } }
.pv-cell .bd{ padding:1.1rem 1.2rem 1.5rem; display:flex; flex-direction:column; flex:1; }
.pv-cell .no{ font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; color:var(--acc); }
.pv-cell h3{ margin-top:auto; font-weight:900; letter-spacing:-.02em; font-size:clamp(1.15rem,2.2vw,1.6rem); }
.pv-cell p{ margin-top:.55rem; font-size:.82rem; line-height:1.55; color:rgba(255,255,255,.72); }
/* mode épinglé (desktop) */
#pv .pv-reel.is-pinned .pv-reel-sticky{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden; }
#pv .pv-reel.is-pinned .pv-reel-track{ display:flex; gap:1.3rem; padding:0 clamp(20px,4vw,60px); will-change:transform; }
#pv .pv-reel.is-pinned .pv-cell{ flex:0 0 min(62vw,420px); height:min(64vh,480px); min-height:0; }

/* ---------------- VIDÉO (letterbox + rows) ---------------- */
.pv-video{ background:var(--ink); color:var(--bg); padding:clamp(3rem,8vw,5.5rem) 0; position:relative; overflow:hidden; }
[data-theme="dark"] .pv-video{ background:#040404; color:#F4F1EB; }
.pv-video .pv-eyebrow{ color:var(--acc2); }
.pv-video h2{ font-weight:900; letter-spacing:-.035em; line-height:1; font-size:clamp(1.5rem,3.4vw,2.5rem); margin-top:.6rem; max-width:20ch; }
.pv-vrows{ margin-top:1.8rem; }
.pv-vrow{ display:grid; grid-template-columns:110px 1fr 42px; gap:1rem; align-items:center; padding:1rem 0; border-bottom:1px solid rgba(255,255,255,.14); transition:.35s; }
.pv-vrow:first-child{ border-top:1px solid rgba(255,255,255,.14); }
.pv-vrow .tc{ font-family:var(--mono); font-size:.68rem; color:rgba(255,255,255,.5); letter-spacing:.1em; }
.pv-vrow h3{ font-weight:800; letter-spacing:-.015em; font-size:1.02rem; }
.pv-vrow p{ margin-top:.3rem; font-size:.8rem; line-height:1.5; color:rgba(255,255,255,.6); max-width:64ch; }
.pv-vrow .pl{ width:38px; height:38px; border-radius:50%; border:1.5px solid rgba(255,255,255,.4); display:grid; place-items:center; transition:.4s; }
.pv-vrow .pl:before{ content:""; width:0; height:0; margin-left:3px; border-left:9px solid currentColor; border-top:5.5px solid transparent; border-bottom:5.5px solid transparent; }
.pv-vrow:hover{ padding-left:.7rem; }
.pv-vrow:hover h3{ color:var(--acc2); }
.pv-vrow:hover .pl{ background:var(--acc); border-color:var(--acc); color:#0B0B0A; transform:scale(1.06); }
@media(max-width:640px){ .pv-vrow{ grid-template-columns:1fr 38px; } .pv-vrow .tc{ grid-column:1/-1; } }

/* ---------------- AVANTAGES + RÉSULTATS ---------------- */
.pv-adv{ padding:clamp(3rem,8vw,5.5rem) 0 0; }
.pv-adv-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem; margin-top:1.4rem; }
.pv-adv-grid > div{ border:1px solid var(--line); border-radius:14px; padding:1.1rem; background:var(--bg2); transition:.35s cubic-bezier(.19,1,.22,1); }
.pv-adv-grid > div:hover{ transform:translateY(-4px); border-color:rgba(255,107,26,.5); }
.pv-adv-grid b{ display:block; font-size:.9rem; }
.pv-adv-grid span{ display:block; margin-top:.35rem; font-size:.78rem; line-height:1.5; color:var(--dim); }
.pv-results{ padding:clamp(2.6rem,7vw,5rem) 0; }
.pv-rgrid{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.pv-rimg{ overflow:hidden; border-radius:10px; height:clamp(260px,44vh,420px); border:1px solid var(--line); }
.pv-rimg img{ width:100%; height:100%; object-fit:cover; }
.pv-results h2{ font-weight:900; letter-spacing:-.035em; line-height:1; font-size:clamp(1.6rem,3.4vw,2.6rem); }
.pv-results p{ margin-top:1rem; color:var(--dim); line-height:1.6; max-width:54ch; }
.pv-metrics{ display:flex; gap:2.2rem; margin-top:1.6rem; flex-wrap:wrap; }
.pv-metric b{ display:block; font-weight:900; letter-spacing:-.04em; font-size:clamp(1.5rem,3vw,2.2rem); }
.pv-metric span{ font-family:var(--mono); font-size:.6rem; text-transform:uppercase; letter-spacing:.12em; color:var(--dim); }
@media(max-width:820px){ .pv-rgrid{ grid-template-columns:1fr; } }

/* ---------------- CTA ---------------- */
.pv-final{ padding:clamp(3rem,8vw,6rem) 0; text-align:center; }
.pv-final h2{ font-weight:900; letter-spacing:-.04em; line-height:.96; font-size:clamp(1.9rem,4.8vw,3.4rem); }
.pv-final p{ margin:1.1rem auto 1.8rem; color:var(--dim); max-width:52ch; line-height:1.6; }

@media(prefers-reduced-motion:reduce){
  #pv *{ animation:none !important; }
  #pv.is-ready [data-r]{ opacity:1 !important; transform:none !important; }
  #pv.is-ready .pv-focus img{ filter:none !important; transform:none !important; }
  #pvShutter{ display:none !important; }
  #pvCur,#pvAF{ display:none !important; }
}