/* =======================================
   FONTS
======================================= */
@font-face {
    font-family  : 'Neulis Sans';
    src          : url('../fonts/Neulis_Sans_Regular.otf') format('opentype');
    font-weight  : normal;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : 'Neulis Sans';
    src          : url('../fonts/Neulis_Sans_Medium.otf') format('opentype');
    font-weight  : 500;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : 'Neulis Cursive';
    src          : url('../fonts/Neulis_Cursive_Medium.otf') format('opentype');
    font-weight  : 500;
    font-style   : normal;
    font-display : swap;
}

/* =======================================
   VARIABLES GLOBALES
======================================= */
:root {
    --color-main       : #1922BF;
    --color-hover      : #C80082;
    --color-white      : #FFFFFF;
    --color-background : #D4DADC;
    --font-title       : 'Neulis Sans', Arial, sans-serif;
    --font-cursive     : 'Neulis Cursive', Arial, sans-serif;
}

/* =======================================
   STRUCTURE GÉNÉRALE DE LA CARTE LEAFLET
======================================= */
.leaflet-map-container {
    position   : relative;
    background : transparent;
}

.leaflet-map-wrap {
    width : 100%;
}

.leaflet-map-toolbar {
    display       : flex;
    align-items   : center;
    flex-wrap     : wrap;
    margin-bottom : 2rem;
    gap           : 2rem;
}

.address-search-container {
    display       : flex;
    align-items   : center;
    flex          : 1;
    padding       : 10px 15px;
    border-radius : 25px;
    background    : #FFFFFF;
    box-shadow    : 0 6px 16px 0 #1A1A2014;
    line-height   : 1;
}

.address-search-container .icon svg {
    display : flex;
    height  : 16px;
}

.address-search-container .input-group {
    width : 100%;
}


.address-search-container .input-group .autoComplete_wrapper {
    width : 100%;
}

.address-search-container .input-group .autoComplete_wrapper #address-input {
    width       : 100%;
    height      : 24px;
    color       : #000000;
    border      : 0;
    font-family : var(--font-title);
    font-size   : 14px;
    line-height : 1;
}

.address-search-container .input-group .autoComplete_wrapper #address-input::placeholder {
    color : #707070;
}

.autoComplete_wrapper > ul {
    z-index : 999;
}

#geolocate-btn {
    position        : absolute;
    top             : calc(49px + 2rem + 1em);
    right           : 3.5rem;
    z-index         : 990;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 50px;
    height          : 50px;
    color           : #000000;
    border-radius   : 25px;
    background      : #FFFFFF;
    box-shadow      : 0 6px 16px 0 #1A1A2014;
    font-family     : var(--font-title);
    font-size       : 14px;
    font-weight     : 400;
    line-height     : 1;
    text-decoration : none;
    white-space     : nowrap;
    transition      : 0.3s;
    gap             : 0.5rem;
    
    @media (min-width : 992px) {
        position : relative;
        top      : 0;
        right    : 0;
        width    : auto;
        height   : auto;
        padding  : 15px 20px;
    }
}

#geolocate-btn:hover {
    color      : var(--color-white);
    background : var(--color-hover);
}

#geolocate-btn svg path {
    transition : stroke 0.3s;
}

#geolocate-btn:hover svg path {
    stroke : var(--color-white);
}

#geolocate-btn svg {
    display : flex;
    height  : 20px;
    
    @media (min-width : 992px) {
        height : 16px;
    }
}

#geolocate-btn span {
    display : none;
    
    @media (min-width : 992px) {
        display : flex;
    }
}

.leaflet-map-toolbar .filterSelectPicker {
    min-width   : 220px;
    font-family : var(--font-title);
}

.category-filter {
    position      : absolute;
    top           : calc(49px + 2rem + 1em);
    left          : 1rem;
    z-index       : 990;
    border-radius : 25px;
    
    @media (min-width : 992px) {
        top : calc(49px + 2rem + 2rem);
    }
}

/* =======================================
   DROPDOWN FILTRES
======================================= */
.filter-dropdown {
    position    : relative;
    font-family : var(--font-title);
}

.filter-toggle {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    width           : 120px;
    padding         : 12px 20px;
    color           : var(--color-white);
    border          : none;
    border-radius   : 50px;
    background      : var(--color-main);
    font-family     : var(--font-title);
    font-size       : 16px;
    font-weight     : 400;
    cursor          : pointer;
    transition      : 0.3s !important;
}

.filter-toggle.open, .filter-toggle:hover {
    background : var(--color-hover);
}

.filter-toggle .arrow {
    transition : transform 0.3s ease;
}

.filter-toggle.open .arrow {
    transform : rotate(180deg);
}

.filter-menu {
    position       : absolute;
    top            : calc(100% + 10px);
    left           : 0;
    z-index        : 1000;
    display        : none;
    flex-direction : column;
    width          : 220px;
    padding        : 20px;
    border-radius  : 25px;
    background     : #FFFFFF;
    box-shadow     : 0 6px 16px 0 #1A1A2014;
    gap            : 10px;
}

.filter-menu.open {
    display : flex;
}

.filter-option {
    display     : flex;
    align-items : center;
    color       : #555555;
    font-size   : 15px;
    cursor      : pointer;
    gap         : 10px;
}

.filter-option input[type="checkbox"] {
    width        : 20px;
    height       : 20px;
    accent-color : var(--color-main);
}

.filter-option input[type="checkbox"]:focus {
    outline : none;
}

.filter-option input[type="checkbox"]:hover {
    cursor : pointer;
}

#leaflet-map {
    width         : 100%;
    height        : 800px;
    max-height    : 80vh;
    border-radius : 32px;
    background    : var(--color-background);
}

#leaflet-map .leaflet-tile-pane {
    filter : opacity(80%) grayscale(100%);
}

/* =======================================
   LÉGENDE
======================================= */
#leaflet-map .legend {
    display        : flex;
    flex-direction : column;
    padding        : 1rem;
    border-radius  : 24px;
    background     : rgba(255, 255, 255, 1);
    gap            : 0.5rem;
}

#leaflet-map .legend div {
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
}

#leaflet-map .legend div i {
    width         : 15px;
    height        : 15px;
    border-radius : 50%;
}

#leaflet-map .legend div span {
    color       : #000000;
    font-family : var(--font-title);
    font-size   : 14px;
    line-height : 1;
}

/* =======================================
   POPUP LEAFLET (CLASSIQUE)
======================================= */
.popupClickContent {
    box-shadow : 0 6px 16px 0 #1A1A2014;
}

.popupClickContent .leaflet-popup-content-wrapper {
    overflow      : hidden;
    border-radius : 24px;
}

.popupClickContent .leaflet-popup-tip-container {
    display : none;
}

#leaflet-map .leaflet-popup .leaflet-popup-content-wrapper {
    width     : 100%;
    max-width : 350px;
    padding   : 0;
}

#leaflet-map .leaflet-popup .leaflet-popup-content {
    margin : 0;
}

/* =======================================
   POPUP MODERNE (CARTE AVEC IMAGE)
======================================= */
.popup-card {
    overflow      : hidden;
    border-radius : 16px;
    background    : var(--color-white);
    box-shadow    : 0 4px 12px rgba(0, 0, 0, 0.15);
    font-family   : var(--font-title);
}

.popup-card-header {
    position     : relative;
    width        : 100%;
    overflow     : hidden;
    aspect-ratio : 7/4;
}

.popup-card-header img {
    display    : block;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

.popup-card-status {
    position      : absolute;
    bottom        : 12px;
    left          : 12px;
    display       : flex;
    align-content : center;
    padding       : 8px 12px 4px 12px;
    color         : var(--color-white);
    border-radius : 25px;
    font-size     : 14px;
    font-weight   : 400;
    line-height   : 1;
}

.popup-card-categories {
    position    : absolute;
    top         : 12px;
    left        : 12px;
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
}

.popup-card-categories .icon {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 32px;
    height          : 32px;
    border-radius   : 50%;
    background      : #FFFFFF;
    aspect-ratio    : 1/1;
}

.popup-card-categories .icon svg {
    filter : invert(100%);
}

.popup-card-status.closed {
    background : #D32F2F; /* Rouge pour "Fermé" */
}

.popup-card-status.open {
    background : var(--color-main); /* Bleu principal pour "Ouvert" */
}

.leaflet-map-container .popupClickContent a.leaflet-popup-close-button {
    position        : absolute;
    top             : 12px;
    right           : 12px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : 24px;
    height          : 24px;
    color           : var(--color-white);
    border-radius   : 50%;
    background      : var(--color-main);
    cursor          : pointer;
    transition      : 0.3s;
}

.leaflet-map-container .popupClickContent a.leaflet-popup-close-button span {
    display : none;
}

.leaflet-map-container .popupClickContent a.leaflet-popup-close-button:after {
    content: '';
    display         : flex;
    width           : 12px;
    height          : 12px;
    background      : url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L13 13' stroke='%23FFFCF9' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M13 1L0.999999 13' stroke='%23FFFCF9' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A") no-repeat center;
    background-size : 12px 12px;
}

.leaflet-map-container .popupClickContent a.leaflet-popup-close-button:hover {
    background : var(--color-hover);
}

.popup-card-body {
    display        : flex;
    flex-direction : column;
    padding        : 16px;
    gap            : 0.5rem;
}

.popup-card-body h3 {
    margin      : 0;
    color       : #222222;
    font-size   : 18px;
    font-weight : 500;
}

.popup-card-body .popup-address {
    margin    : 0;
    color     : #777777;
    font-size : 14px;
}

.popup-card-body .popup-description {
    margin      : 0;
    color       : #444444;
    font-size   : 12px;
    line-height : 1.2;
}

.popup-card-body .popup-card-button {
    display         : block;
    align-self      : center;
    width           : fit-content;
    margin          : 0.5rem 0 0 0;
    padding         : 10px 15px;
    color           : var(--color-white);
    border-radius   : 20px;
    background      : var(--color-main);
    font-weight     : 400;
    text-align      : center;
    text-decoration : none;
    transition      : 0.3s;
}

.popup-card-body .popup-card-button:hover {
    background : var(--color-hover);
}

#address-input-wrapper {
    position : relative;
    display  : inline-block;
    width    : 100%;
}

#address-input-loader {
    position      : absolute;
    top           : 50%;
    right         : 10px;
    display       : none;
    width         : 18px;
    height        : 18px;
    border        : 2px solid #CCCCCC;
    border-top    : 2px solid #333333;
    border-radius : 50%;
    transform     : translateY(-50%);
    animation     : spin 0.8s linear infinite;
}

@keyframes spin {
    from {
        transform : translateY(-50%) rotate(0deg);
    }
    to {
        transform : translateY(-50%) rotate(360deg);
    }
}

.autoComplete_wrapper > ul > li {
    font-family : var(--font-title);
    font-weight : 400;
    white-space : break-spaces;
}

.autoComplete_wrapper > ul > li mark {
    color       : var(--color-main);
    font-weight : 500;
}

.btn {
    display         : flex;
    align-items     : center;
    justify-content : center;
    width           : fit-content;
    height          : fit-content;
    padding         : 15px 25px;
    color           : #FFFFFF;
    border          : 2px solid #FFFFFF;
    border-radius   : 25px;
    font-family     : var(--font-title);
    font-size       : 18px;
    font-weight     : 500;
    line-height     : 1;
    transition      : 0.3s;
}

.btn.btn-white {
    color      : #000000;
    background : #FFFFFF;
}

.btn.btn-white:not(.btn-no-link):hover {
    color      : #FFFFFF;
    border     : 2px solid var(--color-hover);
    background : var(--color-hover);
}

.btn.btn-transparent {
    border : 2px solid #FFFFFF;
}

.btn.btn-transparent:not(.btn-no-link):hover {
    color      : #000000;
    background : #FFFFFF;
}

/* =======================================
   Single PAGE
======================================= */
.lieux-header {
    display        : flex;
    flex-direction : column;
    background     : var(--color-main);
}

.lieux-header .image-container {
    width  : 100%;
    height : 380px;
    
    @media (min-width : 992px) {
        height : 550px;
    }
}

.lieux-header .image-container img {
    width      : 100%;
    height     : 100%;
    object-fit : cover;
}

.lieux-header .info-container {
    display        : flex;
    flex-direction : column;
    padding        : 3rem 1rem;
    
    @media (min-width : 992px) {
        width     : 100%;
        max-width : 1290px;
        margin    : 0 auto;
        padding   : 2rem 0;
    }
}

.lieux-header .header-info {
    display         : flex;
    flex-direction  : column;
    justify-content : space-between;
    margin-bottom   : 2rem;
    padding-bottom  : 2rem;
    border-bottom   : 1px solid #FFFFFF;
    gap             : 2rem;
    
    @media (min-width : 992px) {
        flex-direction : row;
    }
}

.lieux-header .header-info .left {
    display         : flex;
    flex-direction  : column-reverse;
    justify-content : space-between;
    gap             : 2rem;
    
    @media (min-width : 992px) {
        flex-direction : column;
    }
}

.lieux-header .header-info .left .categories-list {
    display     : flex;
    align-items : center;
    flex-wrap   : wrap;
    gap         : 1rem;
    
    @media (min-width : 992px) {
        gap : 2rem;
    }
}

.lieux-header .header-info .left .categories-list .icon-container {
    position    : relative;
    display     : flex;
    align-items : center;
    gap         : 0.5rem;
}

.lieux-header .header-info .left .categories-list .icon-container:not(:last-child):after {
    content    : '';
    position   : absolute;
    right      : -0.5rem;
    width      : 1px;
    height     : 12px;
    background : #FFFFFF;
    
    @media (min-width : 992px) {
        right : -1rem;
    }
}

.lieux-header .header-info .left .categories-list .icon-container svg {
    display : flex;
    height  : 18px;
}

.lieux-header .header-info .left .categories-list .icon-container span {
    display     : flex;
    align-items : center;
    color       : #FFFFFF;
    font-family : var(--font-title);
    font-size   : 16px;
    font-weight : 500;
    line-height : 1;
    gap         : 0.5rem;
}

.lieux-header .header-info .left .title h1 {
    color       : #FFFFFF;
    font-family : var(--font-cursive);
    font-size   : 32px;
    font-weight : 500;
    line-height : 1;
    
    @media (min-width : 992px) {
        font-size : 54px;
    }
}

.lieux-header .header-info .right {
    display        : flex;
    flex-direction : column;
    gap            : 2rem;
    
    @media (min-width : 992px) {
        width        : 100%;
        max-width    : 350px;
        margin-right : 8rem;
    }
}

.lieux-header .header-info .right > div {
    display        : flex;
    flex-direction : column;
    gap            : 0.5rem;
}

.lieux-header .header-info .right > div > * {
    color       : #FFFFFF;
    font-family : var(--font-title);
    font-size   : 18px;
    font-weight : 500;
    line-height : 1;
}

.lieux-header .header-info .right > div .label {
    display     : flex;
    align-items : center;
    font-size   : 16px;
    font-weight : 400;
    gap         : 0.5rem;
}

.lieux-header .header-footer {
    display         : flex;
    flex-direction  : column-reverse;
    justify-content : space-between;
    gap             : 2rem;
    
    @media (min-width : 992px) {
        flex-direction : row;
        font-size      : 54px;
    }
}

.lieux-header .header-footer .sharing-links {
    display        : flex;
    flex-direction : column;
    gap            : 1rem;
}

.lieux-header .header-footer .sharing-links .label {
    color       : #FFFFFF;
    font-family : var(--font-title);
    font-size   : 18px;
    font-weight : 500;
    line-height : 1;
}

.lieux-header .header-footer .sharing-links .actions {
    display : flex;
    gap     : 1rem;
}

.lieux-header .header-footer .sharing-links .actions a, .lieux-header .header-footer .sharing-links .actions button {
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 7px;
    border          : 1px solid #FFFFFF;
    border-radius   : 8px;
    background      : transparent;
    transition      : 0.3s;
    aspect-ratio    : 1/1;
}

.lieux-header .header-footer .sharing-links .actions a:hover, .lieux-header .header-footer .sharing-links .actions button:hover {
    background : var(--color-hover);
    cursor     : pointer;
}

.lieux-header .header-footer .sharing-links .actions a svg, .lieux-header .header-footer .sharing-links .actions button svg {
    display    : flex;
    width      : 100%;
    max-width  : 20px;
    max-height : 20px;
}

.lieux-header .header-footer .buttons-link {
    display     : flex;
    align-items : flex-end;
    flex-wrap   : wrap;
    gap         : 1rem;
    
    @media (min-width : 992px) {
        gap : 2rem;
    }
}

.lieux-content {
    padding    : 4rem 1rem;
    background : #FFFCF9;
    
    @media (min-width : 992px) {
        max-width : 1290px;
        margin    : 0 auto;
        padding   : 8rem 4rem;
    }
}

.lieux-content .description-longue {
    color       : #131415;
    font-family : var(--font-title);
    font-size   : 18px;
}