/* 
 * Utilitaires complémentaires à Bulma
 * Classes spécifiques au projet qui ne sont pas dans Bulma
 */

/* === COULEURS CUSTOM (utilisant nos variables) === */
.has-text-primary-custom { color: var(--primary-color) !important; }
.has-text-secondary-custom { color: var(--secondary-color) !important; }
.has-text-accent { color: var(--accent-color) !important; }
.has-text-muted { color: var(--text-color-muted) !important; }
.has-text-cool { color: var(--color-purple-200) !important; }

.has-background-primary-custom { background-color: var(--primary-color) !important; }
.has-background-accent { background-color: var(--accent-color) !important; }
.has-background-soft { background-color: var(--background-soft) !important; }
.has-background-warm { background-color: var(--background-warm) !important; }
.has-background-fresh { background-color: var(--background-fresh) !important; }
.has-background-cool { background-color: var(--color-purple-200) !important; }

/* === BORDURES CUSTOM === */
.has-border-radius-custom { border-radius: var(--card-border-radius) !important; }
.has-border-radius-soft { border-radius: var(--card-border-radius-soft) !important; }
.has-border-radius-subtle { border-radius: var(--card-border-radius-subtle) !important; }

/* === OMBRES CUSTOM === */
.has-shadow-custom { box-shadow: var(--box-shadow) !important; }
.has-shadow-hover { box-shadow: var(--box-shadow-hover) !important; }

/* === RESPONSIVE MAP === */
.map-responsive {
    position: relative;
    padding-bottom: 56.25%; /* Ratio 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    width: 100%;
    margin: var(--spacing-md) auto;
}

/* Ajustements pour tablette */
@media screen and (max-width: 768px) {
    .map-responsive {
        padding-bottom: 65%; /* Ratio intermédiaire pour tablette */
        margin: var(--spacing-lg) auto;
        border-radius: var(--border-radius-small);
    }
}

/* Ajustements pour mobile - point de rupture à 690px */
@media screen and (max-width: 690px) {
    .map-responsive {
        padding-bottom: 75%; /* Ratio adapté pour mobile */
        margin: var(--spacing-md) auto;
        border-radius: var(--border-radius-small);
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    
    .map-responsive iframe,
    .map-responsive embed,
    .map-responsive object {
        border-radius: var(--border-radius-small);
        width: 100% !important;
        height: 100% !important;
    }
}

/* Ajustements pour très petits écrans */
@media screen and (max-width: 480px) {
    .map-responsive {
        padding-bottom: 85%; /* Format plus adapté aux petits écrans */
        margin: var(--spacing-sm) auto;
        border-radius: var(--border-radius-small);
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .map-responsive iframe,
    .map-responsive embed,
    .map-responsive object {
        width: 100% !important;
        height: 100% !important;
    }
}

.map-responsive iframe,
.map-responsive embed,
.map-responsive object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--border-radius);
}

/* Variation pour ratio 4:3 si nécessaire */
.map-responsive.is-4by3 {
    padding-bottom: 75%; /* Ratio 4:3 */
}

/* Variation pour ratio plus carré */
.map-responsive.is-square {
    padding-bottom: 100%; /* Ratio 1:1 */
}

/* === ALIGNEMENT FLEXBOX === */
.is-align-bottom { align-items: flex-end !important; }
.is-align-top { align-items: flex-start !important; }

/* === DEBUG HELPERS (development only) === */
.debug-border { border: 1px solid red !important; }
.debug-bg { background-color: rgba(255, 0, 0, 0.1) !important; }