/* ============================================
   UTILITIES - SOBERY THEME
   ============================================ */

/* ============================================
   BORDER RADIUS
   ============================================ */

.radius-sm {
    border-radius: 0.5rem; /* rounded-lg */
}

.radius-md {
    border-radius: 0.75rem; /* rounded-xl */
}

.radius-lg {
    border-radius: 1rem; /* rounded-2xl */
}

.radius-xl {
    border-radius: 1.5rem; /* rounded-3xl */
}

.radius-2xl {
    border-radius: 2rem; /* rounded-[32px] */
}

.radius-full {
    border-radius: 9999px; /* rounded-full */
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

/* Très petits écrans (< 375px) */
@media (max-width: 374px) {
    .hide-xs {
        display: none;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
    .hide-mobile {
        display: none;
    }
}

/* Desktop (>= 768px) */
@media (min-width: 768px) {
    .hide-desktop {
        display: none;
    }
}

/* Tablette portrait (768px - 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet {
        display: none;
    }
}

/* ============================================
   ANIMATION DURATIONS
   ============================================ */

.animate-bounce-4s {
    animation-duration: 4s;
}

.animate-bounce-5s {
    animation-duration: 5s;
}

.animate-bounce-6s {
    animation-duration: 6s;
}

/* ============================================
   PATTERNS DE FOND
   ============================================ */

.bg-pattern-dots {
    background-image: radial-gradient(#ffffff 1px, transparent 1px);
    background-size: 20px 20px;
}

.bg-pattern-dots-grey {
    background-image: radial-gradient(#85827D 1px, transparent 1px);
    background-size: 24px 24px;
}

.bg-pattern-grid {
    background-image: linear-gradient(#333 1px, transparent 1px), linear-gradient(90deg, #333 1px, transparent 1px);
    background-size: 20px 20px;
}

/* ============================================
   UTILITAIRES IMAGES
   ============================================ */

.bg-cover-center {
    background-size: cover;
    background-position: center;
}

/* ============================================
   CONTENEURS ANIMATION DE MOTS
   ============================================ */

.scroll-words-container {
    height: 1.1em;
    overflow: hidden;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
}

.scroll-words-content {
    display: flex;
    flex-direction: column;
}

.scroll-word-item {
    height: 1.1em;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

/* ============================================
   AMÉLIORATION DE LA LISIBILITÉ
   ============================================ */

/* Texte sur fond clair - Contraste amélioré */
.text-on-light {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Texte sur image - Overlay et ombre renforcés */
.text-on-image {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Overlay standard pour images avec texte */
.image-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.2) 100%);
}

/* Texte avec opacité minimale pour lisibilité */
.text-readable {
    opacity: 0.9;
}

.text-readable-light {
    opacity: 0.85;
}