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;}


.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;}

.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-criteria-more{ width: 100%;}

.search-result-count{margin : 30px;justify-self: center;}
.swtich-search-mode{margin:10px}
.result-section{margin-top:25px}
.loader-artwork{height:auto;width:200px}


.museums-example{text-align: center;align-items: center;justify-content: center;}
.museums-example-title {font-weight: normal; font-size: 16px;margin:0; margin-bottom: 15px;margin-top:40px;justify-self: center;}
.museums-example-container{width: fit-content;gap:5px;display:flex;    margin: auto;overflow-x:auto}


.museum-random-img-container {height: 125px;;width: 125px;background: #fff;border-radius: 5px;display: flex;align-items: center;justify-content: center;margin: auto;}
.museum-random-card:hover .overlay {opacity: 1;}
.museum-random-card {box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); border: 1px solid #ddd; flex-direction: column;transition: box-shadow 0.2s, border-color 0.2s;max-height: 272px;overflow: hidden;margin: 5px;position: relative;height: 125px;width: 125px;min-width: 125px;}
.museum-random-bloc {width:100%;display:flex;overflow-y: auto;}
.museum-random-img{height: 125px;width: 125px;;object-fit: cover;background: #f1f1f1;}
.museum-random-info-container{min-height:100px;justify-content: center;width: 100%;position: absolute;z-index: 200;opacity: 0.85;bottom:0;background: rgb(0,0,0,0.7);align-content: center;position: absolute;
    width: 100%;
    color: white;
      height: 100%;
    font-size:12px}
.museum-card-meta{font-size:12px!important}
.museum-random-info-container:hover{opacity:0}

@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;}
  .museums-example-container{display:flex;    margin: auto;width:auto;overflow-x:scroll}
}