body{margin:0;    font-family: Montserrat;}
.main-layout { text-align: center;  }
title {margin-top:0px;font-size: 24px !important ;margin-bottom: 24px;color: #000;font-weight: 700;}


.search-bar-museum {display: flex;align-items: center;background: #fff;border-radius: 24px;padding: 4px 16px;box-shadow: 0 2px 8px #0001;height:50px;margin:auto;}
.search-section{text-align: center;margin-top:50px;}
.btn-rechercher:hover {background-color: #0056b3;}

.input-block { position: relative; }
.artist-input {width: 100%;font-size: 1.1em;padding: 12px 14px;border: 1.5px solid #c3c3c3;border-radius: 10px;outline: none;box-shadow: 0 2px 8px rgba(0,0,0,0.06);transition: border-color 0.2s;background: #fff;}
.artist-input:focus { border-color: #0078d7; }

.location_suggestions {background: #fff;border: 1.5px solid #c3c3c3;border-top: none;border-radius: 0 0 5px 5px;box-shadow: 0 4px 16px rgba(0,0,0,0.12);position: absolute;width: 100%;z-index: 1002;max-height: 180px;overflow-y: auto;display: none;}
.suggestions {background: #fff;border: 1.5px solid #c3c3c3;border-top: none;border-radius: 0 0 10px 10px;box-shadow: 0 4px 16px rgba(0,0,0,0.12);position: absolute; width: 100%;z-index: 1100;max-height: 180px;overflow-y: auto;display: none;}
.suggestion {padding: 10px 20px;cursor: pointer;transition: background 0.2s;}
.suggestion:hover, .suggestion.active {background: #f0f8ff;}
.suggestion-link { cursor:pointer; padding: 0.4rem 0.8rem; border-radius: 6px; color: #222; text-decoration: none; font-weight: 500; opacity: 0.8; transition: background 0.2s, opacity 0.2s; display: block;text-align:left; }
.selected-artists {display: none;flex-wrap: wrap;gap: 8px;margin: 8px 0 0 0;}
.artist-tag {background: #919191;color: #fff;border-radius: 20px;padding: 0px 0px 0px 10px;display: flex;align-items: center;font-size: 12px;margin-bottom: 5px;}
.artist-tag button {background: none;border: none;color: #fff;margin-left: 8px;cursor: pointer;font-size: 1.1em;border-radius: 50%;width: 22px;height: 22px;display: flex;align-items: center;justify-content: center;transition: background 0.15s;}
.artist-tag button:hover { background: #005fa3; }

.avec-scrollbar {max-height: 220px; overflow-y: auto;scrollbar-width: thin;/* Firefox */scrollbar-color: #0078d7 #f0f8ff;   /* Firefox */}
.avec-scrollbar::-webkit-scrollbar {width: 8px;background: #f0f8ff;border-radius: 6px;}/* Chrome, Edge, Safari */
.avec-scrollbar::-webkit-scrollbar-thumb {background: linear-gradient(135deg, #0078d7 60%, #4fc3f7 100%);border-radius: 6px;min-height: 24px;}
.avec-scrollbar::-webkit-scrollbar-thumb:hover {background: linear-gradient(135deg, #005fa3 60%, #4fc3f7 100%);}

.artist-section {margin-top:10px;}

.btn-rechercher{margin-top:10px;}

.search-second-line {display:block;width:50%;margin:auto }
.search-first-line {margin-top:50px;margin:auto}

.search-museum {width:200px;}
.search-location {width:250px;}


.search-artist-movement {margin:10px}
.search-artist-name {
    margin: 10px;
    display: block;
    position: relative;}



.search-museum-location {margin:10px}
.search-museum-name {width: 100%;
    margin: 10px;
    display: block;
    position: relative;}
.search-museum-artist-section {margin:10px;}
.search-artwork-artist-section{width:250px}

.advanced-search-line {margin:15px;}
.advanced-search-label{padding:5px; font-size:14px}
.search-view-tab {margin-bottom:10px;}




    
.search-label{margin-bottom: 5px;margin-top:10px;}

.search-place{margin:10px;display: block;position: relative;}
.search-name{margin:10px;display: block;position: relative;}

.search-criteria{display:block;justify-items: center;}
.search-section{  width:90%;  justify-self: center;border-radius: 6px;padding: 15px;display: block;margin: auto;}
.search-section-artwork{    justify-self: center;border-radius: 6px;padding: 15px;width: 300px;margin: auto;}

.btn-rechercher-container {margin-bottom:0px;margin-top: 10px;}

.search-button {width:25%;text-align: center; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 10px;border-radius: 6px;background-color: #000;border: none;color: #fff;cursor: pointer;transition: background 0.2s;height: 40px;min-width: 100px;}
.search-button:disabled {text-align: center;text-decoration: none; display: inline-flex; align-items: center; justify-content: center;cursor: pointer;padding: 10px;border-radius: 6px;background-color: #cecece !important;border: none;color: #fff;cursor: pointer;transition: background 0.2s;height: 40px;min-width: 100px;}
.search-button i {margin-right: 8px;}

.btn-search-loader {display: none;margin-right: -10px;}






  .artist-example-container{display:flex;    margin: auto;
 width:fit-content;}

.artwork-carousel {
    width: 630px;
    margin-top: 10px;
    position: relative;
    justify-self: center;
}

@media (max-width: 500px) {
    .artwork-carousel {
        width: 320px;
       
    }
}



.artwork-carousel-inner {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* Pour un défilement fluide sur iOS */
}

.artwork-carousel-item {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: calc(800px / 3); /* Affiche trois images à la fois */
    padding: 10px;
    box-sizing: border-box;
}

.artwork-carousel-item img {
    width: 100%;
    display: block;
}

.artwork-carousel-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.artwork-carousel-control.prev {
    left: 10px;
}

.artwork-carousel-control.next {
    right: 10px;
}



.artist-nav{justify-content:center !important;}
.pagination {display: flex;justify-content: center; align-items: center; gap: 4px; font-size: 1.1em; margin: 15px; }
.pagination .page, .pagination .next, .pagination .prev {min-width: 36px;height: 36px;display: flex;justify-content: center;align-items: center;border: none;background: none;color: #222;border-radius: 6px;text-decoration: none;font-weight: 500;transition: background 0.15s, color 0.15s;cursor: pointer;outline: none;}
.pagination .page.active, .pagination a[aria-current="page"] {background: #222;color: #fff;font-weight: 600;pointer-events: none;}
.pagination a:hover, .pagination .next:hover, .pagination .prev:hover {background: #f0f0f0;color: #222;}
.pagination .dots {color: #bbb;padding: 0 6px;user-select: none;pointer-events: none;font-size: 1.2em;}



.artist-random-card:hover .overlay {opacity: 1;}
.artist-random-card {    
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: 1px solid #ddd;
    flex-direction: column;
    /* align-items: center; */
    transition: box-shadow 0.2s, border-color 0.2s;
    max-height: 272px;
    overflow: hidden;
    margin: 5px;
    position: relative;
    height: 200px;
    width: 150px;
    min-width: 150px;}
.artist-random-bloc {width:100%;display:flex;overflow-y: auto;}




.loader {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top: 4px solid #242424; /* Couleur du loader */
  width: 10px;
  height: 10px;
  animation: spin 2s linear infinite;
  margin: 5px auto; /* Centrer le loader */
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.search-criteria-main{width:100%}
.search-bar {/*width: 250px;*/display: flex;align-items: center;background: #fff;height: 40px;border-bottom: #BCC1CAFF solid 1px;}
.search-artwork-name {width:100%;margin:10px}
.search-criteria-more{ width: 100%;}


.search-result-count{margin : 30px;justify-self: center;}

.swtich-search-mode{margin:10px}

.artists-example{
      text-align: center;
      align-items: center;
    justify-content: center;
}
.artists-example-title {font-weight: normal;
    font-size: 20px;margin:0;
    margin-bottom: 15px;margin-top:40px;justify-self: center;}

.artists-carousel {width: 90%;margin-top: 10px;position: relative;justify-self: center;  text-align: center;
      align-items: center;
    justify-content: center;margin:auto;}
    .artists-carousel-inner {display: flex;overflow-x: auto;scroll-behavior: smooth;scroll-snap-type: x mandatory;-webkit-overflow-scrolling: touch;}
    .artists-carousel-item {scroll-snap-align: start;flex-shrink: 0;width: calc(800px / 3);padding: 10px;box-sizing: border-box;}
    .artists-carousel-item img {width: 100%;display: block;}
    .artists-carousel-control {position: absolute;top: 50%;transform: translateY(-50%);background-color: rgba(0, 0, 0, 0.5);color: white;border: none;padding: 10px;cursor: pointer; z-index: 1000;}
    .artists-carousel-control.prev {left: 10px;}
    .artists-carousel-control.next {right: 10px;}
.search-result-count{margin-bottom:20px}



@media (max-width: 900px) 
{
  .search-second-line {display:block; }
  .search-section{   
    border-radius: 6px;
   width:90%;
    padding: 15px;
    display: block;
    margin: auto;
    justify-items: center;}
    .search-criteria {width:100%;display: block;align-items: center;}
    .artist-example-container{display:flex;    margin: auto;width:auto;
 overflow-x:scroll}}