/* Photographe de France — identité « chambre noire » et animations (27/10/2026).
   Chargé après les styles Vite. Toutes les animations sont coupées si prefers-reduced-motion. */
:root{--pf-ink:#14110f;--pf-paper:#f5efe6;--pf-orange:#ff5b1f;--pf-orange-d:#e0480f;--pf-gold:#ffc247;--pf-cyan:#2b59c3}

/* Titres : grotesque grasse, accent en serif italique */
.nf-home h1,.nf-home h2,.nf-page h1,.nf-page h2,.nf-h2,.nf-geo-title{font-family:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;font-weight:800;letter-spacing:-.035em}
.nf-home h1 em,.nf-h2 em,.nf-page h1 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.01em;color:var(--pf-orange-d);position:relative;white-space:nowrap}
.nf-home h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.14em;background:var(--pf-gold);border-radius:99px;z-index:-1;transform-origin:left;transform:scaleX(0);animation:pf-underline 1.1s .6s cubic-bezier(.22,.75,.32,1) forwards}
body{font-family:'DM Sans',system-ui,sans-serif}
.nf-kicker{letter-spacing:.14em}
.nf-kicker::before{content:"";display:inline-block;width:.55em;height:.55em;border-radius:50%;background:var(--pf-orange);margin-right:.55em;vertical-align:.08em;animation:pf-rec 1.6s ease-in-out infinite}

/* Bouton principal : orange pellicule, effet magnétique et reflet */
.nf-btn--primary{background:var(--pf-orange);color:var(--pf-ink);border-color:var(--pf-orange);position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.22,.75,.32,1),box-shadow .25s}
.nf-btn--primary:hover{box-shadow:0 14px 30px -12px rgba(224,72,15,.7)}
.nf-btn--primary::after{content:"";position:absolute;inset:-40% auto -40% -60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);animation:pf-shine 4.5s 2s ease-in-out infinite}

/* Ouverture du diaphragme au chargement */
.pf-shutter{position:fixed;inset:0;z-index:99999;pointer-events:none;display:grid;place-items:center}
.pf-shutter span{position:absolute;width:160vmax;height:160vmax;background:var(--pf-ink);clip-path:polygon(50% 50%,100% 0,100% 100%);transform-origin:50% 50%;animation:pf-iris .9s .15s cubic-bezier(.7,0,.2,1) forwards}
.pf-shutter span:nth-child(1){transform:rotate(0deg)}.pf-shutter span:nth-child(2){transform:rotate(60deg)}.pf-shutter span:nth-child(3){transform:rotate(120deg)}
.pf-shutter span:nth-child(4){transform:rotate(180deg)}.pf-shutter span:nth-child(5){transform:rotate(240deg)}.pf-shutter span:nth-child(6){transform:rotate(300deg)}
.pf-shutter.is-done{display:none}

/* Flash plein écran (déclenché par la mascotte) */
.pf-flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:9998}
.pf-flash.is-on{animation:pf-flash .55s ease-out}

/* Décor animé du hero */
.nf-hero{position:relative;overflow:hidden}
.pf-deco{position:absolute;pointer-events:none;z-index:2;filter:drop-shadow(0 18px 24px rgba(20,17,15,.18));will-change:transform}
.pf-deco img{display:block;width:100%;height:auto}
.pf-mascotte{width:clamp(110px,13vw,190px);right:2%;bottom:6%;animation:pf-bob 3.2s ease-in-out infinite}
.pf-mascotte .pf-m-flash{position:absolute;inset:0;opacity:0}
.pf-mascotte.is-flash .pf-m-flash{opacity:1}.pf-mascotte.is-flash .pf-m-idle{opacity:0}
.pf-polaroid{width:clamp(70px,8vw,120px);left:46%;top:8%;animation:pf-swing 5.5s ease-in-out infinite;transform-origin:50% -20%}
.pf-pellicule{width:clamp(80px,9vw,140px);left:-1%;bottom:4%;animation:pf-float 6s ease-in-out infinite}
.pf-objectif{width:clamp(56px,6vw,90px);right:30%;top:4%;animation:pf-spin 14s linear infinite}
.pf-eclat{width:clamp(26px,3vw,46px);animation:pf-twinkle 2.4s ease-in-out infinite}
.pf-eclat.e1{left:40%;top:30%}.pf-eclat.e2{right:8%;top:22%;animation-delay:.8s}.pf-eclat.e3{left:12%;top:12%;animation-delay:1.5s}

/* Images qui se « développent » à l'apparition */
.pf-develop{filter:sepia(.9) saturate(.2) brightness(1.35) blur(6px);transform:scale(1.04);transition:filter 1.4s ease,transform 1.4s cubic-bezier(.22,.75,.32,1)}
.pf-develop.is-dev{filter:none;transform:none}

/* Cartes : inclinaison 3D au survol (variables posées en JS) */
.pf-tilt{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0));transition:transform .35s cubic-bezier(.22,.75,.32,1),box-shadow .35s;will-change:transform}
.pf-tilt:hover{--ty:-4px;box-shadow:0 26px 50px -24px rgba(20,17,15,.45)}

/* Viseur qui suit la souris */
.pf-cursor{position:fixed;left:0;top:0;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;z-index:9997;transition:width .2s,height .2s,margin .2s,opacity .2s;opacity:0}
.pf-cursor::before,.pf-cursor::after{content:"";position:absolute;inset:0;border:2px solid var(--pf-orange);clip-path:polygon(0 0,30% 0,30% 2px,2px 2px,2px 30%,0 30%,0 70%,2px 70%,2px calc(100% - 2px),30% calc(100% - 2px),30% 100%,0 100%,0 0,100% 0,100% 30%,calc(100% - 2px) 30%,calc(100% - 2px) 2px,70% 2px,70% 0,100% 0,100% 100%,70% 100%,70% calc(100% - 2px),calc(100% - 2px) calc(100% - 2px),calc(100% - 2px) 70%,100% 70%)}
.pf-cursor::after{inset:14px;border:0;background:var(--pf-orange);border-radius:50%;clip-path:none}
.pf-cursor.is-on{opacity:1}
.pf-cursor.is-link{width:58px;height:58px;margin:-29px 0 0 -29px}
.pf-cursor.is-link::after{animation:pf-rec 1s ease-in-out infinite}

/* Bandeau défilant façon pellicule */
.nf-marquee{background:var(--pf-ink);color:var(--pf-paper);position:relative}
.nf-marquee::before,.nf-marquee::after{content:"";position:absolute;left:0;right:0;height:7px;background:repeating-linear-gradient(90deg,transparent 0 10px,var(--pf-paper) 10px 18px);opacity:.35}
.nf-marquee::before{top:5px}.nf-marquee::after{bottom:5px}
.nf-marquee span{font-family:'Bricolage Grotesque',sans-serif;font-weight:700}
.nf-marquee span::after{content:"✦";color:var(--pf-gold);margin-left:1.4rem}

/* Spécialités : icône qui pulse au survol */
.nf-spec:hover svg,.nf-value:hover svg{animation:pf-pop .5s cubic-bezier(.3,1.6,.5,1)}

/* Étincelles flottantes dans les sections sombres */
.nf-section--deep{position:relative;overflow:hidden}
.pf-spark{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--pf-gold);opacity:0;animation:pf-rise var(--d,7s) linear infinite;animation-delay:var(--delay,0s)}

@keyframes pf-underline{to{transform:scaleX(1)}}
@keyframes pf-rec{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes pf-shine{0%,70%{left:-60%}100%{left:130%}}
@keyframes pf-iris{to{transform:rotate(var(--r,0deg)) translateX(120%) scale(.2);opacity:0}}
@keyframes pf-flash{0%{opacity:.85}100%{opacity:0}}
@keyframes pf-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes pf-swing{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(7deg)}}
@keyframes pf-float{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(8px,-12px) rotate(6deg)}66%{transform:translate(-6px,-6px) rotate(-4deg)}}
@keyframes pf-spin{to{transform:rotate(360deg)}}
@keyframes pf-twinkle{0%,100%{transform:scale(.4) rotate(0);opacity:.2}50%{transform:scale(1) rotate(45deg);opacity:1}}
@keyframes pf-pop{0%{transform:scale(1)}40%{transform:scale(1.3) rotate(-8deg)}100%{transform:scale(1)}}
@keyframes pf-rise{0%{transform:translateY(0);opacity:0}10%{opacity:.9}100%{transform:translateY(-420px);opacity:0}}

@media (max-width:760px){.pf-polaroid,.pf-objectif,.pf-eclat.e3{display:none}.pf-mascotte{width:96px;right:-2%;bottom:2%}}
@media (pointer:coarse){.pf-cursor{display:none}}
@media (prefers-reduced-motion:reduce){
  .pf-shutter{display:none}
  .pf-deco,.pf-eclat,.pf-spark,.nf-kicker::before,.nf-btn--primary::after,.pf-cursor{animation:none!important}
  .pf-develop{filter:none;transform:none;transition:none}
  .pf-tilt{transform:none!important}
  .nf-home h1 em::after{animation:none;transform:none}
}

/* Scène 3D du hero */
.pf-hero3d{position:relative;width:100%;aspect-ratio:4/4.4;max-height:640px;border-radius:32px;overflow:hidden;cursor:pointer;
  background:radial-gradient(120% 90% at 30% 15%,#ffe3c2 0%,#ffc98f 38%,#ff9a5c 70%,#e0480f 100%);box-shadow:0 40px 80px -40px rgba(20,17,15,.55)}
.pf-hero3d::before{content:"";position:absolute;inset:auto -20% -35% -20%;height:60%;background:radial-gradient(closest-side,rgba(255,255,255,.55),transparent);pointer-events:none}
.pf-hero3d canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.pf-hero3d-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;background:rgba(20,17,15,.78);color:#f5efe6;font:600 .8rem/1 DM Sans,sans-serif;padding:.55rem .9rem;border-radius:99px;opacity:0;transition:opacity .3s}
.pf-hero3d:hover .pf-hero3d-hint{opacity:1}
.pf-hero3d:not(.is-ready)::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px;border-radius:50%;border:4px solid rgba(20,17,15,.2);border-top-color:#14110f;animation:pf-spin 1s linear infinite}