body.modal-open {
overflow: hidden;
height: 100vh;
} .open-search {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--padding-xs);
padding: var(--padding-sm);
width: 100%;
margin: 0 auto;
border-radius: var(--br-md);
text-decoration: none;
cursor: pointer;
transition: background 0.2s ease;
}
footer.footer .open-search {
padding: 0;
}
.open-search.search-home {
max-width: var(--width-inner-md);
background: rgba(255, 255, 255, 0.4);
}
.open-search.search-home:hover {
background: rgba(255, 255, 255, 0.2);
}
.open-search .search-text {
color: var(--color-midgrey);
font-size: var(--fs-md);
font-weight: var(--fw-title-medium);
}
.open-search.search-home .search-text {
color: var(--color-light);
} .search-modal {
position: fixed;
inset: 0;
display: flex;
align-items: flex-start;
justify-content: center;
padding: var(--padding-lg);
background: var(--color-lightgrey);
opacity: 0;
pointer-events: none;
transition: var(--transition-medium);
z-index: 9999;
}
.search-modal.active {
opacity: 1;
pointer-events: auto;
}
.search-modal__overlay {
position: absolute;
inset: 0;
}
.search-modal__content {
position: relative;
width: 100%;
max-width: var(--width-inner-lg);
transform: translateY(-20px);
transition: var(--transition-medium);
padding-top: 2rem;
}
.search-modal.active .search-modal__content {
transform: translateY(0);
}
.search-modal .close {
top: -1rem;
right: 0;
background-color: var(--color-red);
} .search-form {
position: relative;
display: flex;
flex-flow: row;
justify-content: space-between;
padding: var(--padding-sm);
text-align: left;
}
.search-box {
width: 100%;
background: var(--color-light);
border-radius: var(--br-md);
}
.search-box .screen-reader-text {
display: none;
}
.search-form label {
width: calc(100% - 30px);
}
.search-box input[type="search"] {
height: auto;
width: 100%;
border: 0;
outline: none;
background-color: transparent;
padding: 0;
line-height: var(--line-height-md);
font-size: var(--fs-md);  
color: var(--color-dark);
font-weight: var(--fw-title-medium);
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
display: none;
}
.search-submit {
background-color: transparent;
margin: 0;
border: 0;
padding: 0;
}
.search-submit:hover img {
opacity: .7;
}
.search-picto {
width: clamp(20px, 3vw, 30px);
height: auto;
} .search-results {
max-height: calc(100dvh - 11rem);
overflow-y: auto;
overscroll-behavior: contain;
padding-bottom: 3rem;
}
.search-status {
margin: 0;
padding: var(--padding-sm) 0 0;
color: #5c5c5c;
font-size: var(--fs-sm);
}
.search-group {
margin-top: 28px;
padding: 0;
}
.search-status + .search-group {
margin-top: 16px;
}
.search-group-title {
margin: 0 0 12px;
color: #6b6b6b;
font-family: inherit;
font-size: 12px;
font-weight: var(--fw-semibold);
letter-spacing: .05em;
text-transform: uppercase;
}
.search-group-title span {
font-variant-numeric: tabular-nums;
}
.search-pages {
margin: 0;
padding: 0;
list-style: none;
background: var(--color-light);
border-radius: var(--br-md);
}
.search-pages li + li {
border-top: 1px solid var(--color-lightbeige);
}
.search-pages a {
display: block;
padding: 12px var(--padding-sm);
color: var(--color-main);
text-decoration: none;
transition: color .15s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-pages a:hover,
.search-pages a:focus-visible {
color: var(--color-red);
}
.search-results .search-view-all {
margin-top: var(--padding-sm);
}
.search-results .search-more {
cursor: pointer;
font: inherit;
}
.search-results .card-item a:focus-visible {
outline: 3px solid var(--color-red);
outline-offset: 2px;
}
.results-wrap {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: var(--padding-sm);
}
.results-wrap .card-item {
display: grid;
min-height: 130px;
max-height: 130px;
box-shadow: none;
}
.results-wrap .card-content {
justify-content: space-between;
}
.results-wrap .card-content h4 {
margin: 0;
}
.results-wrap .card-content .info-line.location {
margin-top: 0;
} .results-wrap .place-result .card-item a {
display: grid;
grid-template-columns: 130px 1fr;
gap: var(--padding-xs);
align-items: center;
}
.results-wrap .place-result .card-item .card-img {
aspect-ratio: 1/1;
} .results-wrap .group-result .card-item a {
display: block;
height: 100%;
position: relative;
}
.results-wrap .group-result .card-item .card-img .landscape {
aspect-ratio: auto;
height: 130px;
width: 100%;
}
.results-wrap .group-result .card-item .card-content {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: var(--padding-sm);
color: var(--color-light);
background: rgba(0,0,0,0.25);
}
.results-wrap .group-result .card-item .item-title {
color: var(--color-light);
}
.results-wrap .group-result .card-item .text-content {
display: none;
} .search .search-header {
margin: var(--margin-md) 0 0 0;
}
.search .card-item.group-item .card-img {
height: 100%;
}
.search .card-item.group-item .card-img .landscape {
aspect-ratio: auto;
}
.search .card-item.group-item .card-content {
position: absolute;
inset: 0;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: var(--padding-sm);
color: var(--color-light);
background: rgba(0,0,0,0.25);
}
.search .card-item.group-item .item-title {
color: var(--color-light);
}
.search .card-item.group-item .text-content {
display: none;
} @media (min-width: 880px) {
.results-wrap {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--padding-sm);
}
.results-wrap .place-result .card-item a {
grid-template-columns: 130px 1fr;
} .results-wrap .group-result .card-item {
min-height: 130px;
}
} .search-modal .search-modal__content {
max-width: 860px;
}
.search-modal .search-form {
align-items: center;
gap: 12px;
min-height: 64px;
padding: 0 64px 0 20px;
}
.search-modal .search-box:focus-within {
box-shadow: 0 0 0 2px var(--color-main);
}
.search-form-icon {
flex: none;
width: 20px;
height: 20px;
fill: none;
stroke: #8a8a8a;
stroke-width: 2.2;
stroke-linecap: round;
}
.search-modal .close {
top: calc(2rem + 10px);
right: 10px;
width: 44px;
height: 44px;
background: transparent;
color: var(--color-main);
transition: color .15s cubic-bezier(0.4, 0, 0.2, 1), background-color .15s cubic-bezier(0.4, 0, 0.2, 1);
}
.search-modal .close:hover,
.search-modal .close:focus-visible {
background-color: #f1efec;
color: var(--color-red);
}
.search-modal .close svg {
width: 20px;
height: 20px;
fill: none;
stroke: currentColor;
stroke-width: 2.2;
stroke-linecap: round;
}
.search-results .info-line.category {
flex-wrap: nowrap;
min-width: 0;
}
.search-results .info-line.category .label {
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}