/* ==========================================================================
   Chronologie Soleil - Frise horaire d'ensoleillement sur la fiche lieu
   Méthodologie BEM : chronologie-soleil (block)
   Éléments : __titre, __frise, __barre, __segment, __borne, __resume, __vide
   Modificateurs : --soleil, --ombre
   ========================================================================== */

.chronologie-soleil {
    margin: 8px 0;
    padding: 8px 0;
    border-top: 1px solid #eee;
}

/* Élément : Titre */
.chronologie-soleil__titre {
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

/* Élément : Frise (conteneur horizontal) */
.chronologie-soleil__frise {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
}

/* Élément : Barre (conteneur des segments) */
.chronologie-soleil__barre {
    flex: 1;
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
}

/* Élément : Segment de la frise */
.chronologie-soleil__segment {
    height: 100%;
    min-width: 2px;
    transition: opacity 0.2s ease;
}

.chronologie-soleil__segment:hover {
    opacity: 0.8;
}

/* Modificateur : Segment au soleil */
.chronologie-soleil__segment--soleil {
    background: linear-gradient(135deg, #ffd54f, #ffb300);
}

/* Modificateur : Segment à l'ombre */
.chronologie-soleil__segment--ombre {
    background: linear-gradient(135deg, #90a4ae, #78909c);
}

/* Élément : Bornes horaires (lever/coucher) */
.chronologie-soleil__borne {
    font-size: 10px;
    color: #999;
    white-space: nowrap;
    min-width: 28px;
}

/* Élément : Résumé textuel */
.chronologie-soleil__resume {
    font-size: 12px;
    color: #555;
    line-height: 1.4;
}

/* Élément : État vide / indisponible */
.chronologie-soleil__vide {
    font-size: 12px;
    color: #999;
    font-style: italic;
}

/* ─── Responsive mobile ─── */

@media (max-width: 600px) {
    .chronologie-soleil {
        margin: 6px 0;
        padding: 6px 0;
    }

    .chronologie-soleil__titre {
        font-size: 10px;
    }

    .chronologie-soleil__barre {
        height: 10px;
    }

    .chronologie-soleil__borne {
        font-size: 9px;
    }

    .chronologie-soleil__resume {
        font-size: 11px;
    }
}