/* style.css */
/* Global */
html,body{margin:0;padding:0;height:100%;background:#fff;overflow:hidden}
/* Header */
header{position:relative;background-color:#333;color:white;padding:1em;border-bottom:2px solid #a76107;z-index:1000}
/* Carte */
#map{position:relative;width:100%;height:100vh;height:calc(100vh - 4.8rem);margin:0}
/* Slider desktop */
#slider-wrapper{position:absolute;top:10px;left:10px;width:200px;padding:5px 10px;background:#333333;border:1px solid #a76107;border-radius:4px;color:#fff;box-shadow:0 2px 6px rgba(0,0,0,.3);z-index:1000;text-align:center}
#centuryLabel{display:block;margin:0 auto .2em;font-size:.9em}
#timeSlider{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:rgb(255,176,97);border-radius:3px;outline:none}
#timeSlider::-webkit-slider-thumb,#timeSlider::-moz-range-thumb{width:16px;height:16px;background:#5e5e5e;border-color:#a76107;cursor:pointer}
#timeSlider:focus-visible{outline:2px solid rgb(255,176,97);outline-offset:2px}
#centuryNumbers{display:flex;justify-content:space-between;font-size:11px;margin-top:4px}
#centuryNumbers span{color:#fff}
/* Modals */
.modal{display:none;position:fixed;inset:0;z-index:2000;overflow:auto;background-color:rgba(0,0,0,.8)}
.modal-content{position:relative;margin:auto;top:50%;transform:translateY(-50%);max-width:90%;text-align:center}
.modal-content img{width:100%;max-height:80vh;object-fit:contain}
.close{position:absolute;top:10px;right:17px;color:#fff;font-size:20px;font-weight:bold;cursor:pointer}
#prev-btn,#next-btn{position:absolute;top:50%;transform:translateY(-50%)}
#prev-btn{left:10px}
#next-btn{right:10px}
/* Modal image agrandie */
#town-enlarged-modal{z-index:4000}
#enlarged-image-container{position:relative;display:inline-block}
#enlarged-image-container img{display:block;max-width:100%;max-height:80vh;object-fit:contain}
#enlarged-prev-btn,#enlarged-next-btn{position:absolute;top:50%;transform:translateY(-50%);background-color:rgba(255,255,255,.7);border:none;padding:10px;cursor:pointer;font-size:24px;border-radius:4px;z-index:4100}
#enlarged-prev-btn{left:0;transform:translate(-100%,-50%)}
#enlarged-next-btn{right:0;transform:translate(100%,-50%)}
/* Marker styles */
.town-marker-fixed{background:url("icons/ribbon.png") no-repeat center/100% 100%;width:150px;height:40px}
.town-marker-inner{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:13px;font-weight:bold;color:#fff;pointer-events:none;white-space:nowrap}
/* Coordonnées souris */
#mouse-coords{position:fixed;bottom:0;left:0;width:100%;background:rgba(0,0,0,.6);color:#fff;text-align:center;padding:5px 0;font-size:14px;z-index:3000}
/* Town-content container */
#town-content-container{position:absolute;top:calc(4.8rem + 1cm);bottom:1cm;left:50%;transform:translateX(-50%);width:45%;background:#ffffff;box-sizing:border-box;padding:1.5rem;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15);overflow:visible;z-index:3000;display:none;border:3px solid #a76107}
#town-content-container .close-btn{position:absolute;top:-9px;right:-9px;background:#ffffff;border:3px solid #a76107;box-shadow:0 2px 8px rgba(0,0,0,.2);width:32px;height:32px;font-size:1.2rem;line-height:1;color:#333;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .3s,transform .3s;z-index:3000}
#town-content-container .close-btn:hover{background:#f9f9f9;transform:scale(1.1)}
/* Town story */
#town-story{position:absolute;top:1.5rem;left:1.5rem;right:1.5rem;bottom:calc(290px + 2.5rem + 2rem);background:#ffffff;border-radius:8px;padding:1rem;overflow-y:auto;box-shadow:0 2px 6px rgba(0,0,0,.1);line-height:1.6;font-size:1rem;min-height:0;z-index:200;border-bottom:1px solid #ddd;scrollbar-width:thin;scrollbar-color:#a76107 #d4d4d4}
#town-story::-webkit-scrollbar{width:8px}
#town-story::-webkit-scrollbar-track{background:#d4d4d4;border-radius:4px;margin:4px 0}
#town-story::-webkit-scrollbar-thumb{background-color:#a76107;border-radius:4px;border:2px solid #d4d4d4}
#town-story::-webkit-scrollbar-thumb:hover{background-color:#915006}
/* Town slideshow */
#town-slideshow{border-top:1px solid #ddd;position:absolute;bottom:1.5rem;left:1.5rem;right:1.5rem;height:290px;background:#ffffff;border-radius:8px;padding:1rem;display:flex;justify-content:center;align-items:center;gap:2.5rem;overflow-x:auto;box-shadow:0 2px 6px rgba(0,0,0,.1);z-index:100}
#town-slideshow::-webkit-scrollbar{height:8px}
#town-slideshow::-webkit-scrollbar-thumb{background:rgba(0,0,0,.2);border-radius:4px}
#town-slideshow img{flex:0 0 auto;width:400px;height:280px;object-fit:cover;border-radius:4px;cursor:pointer;transition:transform .3s;margin:0}
#town-slideshow img:hover{transform:scale(1.05)}
/* Controls intégrés */
#town-prev-btn,#town-next-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.5);color:#fff;border:none;width:32px;height:32px;font-size:1.2rem;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,transform .2s}
#town-prev-btn{left:8px}
#town-next-btn{right:8px}
#town-prev-btn:hover,#town-next-btn:hover{background:rgba(0,0,0,.7);transform:translateY(-2px)}
/* Enlarge overlay */
#town-enlarge-btn{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;z-index:10;border:none;background:none;cursor:pointer;padding:0;margin:0}
/* Leaflet zoom controls */
.leaflet-control-container>.leaflet-bottom.leaflet-right{position:absolute!important;top:calc(.5em + 1.5em + .5em)!important;right:.1em!important;bottom:auto!important;left:auto!important;z-index:1200!important}
/* Utilitaires */
.page-title,.page-subtitle{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Responsive mobile */
@media (max-width:768px){
#slider-wrapper{width:120px;top:8px;left:8px;padding:5px;background:#555;border:none;box-shadow:none;color:#fff}
#centuryLabel{display:none}
#timeSlider{background:rgba(255,255,255,.3)}
#timeSlider::-webkit-slider-thumb,#timeSlider::-moz-range-thumb{background:#fff;border:1px solid #a76107}
#centuryNumbers{font-size:10px;margin-top:2px}
#centuryNumbers span{color:#fff}
#town-content-container{position:absolute;top:calc(4.8rem + 2cm);bottom:2cm;left:0;transform:none;width:100%;padding:1rem;display:none}
#town-story{top:1rem;left:1rem;right:1rem;bottom:calc(200px + 2rem + 3rem)}
#town-slideshow{bottom:1rem;left:1rem;right:1rem;height:200px;padding:.8rem;border-top:1px solid #ddd;z-index:100}
#town-slideshow img{width:280px;height:180px}
}