@font-face{font-family:'Cormorant Garamond';font-weight:400 600;font-display:swap;src:url('/fonts/cormorant-garamond-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Cormorant Garamond';font-weight:400 600;font-display:swap;src:url('/fonts/cormorant-garamond-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Spectral';font-weight:400;font-display:swap;src:url('/fonts/spectral-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Spectral';font-weight:400;font-display:swap;src:url('/fonts/spectral-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+1E00-1E9F,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Spectral';font-weight:600;font-display:swap;src:url('/fonts/spectral-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+20AC,U+2122;}
@font-face{font-family:'Spectral';font-style:italic;font-weight:400;font-display:swap;src:url('/fonts/spectral-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F;}
:root{
  --paper:#FAF8F4; --ink:#1D2328; --muted:#57616A; --faint:#8A9198;
  --accent:#26567F; --sepia:#7E6039; --line:#E3DFD6; --card:#FFFFFF;
}
@media (prefers-color-scheme:dark){:root{
  --paper:#13171A; --ink:#E4E1DA; --muted:#9AA2A9; --faint:#6B747B;
  --accent:#88AFD2; --sepia:#C5A97F; --line:#272D32; --card:#191D21;}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'Spectral',Georgia,serif;font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
/* hero — full-bleed, and the masthead sits on top of it */
.hero{position:relative;height:100svh;min-height:520px;
  width:100vw;margin-left:calc(50% - 50vw);margin-top:calc(-1 * var(--headh));
  margin-bottom:52px;overflow:hidden;background:#0d1418}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-veil{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,16,20,.60) 0%,rgba(10,16,20,.22) 30%,rgba(10,16,20,.10) 52%,rgba(10,16,20,.66) 100%)}
.hero-text{position:absolute;left:0;right:0;bottom:14%;text-align:center;padding:0 24px;color:#fff}
.hero-text h2{font-family:'Cormorant Garamond',Garamond,serif;font-weight:600;
  font-size:clamp(44px,9vw,92px);line-height:.98;margin:0 0 10px;letter-spacing:-.01em;
  text-shadow:0 2px 30px rgba(0,0,0,.5)}
.hero-text p{margin:0;font-size:clamp(15px,2.1vw,20px);color:rgba(255,255,255,.9);
  text-shadow:0 1px 16px rgba(0,0,0,.6)}
/* sound toggle — sits on the hero, out of the way of the title */
.hero-sound{position:absolute;right:20px;bottom:24px;z-index:3;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.45);background:rgba(0,0,0,.28);
  color:#fff;display:grid;place-items:center;padding:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background .2s,border-color .2s}
.hero-sound:hover{background:rgba(0,0,0,.5);border-color:rgba(255,255,255,.8)}
.hero-sound:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hero-sound svg{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hero-sound svg .spk{fill:currentColor;stroke:none}
.hero-sound svg .waves{opacity:0}
.hero-sound svg .cross{opacity:1}
.hero-sound[aria-pressed="true"] svg .waves{opacity:1}
.hero-sound[aria-pressed="true"] svg .cross{opacity:0}
@media (max-width:600px){.hero-sound{right:14px;bottom:16px;width:40px;height:40px}}
.hero-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:26px;height:42px;border:1.5px solid rgba(255,255,255,.55);border-radius:14px}
.hero-cue span{position:absolute;left:50%;top:9px;width:3px;height:7px;margin-left:-1.5px;
  background:rgba(255,255,255,.85);border-radius:2px;animation:cue 1.9s ease-in-out infinite}
@keyframes cue{0%{opacity:0;transform:translateY(0)}30%{opacity:1}
  70%{opacity:1;transform:translateY(13px)}100%{opacity:0;transform:translateY(13px)}}
@media (prefers-reduced-motion:reduce){
  .hero-video{display:none}
  .hero{background:#0d1418 url('/hero/poster.jpg') center/cover no-repeat}
  .hero-cue span{animation:none}
}
@media (max-width:600px){.hero{height:82svh}}
/* masthead */
:root{--headh:132px}
header.top{padding:44px 0 30px;border-bottom:1px solid var(--line);margin-bottom:34px}
header.top.over{position:relative;z-index:3;border-bottom:0;margin-bottom:0;
  height:var(--headh);padding:34px 0 0;color:#fff}
header.top.over h1.site a,header.top.over .site-sub{color:#fff}
header.top.over .site-sub{color:rgba(255,255,255,.72)}
header.top.over nav.main{color:rgba(255,255,255,.8)}
header.top.over nav.main a:hover,header.top.over nav.main a[aria-current]{color:#fff;border-bottom-color:#fff}
header.top.over h1.site{text-shadow:0 1px 20px rgba(0,0,0,.45)}
header.top.over nav.main{text-shadow:0 1px 14px rgba(0,0,0,.5)}
@media(max-width:600px){:root{--headh:118px}}
.brand{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
h1.site{font-family:'Cormorant Garamond',Garamond,serif;font-weight:600;
  font-size:clamp(30px,4.6vw,45px);line-height:1;margin:0;letter-spacing:-.005em}
.site-sub{font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(16px,2vw,20px);color:var(--muted)}
nav.main{margin-top:16px;display:flex;gap:22px;flex-wrap:wrap;font-size:15px;color:var(--muted)}
nav.main a{border-bottom:1px solid transparent;padding-bottom:2px}
nav.main a:hover,nav.main a[aria-current]{border-bottom-color:var(--accent);color:var(--ink)}
/* search + filters */
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 26px}
input[type=search]{font:inherit;font-size:15px;padding:8px 13px;border:1px solid var(--line);
  border-radius:3px;background:var(--card);color:var(--ink);min-width:280px}
input[type=search]:focus{outline:2px solid var(--accent);outline-offset:1px}
/* Filters are words with a rule under the chosen one. No capsules. */
button.chip{font:inherit;font-size:14px;padding:2px 0;border:0;background:none;
  color:var(--faint);cursor:pointer;border-bottom:1.5px solid transparent;
  transition:color .15s,border-color .15s}
button.chip:hover{color:var(--ink)}
button.chip[aria-pressed=true]{color:var(--ink);border-bottom-color:var(--ink)}
button.chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.count{margin-left:auto;font-size:13.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.tools.filters{margin:0 0 14px;gap:18px}
.flab{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  margin-right:4px;min-width:62px}
/* Le panneau des séries. Les rangées au-dessus sont des choix uniques ; ici
   chaque série a sa case, parce que la question qu'on se pose est « tout sauf
   les vues aériennes » et non « laquelle ». Même langue graphique : des mots,
   une petite case, pas de capsule. */
.tools.panel{gap:14px;align-items:flex-start;padding-bottom:16px;
  border-bottom:1px solid var(--line);margin-bottom:18px}
.tools.panel .flab{margin-top:3px}
.checks{display:flex;gap:9px 22px;flex-wrap:wrap;align-items:center;flex:1 1 240px;min-width:0}
label.check{display:inline-flex;align-items:center;gap:8px;font-size:14px;
  color:var(--faint);cursor:pointer;transition:color .15s;user-select:none}
label.check:hover{color:var(--ink)}
label.check input{appearance:none;-webkit-appearance:none;width:13px;height:13px;
  margin:0;flex:none;position:relative;cursor:pointer;background:var(--card);
  border:1.5px solid var(--line);border-radius:2px;transition:background .15s,border-color .15s}
label.check input:hover{border-color:var(--faint)}
label.check input:checked{background:var(--ink);border-color:var(--ink)}
label.check input:checked::after{content:"";position:absolute;left:3px;top:0;
  width:3px;height:7px;border:solid var(--paper);border-width:0 1.5px 1.5px 0;
  transform:rotate(42deg)}
label.check input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
label.check input:checked~.l{color:var(--ink)}
label.check .n{font-size:11.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.setall{display:flex;gap:12px;margin-left:auto;padding-top:2px}
/* Sur un téléphone les cases prennent toute la largeur et « tout cocher »
   passe dessous : sans cela le panneau imposait sa largeur à la page entière
   et la grille débordait vers la droite. */
@media(max-width:640px){.tools.panel{gap:10px 14px}
  .checks{flex:1 1 100%}
  .setall{margin-left:0}}
.linkish.sm{font-size:12.5px;color:var(--faint);text-decoration:none;
  border-bottom:1px solid var(--line)}
.linkish.sm:hover{color:var(--ink);border-bottom-color:var(--ink)}
.empty{margin:40px 0 0;text-align:center;color:var(--muted);font-size:15px}
.linkish{font:inherit;font-size:15px;border:0;background:none;padding:0;color:var(--accent);
  cursor:pointer;text-decoration:underline}
/* grid */
.grid{columns:3 300px;column-gap:20px}
.cell{break-inside:avoid;margin:0 0 20px;background:var(--card);border:1px solid var(--line);
  display:block;overflow:hidden}
.cell img{display:block;width:100%;height:auto;transition:opacity .5s ease}
.cell figcaption{padding:11px 14px 13px}
.cell .t{font-size:15px;line-height:1.35;display:block}
.cell .m{font-size:12.5px;color:var(--faint);margin-top:4px;font-variant-numeric:tabular-nums}
.cell:hover{border-color:var(--accent)}
.hidden{display:none}
/* photo page */
.backlink{display:inline-block;margin:0 0 18px;font-size:14.5px;color:var(--accent)}
.backlink:hover{text-decoration:underline}
.photo-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
@media(max-width:860px){.photo-wrap{grid-template-columns:1fr}}
.photo-wrap img.main{width:100%;height:auto;border:1px solid var(--line);background:var(--card);display:block}
button.zoomable{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;position:relative}
button.zoomable:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.zoomhint{position:absolute;right:12px;bottom:12px;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;color:#fff;
  background:rgba(15,20,24,.6);backdrop-filter:blur(5px);opacity:0;transition:opacity .18s}
button.zoomable:hover .zoomhint,button.zoomable:focus-visible .zoomhint{opacity:1}
/* --- the print, the faces on it, and the back of the card --- */
.plate{margin:0}
.framed{position:relative;display:block}
/* The overlay never intercepts a click: the photograph stays a photograph, and
   zooming it works exactly as it does on a page with nobody named. */
.faces{position:absolute;inset:0;pointer-events:none}
.face{position:absolute;border:2px solid transparent;border-radius:3px;
  transition:border-color .2s ease, box-shadow .2s ease}
.face b{position:absolute;left:50%;top:-4px;transform:translate(-50%,-100%);
  font:500 12.5px/1.25 'Spectral',Georgia,serif;white-space:nowrap;
  background:var(--ink);color:var(--paper);padding:3px 8px;border-radius:3px;
  opacity:0;transition:opacity .2s ease}
.face.on{border-color:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.4),0 0 16px rgba(0,0,0,.35)}
.face.on b{opacity:1}
.names{margin:16px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.names .who-line{margin:0}
.rank{color:var(--faint);font-style:italic}
button.who{font:inherit;color:var(--accent);background:none;border:0;padding:0 1px;
  cursor:help;border-bottom:1px solid transparent}
button.who:hover,button.who:focus-visible{border-bottom-color:currentColor;outline:none}
.unplaced,.who-src{margin:8px 0 0;font-size:14px;color:var(--faint)}
.verso{margin:34px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.verso img{width:100%;height:auto;display:block;border:1px solid var(--line);background:var(--card)}
.verso figcaption{margin-top:12px;font-size:14.5px;color:var(--muted);white-space:pre-line}
.pagerhome{color:var(--faint)}
.pagerhome:hover{color:var(--accent)}
/* zoom viewer */
#zoom{border:0;padding:0;background:transparent;width:100%;height:100%;max-width:100vw;max-height:100vh}
#zoom::backdrop{background:rgba(9,12,14,.94)}
.zstage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  overflow:hidden;touch-action:none}
.zstage img{max-width:100%;max-height:100%;object-fit:contain;transform-origin:center center;
  will-change:transform;cursor:zoom-in;transition:transform .18s ease}
.zstage.z img{cursor:grab;transition:none}
.zstage.z.drag img{cursor:grabbing}
.zclose{position:fixed;top:16px;left:16px;z-index:5;width:42px;height:42px;border-radius:50%;
  border:1px solid rgba(255,255,255,.28);background:rgba(20,25,29,.55);color:#fff;font-size:26px;
  line-height:1;cursor:pointer;backdrop-filter:blur(6px);display:flex;align-items:center;
  justify-content:center;padding:0 0 2px}
.zclose:hover{background:rgba(20,25,29,.85);border-color:rgba(255,255,255,.6)}
.zclose:focus-visible{outline:2px solid #88AFD2;outline-offset:2px}
.zc{position:fixed;right:16px;bottom:16px;z-index:5;display:flex;align-items:center;gap:2px;
  background:rgba(20,25,29,.55);border:1px solid rgba(255,255,255,.22);border-radius:999px;
  backdrop-filter:blur(6px);padding:3px}
.zc button{font:inherit;font-size:16px;line-height:1;width:32px;height:30px;border:0;border-radius:999px;
  background:transparent;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.zc button:hover{background:rgba(255,255,255,.16)}
.zc button:focus-visible{outline:2px solid #88AFD2;outline-offset:1px}
.zc span{font-size:11.5px;color:rgba(255,255,255,.85);min-width:46px;text-align:center;
  font-variant-numeric:tabular-nums}
@media(max-width:600px){.zclose{top:10px;left:10px;width:38px;height:38px;font-size:23px}
  .zc{right:10px;bottom:10px}}
h2.ptitle{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:27px;
  line-height:1.18;margin:0 0 10px}
.meta dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  margin-top:16px;font-family:'Spectral',serif}
.meta dd{margin:3px 0 0;font-size:15px;line-height:1.5}
.meta dd.iscc{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;word-break:break-all}
.meta dd.iscc a{color:var(--muted);text-decoration:none}
.meta a{color:var(--accent);border-bottom:1px solid rgba(38,86,127,.3)}
/* Keywords read as words, not buttons: they are not clickable here, so giving
   them a filled capsule was dressing up a list. Hairlines do the separating. */
.tags{display:flex;flex-wrap:wrap;gap:4px 15px;margin-top:12px}
.tags span{position:relative;font-size:13px;color:var(--muted);white-space:nowrap}
.tags span+span::before{content:"";position:absolute;left:-8px;top:.4em;bottom:.4em;
  width:1px;background:var(--line)}
.rights{margin-top:26px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted);line-height:1.55}
.rights strong{color:var(--ink);font-weight:600}
.pager{display:flex;justify-content:space-between;gap:20px;margin:34px 0 0;
  padding-top:18px;border-top:1px solid var(--line);font-size:14.5px}
.pager a{color:var(--accent)}
/* prose */
.prose{max-width:64ch}
.prose h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:26px;margin:34px 0 8px}
.prose p{margin:0 0 15px;color:var(--muted)}
.prose strong{color:var(--ink);font-weight:600}
/* footer */
footer.bot{margin-top:70px;padding:26px 0 60px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--faint);line-height:1.85}
footer.bot a{color:var(--accent)}
/* la porte — the collection lives behind it */
.galerie-slot{min-height:38vh}
.galerie-wait,.galerie-locked{color:var(--muted);font-size:15px;margin:6px 0 48px}
.galerie-locked{padding:26px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.galerie-locked p{margin:0 0 8px}
dialog.porte{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh}
dialog.porte::backdrop{background:rgba(9,12,14,.72);backdrop-filter:blur(4px)}
dialog.porte form{width:min(460px,92vw);background:var(--card);color:var(--ink);
  border:1px solid var(--line);padding:30px 34px 26px;margin:auto}
dialog.porte h2{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:30px;
  line-height:1.08;margin:0 0 12px;text-wrap:balance}
dialog.porte p{margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.55}
dialog.porte label{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 6px}
dialog.porte input[type=password]{width:100%;font:inherit;font-size:16px;padding:10px 13px;
  border:1px solid var(--line);border-radius:3px;background:var(--paper);color:var(--ink)}
dialog.porte input[type=password]:focus{outline:2px solid var(--accent);outline-offset:1px}
dialog.porte button[type=submit]{margin-top:14px;font:inherit;font-size:15px;padding:10px 24px;
  border:0;border-radius:3px;background:var(--accent);color:#fff;cursor:pointer}
dialog.porte button[type=submit]:disabled{opacity:.6;cursor:default}
dialog.porte button[type=submit]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.porte-err{color:#B3574A;font-size:14px;margin:10px 0 0}
.porte-note{margin:18px 0 0;font-size:13.5px}
.porte-note a{color:var(--accent);border-bottom:1px solid rgba(38,86,127,.3)}