/* ============================================================
   Style partagé — toutes les pages du site
   Fusion des styles communs des gabarits (templates/*.html)
   ============================================================ */

:root{
  --bg:#15161A; --surface:#1D1F25; --ink:#ECE9E2; --ink-dim:#9A9C9F;
  --accent:#7C9CB8; --mark:#C46B4A; --line:rgba(236,233,226,0.12); --grain-op:0.05;
}
[data-theme="light"]{
  --bg:#F1EEE6; --surface:#E8E3D8; --ink:#17181C; --ink-dim:#6B6A63;
  --accent:#3F5D7D; --mark:#A8563A; --line:rgba(23,24,28,0.12); --grain-op:0.035;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--bg);color:var(--ink);font-family:'Work Sans',sans-serif;transition:background .4s,color .4s;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
.mono{font-family:'IBM Plex Mono',monospace;}
.grain{position:fixed;inset:0;pointer-events:none;z-index:999;opacity:var(--grain-op);mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}

/* ---------------- header / nav ---------------- */
header{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;padding:20px 44px;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.wordmark{font-family:'Fraunces',serif;font-weight:500;font-size:18px;}
.wordmark span{color:var(--accent);font-style:italic;font-weight:400;}
nav{display:flex;align-items:center;gap:34px;}
nav a{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-dim);padding-bottom:4px;position:relative;}
nav a:hover{color:var(--ink);}
nav a.active{color:var(--ink);}
nav a.active::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--mark);}
.toggle{width:42px;height:22px;border-radius:11px;border:1px solid var(--line);background:var(--surface);position:relative;cursor:pointer;flex-shrink:0;}
.toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--accent);transition:transform .3s;}
[data-theme="light"] .toggle::after{transform:translateX(20px);}

/* ---------------- hero (accueil) ---------------- */
.hero{position:relative;height:86vh;min-height:560px;display:flex;align-items:flex-end;background:linear-gradient(180deg,rgba(21,22,26,0) 0%,rgba(21,22,26,.88) 100%),var(--bg) center/cover no-repeat;background-blend-mode:normal;transition:background-image .4s;}
.hero-inner{padding:0 44px 60px;max-width:900px;}
.hero-eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#D8D5CC;margin-bottom:16px;display:flex;align-items:center;gap:10px;}
.hero-eyebrow::before{content:"";width:22px;height:1px;background:var(--mark);}
.hero h1{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:clamp(34px,6vw,68px);line-height:1.06;color:#F4F2ED;max-width:15ch;}
.hero p{margin-top:18px;color:#C9C6BE;font-size:15px;max-width:46ch;line-height:1.6;}
.hero-links{display:flex;gap:14px;margin-top:28px;flex-wrap:wrap;}
.hero-links a{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;padding:11px 18px;border:1px solid rgba(244,242,237,.35);color:#F4F2ED;}
.hero-links a.primary{background:var(--mark);border-color:var(--mark);}

section{padding:100px 44px;max-width:1400px;margin:0 auto;}
.section-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:48px;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:20px;}
.section-head .tag{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--mark);margin-bottom:8px;display:block;}
.section-head h2{font-family:'Fraunces',serif;font-weight:400;font-size:clamp(24px,2.8vw,34px);}
.section-head p{color:var(--ink-dim);font-size:13px;max-width:36ch;text-align:right;}

/* ---------------- planche-contact (grilles de galeries) ---------------- */
.sheet{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--line);border:1px solid var(--line);}
.sheet.cols-4{grid-template-columns:repeat(4,1fr);}
.frame{background:var(--bg);position:relative;overflow:hidden;aspect-ratio:4/5;cursor:pointer;display:block;}
.frame img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(45%) contrast(1.02);transition:filter .5s,transform .6s;}
.frame:hover img{filter:grayscale(0%) contrast(1.05);transform:scale(1.035);}
.frame-num{position:absolute;top:0;left:0;height:100%;width:24px;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.1em;color:#EDEAE2;z-index:2;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 30%,rgba(0,0,0,.15) 70%,rgba(0,0,0,.55));}
.frame-meta{position:absolute;left:24px;right:0;bottom:0;padding:13px 15px;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0));z-index:2;}
.frame-meta .cat{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.frame-meta h3{font-family:'Fraunces',serif;font-weight:500;font-size:17px;color:#F4F2ED;margin-top:4px;}
.frame-meta .coords{font-size:10px;color:#C9C6BE;margin-top:5px;}

.about-strip{display:grid;grid-template-columns:1fr 1.4fr;gap:60px;align-items:center;}
.about-strip img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(30%);}
.about-strip h2{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:clamp(24px,3vw,32px);margin-bottom:18px;}
.about-strip p{color:var(--ink-dim);font-size:14.5px;line-height:1.75;max-width:52ch;}
.about-strip a{display:inline-block;margin-top:20px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--mark);padding-bottom:3px;}

footer{padding:36px 44px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--ink-dim);}

/* ---------------- page-head générique ---------------- */
.page-head{padding:56px 44px 0;max-width:1440px;margin:0 auto;}
.page-head.pb{padding-bottom:40px;}
.page-head .tag{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--mark);display:block;margin-bottom:10px;}
.page-head h1{font-family:'Fraunces',serif;font-weight:400;font-style:italic;font-size:clamp(30px,4vw,48px);}

/* ---------------- galeries.html : toolbar + pager ---------------- */
main{padding:36px 44px 100px;max-width:1440px;margin:0 auto;}
.toolbar{position:sticky;top:73px;z-index:40;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 18px;margin-bottom:28px;background:var(--surface);border:1px solid var(--line);}
.search{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:8px 12px;flex:1;min-width:180px;}
.search input{border:none;background:transparent;color:var(--ink);font-family:inherit;font-size:13px;width:100%;outline:none;}
.chips{display:flex;gap:6px;flex-wrap:wrap;}
.chip{padding:7px 13px;font-size:11.5px;letter-spacing:.03em;border:1px solid var(--line);background:transparent;color:var(--ink-dim);}
.chip.active{background:var(--mark);border-color:var(--mark);color:#fff;}
select{border:1px solid var(--line);background:transparent;color:var(--ink);font-family:inherit;font-size:12px;padding:8px 10px;}
.count{margin-left:auto;font-size:11.5px;color:var(--ink-dim);white-space:nowrap;}
.index-layout{display:grid;grid-template-columns:52px 1fr;gap:24px;}
.year-rail{position:sticky;top:150px;align-self:start;display:flex;flex-direction:column;gap:4px;}
.year-rail button{background:none;border:none;font-size:11px;color:var(--ink-dim);padding:5px 0;text-align:left;}
.year-rail button.active{color:var(--mark);font-weight:600;}
.pager{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line);}
.pager button{background:none;border:1px solid var(--line);color:var(--ink);width:34px;height:34px;}
.pager button:disabled{opacity:.3;cursor:default;}
.pager .plate{font-size:12px;letter-spacing:.08em;}
.pager .plate b{color:var(--mark);font-weight:600;}

/* ---------------- états (chargement / erreur / vide) ---------------- */
.state{padding:60px 20px;text-align:center;color:var(--ink-dim);font-size:13.5px;}
.state.error{color:var(--mark);}

/* ---------------- carte.html ---------------- */
main.map-main{padding:0 44px 100px;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;}
#map{height:640px;border:1px solid var(--line);}
[data-theme="dark"] #map{filter:saturate(.2) brightness(.85) invert(.92) contrast(.9) hue-rotate(180deg);}
.map-stats{display:flex;flex-direction:column;gap:0;border:1px solid var(--line);height:fit-content;}
.stat-row{display:flex;justify-content:space-between;gap:16px;padding:16px 18px;border-bottom:1px solid var(--line);font-size:13px;}
.stat-row:last-child{border-bottom:none;}
.stat-row .v{font-family:'Fraunces',serif;font-style:italic;text-align:right;}
.stat-row .k{color:var(--ink-dim);font-size:11px;flex-shrink:0;}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:var(--surface);color:var(--ink);}
.leaflet-popup-content a{color:var(--mark);}
.map-popup h4{font-family:'Fraunces',serif;font-size:14px;margin-bottom:4px;}
.map-popup p{font-size:11.5px;color:var(--ink-dim);margin-bottom:6px;}
.map-popup a{font-size:11px;letter-spacing:.05em;text-transform:uppercase;}

/* ---------------- timeline.html ---------------- */
main.tl-main{padding:0 44px 100px;max-width:1000px;margin:0 auto;}
.tl{position:relative;padding-left:26px;}
.tl::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--line);}
.tl-year{position:relative;margin-bottom:4px;}
.tl-year-btn{background:none;border:none;display:flex;align-items:baseline;gap:16px;width:100%;text-align:left;padding:10px 0;}
.tl-year-btn::before{content:"";position:absolute;left:-30px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--mark);margin-top:10px;}
.tl-year-btn h2{font-family:'Fraunces',serif;font-size:26px;font-weight:400;color:var(--ink);}
.tl-year-btn .cnt{color:var(--ink-dim);font-size:11px;}
.tl-year-btn .car{margin-left:auto;color:var(--ink-dim);font-size:13px;transition:transform .25s;}
.tl-year.open .car{transform:rotate(90deg);}
.tl-items{display:none;flex-wrap:wrap;gap:8px;margin:12px 0 34px;}
.tl-year.open .tl-items{display:flex;}
.tl-item{padding:8px 13px;border:1px solid var(--line);font-size:11.5px;color:var(--ink-dim);}
.tl-item:hover{color:var(--ink);border-color:var(--mark);}

/* ---------------- a-propos.html ---------------- */
main.bio-main{padding:80px 44px 100px;max-width:1100px;margin:0 auto;display:grid;grid-template-columns:0.85fr 1.15fr;gap:64px;align-items:start;}
main.bio-main img{width:100%;aspect-ratio:4/5;object-fit:cover;filter:grayscale(30%);position:sticky;top:110px;}
.bio .tag{font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--mark);display:block;margin-bottom:14px;}
.bio h1{font-family:'Fraunces',serif;font-weight:400;font-style:italic;font-size:clamp(28px,4vw,44px);margin-bottom:26px;}
.bio p{color:var(--ink-dim);font-size:14.5px;line-height:1.8;margin-bottom:18px;max-width:56ch;}
.bio .quote{font-family:'Fraunces',serif;font-style:italic;font-size:20px;color:var(--ink);border-left:2px solid var(--mark);padding-left:20px;margin:30px 0;}
.facts{margin-top:36px;border-top:1px solid var(--line);padding-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.facts div span{display:block;}
.facts .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:4px;}
.facts .v{font-size:13.5px;}

/* ---------------- galerie.html : détail ---------------- */
.crumb{padding:20px 44px 0;max-width:1440px;margin:0 auto;font-size:11px;color:var(--ink-dim);}
.crumb a:hover{color:var(--mark);}
.detail-hero{padding:28px 44px 0;max-width:1440px;margin:0 auto;}
.detail-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;padding-bottom:26px;border-bottom:1px solid var(--line);}
.detail-head h1{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:clamp(28px,4vw,46px);}
.detail-meta{font-size:11.5px;color:var(--ink-dim);margin-top:10px;display:flex;flex-wrap:wrap;}
.detail-meta span{margin-right:16px;}
main.detail-main{padding:32px 44px 100px;max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1fr 300px;gap:40px;}
.rolls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.roll{padding:8px 14px;font-size:11.5px;border:1px solid var(--line);color:var(--ink-dim);background:transparent;}
.roll.active{border-color:var(--mark);color:var(--mark);}
.photo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:3px;}
.photo-grid .ph{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--surface);cursor:pointer;}
.photo-grid img{width:100%;height:100%;object-fit:cover;filter:grayscale(35%);transition:filter .4s,transform .5s;}
.photo-grid .ph:hover img{filter:grayscale(0%);transform:scale(1.05);}
.photo-grid .ph .n{position:absolute;bottom:5px;right:6px;font-size:9px;color:#EDEAE2;text-shadow:0 1px 3px rgba(0,0,0,.7);}
aside{display:flex;flex-direction:column;gap:22px;}
.side-card{border:1px solid var(--line);padding:18px;}
.side-card h4{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:12px;}
.side-card p{font-size:13px;line-height:1.65;color:var(--ink-dim);}
#miniMap{height:220px;border:1px solid var(--line);}
[data-theme="dark"] #miniMap{filter:saturate(.2) brightness(.85) invert(.92) contrast(.9) hue-rotate(180deg);}
.no-map{height:220px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink-dim);text-align:center;padding:12px;}
.loc-note{font-size:12px;color:var(--ink-dim);line-height:1.6;}
.loc-note b{color:var(--ink);font-weight:500;}
.tech-grid{display:flex;flex-direction:column;gap:0;}
.tech-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:12px;}
.tech-row:last-child{border-bottom:none;}
.tech-row .k{color:var(--ink-dim);}
.tech-row .v{text-align:right;}
.kw-list{display:flex;flex-wrap:wrap;gap:6px;}
.kw-list span{font-size:10.5px;padding:5px 9px;border:1px solid var(--line);color:var(--ink-dim);}

/* ---------------- lightbox ---------------- */
.lb{position:fixed;inset:0;z-index:200;background:rgba(9,9,10,.97);display:none;flex-direction:column;}
.lb.open{display:flex;}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;color:#D8D5CC;}
.lb-top .idx{font-size:12px;}
.lb-top .idx b{color:var(--mark);}
.lb-top-actions{display:flex;align-items:center;gap:10px;}
.lb-close{background:none;border:1px solid rgba(216,213,204,.3);color:#D8D5CC;width:34px;height:34px;font-size:16px;}
.lb-info{background:none;border:1px solid rgba(216,213,204,.3);color:#D8D5CC;width:34px;height:34px;font-family:'Fraunces',serif;font-style:italic;font-size:15px;border-radius:50%;}
.lb-info:hover{border-color:var(--mark);color:var(--mark);}
.lb-info.active{background:var(--mark);border-color:var(--mark);color:#fff;}
.lb-body{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:0 70px;min-height:0;}
.lb-body img{max-width:100%;max-height:100%;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6);}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:1px solid rgba(216,213,204,.3);background:rgba(20,20,22,.4);color:#D8D5CC;font-size:18px;display:flex;align-items:center;justify-content:center;}
.lb-nav:hover{border-color:var(--mark);color:var(--mark);}
.lb-prev{left:16px;} .lb-next{right:16px;}
.lb-sprocket{height:14px;display:flex;justify-content:space-evenly;align-items:center;opacity:.35;}
.lb-sprocket span{width:6px;height:6px;border-radius:1px;background:#D8D5CC;}
.lb-caption{max-width:820px;margin:0 auto;padding:18px 28px 8px;text-align:center;}
.lb-caption .cap{font-family:'Fraunces',serif;font-style:italic;font-size:19px;color:#F4F2ED;}
.lb-caption .meta{margin-top:8px;font-size:11px;color:#A9A6A0;letter-spacing:.02em;}
.lb-caption .meta span{margin:0 10px;}
.lb-info-panel{margin-top:14px;padding:14px 18px;background:rgba(255,255,255,.04);border:1px solid rgba(216,213,204,.15);text-align:left;font-size:13px;line-height:1.7;color:#C9C6BE;}
.lb-filmstrip{display:flex;gap:6px;justify-content:center;padding:16px 28px 26px;overflow-x:auto;}
.lb-filmstrip img{width:58px;height:58px;object-fit:cover;opacity:.4;cursor:pointer;filter:grayscale(60%);transition:opacity .25s,filter .25s;flex-shrink:0;}
.lb-filmstrip img:hover{opacity:.75;}
.lb-filmstrip img.cur{opacity:1;filter:grayscale(0%);outline:1px solid var(--mark);outline-offset:2px;}

/* ---------------- 404 ---------------- */
.notfound-body{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:20px;}
.frame-void{width:220px;aspect-ratio:4/5;border:1px dashed var(--line);position:relative;margin-bottom:36px;display:flex;align-items:center;justify-content:center;}
.frame-void::before,.frame-void::after{content:"";position:absolute;width:22px;height:22px;border:1px solid var(--mark);opacity:.6;}
.frame-void::before{top:-1px;left:-1px;border-right:none;border-bottom:none;}
.frame-void::after{bottom:-1px;right:-1px;border-left:none;border-top:none;}
.frame-void span{font-size:11px;color:var(--ink-dim);letter-spacing:.1em;}
.notfound-body h1{font-family:'Fraunces',serif;font-style:italic;font-weight:400;font-size:clamp(30px,5vw,50px);}
.notfound-body p{margin-top:14px;color:var(--ink-dim);font-size:14px;max-width:40ch;}
.notfound-body .back{margin-top:30px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--mark);padding-bottom:4px;}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  header{padding:16px 20px;}
  nav{display:none;}
  section{padding:60px 20px;}
  .sheet{grid-template-columns:repeat(2,1fr);}
  .sheet.cols-4{grid-template-columns:repeat(2,1fr);}
  .about-strip{grid-template-columns:1fr;}
  .section-head p{text-align:left;}
  .page-head,main{padding-left:20px;padding-right:20px;}
  .index-layout{grid-template-columns:1fr;}
  .year-rail{position:static;flex-direction:row;overflow-x:auto;}
  main.map-main{grid-template-columns:1fr;}
  #map{height:420px;}
  main.detail-main{grid-template-columns:1fr;}
  .photo-grid{grid-template-columns:repeat(3,1fr);}
  .lb-body{padding:0 14px;}
  .lb-nav{width:36px;height:36px;}
  .lb-filmstrip img{width:44px;height:44px;}
  main.bio-main{padding:50px 20px;grid-template-columns:1fr;}
  main.bio-main img{position:static;}
}