:root{--paper:#f6f0e5;--ink:#173041}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:Georgia,'Times New Roman',serif}
.stage,.album-stage,.expo-stage{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f6f0e5}
.artboard{position:relative;width:100vw;height:56.25vw;max-height:100vh;max-width:177.777vh}
.hero-img{width:100%;height:100%;object-fit:contain;display:block}
.hotspot{position:absolute;display:block;text-decoration:none;background:transparent;cursor:pointer}
.hotspot span{position:absolute;left:-9999px}
.hotspot:focus-visible{outline:3px solid #246b8a;outline-offset:2px;background:rgba(255,255,255,.12)}
.debug-hotspots .hotspot{outline:3px solid #c43b32;background:rgba(196,59,50,.16);z-index:20}
.debug-hotspots .hotspot:nth-of-type(2){outline-color:#206a8a;background:rgba(32,106,138,.16)}
.debug-hotspots .hotspot:nth-of-type(3){outline-color:#6d5c9b;background:rgba(109,92,155,.16)}
.debug-hotspots .hotspot:nth-of-type(4){outline-color:#2f8254;background:rgba(47,130,84,.16)}
.debug-hotspots .hotspot:nth-of-type(5){outline-color:#b06d17;background:rgba(176,109,23,.16)}
.debug-hotspots .hotspot:nth-of-type(6){outline-color:#8b4772;background:rgba(139,71,114,.16)}
.debug-hotspots .hotspot::before{content:attr(data-hotspot-id);position:absolute;left:2px;top:2px;max-width:calc(100% - 4px);padding:2px 4px;background:rgba(24,35,42,.92);color:white;font:9px/1.1 Consolas,monospace;white-space:normal}
.debug-hotspots .hotspot span{left:2px;top:22px;max-width:calc(100% - 4px);padding:3px 5px;background:rgba(24,35,42,.82);color:white;font:11px/1.2 Arial,sans-serif;white-space:normal}
.debug-hotspots .hotspot::after{content:attr(data-coordinates);position:absolute;left:2px;bottom:2px;padding:2px 4px;background:rgba(255,255,255,.88);color:#25323a;font:9px/1 Arial,sans-serif;white-space:nowrap}
.nav-hotspot{z-index:6}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);font-family:Georgia,'Times New Roman',serif;font-size:clamp(44px,5vw,86px);line-height:1;color:rgba(80,55,35,.55);font-weight:400;text-shadow:0 1px 3px rgba(255,255,255,.55)}
.nav-prev{left:20%}
.nav-next{right:20%}
.nav-hotspot:hover .nav-arrow{color:rgba(80,55,35,.82)}
body.debug .hotspot{background:rgba(190,20,20,.24);outline:2px solid rgba(190,20,20,.9)}
body.debug .hotspot span{left:4px;top:4px;color:white;background:rgba(0,0,0,.65);padding:2px 5px;font:12px Arial,sans-serif}
.back-hotspot{position:absolute;left:1.7%;top:2.2%;width:10.5%;height:6.2%;display:block;z-index:5;text-decoration:none}
.back-hotspot::before{content:'‹ retour';position:absolute;color:rgba(80,55,35,.72);font:bold clamp(14px,1.2vw,22px) Arial,sans-serif;text-transform:lowercase}
.simple{min-height:100vh;padding:6vw}
.simple h1{font-size:clamp(42px,7vw,96px);font-weight:400;margin:0 0 24px}
.simple code{background:#fff7ea;padding:.2em .4em;border-radius:.25em}
.mobile-board{display:none}
@media (orientation:portrait){
  .artboard{width:100vw;height:177.777vw;max-height:100vh;max-width:56.25vh}
  .desktop-board{display:none}.mobile-board{display:block}
  .back-hotspot{left:3%;top:1.4%;width:26%;height:5%}
}


.album-board{position:relative;width:100vw;height:56.25vw;max-height:100vh;max-width:177.777vh;background:url('assets/album_frame_16x9.png') center/100% 100% no-repeat}
.album-main{position:absolute;left:5.0%;top:8.2%;width:73.2%;height:76.9%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.album-main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.album-caption{position:absolute;left:5.0%;top:86.5%;width:73.2%;height:8.4%;padding:.85% 1.2%;font-size:clamp(12px,1.18vw,19px);line-height:1.22;overflow:hidden;color:#283b45;font-style:italic}
.album-thumbs{position:absolute;left:79.25%;top:8.8%;width:11.45%;height:86.2%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:0}
.album-thumbs-inner{display:flex;flex-direction:column;align-items:center;gap:0.15vh;width:100%;padding:0}
.album-thumb{width:100%;aspect-ratio:1.22/1;border:0;padding:0;background:transparent;cursor:pointer;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.album-thumb img{width:88.0%;height:88.0%;object-fit:cover;display:block;margin:0;opacity:.88}
.album-thumb.active img{outline:3px solid rgba(23,48,65,.45);outline-offset:-3px}
.album-counter{position:absolute;left:79.25%;top:95.1%;width:11.45%;height:2.2%;text-align:center;font:14px Georgia,serif;color:rgba(23,48,65,.65)}
.album-action{position:absolute;display:block;text-decoration:none;cursor:pointer}
.album-action span{position:absolute;left:-9999px}
body.debug .album-action{outline:2px solid rgba(20,80,190,.85);background:rgba(20,80,190,.14)}
body.debug .album-main{outline:2px solid rgba(20,140,20,.85)}
body.debug .album-caption{outline:2px solid rgba(120,80,20,.85)}
body.debug .album-thumbs{outline:2px solid rgba(120,20,140,.85)}
@media (orientation:portrait){
  .album-board{width:100vw;height:177.777vw;max-height:100vh;max-width:56.25vh;background-image:url('assets/album_frame_9x16.png')}
  .album-main{left:5.0%;top:6.3%;width:90.0%;height:69.8%;}
  .album-caption{left:5.0%;top:78.3%;width:90.0%;height:6.7%;padding:2.1% 3%;font-size:clamp(11px,2.85vw,17px);line-height:1.18}
  .album-thumbs{left:5.0%;top:87.0%;width:90.0%;height:9.6%;overflow-x:auto;overflow-y:hidden;padding:0}
  .album-thumbs-inner{height:100%;display:flex;flex-direction:row;align-items:center;gap:1.2%;padding:0}
  .album-thumb{height:100%;width:auto;aspect-ratio:1.22/1;flex:0 0 auto}
  .album-thumb img{width:88.0%;height:88.0%}
  .album-counter{left:5.0%;top:97.2%;width:90.0%;height:2.0%;}
}


.expo-board{position:relative;width:100vw;height:56.25vw;max-height:100vh;max-width:177.777vh;background:url('assets/exposition_frame_16x9.png') center/100% 100% no-repeat}
.expo-main{position:absolute;left:9.0%;top:8.0%;width:64.5%;height:70.5%;display:flex;align-items:center;justify-content:center;overflow:hidden}
.expo-main img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.expo-caption{position:absolute;left:9.0%;top:80.2%;width:64.5%;height:9.0%;padding:.85% 1.2%;font-size:clamp(12px,1.18vw,19px);line-height:1.22;overflow:hidden;color:#283b45;font-style:italic}
.expo-thumbs{position:absolute;left:78.0%;top:8.0%;width:13.2%;height:81.2%;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;padding:0}
.expo-thumbs-inner{display:flex;flex-direction:column;align-items:center;gap:0.35vh;width:100%;padding:0}
.expo-thumb{width:100%;aspect-ratio:1.35/1;border:0;padding:0;background:transparent;cursor:pointer;overflow:hidden;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.expo-thumb img{width:90.0%;height:90.0%;object-fit:cover;display:block;margin:0;opacity:.88}
.expo-thumb.active img{outline:3px solid rgba(23,48,65,.45);outline-offset:-3px}
.expo-counter{position:absolute;left:78.0%;top:91.0%;width:13.2%;height:3.0%;text-align:center;font:14px Georgia,serif;color:rgba(23,48,65,.65)}
.expo-action{position:absolute;display:block;text-decoration:none;cursor:pointer}
.expo-action span{position:absolute;left:-9999px}
body.debug .expo-action{outline:2px solid rgba(20,80,190,.85);background:rgba(20,80,190,.14)}
body.debug .expo-main{outline:2px solid rgba(20,140,20,.85)}
body.debug .expo-caption{outline:2px solid rgba(120,80,20,.85)}
body.debug .expo-thumbs{outline:2px solid rgba(120,20,140,.85)}
@media (orientation:portrait){
  .expo-board{width:100vw;height:177.777vw;max-height:100vh;max-width:56.25vh;background-image:url('assets/exposition_frame_9x16_sans_vignettes_v0978.png')}
  .expo-main{left:10.0%;top:6.0%;width:80.0%;height:67.5%;}
  .expo-caption{left:10.0%;top:75.0%;width:80.0%;height:8.2%;padding:2.1% 3%;font-size:clamp(11px,2.85vw,17px);line-height:1.18}
  .expo-thumbs{left:8.0%;top:86.0%;width:84.0%;height:10.2%;overflow-x:auto;overflow-y:hidden;padding:0}
  .expo-thumbs-inner{height:100%;display:flex;flex-direction:row;align-items:center;gap:1.0%;padding:0}
  .expo-thumb{height:100%;width:auto;aspect-ratio:1.0/1;flex:0 0 auto}
  .expo-thumb img{width:90.0%;height:90.0%}
  .expo-counter{left:8.0%;top:96.8%;width:84.0%;height:2.0%;}
}

.album-main{position:absolute}.album-caption{}.album-thumbs{}.album-thumbs-inner{}.album-thumb{}.album-counter{}.album-action{}

/* SITGEN v0.57 — bouton retour unique sur tout le site */
:root{--sitgen-font-main:"Cormorant Garamond","EB Garamond",Georgia,"Times New Roman",serif;}
.back-hotspot,
a.back,
.gallery-head a.back{
  position:fixed !important;
  left:24px !important;
  top:18px !important;
  width:auto !important;
  height:auto !important;
  z-index:9999 !important;
  display:inline-block !important;
  text-decoration:none !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  margin:0 !important;
  color:rgba(37,50,58,.54) !important;
  font:700 14px/1 var(--sitgen-font-main) !important;
  letter-spacing:.01em !important;
  text-transform:lowercase !important;
  pointer-events:auto !important;
}
.back-hotspot::before{
  content:'‹ retour' !important;
  position:static !important;
  color:rgba(37,50,58,.54) !important;
  font:700 14px/1 var(--sitgen-font-main) !important;
  letter-spacing:.01em !important;
  text-transform:lowercase !important;
}
.back-hotspot:hover::before,
a.back:hover,
.gallery-head a.back:hover{color:rgba(37,50,58,.82) !important;}
@media (orientation:portrait), (max-width:900px){
  .back-hotspot,
  a.back,
  .gallery-head a.back{left:12px !important;top:10px !important;font-size:12px !important;}
  .back-hotspot::before{font-size:12px !important;}
}


/* v0.97.4 — exposition 9/16 : pas de bande vignettes, swipe sur la grande photo. */
@media (orientation:portrait){
  .expo-thumbs{display:none !important;}
  .expo-main{left:7.5% !important;top:6.5% !important;width:85% !important;height:72% !important;}
  .expo-caption{left:7.5% !important;top:80.5% !important;width:85% !important;height:8.5% !important;}
  .expo-counter{left:7.5% !important;top:90.5% !important;width:85% !important;height:3.2% !important;}
  .expo-action{width:10% !important;height:18% !important;top:38% !important;}
  .expo-action[data-action="previous_photo"]{left:0 !important;}
  .expo-action[data-action="next_photo"]{left:90% !important;}
}
/* v0.97.4 — accueil 9/16 : hotspot clé élargi et replacé. */
@media (orientation:portrait){
  .mobile-board a.hotspot[href="acces.html"]{
    left:66% !important;
    top:4.5% !important;
    width:30% !important;
    height:16% !important;
  }
}


/* v0.97.5 — production mobile : exposition, clé accueil. */
@media (orientation:portrait), (max-width:900px){
  .expo-thumbs,
  .expo-thumbs-inner,
  .expo-thumb{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
    width:0 !important;
    height:0 !important;
    overflow:hidden !important;
  }
  .expo-main{
    left:6.5% !important;
    top:7.0% !important;
    width:87% !important;
    height:73% !important;
    z-index:4 !important;
    touch-action:pan-y !important;
  }
  .expo-caption{
    left:7% !important;
    top:81% !important;
    width:86% !important;
    height:8% !important;
  }
  .expo-counter{
    left:7% !important;
    top:90.5% !important;
    width:86% !important;
    height:4% !important;
  }
  .expo-action{
    display:block !important;
    z-index:7 !important;
    top:30% !important;
    width:18% !important;
    height:45% !important;
    opacity:0 !important;
  }
  .expo-action[data-action="previous_photo"]{left:0 !important;}
  .expo-action[data-action="next_photo"]{left:82% !important;}

  .mobile-board a.hotspot[href*="acces"]{
    left:56% !important;
    top:0% !important;
    width:44% !important;
    height:26% !important;
    z-index:30 !important;
    pointer-events:auto !important;
    display:block !important;
  }
}


/* v0.97.6 — mobile hard fixes : expo thumbnails, key hotspot. */
@media (orientation:portrait), (max-width:900px){
  .expo-thumbs,
  .expo-thumbs-inner,
  .expo-thumb{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
    width:0 !important;
    height:0 !important;
    overflow:hidden !important;
  }
  .expo-main{
    left:6.5% !important;
    top:7.0% !important;
    width:87% !important;
    height:73% !important;
    z-index:4 !important;
    touch-action:pan-y !important;
  }
  .expo-action{
    display:block !important;
    z-index:7 !important;
    top:30% !important;
    width:18% !important;
    height:45% !important;
    opacity:0 !important;
  }
  .expo-action[data-action="previous_photo"]{left:0 !important;}
  .expo-action[data-action="next_photo"]{left:82% !important;}
  .mobile-board a.hotspot[href*="acces"]{
    left:56% !important;
    top:0% !important;
    width:44% !important;
    height:26% !important;
    z-index:30 !important;
    pointer-events:auto !important;
    display:block !important;
  }
}


/* v0.97.7 — hard mobile fixes kept in both legacy and release assets. */
@media (orientation:portrait), (max-width:900px){
  .expo-thumbs,.expo-thumbs-inner,.expo-thumb{display:none!important;visibility:hidden!important;pointer-events:none!important;width:0!important;height:0!important;overflow:hidden!important;}
  .expo-main{left:6.5%!important;top:7%!important;width:87%!important;height:73%!important;z-index:4!important;touch-action:pan-y!important;}
  .expo-action{display:block!important;z-index:7!important;top:30%!important;width:18%!important;height:45%!important;opacity:0!important;}
  .expo-action[data-action="previous_photo"]{left:0!important;}
  .expo-action[data-action="next_photo"]{left:82%!important;}
  .mobile-board a.hotspot[href*="acces"]{left:56%!important;top:0!important;width:44%!important;height:26%!important;z-index:300!important;pointer-events:auto!important;display:block!important;}
}


/* v0.97.8 — exposition mobile : aucune bande de vignettes, ni DOM ni fond graphique. */
@media (orientation:portrait), (max-width:900px){
  .expo-board{
    background-image:url('assets/exposition_frame_9x16_sans_vignettes_v0978.png') !important;
  }
  .expo-thumbs,
  .expo-thumbs-inner,
  .expo-thumb,
  .gallery-thumb{
    display:none !important;
    visibility:hidden !important;
    pointer-events:none !important;
    position:absolute !important;
    left:-9999px !important;
    top:-9999px !important;
    width:0 !important;
    height:0 !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:0 !important;
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    opacity:0 !important;
  }
  .expo-main{
    left:6.5% !important;
    top:7% !important;
    width:87% !important;
    height:73% !important;
    z-index:4 !important;
  }
  .expo-caption{
    left:7% !important;
    top:81% !important;
    width:86% !important;
    height:8% !important;
  }
  .expo-counter{
    left:7% !important;
    top:91% !important;
    width:86% !important;
    height:4% !important;
  }
}