/* CSS pour l'extension sohappy-point-vente */

/******************************/
/********** Variables CSS *****/
/******************************/
:root {
    --list-main-color : var(--main-color, #005aa5);
    --list-sub-color  : var(--main-sub-color, #00437a);
    --list-white      : var(--white, #fff);
    --list-grey       : var(--grey, #f7f2ec);
    --list-black      : var(--black, #000);
    --list-available  : var(--available-color, var(--list-black));
    --list-reserved   : var(--reserved-color, var(--list-black));
}

/*
 * La classe .sohappy-pdv-page est ajoutée dynamiquement via le filtre
 * body_class dans index.php — plus besoin de cibler un ID de page en dur.
 */
.sohappy-pdv-page .ast-container {
    width     : 100% !important;
    max-width : 100% !important;
}


/******************************/
/********** Filtrage  *********/
/******************************/

.filtrage {
    width                 : 100%;
    max-width             : unset;
    padding               : 20px;
}
.filtrage .filter-container {
    gap                   : 40px;
}
.filtrage .filter-container > * {
    width: max-content;
    max-width: 100%;
}

.filtrage .site-recherche input {
    border-bottom : 2px solid var(--list-main-color);
    color         : var(--main-color);
}

.filtrage .site-recherche input:focus {
    border : 2px solid var(--list-main-color);
}

.filtrage label {
    display       : block;
    margin-bottom : 6px;
    font-size     : 1.3rem;
    text-transform: uppercase;
    color         : var(--black);
}

.filtrage .recherche-annuaire input {
    width               : 350px;
    max-width           : 100%;
    border              : 2px solid transparent;
    border-bottom-color : var(--main-color);
    color: var(--list-black);
}
.filtrage .recherche-annuaire input:focus {
    border-color  :var(--list-main-color);
}
.filtrage [class*=recherche-] select {
    width         : 250px;
    max-width     : 100%;
    background    : transparent;
    border-width  : 0 0 2px 0!important;
    border-radius : 0;
    border-bottom : 2px solid var(--list-main-color);
    color         : var(--main-color);
    padding       : 6px;
    font-size     : 1.6rem;
}

.filtrage [class*=recherche-] select:focus {
    outline : none;
    border  : 2px solid var(--list-main-color);
}

ul#filters {
    padding         : 0;
    margin          : 0;
    display         : flex;
    align-items     : center;
    justify-content : center;
    flex-wrap       : wrap;
    gap             : 20px;
}

ul#filters li {
    list-style : none;
    padding    : 0;
}

ul#filters li a {
    flex-wrap       : nowrap;
    text-decoration : none !important;
    border          : 0;
    padding         : 10px;
    color           : var(--black);
    text-transform  : uppercase;
    font-size       : 1.6rem;
    transition      : all .2s ease-out;
    border-radius   : 5px;
    gap             : 10px;
}

ul#filters li a span {
    width      : fit-content;
    max-width  : 150px;
    text-align : left;
}

div.category_icon {
    display          : block;
    width            : 70px;
    height           : 50px;
    margin           : 0;
    background-color : var(--main-color);
    /* L'URL du masque est injectée via style="" inline */
    mask             : no-repeat center / contain;
    -webkit-mask     : no-repeat center / contain;
    transition       : inherit;
}

ul#filters li a.selected {
    background-color : var(--main-color);
    color            : var(--list-black);
}

ul#filters li a.selected div.category_icon {
    background-color : var(--list-black);
}


/******************************/
/******* Liste Isotope  *******/
/******************************/

#isotope-list {
    margin  : 0;
    padding : 0;
}


/******************************/
/******* Carte Leaflet  *******/
/******************************/

/* ── Marqueur Leaflet (L.divIcon) ── */

/* Neutralise le style par défaut de Leaflet (.leaflet-div-icon). */
.leaflet-div-icon,
.pdv-marker-wrap {
    background  : none !important;
    border      : none !important;
    box-shadow  : none !important;
    overflow    : visible !important;
}

/* Div intérieur : couleur (pastille) ou image d'icône appliquées en ligne
   par le JS (voir js/liste-carte.js), selon le réglage choisi par
   l'administrateur — plus de masque CSS partagé ici. */
.pdv-marker-div {
    width  : 100%;
    height : 100%;
}

.leaflet-popup-content h5 {
    font-size      : 2.5rem !important;
    text-transform : uppercase;
}

.leaflet-popup-content h6 {
    font-size : 1.5rem !important;
}

.leaflet-popup-content p {
    font-size   : 1.5rem !important;
    font-family : var(--gotham);
    font-weight : 300;
    line-height : 1.3;
    color       : var(--black) !important;
}
.leaflet-popup-content .popup-thumb {
    width: 100%;
    height: 150px;
}
.leaflet-popup-content .popup-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/******************************/
/******* Items / Cards  *******/
/******************************/

.item {
    width            : 48%;
    background-color : transparent;
    border           : 2px solid var(--list-main-color);
    padding          : 30px;
    margin           : 5px;
    display          : flex;
    flex-direction   : column;
    justify-content  : space-between;
}

.entry-content #pdv_carte_liste .item h5 {
    font-family    : var(--swear);
    font-size      : 3rem;
    font-style     : normal;
    color          : var(--list-black);
    text-transform : uppercase;
}

/* #pdv_carte_liste p {
    color       : var(--list-black);
    margin      : 10px 0;
    line-height : 1.2;
} */

.pdv_description,
.pdv_telephone,
.pdv_web {
    font-size   : 1.6rem;
    font-weight : 300;
    color       : var(--list-black);
}

.pdv_label {
    display        : inline-block;
    padding        : 3px 10px;
    border-radius  : 4px;
    background     : var(--list-main-color);
    color          : var(--list-white);
    font-size      : 1.5rem;
    font-weight    : 700;
    text-transform : uppercase;
}
.pdv_label .icon {
    display             : inline-block;
    height              : 1lh;
    aspect-ratio        : 1/1;
    width               : unset;
    margin-right        : 5px;
    background-color    : var(--list-white);
}
.pdv_cat:has(.icon) {
    padding             : 3px 10px 3px 3px;
}

.pdv_label.pdv_disponible {
    background : var(--list-available);
}
.pdv_label.pdv_reserve {
    background : var(--list-reserved);
}

.pdv_fichier {
    font-size      : 1.6rem;
    font-weight    : 300;
    color          : var(--list-black);
    text-decoration: underline;
}

.pdv_category {
    margin-bottom  : 20px;
    text-transform : uppercase;
    font-weight    : 700;
    color          : var(--third-color);
    font-size      : 2rem;
    line-height    : 1;
    gap            : 10px;
    flex-wrap      : nowrap;
}

.pdv_category .category_icon {
    background-color : var(--third-color);
}

.pdv_telephone,
.pdv_web {
    position    : relative;
    padding-left: 30px;
}

.pdv_telephone::before,
.pdv_web::before {
    position         : absolute;
    content          : '';
    width            : 25px;
    height           : 1lh;
    background-color : var(--list-black);
    top              : 0;
    left             : 0;
    mask             : url('../img/picto_phone.svg') no-repeat center / contain;
    -webkit-mask     : url('../img/picto_phone.svg') no-repeat center / contain;
}

.pdv_web::before {
    mask-image         : url('../img/picto_website.svg');
    -webkit-mask-image : url('../img/picto_website.svg');
}

#pdv_carte_liste .item-bouton.carte {
    text-align : center;
}

#pdv_carte_liste a.bouton-voir {
    color           : var(--list-black);
    text-decoration : none !important;
    border-bottom   : 1px solid var(--list-black);
    padding         : 5px 0;
    display         : block;
    margin          : 20px auto;
    width           : fit-content;
}

#pdv_carte_liste a.bouton-voir:hover {
    color   : var(--list-main-color);
    padding : 0;
}


/******************************/
/******* Layout liste+carte ***/
/******************************/

.pdv_carte,
#ma-carte {
    min-height : 900px;
    height     : 100vh;
    width      : 100%;
}

#ma-carte .leaflet-layer {
    filter : grayscale(80%);
}

#pdv_carte_liste {
    position              : relative;
    width                 : 100% !important;
    max-width             : 100% !important;
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : 0px;
}

.pdv_liste,
.pdv_carte {
    box-sizing : border-box;
}

.pdv_liste {
    order   : 1;
    padding : 0 20px;
    box-sizing: border-box;
}

.pdv_carte {
    order   : -1;
    width   : 100%;
    z-index : 10;
}


/******************************/
/******* Responsive ***********/
/******************************/

/* Tablette */
@media (max-width: 980px) {

    .item {
        width : 98%;
    }

    .filtrage {
        grid-template-columns : 1fr;
    }
}

/* Mobile */
@media (max-width: 768px) {

    #pdv_carte_liste {
        grid-template-columns : 1fr;
    }

    .pdv_liste,
    .pdv_carte {
        max-width : 100%;
        position  : relative;
        z-index   : 0;
    }
    .pdv_liste {
        padding : 20px;
    }

    .filtrage {
        flex-direction : column;
    }

    .filtrage > * {
        width   : 100% !important;
        padding : 0;
    }

    .filtrage #filters {
        display     : flex;
        align-items : end;
    }

    .filtrage #filters > * {
        width           : calc(50% - 10px);
        display         : flex;
        justify-content : center;
    }

    .filtrage #filters li a {
        display        : flex;
        align-items    : center;
        flex-direction : column;
    }

    .filtrage #filters li a span {
        font-size  : 1.3rem;
        text-align : center;
    }

    .filtrage .site-recherche {
        padding : 0;
    }

    .entry-content #pdv_carte_liste .item h5 {
        font-size : 2.5rem;
    }

    .entry-content #pdv_carte_liste .item p {
        font-size : 1.6rem;
    }

    #pdv_carte_liste .item-bouton.carte a {
        margin : 10px auto;
    }

    div.category_icon {
        width  : 50px;
        height : 30px;
    }
}


/******************************/
/******* Modes d'affichage ****/
/******************************/

/* Carte uniquement — pleine largeur */
#pdv_carte_liste.pdv-mode-carte {
    grid-template-columns : 1fr;
}
#pdv_carte_liste.pdv-mode-carte .pdv_carte {
    order : 0;
}

/* Liste uniquement — pleine largeur, pas de carte */
#pdv_carte_liste.pdv-mode-liste {
    grid-template-columns : 1fr;
}
#pdv_carte_liste.pdv-mode-liste .item {
    width : 31%;
}

@media (max-width: 980px) {
    #pdv_carte_liste.pdv-mode-liste .item {
        width : 48%;
    }
}
@media (max-width: 768px) {
    #pdv_carte_liste.pdv-mode-liste .item {
        width : 98%;
    }
}