/* Photographe de France — signature des pages intérieures (27/10/2026)
   Viseur + bandeau EXIF sur chaque en-tête, puis un détail propre à chaque page. */

/* ---------- Viseur commun ---------- */
.pf-vf-host{position:relative}
.pf-vf{position:absolute;inset:18px;pointer-events:none;z-index:2}
.pf-vf i{position:absolute;width:34px;height:34px;border:2.5px solid rgba(20,17,15,.55);opacity:0;transition:opacity .5s, transform .7s cubic-bezier(.2,.8,.2,1)}
.pf-vf i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-top-left-radius:10px;transform:translate(-14px,-14px)}
.pf-vf i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-top-right-radius:10px;transform:translate(14px,-14px)}
.pf-vf i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-bottom-left-radius:10px;transform:translate(-14px,14px)}
.pf-vf i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-bottom-right-radius:10px;transform:translate(14px,14px)}
.pf-vf.is-on i{opacity:1;transform:none}
.pf-vf-af{position:absolute;right:9%;top:30%;width:58px;height:42px;border:2px solid #fff;border-radius:6px;box-shadow:0 0 0 1px rgba(20,17,15,.25);opacity:0;transform:scale(1.6)}
.pf-vf.is-on:not(.pf-af-title) .pf-vf-af{animation:pfAf 1.5s .25s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pfAf{0%{opacity:0;transform:scale(1.6)}35%{opacity:1;transform:scale(.92)}50%{transform:scale(1.04)}62%{transform:scale(1);border-color:#fff}70%,100%{opacity:.95;transform:scale(1);border-color:#4bd16a;box-shadow:0 0 0 1px rgba(20,17,15,.2),0 0 18px rgba(75,209,106,.55)}}
.pf-exif{position:absolute;left:50%;bottom:0;transform:translate(-50%,8px);display:flex;align-items:center;gap:16px;white-space:nowrap;
  font:600 11.5px/1 "DM Sans",ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(20,17,15,.86);
  padding:9px 16px;border-radius:999px;opacity:0;transition:opacity .6s .5s, transform .6s .5s;max-width:calc(100% - 90px);overflow:hidden}
.pf-vf.is-on .pf-exif{opacity:1;transform:translate(-50%,0)}
.pf-exif b{font-weight:800;color:var(--pf-gold,#ffc247)}
.pf-exif .pf-rec{display:inline-flex;align-items:center;gap:6px;color:#ff8a5c}
.pf-exif .pf-rec::before{content:"";width:8px;height:8px;border-radius:50%;background:#ff5b1f;animation:pfBlink 1.4s steps(2) infinite}
.pf-exif .pf-frame-no{color:rgba(255,255,255,.62)}
.pf-exif .pf-batt{display:inline-block;width:22px;height:10px;border:1.5px solid rgba(255,255,255,.75);border-radius:2px;position:relative}
.pf-exif .pf-batt::before{content:"";position:absolute;inset:1.5px 6px 1.5px 1.5px;background:#4bd16a;border-radius:1px}
.pf-exif .pf-batt::after{content:"";position:absolute;right:-4px;top:2px;width:2px;height:4px;background:rgba(255,255,255,.75)}
@keyframes pfBlink{50%{opacity:.15}}
/* éclair d'obturateur à l'ouverture de page */
.pf-shutter{position:fixed;inset:0;background:#fff;z-index:9999;pointer-events:none;opacity:0;animation:pfFlash .55s ease-out}
@keyframes pfFlash{0%{opacity:0}12%{opacity:.75}100%{opacity:0}}

/* ---------- Grand numéro détouré (régions, départements, villes) ---------- */
.pf-bignum{position:absolute;right:-.04em;bottom:-.2em;z-index:0;pointer-events:none;font:800 clamp(160px,26vw,380px)/1 "Bricolage Grotesque",sans-serif;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:2px rgba(224,72,15,.16);opacity:0;transform:translateY(30px);transition:opacity 1s .2s, transform 1.2s .2s cubic-bezier(.2,.8,.2,1)}
.pf-bignum.is-on{opacity:1;transform:none}
.nf-geo-hero{position:relative;overflow:hidden}
.nf-geo-hero>.nf-wrap{position:relative;z-index:1}

/* tuiles région / département façon négatif */
.nf-geo-tile,.nf-department-card{position:relative;overflow:hidden}
.nf-geo-tile::before,.nf-department-card::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;opacity:0;transform:translateY(-12px);transition:.35s;z-index:1;pointer-events:none;
  background:#14110f radial-gradient(circle at 50% 50%,#fff8ef 0 2.4px,transparent 2.8px) 0 50%/16px 12px repeat-x}
.nf-geo-tile:hover::before,.nf-department-card:hover::before,.nf-geo-tile:focus-visible::before,.nf-department-card:focus-visible::before{opacity:1;transform:none}
.nf-geo-tile-code{font-variant-numeric:tabular-nums}


/* ---------- Recherche : collimateurs AF autour du champ ---------- */
.pf-af-field{position:relative}
.pf-af-field>.pf-af{position:absolute;inset:-7px;pointer-events:none;transition:inset .35s cubic-bezier(.2,.8,.2,1)}
.pf-af i{position:absolute;width:14px;height:14px;border:2px solid rgba(20,17,15,.35);transition:border-color .3s}
.pf-af i:nth-child(1){left:0;top:0;border-right:0;border-bottom:0}
.pf-af i:nth-child(2){right:0;top:0;border-left:0;border-bottom:0}
.pf-af i:nth-child(3){left:0;bottom:0;border-right:0;border-top:0}
.pf-af i:nth-child(4){right:0;bottom:0;border-left:0;border-top:0}
.pf-af em{position:absolute;right:10px;top:-9px;font:800 10px/1 "DM Sans",sans-serif;letter-spacing:.14em;background:#fff;padding:2px 6px;border-radius:99px;color:#14110f;opacity:0;transition:.3s}
.pf-af-field:focus-within>.pf-af{inset:-2px}
.pf-af-field:focus-within .pf-af i{border-color:#4bd16a}
.pf-af-field.is-lock .pf-af em{opacity:1;color:#1f8a3a}
.pf-develop{animation:pfDevelop 1.3s cubic-bezier(.2,.8,.2,1) both}
@keyframes pfDevelop{0%{filter:blur(6px) sepia(1) brightness(.55);opacity:.2;transform:translateY(14px)}60%{filter:blur(1px) sepia(.4) brightness(.9);opacity:1}100%{filter:none;transform:none}}
.pf-empty-mascot{display:block;width:120px;height:auto;margin:0 auto 10px;animation:pfBob 3.2s ease-in-out infinite}
@keyframes pfBob{50%{transform:translateY(-8px) rotate(-3deg)}}

/* ---------- Carte : point AF qui suit le curseur ---------- */
.pf-map-af{position:fixed;z-index:60;pointer-events:none;transform:translate(-50%,-130%);background:#14110f;color:#fff;border-radius:10px;padding:8px 12px;
  font:700 13px/1.2 "DM Sans",sans-serif;white-space:nowrap;opacity:0;transition:opacity .15s;box-shadow:0 10px 26px rgba(20,17,15,.3)}
.pf-map-af small{display:block;font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#ffc247;margin-bottom:2px}
.pf-map-af.is-on{opacity:1}
.pf-map-af::after{content:"";position:absolute;left:50%;bottom:-26px;width:22px;height:16px;margin-left:-11px;border:2px solid #4bd16a;border-radius:3px}
#france-map path{transition:fill .2s, transform .2s}
.pf-map-cross #france-map{cursor:crosshair}

/* ---------- Guide : barre de pellicule + planche-sommaire ---------- */
.pf-readbar{position:fixed;left:0;right:0;top:0;height:14px;z-index:70;pointer-events:none;background:#14110f;transform:translateY(-100%);transition:transform .3s}
.pf-readbar.is-on{transform:none}
.pf-readbar::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#3a322c 0 2.4px,transparent 2.8px) 0 50%/18px 14px repeat-x}
.pf-readbar span{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:linear-gradient(90deg,#ff5b1f,#ffc247);
  -webkit-mask:radial-gradient(circle,transparent 0 2.6px,#000 3px) 0 50%/18px 14px repeat-x;mask:radial-gradient(circle,transparent 0 2.6px,#000 3px) 0 50%/18px 14px repeat-x}
.pf-toc{margin-top:18px;padding-top:16px;border-top:1px dashed rgba(20,17,15,.18)}
.pf-toc>span{display:block;font:800 11px/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#e0480f;margin-bottom:10px}
.pf-toc ol{list-style:none;margin:0;padding:0;display:grid;gap:6px;counter-reset:fr}
.pf-toc a{display:grid;grid-template-columns:44px 1fr;gap:10px;align-items:center;text-decoration:none;color:#14110f;font-weight:700;font-size:14px;line-height:1.25;padding:6px;border-radius:12px;transition:background .2s}
.pf-toc a::before{counter-increment:fr;content:counter(fr,decimal-leading-zero) "A";display:grid;place-items:center;height:34px;border-radius:6px;background:#14110f;color:#ffc247;
  font:800 11px/1 "DM Sans",sans-serif;letter-spacing:.06em;box-shadow:inset 0 3px 0 -1px #14110f,inset 0 -3px 0 -1px #14110f;
  background-image:radial-gradient(circle,#fff8ef 0 1.4px,transparent 1.8px),radial-gradient(circle,#fff8ef 0 1.4px,transparent 1.8px);background-size:9px 6px;background-position:0 0,0 100%;background-repeat:repeat-x}
.pf-toc a:hover{background:rgba(255,91,31,.08)}
.pf-toc a.is-on{background:#fff;box-shadow:0 8px 22px rgba(20,17,15,.1)}
.pf-toc a.is-on::before{background-color:#ff5b1f;color:#fff}

/* pages légales : sommaire collant à côté du texte */
.pf-legal-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start}
.pf-legal-grid .pf-toc{position:sticky;top:100px;margin:0;border:1px solid rgba(224,72,15,.14);border-radius:24px;padding:20px;background:linear-gradient(150deg,#fff,#ffeadc)}

/* ---------- Contact : pochette de labo ---------- */
.nf-contact-form.pf-pochette{position:relative;padding-top:64px !important;border-radius:22px !important;overflow:visible;
  background:linear-gradient(180deg,#fffaf2,#fff) !important}
.pf-pochette::before{content:"";position:absolute;left:0;right:0;top:0;height:46px;border-radius:22px 22px 0 0;
  background:repeating-linear-gradient(-45deg,#ff5b1f 0 14px,#fff 14px 28px,#2b59c3 28px 42px,#fff 42px 56px);opacity:.92}
.pf-pochette-tag{position:absolute;left:22px;top:10px;z-index:1;background:#fff;border-radius:8px;padding:6px 10px;font:800 11px/1 "DM Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#14110f;box-shadow:0 4px 12px rgba(20,17,15,.15)}
.pf-pochette-tag b{color:#e0480f}
.pf-stamp{position:absolute;right:18px;top:-22px;z-index:2;width:104px;height:104px;border-radius:50%;display:grid;place-items:center;text-align:center;letter-spacing:.06em !important;
  border:3px double #e0480f;color:#e0480f;background:rgba(255,250,242,.92);transform:rotate(-14deg);font:800 11px/1.15 "DM Sans",sans-serif;letter-spacing:.12em;text-transform:uppercase}
.pf-stamp img{width:34px;height:34px;object-fit:contain;display:block;margin:0 auto 3px}
.pf-stamp.is-hit{animation:pfStamp .45s cubic-bezier(.2,.8,.2,1)}
@keyframes pfStamp{0%{transform:rotate(-14deg) scale(1.9);opacity:0}70%{transform:rotate(-8deg) scale(.94);opacity:1}100%{transform:rotate(-10deg) scale(1)}}
.pf-pochette::after{content:"";position:absolute;left:18px;right:18px;bottom:62px;border-top:2px dashed rgba(20,17,15,.14);pointer-events:none}

/* ---------- Connexion : mascotte + flash ---------- */
.pf-login-mascot{display:block;width:110px;height:auto;margin:-86px auto 6px;filter:drop-shadow(0 14px 18px rgba(20,17,15,.2));animation:pfBob 3.4s ease-in-out infinite}
.nf-auth-form.pf-has-mascot{margin-top:70px !important;text-align:left}
.pf-flash-btn{position:relative;overflow:hidden}
.pf-flash-btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,#fff 0,transparent 70%);opacity:0}
.pf-flash-btn.is-flash::after{animation:pfFlash .5s ease-out}

/* ---------- 404 : mise au point ---------- */
.pf-404{padding:clamp(40px,7vw,90px) 0 clamp(60px,9vw,120px)}
.pf-404-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,5vw,64px);align-items:center}
.pf-404 h1{font:800 clamp(36px,5vw,64px)/1.02 "Bricolage Grotesque",sans-serif;letter-spacing:-.04em;margin:14px 0}
.pf-404 h1 em{font-family:"Instrument Serif",serif;font-weight:400;font-style:italic;color:#e0480f}
.pf-404 p{font-size:18px;line-height:1.6;color:#4a4039;max-width:46ch}
.pf-404-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.pf-404-shot{position:relative;border-radius:26px;overflow:hidden;background:#14110f;box-shadow:0 26px 70px rgba(20,17,15,.2);aspect-ratio:4/3}
.pf-404-shot img{width:100%;height:100%;object-fit:cover;display:block;filter:blur(var(--b,14px)) saturate(var(--s,.6));transform:scale(1.06);transition:filter .08s}
.pf-404-shot .pf-vf{inset:14px}
.pf-404-shot .pf-vf i{border-color:rgba(255,255,255,.85)}
.pf-404-shot .pf-vf-af{left:50%;top:50%;right:auto;margin:-21px 0 0 -29px}
.pf-404-ring{margin-top:18px;display:grid;gap:8px}
.pf-404-ring label{font:800 11px/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;color:#14110f}
.pf-404-ring input{width:100%;accent-color:#ff5b1f;height:28px}
.pf-404-code{position:absolute;left:18px;top:16px;z-index:3;color:#fff;font:800 12px/1 "DM Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;background:rgba(20,17,15,.6);padding:7px 10px;border-radius:99px}

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  .pf-legal-grid{grid-template-columns:1fr}
  .pf-legal-grid .pf-toc{position:static}
}
@media (max-width:760px){
  .pf-vf{inset:10px}
  .pf-vf i{width:22px;height:22px;border-width:2px}
  .pf-vf-af{display:none}
  .pf-exif{gap:10px;font-size:10px;padding:7px 12px;max-width:calc(100% - 50px)}
  .pf-exif .pf-hide-sm{display:none}
  .pf-bignum{font-size:150px;-webkit-text-stroke-width:1.5px}
  .pf-stamp{width:82px;height:82px;font-size:9px;right:10px;top:-30px}
  .pf-stamp img{width:24px;height:24px}
  .pf-pochette-tag{font-size:10px;left:14px}
  .pf-404-grid{grid-template-columns:1fr}
  .pf-404-shot{order:-1}
  .pf-map-af{display:none}
}
@media (prefers-reduced-motion:reduce){
  .pf-shutter{display:none}
  .pf-vf i,.pf-exif,.pf-bignum{transition:none}
  .pf-vf.is-on:not(.pf-af-title) .pf-vf-af{animation:none;opacity:.95;transform:none;border-color:#4bd16a}
}

/* en-têtes intérieurs : moins hauts que l'accueil (la règle d'identité les forçait à 100svh) */
.nf-page-hero.pf-vf-host{min-height:clamp(420px,58svh,620px);padding-bottom:84px}
.nf-geo-hero.pf-vf-host{padding-bottom:84px}
/* collimateurs : autour du champ seulement, pas de son libellé */
.pf-af-field>.pf-af{top:calc(var(--lab,0px) - 7px)}
.pf-af-field:focus-within>.pf-af{top:calc(var(--lab,0px) - 2px)}
@media (max-width:760px){.nf-page-hero.pf-vf-host{min-height:0;padding-bottom:70px}.nf-geo-hero.pf-vf-host{padding-bottom:70px}}

/* collimateur calé sur le titre : il verrouille puis s'efface */
.pf-vf.pf-af-title .pf-vf-af{right:auto;border-radius:10px;border-color:rgba(20,17,15,.5);box-shadow:none}
.pf-vf.pf-af-title.pf-af-go .pf-vf-af{animation:pfAfTitle 2s 0s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pfAfTitle{0%{opacity:0;transform:scale(1.15)}30%{opacity:1;transform:scale(.97)}45%{transform:scale(1.01)}55%{transform:scale(1);border-color:rgba(20,17,15,.5)}
  62%{transform:scale(1);border-color:#4bd16a;box-shadow:0 0 0 4px rgba(75,209,106,.18)}85%{transform:scale(1);opacity:1;border-color:#4bd16a}100%{transform:scale(1);opacity:0;border-color:#4bd16a}}
.pf-vf.pf-af-title .pf-vf-af{transform:scale(1)}
.pf-focus-pull{animation:pfPull 1.1s .1s cubic-bezier(.2,.8,.2,1) both}
@keyframes pfPull{0%{filter:blur(7px);opacity:.35;letter-spacing:.01em}60%{filter:blur(1.5px)}100%{filter:none;opacity:1}}
@media (max-width:760px){.pf-vf.pf-af-title .pf-vf-af{display:block}}
@media (prefers-reduced-motion:reduce){.pf-vf.pf-af-title .pf-vf-af{display:none}}

/* carte : simple collimateur vert sous le curseur (l'infobulle du site reste) */
.pf-map-af{width:30px;height:22px;padding:0;background:none;border:2px solid #4bd16a;border-radius:4px;box-shadow:0 0 0 1px rgba(20,17,15,.35),0 0 14px rgba(75,209,106,.5);transform:translate(-50%,-50%)}
.pf-map-af::after{display:none}
.pf-map-af::before{content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;margin:-2px;border-radius:50%;background:#4bd16a}