/* =============================================================================
   com_commerces — liste.css
   Variables calées sur la charte Fidelitab (#1D9E75)
   ============================================================================= */

:root {
    --cc-green:        #1D9E75;
    --cc-green-light:  #e8f7f2;
    --cc-card-radius:  10px;
    --cc-cover-height: 330px;
    --cc-logo-size:    60px;
    --cc-shadow:       0 2px 8px rgba(0,0,0,.08);
}

/* --------------------------------------------------------------------------
   Carte
   -------------------------------------------------------------------------- */
#commerces-map {
    border: 1px solid #dee2e6;
    box-shadow: var(--cc-shadow);
}

/* --------------------------------------------------------------------------
   Filtres
   -------------------------------------------------------------------------- */
.commerces-filtres {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}

#btn-geolocate {
    background-color: var(--cc-green);
    border-color:     var(--cc-green);
}

#btn-geolocate:hover {
    background-color: #178a64;
    border-color:     #178a64;
}

/* --------------------------------------------------------------------------
   Cartes commerces
   -------------------------------------------------------------------------- */
.commerce-card .card {
    border-radius: var(--cc-card-radius);
    box-shadow:    var(--cc-shadow);
    transition:    transform .15s ease, box-shadow .15s ease;
    overflow:      hidden;
}

.commerce-card .card:hover {
    transform:  translateY(-3px);
    box-shadow: 0 6px 18px rgba(0,0,0,.13);
}

.commerce-card__cover {
    height:     var(--cc-cover-height);
    width:      100%;
    object-fit: contain; /*cover;*/
    display:    block;
}

.commerce-card__cover--placeholder {
    height: var(--cc-cover-height);
}

.commerce-card__logo-fallback {
    max-height: 80px;
    max-width:  140px;
    object-fit: contain;
}

.commerce-card__logo {
    width:      var(--cc-logo-size);
    height:     var(--cc-logo-size);
    object-fit: contain;
    border:     1px solid #eee;
    background: #fff;
    flex-shrink:0;
}

/* --------------------------------------------------------------------------
   Fiche individuelle
   -------------------------------------------------------------------------- */
.fiche-hero {
    max-height: 380px;
    overflow:   hidden;
}

.fiche-hero__cover {
    max-height:  380px;
    object-fit:  cover;
    width:       100%;
    filter:      brightness(.85);
}

.fiche-hero__overlay {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    padding:    1.5rem 1rem 1rem;
}

.fiche-hero__logo {
    width:      64px;
    height:     64px;
    object-fit: contain;
    background: #fff;
    border-radius: 8px;
    padding:    4px;
    flex-shrink:0;
}

.fiche-section__title {
    color: var(--cc-green);
}

.fiche-offre {
    background: var(--cc-green-light);
}

.fiche-galerie__img {
    height:     150px;
    object-fit: cover;
    width:      100%;
    cursor:     zoom-in;
    transition: opacity .2s;
}

.fiche-galerie__img:hover {
    opacity: .85;
}

.fiche-reseaux a {
    min-width: 36px;
    display:   inline-flex;
    align-items: center;
    justify-content: center;
}

.commerce-card__themes .fa-solid.fa-tags {
  margin: 5px;
}

.themes {
  font-size: 15px;
}

.label-theme, .label-programme {
  font-size: 14px;
  margin-bottom: 0px;
  font-weight: bold;
}

.card-footer.details {
  text-align: center;
  background-color: var(--cc-green);
}
/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 576px) {
    :root { --cc-cover-height: 140px; }

    #commerces-map { height: 280px !important; }

    .fiche-hero,
    .fiche-hero__cover { max-height: 220px; }
}