﻿:root {
    --tcm-primary: #6DA0C8;
    --tcm-surface: #FFFFFF;
    --tcm-text: #1d2939;
    --tcm-muted: #667085;
    --radius: 18px;
    --stroke: rgba(0, 0, 0, 0.06);
    --header-h: 0px;
}

html, body {
    background: var(--tcm-bg);
    color: var(--tcm-text);
}

/* Header */
/* .tcm-header, nav {
                                            position: fixed;
                                            top: 0px;
                                            left: 0;
                                            right: 0;
                                            z-index: 1030;
                                            background: #fff;
                                            border-bottom: 1px solid var(--stroke);
                                            box-shadow: 0 4px 10px rgba(0,0,0,.05);
                                        } */

.tcm-header .brand img {
    height: 32px;
}

.tcm-search {
    margin-inline: auto;
}

    .tcm-search .form-control {
        height: 3.25rem;
        border-radius: 999px;
        padding-left: 3rem;
        border: 1px solid var(--stroke);
    }

/* conteneur du champ avec icône */
.has-pin {
    position: relative;
}

    /* icône à l'intérieur du champ */
    .has-pin .pin {
        position: absolute;
        left: 14px; /* espace intérieur gauche */
        top: 50%;
        transform: translateY(-50%);
        font-size: 1rem; /* ajuste si besoin */
        color: var(--bs-secondary-color, #6c757d);
        pointer-events: none; /* ne bloque pas les clics dans le champ */
        z-index: 2;
    }

    /* laisse de la place à l'icône dans l'input */
    .has-pin .form-control {
        padding-left: 40px; /* >= left + largeur icône + marge */
    }

        /* pour les champs arrondis (déjà ajouté dans HTML), 
   mais si tu ne veux pas, supprime rounded-pill du HTML */
        .has-pin .form-control.rounded-pill {
            border-radius: 50rem;
        }

body {
    padding-top: var(--header-h);
}

/* Layout */
.layout {
    min-height: 70vh;
}

.list-col {
    padding: 1.5rem;
}

.map-wrap {
    position: sticky;
    top: calc(var(--header-h) + .75rem);
}

#map {
    height: calc(100vh - var(--header-h) - 1.5rem);
    border-radius: 20px;
    border: 1px solid var(--stroke);
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Cards */
.pro-card {
    border: 1px solid var(--stroke);
    background: var(--tcm-surface);
    border-radius: var(--radius);
    overflow: hidden;
    transition: all .2s ease;
}

    .pro-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 24px rgba(0,0,0,.08);
    }

.pro-media {
    position: relative;
    border-right: 1px solid var(--stroke);
}

.fav {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.85);
    color: var(--tcm-primary);
    border: 1px solid rgba(0,0,0,.05);
}

.rate i {
    color: #f5b30a;
}

.tags .badge {
    background: #eef6fb;
    color: #114a6e;
    border: 1px solid #cfe5f3;
}

.btn-ghost {
    background: transparent;
    border: 1px solid var(--stroke);
    color: var(--tcm-text);
}

    .btn-ghost:hover {
        background: #f2f4f7;
    }

.btn-primary {
    background: var(--tcm-primary);
    border-color: var(--tcm-primary);
}

    .btn-primary:hover {
        background: #5a91b8;
        border-color: #5a91b8;
    }

.section-title {
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--tcm-text);
}

/* Légère désaturation/contraste des tuiles (n’affecte pas les marqueurs) */
.leaflet-tile {
    filter: saturate(0.85) contrast(1.03) brightness(1.03);
}

/* Attribution compacte et discrète (tu DOIS la laisser) */
.leaflet-control-attribution {
    font-size: 11px;
    opacity: .8;
    background: rgba(255,255,255,.75);
    border-radius: 10px;
    padding: 2px 6px;
    border: 1px solid rgba(0,0,0,.06);
}

.tt-dataset.tt-dataset-address {
    background-color: white;
    padding: 0.5rem 1rem;
    margin-bottom: 0.25rem;
    cursor: pointer;
    background-color: #fff;
    border-radius: 0.25rem;
    border: solid 1px #f0f0f0;
}

.tt-suggestion:hover {
    background-color: #f0f0f0 !important;
}

/**********************************************************************
    override de tomselect
**********************************************************************/
/* Masquer les chips dans le champ */
.ts-wrapper .ts-control .item {
    display: none !important;
}

/* Texte plein-champ */
.jobs-display-text {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    text-align: center;
    font-weight: 500;
    color: #333;
    pointer-events: none;
}

    .jobs-display-text.show {
        display: flex;
    }

.ts-wrapper.jobs-has-selection .ts-control input::placeholder {
    opacity: 0;
    color: transparent;
}

.ts-wrapper .ts-dropdown-content .option.selected {
    background-color: antiquewhite !important;
}