/* ==============================================
   Cartelera Cultural — Styles publics v2
   Toutes les variables sont overridables
   ============================================== */

:root {
    --cc-color-primary:   #1a1a2e;
    --cc-color-accent:    #c0392b;
    --cc-color-free:      #27ae60;
    --cc-color-text:      #1a1a2e;
    --cc-color-muted:     #6b7280;
    --cc-color-border:    #e5e7eb;
    --cc-color-bg:        #ffffff;
    --cc-radius:          12px;
    --cc-shadow:          0 2px 12px rgba(0,0,0,.07);
    --cc-shadow-hover:    0 8px 28px rgba(0,0,0,.13);
    --cc-gap:             24px;
}

/* ── GRID CARTES ─────────────────────────────── */
.cc-grid {
    display: grid;
    gap: var(--cc-gap);
}
.cc-cols-2 { grid-template-columns: repeat(2, 1fr); }
.cc-cols-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .cc-cols-3 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 580px) { .cc-cols-2, .cc-cols-3 { grid-template-columns: 1fr; } }

/* ── CARTE ───────────────────────────────────── */
.cc-card {
    background:     var(--cc-color-bg);
    border:         1px solid var(--cc-color-border);
    border-radius:  var(--cc-radius);
    box-shadow:     var(--cc-shadow);
    overflow:       hidden;
    display:        flex;
    flex-direction: column;
    transition:     box-shadow .2s, transform .2s;
}
.cc-card:hover {
    box-shadow: var(--cc-shadow-hover);
    transform:  translateY(-3px);
}

.cc-card__image {
    position:       relative;
    padding-bottom: 56%;
    overflow:       hidden;
    background:     #f3f4f6;
}
.cc-card__image img {
    position:   absolute;
    inset:      0;
    width:      100%;
    height:     100%;
    object-fit: cover;
    transition: transform .35s;
}
.cc-card:hover .cc-card__image img { transform: scale(1.04); }

.cc-card__no-image {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       2.5rem;
    background:      linear-gradient(135deg, #1a1a2e, #2c3e6b);
    opacity:         .6;
}

.cc-card__body {
    padding:        18px 20px 14px;
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

.cc-card__date {
    font-size:      .75rem;
    font-weight:    700;
    color:          var(--cc-color-accent);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin:         0;
}
.cc-card__title {
    font-size:   1rem;
    font-weight: 700;
    margin:      4px 0 0;
    line-height: 1.3;
    color:       var(--cc-color-text);
}
.cc-card__title a { color: inherit; text-decoration: none; }
.cc-card__title a:hover { text-decoration: underline; }

.cc-card__artist {
    font-size:  .85rem;
    font-style: italic;
    color:      var(--cc-color-muted);
    margin:     2px 0 0;
}
.cc-card__venue {
    font-size: .8rem;
    color:     var(--cc-color-muted);
    margin:    4px 0 0;
}
.cc-card__price {
    font-size:   .875rem;
    font-weight: 600;
    color:       var(--cc-color-text);
    margin:      6px 0 0;
}
.cc-card__price--free { color: var(--cc-color-free); }

.cc-card__excerpt {
    font-size:   .85rem;
    color:       var(--cc-color-muted);
    margin:      6px 0 0;
    line-height: 1.55;
    flex:        1;
}

.cc-card__footer {
    padding:    0 20px 18px;
}
.cc-btn {
    display:         inline-block;
    padding:         8px 18px;
    background:      var(--cc-color-primary);
    color:           #fff;
    border-radius:   6px;
    font-size:       .875rem;
    font-weight:     600;
    text-decoration: none;
    transition:      background .2s;
}
.cc-btn:hover { background: var(--cc-color-accent); color: #fff; }

/* ── LISTE COMPACTE ──────────────────────────── */
.cc-lista {
    list-style: none;
    margin:     0;
    padding:    0;
}

.cc-lista__item {
    border-bottom: 1px solid var(--cc-color-border);
}
.cc-lista__item:last-child { border-bottom: none; }

.cc-lista__link {
    display:     flex;
    align-items: center;
    gap:         16px;
    padding:     14px 4px;
    text-decoration: none;
    color:       inherit;
    transition:  background .15s;
}
.cc-lista__link:hover { background: #fafafa; }
.cc-lista__link:hover .cc-lista__arrow { opacity: 1; transform: translateX(3px); }

.cc-lista__cal {
    min-width:       52px;
    text-align:      center;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    line-height:     1;
    color:           var(--cc-color-accent);
    flex-shrink:     0;
}
.cc-lista__cal strong { font-size: 1.4rem; font-weight: 800; }
.cc-lista__cal span   { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.cc-lista__cal-range {
    font-size:   .7rem;
    font-weight: 700;
    text-align:  center;
    line-height: 1.4;
    display:     flex;
    flex-direction: column;
    gap:         1px;
}

.cc-lista__info {
    flex:           1;
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}
.cc-lista__title {
    font-size:     .95rem;
    font-weight:   600;
    color:         var(--cc-color-text);
    white-space:   nowrap;
    overflow:      hidden;
    text-overflow: ellipsis;
}
.cc-lista__venue {
    font-size:  .78rem;
    color:      var(--cc-color-muted);
}

.cc-lista__time {
    font-size:   .8rem;
    font-weight: 600;
    color:       var(--cc-color-muted);
    white-space: nowrap;
    flex-shrink: 0;
}

.cc-lista__arrow {
    color:      var(--cc-color-muted);
    opacity:    .3;
    font-size:  1rem;
    transition: opacity .15s, transform .15s;
    flex-shrink: 0;
}

.cc-no-events { color: var(--cc-color-muted); font-style: italic; }