body{margin:0;    font-family: Montserrat;}
.container { width:100%;margin:20px;margin-top:0px; display: block; align-items: center; justify-content: flex-start;}
.main-layout { display: flex; min-height: 80vh; margin-left:200px;}


@media (min-width: 901px) {
.main-layout { flex-direction: row; }
}

@media (max-width: 900px) {
 .main-layout {  margin-left:0px} 


}
.image-loader{display: none;position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%);z-index: 1000;background: rgba(255,255,255,0.8);padding: 20px;border-radius: 8px;font-weight: bold;font-family: sans-serif}
.work-header {display: flex;gap: 3.5rem;align-items: flex-start;margin-bottom: 2.5rem;flex-wrap: wrap;}
.work-image {background: #eaeaea;border-radius: 14px;object-fit: cover;box-shadow: 0 2px 12px rgba(0,0,0,0.04);flex-shrink: 0;cursor: pointer;border: 3px solid #e7eaf6;transition: box-shadow 0.2s, border-color 0.2s;max-height: 600px;margin-right:15px;width: 100%;margin-top: 10px;}
.work-image:hover {box-shadow: 0 6px 32px rgba(60,72,88,0.10);border-color: #4a69bb;}
.work-info { flex: 1; min-width: 220px; }
h1 {font-size: 2.4rem;font-weight: 700;margin:0}
.artwork-title  {display:flex;font-size: 2.4rem;font-weight: 700;margin-top:5px;letter-spacing: -1px;
justify-content: space-between;}
.artwork-artist-date{display: flex;align-items: center;justify-content: center;width: fit-content;border-radius:5px}
.artwork-artist-date:hover {background: orange;}
.work-meta {font-size: 1.08rem;color: #555;margin-bottom: 1.3rem;line-height: 1.8;}
.work-meta a.meta-link {color: #4a69bb;text-decoration: none;font-weight: 500;border-radius: 4px;padding: 0 0.2em;transition: background 0.15s, color 0.15s;}
.work-meta a.meta-link:hover, .work-meta a.meta-link:focus {background: #e7eaf6;color: #222;text-decoration: underline;}
.work-actions {display: flex;gap: 0.7rem;margin-bottom: 1.5rem;}

.artwork-meta a {text-decoration: none;}
.artwork-meta{margin-top:10px;margin-bottom:15px;display: flex;align-items: center;justify-content: center;padding:2px;background:#fff; border-radius: 5px; width:fit-content;box-shadow: 0 4px 16px rgba(30, 30, 40, 0.12);padding-left:10px;padding-right:10px}

.artwork-museum-link{display:flex}
.artwork-museum a {text-decoration: none;}
.artwork-museum{    max-width: 600px;cursor:pointer;display: flex;align-items: center;justify-content: center;padding:2px;background:#fff; border-radius: 5px; width:fit-content;box-shadow: 0 4px 16px rgba(30, 30, 40, 0.12);padding-left:10px;padding-right:10px}
.artwork-museum-name::first-letter{text-transform: uppercase;}
.link:hover {background: orange;}
.artwork-main-info{display:flex;width:100%;justify-content: space-between;margin-top:5px; margin-bottom:10px;}
.artwork-bottom-line{display: flex;justify-content: space-between;}

.artwork_artist{cursor:pointer;display: flex;align-items: center;justify-content: center;padding:2px; border-radius: 5px; width:fit-content;box-shadow: 0px 2px 5px #171a1f17, 0px 0px 2px #171a1f1F;;}
.artwork-date{margin-left:5px;}
.artist-name{ text-decoration: none; margin-left:10px;margin-right:10px}
.artist-image {width:25px;height:25px;border-radius: 5px;object-fit: cover;}
.oeuvre-container {display: flex;justify-content: center;align-items: center;min-height: 320px;background: #f6f6f7;}

.modal-bg {display: none;position: fixed;z-index: 2000;left: 0; top: 0;width: 100vw; height: 100vh;background: rgba(0,0,0,0.88);align-items: center;justify-content: center;transition: opacity 0.2s;}
.modal-bg.active { display: flex; }
.modal-content {background: #fff;border-radius: 18px;box-shadow: 0 8px 40px rgba(30,40,60,0.25);padding: 2.2rem 2.2rem 1.5rem 2.2rem;max-width: 900px;width: 98vw;position: relative;display: flex;flex-direction: column;align-items: center;border: 5px solid #4a69bb;animation: modalIn 0.25s;}

.container a{color:#000;}

@keyframes modalIn {from { opacity: 0; transform: scale(0.95);}to { opacity: 1; transform: scale(1);}}

.modal-image {max-width: 90vw;max-height: 70vh;border-radius: 10px;margin-bottom: 1.5rem;box-shadow: 0 2px 16px rgba(60,72,88,0.13);border: 2px solid #e7eaf6;background: #eaeaea;object-fit: contain;display: block;}
.modal-meta {text-align: center;margin-bottom: 0.5rem;}
.modal-title {font-size: 2rem;font-weight: 700;margin-bottom: 0.5rem;color: #222;}
.modal-close {position: absolute;top: 16px;right: 24px;background: none;border: none;font-size: 2.2rem;color: #888;cursor: pointer;z-index: 10;transition: color 0.18s;}
.modal-close:hover { color: #4a69bb; }

@media (max-width: 1100px) {
  .modal-content { padding: 1.1rem 0.6rem 1.1rem 0.6rem;}
}


/* VIEWER */

#imageViewerOuter {display: flex;justify-content: center;align-items: center;height: 100%;}
#imageViewerFrame {display: inline-block;padding: 8px;margin-top: 10px;height: 100%;}
#imageViewerFrame,#imageViewerContainer {transition: width 0.5s cubic-bezier(.4,1.4,.6,1), height 0.5s cubic-bezier(.4,1.4,.6,1);width: 100%;}
#imageViewerContainer {cursor: zoom-in;position: relative;overflow: hidden;min-width: 500px;max-height: 500px;}
#imageViewer {width: 100%;height: 100%;max-height: 500px;position:relative;}
#toolbarDiv {position:absolute;pointer-events: auto; display: flex;flex-direction: column;align-items: flex-start;position: absolute;left: 4px;top: 4px;z-index: 500;gap: 5px;opacity: 0;transition: opacity 0.3s;background: rgba(24, 26, 27, 0.93);border-radius: 14px;padding: 5px;box-shadow: 0 4px 16px rgba(30,30,40,0.22);border: 1.5px solid #2a2d2f;width:fit-content}
#imageViewerContainer:hover #toolbarDiv,
#imageViewerContainer:hover .nav-arrow {opacity: 1;pointer-events: auto;}
#toolbarDiv button {background: linear-gradient(135deg, #2d3136 0%, #3a3f47 100%);border: none;border-radius: 7px;padding: 6px;font-size: 15px;color: #fff;cursor: pointer;margin: 0;transition: background 0.2s, color 0.2s, box-shadow 0.2s;outline: none;width: 20px;height: 20px;display: flex;align-items: center;justify-content: center;box-shadow: 0 1px 4px rgba(40,60,90,0.07);}
.nav-arrow {visibility: hidden;position: absolute;width: 25px;height: 25px;background: linear-gradient(135deg, #2d3136 0%, #3a3f47 100%);color: #fff;border: none;border-radius: 50%;font-size: 15px;display: flex;align-items: center;justify-content: center;opacity: 0;pointer-events: none;transition: opacity 0.3s, background 0.2s, color 0.2s, box-shadow 0.2s;z-index: 1001;cursor: pointer;box-shadow: 0 2px 8px rgba(20,60,90,0.10);}
.nav-arrow:hover {background: linear-gradient(135deg, #fff 0%, #fff 100%);color: #232526;box-shadow: 0 2px 12px rgba(0,255,200,0.18);}
.nav-arrow.up    { left: 50%; top: 10px;   }
.nav-arrow.down  { left: 50%; bottom: 10px; }
.nav-arrow.left  { top: 50%; left: 10px;    }
.nav-arrow.right { top: 50%; right: 10px;   }

@media (max-width: 900px) {

  .artwork_artist{margin:auto}
    .artwork-title {display:block;}
    .artwork-main-info{display:block;justify-items: center;margin: auto;margin-bottom:10px}
    .artwork-museum{margin:auto;margin-top:10px;}
    .modal-content { padding: 0.7rem 0.2rem 0.7rem 0.2rem;}
    .modal-title { font-size: 1.3rem; }
    .oeuvre-meta h2 { font-size: 1.3rem; }
    .oeuvre-meta {margin-top: 0.8em;min-width: 0;width: 100%;}
    .container {padding: 0 ;margin:0;flex-direction: column;align-items: center;gap: 1.2rem;text-align: center;}

    #imageViewerFrame { max-width: 98vw; }
    #imageViewerContainer { min-width: 300px;}
    .social-share {justify-self: center!important;    margin: auto;
    margin-bottom: 10px;
    margin-top: 10px;}
    .popin-media-share {justify-self: center!important} 
    
    .artwork-actions{
        display: flex;
        align-items: center;
        margin: auto;
        justify-self: center;}
.popin-container.displayed{display:block!important}
.popin-download {
    
    width: 80%!important;
    
  margin: auto;
      height: 90%;
    height: 90%!important;
}
}

.openseadragon-container .openseadragon-canvas {background:#fff!important}

.defaultImg{    position: absolute;
    margin: auto;
    width:300px;
    height:300%;
    place-self: anchor-center;
    left: 5%;}

.popin-media-share {
text-align: left;
    width: 120px;
    border: solid 1px #ddd;
    border-radius: 5px;
    background: #fff;
    position: absolute;
    margin-top: 5px;
    z-index:1005;
    justify-self: right;
    margin: auto;
  }

  .popin-media-share-line{
    margin:5px;
    gap:5px;
    display:flex;
    font-size: 12px;
    align-items: center;
    cursor:pointer;
  }




  
.share-button, .download-button {text-align: center;
    text-decoration: none;
    display: inline-flex
;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 5px;
    border-radius: 6px;
    background-color: #000;
    border: none;
    color: #fff;
    cursor: pointer;
  height: 25px;}

.share-button i {margin-right: 8px;}

.share-button-container {display:flex;justify-content: flex-end;margin-bottom:0px;margin-top: 0px;}
.social-share{
  margin-bottom: 10px;
  margin-top: 10px;
  justify-self: left;
  
}





iframe{border:0}

.popin-container.displayed{display:flex!important}
download-container{display:flex!important}
.popin-container {
  display:none; 
      align-content: center;
    position: fixed; /* Reste en place même si l'utilisateur fait défiler la page */
    z-index: 5000; /* Place la pop-in au-dessus des autres éléments */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Fond noir avec opacité */
}

.popin-download {
    background-color: #fefefe;
    margin: auto; 
    padding: 2px;
    border: 1px solid #888;
    width: 80%; /* Largeur de la pop-in */
    max-width: 500px; /* Largeur maximale */
    border-radius: 5px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    height:90%
}


.close-btn {
    color: #aaa;
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close-btn:hover {
    color: black;
}


.artwork-actions{display: flex
;
    align-items: center;
  justify-self: right;}

.close-full{position:fixed;
top:100px;right:50px; z-index:100000; background:red}

.artwork-img-noscript{width: 500px;
    height: auto;}