//* =========================================================
   UM ANNuaire MAP - CSS PROPRE CDS
========================================================= */


/* =========================
   STRUCTURE GENERALE
========================= */

.umap-wrapper{

    width:1400px;
    max-width:calc(100vw - 40px);

    margin:0 auto;

    box-sizing:border-box;

    font-family:Arial, sans-serif;

}


/* =========================
   FILTRES
========================= */

.umap-filters{

    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-bottom:20px;

}


.umap-pratiques-filter{

    display:flex;

    flex-wrap:wrap;

    gap:6px 18px;

}


.umap-pratiques-filter label{

    display:flex;

    align-items:center;

    gap:6px;

    font-size:14px;

    padding:2px 6px;

    border-radius:6px;

}



@media(min-width:1024px){

    .umap-pratiques-filter > label{

        width:32%;
        box-sizing:border-box;

    }

}


@media(max-width:768px){

    .umap-pratiques-filter label{

        width:100%;

    }

}



/* =========================
   LAYOUT LISTE + MAP
========================= */


.umap-layout{
    display:flex;
    gap:30px;
    align-items:flex-start;
}

/* colonne liste */

.umap-left{

    flex:1 1 auto;

    min-width:0;

}



/* colonne carte */

.umap-right{

    position:fixed;

    top:300px;

    right:calc((100vw - 1400px) / 2 - 150px);

    width:550px;

    z-index:100;

}



/* carte */

#cds-map{

    width:100%;

    height:66vh;

    border-radius:18px;

    background:#ececec;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

}



/* =========================
   CARTE MEMBRE
========================= */


.umap-card{

    display:flex;

    gap:20px;

    padding:15px;

    margin-bottom:15px;

    border:1px solid #e5e5e5;

    border-radius:10px;

    background:#FAFAF7;

    align-items:flex-start;

}


/* colonnes internes */

.umap-card .umap-col{

    flex:0 0 250px;

    width:250px;

    max-width:250px;

    box-sizing:border-box;

    min-width:0;

}

/* =========================
   Centrage éléments de la ere colonne de la carte
========================= */


.umap-card .umap-col:first-child{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.umap-card{

    width:100%;

}

.umap-col{

    overflow-wrap:anywhere;

    word-break:break-word;

}


.umap-col a{

    word-break:break-word;

}
.umap-col a{
    display:inline-block;
    text-decoration:none;
    transition:transform .20s ease,color .20s ease;
}

.umap-col a:hover{
    color:#962714;
    transform:scale(1.10);
}


/* =========================
   AVATAR
========================= */


.umap-avatar-link{

    display:inline-block;

    width:100px;

    height:100px;

    border-radius:50%;

    overflow:hidden;

    background:#f2f2f2;

}


.umap-avatar-link img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}


.umap-avatar{

    width:100px;

    height:100px;

    border-radius:50%;

}



/* =========================
   NOM
========================= */


.umap-card h3{

    margin:5px 0;

    font-size:16px;

}



/* =========================
   PRATIQUES
========================= */


.umap-role{

    color:#962714;

    font-weight:600;

    font-size:14px;

}


.pratique{

    color:#1d6b5f;

    font-size:13px;

    font-weight:500;

}



/* =========================
   DEPARTEMENT
========================= */


.umap-departement{

    color:#962714;

    font-weight:700;

    font-size:15px;

    margin-bottom:12px;

    padding-bottom:6px;

    border-bottom:1px solid #e5e5e5;

}



/* =========================
   CONTACT
========================= */


.umap-col div{

    margin-bottom:6px;

    font-size:14px;

}



/* =========================
   RESEAUX SOCIAUX
========================= */


.umap-social{

    margin-top:10px;

}


.umap-social a{

    display:inline-flex;

    width:40px;

    height:40px;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#f2f2f2;

    margin-right:6px;

    color:#333;

    text-decoration:none;

}


.umap-social a:hover{

    background:#962714;
    color:white;

}

.umap-social a:hover img{
    transform:scale(1.25) rotate(0deg);
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));
}

/* =========================
   RESEAUX SOCIAUX smart phone, tablatte
========================= */

@media (max-width: 768px) {

    .umap-social {
        text-align: center;
    }

    .umap-social a {
        margin-right: 6px;
        margin-left: 3px;
    }

}

/* =========================
   SITE WEB
========================= */


.umap-site{

    margin-top:8px;

    font-size:13px;

}


.umap-site a{

    color:#962714;

    text-decoration:none;

    word-break:break-word;

}

.umap-site a:hover{
	transform:scale(1.1) rotate(0deg);
    filter:drop-shadow(0 4px 10px rgba(0,0,0,.25));

}


/* =========================
   BOUTON PROFIL
========================= */


.umap-profile-btn{

    display:inline-block;

    margin-top:8px;

}



/* =====================================================
   VERSION PC
===================================================== */

@media (min-width:1001px){

    umap-left{

        width:calc(100% - 580px);

        flex:0 0 calc(100% - 580px);

    }

}

@media (min-width:1001px){

    .umap-card{

        width:calc(100% - 300px);


    }

}

/* =========================
   MOBILE
========================= */


@media(max-width:1000px){

    .umap-wrapper{

        width:100%;

    }

    .umap-layout{

        display:flex;

        flex-direction:column;

    }

    .umap-right{

        position:relative;

        top:auto;

        right:auto;

        width:100%;

        margin-bottom:20px;

        order:-1;

        z-index:auto;

    }

    #cds-map{

        height:400px;

    }

    .umap-left{

        margin-right:0;

    }

    .umap-card{

        flex-direction:column;

    }

    .umap-card .umap-col{

        width:100%;

        max-width:none;

        flex:1 1 100%;

    }

}

/* Première colonne (photo + nom) */
.umap-card .umap-col:first-child{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}


/* ============================
   Check box de choix en colonne
============================= */
.umap-pratiques-filter{

    display:flex;
    align-items:flex-start;
    width:100%;
    gap:20px;

}

.umap-col-tout{

    flex:0 0 auto;
    white-space:nowrap;

}

.umap-col-pratiques{

    flex:1;
    display:flex;
    flex-wrap:wrap;
    gap:14px 24px;

}
.umap-col-pratiques label{

    display:flex;
    align-items:center;
    white-space:nowrap;
    margin-right:10px;
    flex:0 0 320px;      /* largeur identique pour chaque pratique */
    max-width:320px;

}
.umap-col-pratiques input{

    margin-right:6px;

}

.umap-note{

    flex-basis:100%;
    margin-top:6px;
    font-size:16px;
    color:#6F8D89;
    

}

.umap-col-associe{

    flex:0 0 230px;

}

.umap-separateur{

    width:1px;
    background:#d5d5d5;
    align-self:stretch;

}

/* =========================================================
   Adresse - icône + popup
========================================================= */

.cds-adresse-wrap {
    position: relative;
    display: inline-block;
}


/* Icône */

.cds-adresse-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.cds-adresse-icon img {
    width: 28px;
    height: 28px;
    transition: transform .25s ease;
}

.cds-adresse-icon:hover img {
    transform: scale(1.12);
}


/* =========================================================
   Popup
========================================================= */

.cds-adresse-popup {

    display: none;

    position: absolute;

    z-index: 9999;

    bottom: calc(100% + 12px);
    left: 50%;

    transform: translateX(-50%);

    width: 250px;

    padding: 18px;

    background: #ffffff;

    border-radius: 14px;

    box-shadow: 0 6px 25px rgba(0,0,0,.18);

    text-align: left;

    font-size: 14px;

}


/* Petite flèche */

.cds-adresse-popup::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -8px;

    transform: translateX(-50%);

    border-left: 8px solid transparent;
    border-right: 8px solid transparent;

    border-top: 8px solid white;

}


/* Adresse */

.cds-popup-adresse {

    margin-top: 7px;

    line-height: 1.5;

    color: #444;

}


/* Fermeture */

.cds-popup-close {

    position: absolute;

    top: 6px;
    right: 10px;

    cursor: pointer;

    font-size: 20px;

    line-height: 20px;

    color: #888;

}

.cds-popup-close:hover {
    color: #444;
}


/* Itinéraire */

/* =========================================================
   Bouton Itinéraire du popup adresse
   Neutralise le CSS des icônes de l'annuaire
========================================================= */

.cds-adresse-popup a.cds-popup-itineraire {

    display: inline-block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    padding: 8px 16px !important;
    margin-top: 12px !important;

    background: #6f8f78 !important;
    color: #ffffff !important;

    border: none !important;
    border-radius: 20px !important;

    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    text-align: center !important;
    white-space: nowrap !important;

    text-decoration: none !important;

    box-shadow: none !important;

    overflow: visible !important;

    transform: none !important;
}


/* Survol */

.cds-adresse-popup a.cds-popup-itineraire:hover {

    background: #55705d !important;
    color: #ffffff !important;

    text-decoration: none !important;

    transform: translateY(-1px) !important;
}

/* =========================================================
   Alignement icône adresse avec les autres icônes
========================================================= */

.cds-adresse-wrap {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    position: relative;
}

.cds-adresse-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 0 !important;
}

./* =========================================================
   Icône adresse
========================================================= */

.cds-adresse-icon img {
    width: 28px !important;
    height: 28px !important;

    display: block !important;

    object-fit: contain !important;

    margin: 0 !important;
    padding: 0 !important;

    position: relative;
    top: -3px;
}
/* Remonte l'icône adresse au niveau des autres icônes */
.cds-adresse-icon {
    position: relative !important;
    top: -15px !important;
}

/* =========================================================
   Tooltip adresse au survol
========================================================= */

.cds-adresse-icon {
    position: relative !important;
}


/* Tooltip */

.cds-adresse-tooltip {

    position: absolute;

    bottom: calc(100% + 10px);
    left: 50%;

    transform: translateX(-50%);

    width: max-content;
    max-width: 260px;

    padding: 9px 12px;

    background: #444;
    color: #fff;

    border-radius: 8px;

    font-size: 12px;
    line-height: 1.45;

    text-align: left;

    white-space: normal;

    opacity: 0;
    visibility: hidden;

    transition: opacity .2s ease;

    z-index: 10000;

    pointer-events: none;
}


/* Titre */

.cds-adresse-tooltip strong {
    font-weight: 600;
}


/* Petite flèche */

.cds-adresse-tooltip::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -6px;

    transform: translateX(-50%);

    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #444;
}


/* Apparition au survol */

.cds-adresse-icon:hover .cds-adresse-tooltip {

    opacity: 1;
    visibility: visible;

}

/* =========================================================
   Popup adresse - smartphone
========================================================= */

@media (max-width: 600px) {

    .cds-adresse-popup {
        width: 230px !important;
        max-width: calc(100vw - 20px) !important;
        box-sizing: border-box !important;
    }

}