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

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

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

.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: 125px;}
.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: 125px;}
.search-button i {margin-right: 8px;}

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

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

.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;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; margin-bottom:20px; border-radius:4px}
.artist-random-bloc {width:100%;display:flex;overflow-y: auto;}
.artist-random-img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    background: #f1f1f1;
} 

.artist-random-img-container
{
justify-content: center;
    color: #222;
    width: 100%;
    height: 125px;
    position: absolute;
    z-index: 200;
    bottom:0;
    background: rgb(255, 255, 255, 0.9);
    justify-items: center;
    align-content: center;
    min-height: 70px;
    
}
.artist-random-info-container
{
    justify-content: center;
    color: #222;
    width: 100%;
    height: 75px;
    position: absolute;
    z-index: 200;
    bottom:0;
    background: rgb(255, 255, 255, 0.9);
    justify-items: center;
    align-content: center;
    height: 100%;
    transition: opacity 0.3s ease;
    font-size:12x;
    
}

.artist-random-info-container:hover
{
   
    opacity: 0;
    
}
.loader {border: 4px solid rgba(0, 0, 0, 0.1);border-radius: 50%;border-top: 4px solid #242424; 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}
.artists-example{text-align: center;align-items: center;justify-content: center;}
.artists-example-title {font-weight: normal; font-size: 16px;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}
.result-section{margin-top:25px}
.loader-artwork{height:auto;width:200px}
    
@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}
  
  }