/**
 * sedia-cartes.css
 *
 * Styles du plugin SEDIA Cartes Offres.
 * Charte graphique : Grappe sedia (thème enfant Konstrakt).
 * Police : George Rounded (chargée par le thème enfant).
 * Couleur principale : #007479 | Texte : #353535
 * Mobile-first : 1 colonne → desktop : filtres en bande + grille 3 colonnes.
 */

/* =========================================================
   Variables — calées sur la charte Grappe sedia
   ========================================================= */
:root {
    --sedia-primary:       #007479;   /* Teal Grappe sedia                */
    --sedia-primary-dark:  #005558;   /* Survol / actif                   */
    --sedia-primary-light: #e5f2f2;   /* Fond léger teal                  */
    --sedia-accent:        #e8a020;   /* Orange secondaire (CTA)          */
    --sedia-accent-dark:   #c07010;
    --sedia-bg:            #f5f7f7;   /* Fond filtres / page              */

/* =========================================================
   Bloc carte réalisations (injecté dans les pages portfolio)
   ========================================================= */
.portfolio-carte-realisations {
    margin-top: 40px !important;
    padding-top: 0;
}

.portfolio-carte-realisations h3 {
    margin-bottom: 16px !important;
}
    --sedia-white:         #ffffff;
    --sedia-border:        #ccdcdd;   /* Bordure légère teal              */
    --sedia-text:          #353535;   /* Corps texte thème                */
    --sedia-text-light:    #6a7c7c;
    --sedia-radius:        4px;       /* Angles peu arrondis comme le thème */
    --sedia-radius-lg:     8px;
    --sedia-shadow:        0 2px 10px rgba(0, 116, 121, 0.10);
    --sedia-shadow-hover:  0 6px 20px rgba(0, 116, 121, 0.18);
    --sedia-font-heading:  'George Rounded', 'Helvetica Neue', Arial, sans-serif;
    --sedia-map-height:    480px;
}

/* =========================================================
   Wrapper global
   ========================================================= */
.sedia-carte-wrapper {
    font-family: inherit;
    color: var(--sedia-text);
    margin-bottom: 2.5rem;
}

/* =========================================================
   Carte Leaflet
   ========================================================= */
.sedia-map {
    width: 100%;
    height: var(--sedia-map-height);
    border-radius: var(--sedia-radius-lg);
    box-shadow: var(--sedia-shadow);
    margin-bottom: 1.25rem;
    border: 1px solid var(--sedia-border);
    z-index: 1;
}

@media ( max-width: 600px ) {
    .sedia-map {
        height: 300px;
    }
}

/* ---- Marqueurs clusters personnalisés ---- */
.sedia-cluster-marker {
    position: relative !important;
    width: 40px !important;
    height: 46px !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    overflow: visible !important;
}

.sedia-cluster-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 46px;
    object-fit: contain;
    display: block;
}

.sedia-cluster-count {
    position: absolute;
    top: 50%;
    left: 57%;
    transform: translate( -50%, -50% );
    color: var(--sedia-primary);
    font-family: var(--sedia-font-heading);
    font-weight: 800;
    font-size: 16px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1;
}

/* ---- Popup ---- */
.sedia-popup {
    font-family: inherit;
}

.sedia-popup__img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: var(--sedia-radius) var(--sedia-radius) 0 0;
    display: block;
}

.sedia-popup__body {
    padding: 0.65rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sedia-popup__title {
    font-family: var(--sedia-font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sedia-primary);
    line-height: 1.3;
}

.sedia-popup__ville {
    font-size: 0.8rem;
    color: var(--sedia-text-light);
}

.sedia-popup__prix {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--sedia-text);
}

.sedia-popup__lien {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.35rem 0.9rem;
    background: var(--sedia-primary);
    color: var(--sedia-white) !important;
    border-radius: var(--sedia-radius);
    font-size: 0.8rem;
    font-family: var(--sedia-font-heading);
    font-weight: 600;
    text-decoration: none !important;
    letter-spacing: 0.02em;
    transition: background 0.2s;
}

.sedia-popup__lien:hover,
.sedia-popup__lien:focus {
    background: var(--sedia-primary-dark) !important;
}

/* Marqueur mis en évidence */
.sedia-marker--highlight img {
    filter: drop-shadow( 0 0 6px var(--sedia-accent) );
}

/* =========================================================
   Filtres
   ========================================================= */
.sedia-filtres {
    background: var(--sedia-bg);
    border: 1px solid var(--sedia-border);
    border-top: 3px solid var(--sedia-primary);
    border-radius: 0 0 var(--sedia-radius-lg) var(--sedia-radius-lg);
    padding: 1.1rem 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: flex-end;
    margin-bottom: 1.25rem;
}

.sedia-filtres__row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1 1 190px;
    min-width: 160px;
}

.sedia-filtres__row--action {
    flex-direction: row;
    align-items: flex-end;
    gap: 0.6rem;
    flex: 0 1 auto;
}

.sedia-filtres__label {
    font-family: var(--sedia-font-heading);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--sedia-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sedia-select {
    padding: 0.48rem 0.7rem;
    border: 1px solid var(--sedia-border);
    border-radius: var(--sedia-radius);
    background: var(--sedia-white);
    font-size: 0.88rem;
    color: var(--sedia-text);
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: auto;
}

.sedia-select:focus {
    outline: none;
    border-color: var(--sedia-primary);
    box-shadow: 0 0 0 3px rgba( 0, 116, 121, 0.15 );
}

/* ---- Boutons ---- */
.sedia-btn-rechercher,
.sedia-btn-reset {
    padding: 0.52rem 1.2rem;
    border: none;
    border-radius: var(--sedia-radius);
    font-family: var(--sedia-font-heading);
    font-size: 0.88rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
    white-space: nowrap;
}

.sedia-btn-rechercher {
    background: var(--sedia-primary);
    color: var(--sedia-white);
    box-shadow: 0 2px 6px rgba( 0, 116, 121, 0.25 );
}

.sedia-btn-rechercher:hover,
.sedia-btn-rechercher:focus {
    background: var(--sedia-primary-dark);
    box-shadow: 0 4px 12px rgba( 0, 116, 121, 0.35 );
}

.sedia-btn-reset {
    background: var(--sedia-white);
    color: var(--sedia-primary);
    border: 1px solid var(--sedia-primary);
}

.sedia-btn-reset:hover,
.sedia-btn-reset:focus {
    background: var(--sedia-primary-light);
}

.sedia-btn-rechercher:active,
.sedia-btn-reset:active {
    transform: scale(0.97);
}

/* =========================================================
   Compteur de résultats
   ========================================================= */
.sedia-compteur {
    font-size: 0.82rem;
    color: var(--sedia-text-light);
    font-style: italic;
    margin: 0 0 0.85rem;
    padding-left: 2px;
}

/* =========================================================
   Liste des biens — grille responsive
   ========================================================= */
.sedia-liste {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 1.4rem;
}

@media ( max-width: 900px ) {
    .sedia-liste {
        grid-template-columns: repeat( 2, 1fr );
    }
}

@media ( max-width: 600px ) {
    .sedia-liste {
        grid-template-columns: 1fr;
    }
}

/* ---- Card ---- */
.sedia-card {
    background: var(--sedia-white);
    border: 1px solid var(--sedia-border);
    border-radius: var(--sedia-radius-lg);
    box-shadow: var(--sedia-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s, transform 0.2s;
    cursor: pointer;
}

.sedia-card:hover {
    box-shadow: var(--sedia-shadow-hover);
    transform: translateY( -3px );
}

/* Bordure top colorée à l'activation (marqueur survolé) */
.sedia-card--active {
    border-top: 3px solid var(--sedia-primary);
    box-shadow: var(--sedia-shadow-hover);
    transform: translateY( -2px );
}

.sedia-card__img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

/* Placeholder quand pas d'image */
.sedia-card:not(:has(.sedia-card__img)) .sedia-card__body {
    border-top: 4px solid var(--sedia-primary);
}

.sedia-card__body {
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.sedia-card__title {
    font-family: var(--sedia-font-heading);
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--sedia-primary);
    margin: 0;
    line-height: 1.3;
}

.sedia-card__ville {
    font-size: 0.82rem;
    color: var(--sedia-text-light);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

/* Icône épingle SVG inline avant la ville */
.sedia-card__ville::before {
    content: '';
    display: inline-block;
    width: 10px;
    height: 13px;
    background-color: var(--sedia-primary);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M5 0C2.24 0 0 2.24 0 5c0 3.75 5 9 5 9s5-5.25 5-9c0-2.76-2.24-5-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-repeat: no-repeat;
    flex-shrink: 0;
}

.sedia-card__prix {
    font-size: 0.97rem;
    font-weight: 700;
    color: var(--sedia-text);
    margin-top: 0.1rem;
}

.sedia-card__lien {
    margin-top: auto;
    padding-top: 0.75rem;
    display: inline-block;
    padding: 0.45rem 1rem;
    background: var(--sedia-primary);
    color: var(--sedia-white) !important;
    border-radius: var(--sedia-radius);
    font-family: var(--sedia-font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none !important;
    text-align: center;
    letter-spacing: 0.02em;
    transition: background 0.2s;
    margin-top: auto;
}

.sedia-card__lien:hover,
.sedia-card__lien:focus {
    background: var(--sedia-primary-dark) !important;
    color: var(--sedia-white) !important;
}

/* =========================================================
   États : chargement, erreur, aucun résultat
   ========================================================= */
.sedia-loading,
.sedia-no-result,
.sedia-erreur {
    grid-column: 1 / -1;
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--sedia-text-light);
    font-style: italic;
    font-size: 0.9rem;
}

.sedia-loading::before {
    content: '';
    display: block;
    width: 32px;
    height: 32px;
    border: 3px solid var(--sedia-border);
    border-top-color: var(--sedia-primary);
    border-radius: 50%;
    animation: sedia-spin 0.75s linear infinite;
    margin: 0 auto 0.75rem;
}

@keyframes sedia-spin {
    to { transform: rotate(360deg); }
}

.sedia-erreur {
    color: #c0392b;
    font-style: normal;
}

/* =========================================================
   Carte Réalisations — filtres catégorie (boutons pills)
   ========================================================= */
.sedia-realisations-wrapper {
    font-family: inherit;
    color: var(--sedia-text);
    margin-bottom: 2.5rem;
}

.sedia-real-filtres {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.sedia-real-btn {
    padding: 0.42rem 1.1rem;
    border: 1.5px solid var(--sedia-primary);
    border-radius: 20px;
    background: var(--sedia-white);
    color: var(--sedia-primary);
    font-family: var(--sedia-font-heading);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    letter-spacing: 0.02em;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.1s;
}

.sedia-real-btn:hover,
.sedia-real-btn:focus {
    background: var(--sedia-primary-light);
    outline: none;
    box-shadow: 0 0 0 3px rgba( 0, 116, 121, 0.15 );
}

.sedia-real-btn--active {
    background: var(--sedia-primary);
    color: var(--sedia-white);
    box-shadow: 0 2px 8px rgba( 0, 116, 121, 0.25 );
}

.sedia-real-btn--active:hover,
.sedia-real-btn--active:focus {
    background: var(--sedia-primary-dark);
    color: var(--sedia-white);
}

.sedia-real-btn:active {
    transform: scale( 0.96 );
}

/* =========================================================
   Popup réalisations — badge + description
   ========================================================= */
.sedia-popup__badge {
    display: inline-block;
    padding: 0.35rem 0.6rem 0.15rem;
    border-radius: 2px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--sedia-primary);
    margin-bottom: 0.3rem;
    align-self: flex-start;
}

.sedia-popup__desc {
    font-size: 0.78rem;
    color: var(--sedia-text);
    line-height: 1.5;
    margin: 0.3rem 0 0.1rem;
}

/* =========================================================
   Badge couleurs par catégorie (popup + mosaïque)
   ========================================================= */
.sedia-real-badge--amenagement             { background: #f08154; }
.sedia-real-badge--construction-publique   { background: #f08154; }
.sedia-real-badge--immobilier-d-entreprise { background: #f08154; }
.sedia-real-badge--promotion-immobiliere   { background: #f08154; }
.sedia-real-badge--transition-energetique  { background: #f08154; }

/* =========================================================
   Mosaïque réalisations
   ========================================================= */
.sedia-real-mosaic {
    display: grid;
    grid-template-columns: repeat( 3, 1fr );
    gap: 1.4rem;
    margin-top: 0.25rem;
}

@media ( max-width: 900px ) {
    .sedia-real-mosaic {
        grid-template-columns: repeat( 2, 1fr );
    }
}

@media ( max-width: 600px ) {
    .sedia-real-mosaic {
        grid-template-columns: 1fr;
    }
}

/* ---- Carte réalisation ---- */
.sedia-real-card {
    background: var(--sedia-white);
    border: 1px solid var(--sedia-border);
    border-radius: var(--sedia-radius-lg);
    box-shadow: var(--sedia-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s, transform 0.2s;
    cursor: pointer;
}

.sedia-real-card:hover {
    box-shadow: var(--sedia-shadow-hover);
    transform: translateY( -3px );
}

.sedia-real-card--active {
    border-top: 3px solid var(--sedia-primary);
    box-shadow: var(--sedia-shadow-hover);
    transform: translateY( -2px );
}

.sedia-real-card__img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.sedia-real-card__body {
    padding: 0.9rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    flex: 1;
}

.sedia-real-card__badge {
    display: inline-block;
    padding: 0.18rem 0.6rem;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #fff;
    background: var(--sedia-primary);
    align-self: flex-start;
    margin-bottom: 0.15rem;
}

.sedia-real-card__title {
    font-family: var(--sedia-font-heading);
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--sedia-primary);
    margin: 0;
    line-height: 1.3;
}

/* Aucune image → bordure colorée en haut */
.sedia-real-card:not(:has(.sedia-real-card__img)) .sedia-real-card__body {
    border-top: 4px solid var(--sedia-primary);
}