/* Les Miroirs de l’Ombre : styles partagés par toutes les pages */
:root{--bg:#f4f2ee;--fg:#141414;--mut:#6b6862;--line:#d9d5cd;--ph:#cfcbc2;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#0f0f0f;--fg:#eeeae2;--mut:#9a968e;--line:#2a2a2a;--ph:#232323;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#0f0f0f;--fg:#eeeae2;--mut:#9a968e;--line:#2a2a2a;--ph:#232323;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 Georgia,"Times New Roman",serif}
a{color:inherit}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:28px 0;border-bottom:1px solid var(--line)}
.logo{font-size:20px;letter-spacing:.04em;text-decoration:none}
nav{display:flex;flex-wrap:wrap;gap:12px 22px;font:13px/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
nav a{text-decoration:none;color:var(--mut)}nav a:hover{color:var(--fg)}
.fiche h1{font-size:clamp(34px,6vw,64px);font-weight:400;line-height:1.1;margin:56px 0 8px}
.meta{font:13px/1.5 system-ui,sans-serif;color:var(--mut)}
.txt{max-width:36em;margin:28px 0 8px}
.txt a,.meta a{text-decoration-thickness:1px;text-underline-offset:3px}
h2{font:12px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:48px 0 16px}
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin:36px 0}
.gal figure{margin:0;grid-column:span 3}
.gal figure:nth-child(3n+1){grid-column:span 6}
.gal img{width:100%;height:auto;display:block}
.ph{background:var(--ph);aspect-ratio:3/2;display:flex;align-items:flex-end;padding:12px;font:11px/1.3 system-ui,sans-serif;color:var(--mut);letter-spacing:.08em;text-transform:uppercase}
.gal figure:nth-child(3n+1) .ph{aspect-ratio:16/9}
figcaption{font:13px/1.4 system-ui,sans-serif;color:var(--mut);margin-top:6px}
.pn{display:flex;justify-content:space-between;font:13px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:24px 0;border-top:1px solid var(--line)}
footer{margin:48px 0 40px;padding-top:20px;border-top:1px solid var(--line);font:13px/1.6 system-ui,sans-serif;color:var(--mut)}
@media(max-width:700px){.gal figure,.gal figure:nth-child(3n+1){grid-column:span 6}}

.gal.duo figure,.gal.duo figure:nth-child(3n+1){grid-column:span 3}
@media(max-width:700px){.gal.duo figure,.gal.duo figure:nth-child(3n+1){grid-column:span 6}}

.gal img{-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}

.lead{font-size:1.25em;line-height:1.45;max-width:30em;margin:24px 0 0}

.mos{display:grid;grid-template-columns:repeat(2,minmax(0,440px));gap:24px;justify-content:center;margin:24px 0 36px}
.mos figure{margin:0}.mos img{width:100%;height:auto;display:block;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}
@media(max-width:700px){.mos{grid-template-columns:minmax(0,440px)}}

.anecdote{border-left:2px solid var(--line);padding-left:20px;max-width:36em;margin:36px 0}
.anecdote h3{font-weight:400;font-size:1.3em;line-height:1.3;margin:0 0 12px}
.anecdote p{margin:0 0 12px}
.more{list-style:none;padding:0;margin:0 0 24px;max-width:36em}
.more li{padding:14px 0;border-top:1px solid var(--line)}
.more li:last-child{border-bottom:1px solid var(--line)}

/* v2 : accueil et pages courantes */
.sub{font-size:1.25em;color:var(--mut);margin:0 0 8px}
.hero{padding:72px 0 40px}
.hero h1{font-size:clamp(32px,6vw,60px);line-height:1.1;font-weight:400;margin:0;max-width:16em}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tile{text-decoration:none}
.tile img,.tile .ph{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.tile h3{font-weight:400;font-size:22px;margin:12px 0 0}
.tile span{font:13px/1.4 system-ui,sans-serif;color:var(--mut)}
.list a{display:flex;justify-content:space-between;padding:14px 0;border-top:1px solid var(--line);text-decoration:none}
.list a:last-child{border-bottom:1px solid var(--line)}
.list a:hover{padding-left:8px;transition:padding .15s}
.page h1{font-size:clamp(34px,6vw,56px);font-weight:400;line-height:1.1;margin:56px 0 8px}
@media(max-width:700px){.tiles{grid-template-columns:1fr}}

.gal figure.wide{grid-column:span 6}

.mos.one{grid-template-columns:minmax(0,520px)}

/* galeries plus compactes (images 760 px) : retirer cette ligne pour reprendre toute la largeur */
.gal{max-width:840px;margin-left:auto;margin-right:auto}

.contact{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap;margin:28px 0 16px}
.contact img{width:160px;height:160px;border-radius:4px}
.contact address{font-style:normal}
.contact p{margin:0 0 14px}
.apropos-photo{margin:28px 0 0;max-width:36em}.apropos-photo img{width:100%;height:auto;display:block;-webkit-user-drag:none;user-select:none;-webkit-touch-callout:none;pointer-events:none}

/* archives : reportages en atelier */
.serie{font:12px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin:56px 0 0}
.archive h1{margin-top:10px}
.ouverture{margin:28px 0 0;max-width:840px}.ouverture img{width:100%;height:auto;display:block}
.ouverture .ph{aspect-ratio:3/2}
.citation{max-width:30em;margin:40px 0;padding-left:20px;border-left:2px solid var(--line)}
.citation p{font-size:1.5em;line-height:1.35;font-style:italic;margin:0 0 8px}
.citation cite{font:13px/1.4 system-ui,sans-serif;font-style:normal;color:var(--mut)}
.oeuvre{display:grid;grid-template-columns:minmax(0,36em) minmax(0,260px);gap:40px;align-items:start;max-width:840px}
.oeuvre .txt{margin:0}.oeuvre figure{margin:0}.oeuvre img{width:100%;height:auto;display:block}
@media(max-width:700px){.oeuvre{grid-template-columns:1fr}.oeuvre figure{max-width:300px}}
.gal.mix{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.gal.mix figure{margin:0;flex-grow:calc(var(--r)*100);flex-basis:calc(var(--r)*190px)}
.gal.mix figure .ph,.gal.mix figure img{width:100%;height:auto;aspect-ratio:var(--r)}
.ph.v{aspect-ratio:2/3}
@media(max-width:700px){.gal.mix figure{flex-basis:calc(var(--r)*140px)}}
/* Recherche */
.search{max-width:36em;margin:24px 0 8px}
.search label{display:block;font:13px/1.4 system-ui,sans-serif;color:var(--mut);margin-bottom:8px}
.search input{width:100%;box-sizing:border-box;font:inherit;font-size:1.15em;padding:12px 14px;border:1px solid var(--line);background:transparent;color:inherit;border-radius:0}
.search input:focus{outline:2px solid var(--mut);outline-offset:1px}
.hit{display:grid;grid-template-columns:96px 1fr;gap:18px;padding:18px 0;border-top:1px solid var(--line);text-decoration:none;color:inherit;max-width:840px}
.hit img,.hit .noimg{width:96px;height:96px;object-fit:cover;display:block;background:var(--line)}
.hit h3{font-weight:400;font-size:1.25em;margin:0 0 2px}
.hit .meta{display:block;font:13px/1.4 system-ui,sans-serif;color:var(--mut)}
.hit p{margin:8px 0 0}
.hit mark{background:transparent;color:inherit;border-bottom:2px solid var(--mut)}
.hit:hover h3{text-decoration:underline}
footer a{color:inherit;margin-left:10px}
/* Colonne de lecture : texte et images sur le meme axe */
.fiche>.serie,.fiche>h1,.fiche>.sub,.fiche>.meta,.fiche>.ouverture,.fiche>.oeuvre,.fiche>.pn{max-width:840px;margin-left:auto;margin-right:auto}
.fiche>.txt,.fiche>h2,.fiche>.lead,.fiche>.citation,.fiche>.more,.fiche>.anecdote{max-width:612px;margin-left:auto;margin-right:auto}
@media(min-width:701px){.fiche .txt>p:not(.meta):not(:has(>strong:only-child)){text-align:justify;-webkit-hyphens:auto;hyphens:auto}}

/* Accueil : projets en cours, le revelateur. Fond sombre fixe, images a 760 px non agrandies. */
.rev{position:relative;background:var(--bg);color:var(--fg)}
.rev .tiles{display:block}
.rev .tile{display:grid;grid-template-columns:minmax(0,760fr) minmax(0,292fr);grid-template-rows:1fr auto auto 72px;color:inherit}
.rev .tile img{grid-column:1;grid-row:1/5;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%}
.rev .tile h3{grid-column:2;grid-row:2;margin:0;padding:0 28px;font-size:clamp(28px,3.1vw,38px);line-height:1.12}
.rev .tile span{grid-column:2;grid-row:3;padding:12px 28px 0;color:var(--mut)}
.rev.js .tiles{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.rev.js .tile{grid-area:1/1;opacity:0;visibility:hidden;transition:opacity .9s ease,visibility 0s .9s}
.rev.js .tile.on{opacity:1;visibility:visible;z-index:1;transition:opacity .25s ease}
.rev.js .tile.on img{animation:rev-tirage 1.6s cubic-bezier(.25,.6,.25,1) both}
.rev.js .tile.on h3{animation:rev-titre .8s ease .6s both}
.rev.js .tile.on span{animation:rev-titre .8s ease .9s both}
.rev-nav{position:absolute;z-index:2;left:72.24%;right:0;bottom:22px;padding:0 28px;display:flex;gap:8px}
.rev-nav button{flex:1;height:28px;padding:0;background:none;border:0;cursor:pointer;display:flex;align-items:center}
.rev-nav button i{display:block;width:100%;height:2px;background:var(--line);position:relative;overflow:hidden}
.rev-nav button i::after{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleX(0);transform-origin:left}
.rev-nav button.on i::after{transform:scaleX(1);animation:rev-barre 5s linear both}
.rev-nav button:focus-visible{outline:1px solid var(--fg);outline-offset:2px}
.rev.pause .rev-nav i::after{animation-play-state:paused}
@keyframes rev-tirage{from{filter:brightness(0) contrast(1.8) grayscale(.8)}45%{filter:brightness(.55) contrast(1.35) grayscale(.35)}to{filter:brightness(1) contrast(1) grayscale(0)}}
@keyframes rev-titre{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rev-barre{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:700px){
.rev .tile{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
.rev .tile img{grid-column:1;grid-row:1}
.rev .tile h3{grid-column:1;grid-row:2;padding:18px 16px 0;font-size:26px}
.rev .tile span{grid-column:1;grid-row:3;padding:6px 16px 8px}
.rev-nav{position:static;padding:0 16px 10px}
}
@media(prefers-reduced-motion:reduce){
.rev.js .tile,.rev.js .tile.on{transition:none}
.rev.js .tile.on img,.rev.js .tile.on h3,.rev.js .tile.on span,.rev-nav button.on i::after{animation:none}
}

/* Fantaisie : fondu au noir entre les pages, images qui sortent de l'ombre, interrupteur de theme, 404. */
@view-transition{navigation:auto}
::view-transition{background:#0d0d0c}
::view-transition-old(root){animation:vt-out .3s ease both}
::view-transition-new(root){animation:vt-in .45s ease .08s both}
@keyframes vt-out{to{opacity:0;filter:brightness(.2)}}
@keyframes vt-in{from{opacity:0}}
img.rv{opacity:0;filter:brightness(0)}
img.rvt{transition:opacity 1s ease,filter 1.4s ease}
footer .theme{font:inherit;color:inherit;background:none;border:0;padding:0;margin-left:10px;text-decoration:underline;cursor:pointer}
footer .theme:hover{color:var(--fg)}
/* Bouton Ombre / Lumiere dans le bandeau : un disque mi-clair mi-sombre qui tourne d'un demi-tour */
nav .ombre{display:inline-flex;align-items:center;gap:7px;font:inherit;letter-spacing:inherit;text-transform:inherit;color:var(--fg);background:none;border:1px solid var(--line);border-radius:999px;padding:4px 10px 4px 5px;margin:-5px 0;cursor:pointer;line-height:1}
nav .ombre i{width:15px;height:15px;border-radius:50%;border:1px solid var(--fg);background:linear-gradient(90deg,var(--fg) 50%,transparent 50%);transition:transform .6s cubic-bezier(.4,0,.2,1)}
:root[data-theme="dark"] nav .ombre i{transform:rotate(180deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) nav .ombre i{transform:rotate(180deg)}}
nav .ombre:hover{border-color:var(--fg)}
nav .ombre:focus-visible{outline:1px solid var(--fg);outline-offset:2px}
html.encre::view-transition{background:none}
html.encre::view-transition-old(root),html.encre::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.reflux::view-transition-old(root){z-index:2}
html.reflux::view-transition-new(root){z-index:1}
@media(prefers-reduced-motion:reduce){nav .ombre i{transition:none}}
#hasard{max-width:420px;margin-top:32px}
#hasard .tile img{aspect-ratio:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}img.rv{opacity:1;filter:none}}

/* Note d'accueil (vie privee) */
.note{position:fixed;z-index:50;right:20px;bottom:20px;max-width:340px;display:flex;gap:12px;align-items:flex-start;padding:14px 14px 14px 18px;background:var(--fg);color:var(--bg);font:14px/1.5 system-ui,sans-serif;box-shadow:0 8px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(12px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.note.on{opacity:1;transform:none;pointer-events:auto}
.note p{margin:0}
.note a{color:inherit;white-space:nowrap}
.note button{flex:none;width:28px;height:28px;margin:-4px -4px 0 0;padding:0;border:0;background:none;color:inherit;font:20px/1 system-ui,sans-serif;cursor:pointer;opacity:.7}
.note button:hover,.note button:focus-visible{opacity:1}
@media(max-width:700px){.note{left:16px;right:16px;bottom:16px;max-width:none}}
@media(prefers-reduced-motion:reduce){.note{transition:none}}

/* Agrandissement des photos (PC) */
img.zoom,figure.zoom{cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:rgba(10,10,9,.95);color:#efebe3;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}
.lb.on{opacity:1;visibility:visible;transition:opacity .3s ease}
html.lb-ouvert{overflow:hidden}
.lb figure{margin:0;display:flex;flex-direction:column;align-items:center;max-width:calc(100vw - 160px)}
.lb img{display:block;width:auto;height:auto;max-width:min(100%,760px);max-height:calc(100vh - 110px);object-fit:contain;cursor:e-resize}
.lb img.lb-g{cursor:w-resize}
.lb.seule img{cursor:default}
.lb img.lb-on{animation:lb-ombre .7s ease both}
.lb figcaption{display:flex;gap:24px;justify-content:space-between;width:100%;max-width:760px;margin-top:12px;font:13px/1.5 system-ui,sans-serif;color:#a9a59c}
.lb-num{flex:none}
.lb button{position:absolute;background:none;border:0;color:#efebe3;cursor:pointer;opacity:.65;font:300 44px/1 system-ui,sans-serif;padding:12px 16px}
.lb button:hover,.lb button:focus-visible{opacity:1}
.lb button:focus-visible{outline:1px solid #efebe3}
.lb-x{top:12px;right:12px;font-size:34px!important}
.lb-p{left:12px;top:50%;transform:translateY(-50%)}
.lb-n{right:12px;top:50%;transform:translateY(-50%)}
.lb.seule .lb-p,.lb.seule .lb-n{display:none}
@keyframes lb-ombre{from{opacity:0;filter:brightness(0)}to{opacity:1;filter:none}}
@media(max-width:700px){.lb figure{max-width:100vw}.lb img{max-width:100vw;max-height:calc(100vh - 140px);cursor:default}.lb figcaption{padding:0 14px;font-size:12px}.lb-p,.lb-n{top:auto;bottom:10px;transform:none;font-size:38px!important}.lb-x{top:6px;right:6px}}
@media(prefers-reduced-motion:reduce){.lb,.lb.on{transition:none}.lb img.lb-on{animation:none}}

/* Accueil : la phrase-manifeste. La premiere ligne reste dans l'ombre, la seconde passe dans la lumiere. */
.hero:has(.punch){padding:96px 0 64px}
.hero h1.punch{font-size:clamp(34px,6.6vw,74px);line-height:1.06;letter-spacing:-.01em;max-width:none}
.punch span{display:block}
.punch .l1{color:var(--mut)}
.punch em{font-style:italic}
.hero .signe{margin-top:28px;display:flex;align-items:center;gap:14px;letter-spacing:.18em;text-transform:uppercase;font-size:12px}
.hero .signe::before{content:"";width:40px;height:1px;background:currentColor}
.punch .l1{animation:pu-ombre 1.4s ease both}
.punch .l2{animation:pu-lumiere 1.2s cubic-bezier(.2,.6,.2,1) .8s both}
.hero .signe{animation:pu-signe .9s ease 1.7s both}
@keyframes pu-ombre{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}
@keyframes pu-lumiere{from{opacity:0;transform:translateY(14px);filter:brightness(0)}to{opacity:1;transform:none;filter:none}}
@keyframes pu-signe{from{opacity:0}to{opacity:1}}
@media(max-width:700px){.hero:has(.punch){padding:56px 0 40px}}
@media(prefers-reduced-motion:reduce){.punch .l1,.punch .l2,.hero .signe{animation:none}}

/* Fier d'etre : resume « En bref », replie par defaut */
.enbref{max-width:612px;margin:18px 0 26px;border-left:2px solid var(--fg);padding:2px 0 2px 16px}
.enbref summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:10px;font:12px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--fg);padding:6px 0}
.enbref summary::-webkit-details-marker{display:none}
.enbref summary::after{content:"+";font-size:16px;letter-spacing:0;transition:transform .25s ease}
.enbref[open] summary::after{transform:rotate(45deg)}
.enbref summary:focus-visible{outline:1px solid var(--fg);outline-offset:4px}
.enbref ul{margin:10px 0 4px;padding-left:18px}
.enbref li{margin:0 0 8px;line-height:1.5}
.enbref[open] ul{animation:eb-ouvre .35s ease both}
@keyframes eb-ouvre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.enbref[open] ul{animation:none}.enbref summary::after{transition:none}}
.rev .tile img.flotte{object-fit:contain}
.ouverture.couv img{width:auto;max-width:min(100%,480px);margin:0 auto}
.fiche>.video{max-width:560px;margin:28px auto 0}.video video{display:block;width:100%;height:auto;background:#000}.video figcaption{margin-top:8px;font-size:14px;color:var(--mut)}
/* Annonce du nouveau site, en tete de l'accueil */
.annonce{position:relative;max-width:640px;margin:32px 0 0;padding:18px 52px 18px 22px;border:1px solid var(--line);border-left:3px solid var(--fg);font-size:16px;line-height:1.55;opacity:0;transform:translateY(-6px);transition:opacity .6s ease,transform .6s ease}
.annonce.on{opacity:1;transform:none}
.annonce.fin{opacity:0;transform:translateY(-6px);transition-duration:.4s}
.annonce p{margin:0 0 8px}.annonce p:last-of-type{margin:0}
.annonce .annonce-t{font:12px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mut);margin-bottom:12px}
.annonce a{text-decoration-thickness:1px;text-underline-offset:3px}
.annonce button{position:absolute;top:10px;right:10px;width:32px;height:32px;padding:0;border:0;background:none;color:var(--mut);font:22px/1 system-ui,sans-serif;cursor:pointer}
.annonce button:hover{color:var(--fg)}
@media(max-width:700px){.annonce{margin-top:22px;font-size:15px}}
@media(prefers-reduced-motion:reduce){.annonce,.annonce.fin{transition:none}}