/* ========================================
   COMPATIBILITÉ NAVIGATEURS UNIVERSELLE - OPTIMISÉE
   ======================================== */

/* Reset universel pour tous les navigateurs */
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Fallbacks pour les propriétés CSS modernes */

/* Backdrop-filter avec fallback complet */
.backdrop-blur {
    background: rgba(255, 255, 255, 0.1); /* Fallback pour les navigateurs sans backdrop-filter */
    -webkit-backdrop-filter: blur(10px);
    -moz-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* Grid avec fallback Flexbox complet */
.grid-fallback {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

/* CSS Grid avec fallback complet */
.grid-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

/* Support CSS Grid moderne */
@supports (display: grid) {
    .grid-container {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 2rem;
    }
}

/* Flexbox avec préfixes complets */
.flex-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

/* Transitions avec préfixes complets */
.transition {
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* Transformations avec préfixes complets */
.transform {
    -webkit-transform: translateY(-5px);
    -moz-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    -o-transform: translateY(-5px);
    transform: translateY(-5px);
}

/* Animations avec préfixes complets */
@-webkit-keyframes fadeIn {
    from { 
        opacity: 0;
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@-moz-keyframes fadeIn {
    from { 
        opacity: 0;
        -moz-transform: translateY(20px);
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        -moz-transform: translateY(0);
        transform: translateY(0);
    }
}

@-o-keyframes fadeIn {
    from { 
        opacity: 0;
        -o-transform: translateY(20px);
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        -o-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { 
        opacity: 0;
        transform: translateY(20px);
    }
    to { 
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    -webkit-animation: fadeIn 0.5s ease-in;
    -moz-animation: fadeIn 0.5s ease-in;
    -o-animation: fadeIn 0.5s ease-in;
    animation: fadeIn 0.5s ease-in;
}

/* Gradients avec préfixes complets */
.gradient-bg {
    background: #ff8000; /* Fallback */
    background: -webkit-linear-gradient(135deg, #ffb366 0%, #ff9933 50%, #ff8000 100%);
    background: -moz-linear-gradient(135deg, #ffb366 0%, #ff9933 50%, #ff8000 100%);
    background: -o-linear-gradient(135deg, #ffb366 0%, #ff9933 50%, #ff8000 100%);
    background: linear-gradient(135deg, #ffb366 0%, #ff9933 50%, #ff8000 100%);
}

/* Border-radius avec préfixes */
.rounded {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

.rounded-full {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}

/* Box-shadow avec préfixes */
.shadow {
    -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Text-shadow avec préfixes */
.text-shadow {
    -webkit-text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    -moz-text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Object-fit avec préfixes */
.object-cover {
    -webkit-object-fit: cover;
    -moz-object-fit: cover;
    object-fit: cover;
}

/* Filter avec préfixes */
.blur {
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -o-filter: blur(10px);
    filter: blur(10px);
}

/* Will-change avec préfixes */
.will-change {
    -webkit-will-change: transform;
    will-change: transform;
}

/* Scroll-behavior avec préfixes */
.smooth-scroll {
    -webkit-scroll-behavior: smooth;
    scroll-behavior: smooth;
}

/* Text-rendering avec préfixes */
.text-rendering {
    -webkit-text-rendering: optimizeLegibility;
    -moz-text-rendering: optimizeLegibility;
    text-rendering: optimizeLegibility;
}

/* Font-smoothing avec préfixes */
.font-smoothing {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* User-select avec préfixes */
.no-select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Touch-action avec préfixes */
.touch-action {
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* Appearance avec préfixes */
.no-appearance {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Focus styles pour l'accessibilité */
.focus-visible {
    outline: 2px solid #ff8000;
    outline-offset: 2px;
}

/* Styles spécifiques pour Internet Explorer */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    /* Fallbacks pour IE */
    .backdrop-blur {
        background: rgba(255, 255, 255, 0.9);
    }
    
    .grid-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .grid-container > * {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 250px;
        -ms-flex: 1 1 250px;
        flex: 1 1 250px;
        margin: 1rem;
    }
    
    /* Support limité pour les animations */
    .animate-fade-in {
        opacity: 1;
    }
    
    /* Fallback pour les gradients */
    .gradient-bg {
        background: #ff8000;
    }
}

/* Styles spécifiques pour Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    /* Optimisations Safari */
    .backdrop-blur {
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* Amélioration du rendu des polices */
    body {
        -webkit-font-smoothing: antialiased;
        -webkit-text-rendering: optimizeLegibility;
    }
    
    /* Optimisation des animations */
    .animate-fade-in {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Styles spécifiques pour Firefox */
@-moz-document url-prefix() {
    /* Optimisations Firefox */
    .backdrop-blur {
        -moz-backdrop-filter: blur(10px);
    }
    
    /* Amélioration du rendu */
    body {
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Optimisation des animations */
    .animate-fade-in {
        -moz-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Styles spécifiques pour Edge */
@supports (-ms-ime-align: auto) {
    /* Optimisations Edge */
    .backdrop-blur {
        background: rgba(255, 255, 255, 0.9);
    }
    
    /* Support amélioré pour les animations */
    .animate-fade-in {
        -ms-transform: translateZ(0);
        transform: translateZ(0);
    }
}

/* Styles pour les navigateurs mobiles */
@media screen and (max-width: 768px) {
    /* Optimisations mobiles */
    .backdrop-blur {
        background: rgba(255, 255, 255, 0.95);
        -webkit-backdrop-filter: blur(5px);
        -moz-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
    }
    
    /* Réduction des animations sur mobile */
    .animate-fade-in {
        -webkit-animation-duration: 0.3s;
        -moz-animation-duration: 0.3s;
        -o-animation-duration: 0.3s;
        animation-duration: 0.3s;
    }
}

/* Styles pour les appareils à faible puissance */
@media (prefers-reduced-motion: reduce) {
    /* Désactivation des animations */
    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        -moz-animation-duration: 0.01ms !important;
        -o-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        -moz-animation-iteration-count: 1 !important;
        -o-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        -webkit-transition-duration: 0.01ms !important;
        -moz-transition-duration: 0.01ms !important;
        -o-transition-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* Styles pour les écrans haute densité */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Optimisations pour les écrans Retina */
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Styles pour les écrans tactiles */
@media (hover: none) and (pointer: coarse) {
    /* Optimisations pour les écrans tactiles */
    .hover-effect {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        -o-transform: none;
        transform: none;
    }
    
    .hover-effect:active {
        background: rgba(255, 255, 255, 0.3);
    }
}

/* Styles pour les navigateurs sans support JavaScript */
.no-js .js-only {
    display: none;
}

.no-js .backdrop-blur {
    background: rgba(255, 255, 255, 0.9);
}

.no-js .background-video {
    display: none;
}

.no-js .background-fallback {
    opacity: 1;
}

/* Styles pour les navigateurs sans support vidéo */
@supports not (object-fit: cover) {
    .background-video {
        display: none !important;
    }
    
    .background-fallback {
        opacity: 1 !important;
    }
}

/* Styles pour Internet Explorer */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .background-video {
        display: none !important;
    }
    
    .background-fallback {
        opacity: 1 !important;
    }
}

/* Styles pour les navigateurs mobiles avec restrictions vidéo */
@media (max-width: 768px) {
    .background-video {
        transform: scale(1.1) !important;
        -webkit-transform: scale(1.1) !important;
        -moz-transform: scale(1.1) !important;
        -ms-transform: scale(1.1) !important;
    }
}

/* Styles pour les navigateurs avec support limité de la vidéo */
@supports not (object-fit: cover) and not (object-position: center) {
    .background-video {
        display: none !important;
    }
    
    .background-fallback {
        opacity: 1 !important;
    }
}

/* Styles pour Safari */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .background-video {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
}

/* Styles pour Firefox */
@-moz-document url-prefix() {
    .background-video {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }
}

/* Styles pour Edge */
@supports (-ms-ime-align: auto) {
    .background-video {
        -ms-transform: scale(1.2);
        transform: scale(1.2);
    }
}

/* Fallback pour les navigateurs très anciens */
@media screen and (max-width: 1px) {
    .background-video {
        display: none !important;
    }
    
    .background-fallback {
        opacity: 1 !important;
    }
}

/* Styles pour les navigateurs avec support JavaScript */
.js {
    .js-only {
        display: block;
    }
}

/* Optimisations pour les navigateurs anciens */
@media screen and (max-width: 1px) {
    /* Styles pour les navigateurs très anciens */
    .modern-feature {
        display: none;
    }
    
    .fallback-feature {
        display: block;
    }
}

/* Support pour les navigateurs avec support limité CSS */
@supports not (display: grid) {
    .grid-container {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    
    .grid-container > * {
        -webkit-box-flex: 1;
        -webkit-flex: 1 1 250px;
        -ms-flex: 1 1 250px;
        flex: 1 1 250px;
        margin: 1rem;
    }
}

/* Support pour les navigateurs sans backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    .backdrop-blur {
        background: rgba(255, 255, 255, 0.9);
    }
}

/* Support pour les navigateurs sans CSS Grid */
@supports not (display: grid) {
    .grid-layout {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/* Optimisations pour les navigateurs avec support complet */
@supports (display: grid) and (backdrop-filter: blur(10px)) {
    .modern-browser {
        display: block;
    }
    
    .legacy-browser {
        display: none;
    }
}

/* Styles pour les navigateurs avec support limité */
@supports not ((display: grid) and (backdrop-filter: blur(10px))) {
    .modern-browser {
        display: none;
    }
    
    .legacy-browser {
        display: block;
    }
}

/* Optimisations pour les navigateurs avec support partiel */
@supports (display: grid) and not (backdrop-filter: blur(10px)) {
    .grid-support {
        display: block;
    }
    
    .backdrop-support {
        display: none;
    }
}

/* Styles pour les navigateurs avec support backdrop-filter mais pas grid */
@supports not (display: grid) and (backdrop-filter: blur(10px)) {
    .grid-support {
        display: none;
    }
    
    .backdrop-support {
        display: block;
    }
}

/* Optimisations pour les navigateurs avec support complet des propriétés modernes */
@supports (display: grid) and (backdrop-filter: blur(10px)) and (animation: fadeIn 0.5s ease-in) {
    .full-support {
        display: block;
    }
    
    .partial-support {
        display: none;
    }
}

/* Styles pour les navigateurs avec support partiel */
@supports not ((display: grid) and (backdrop-filter: blur(10px)) and (animation: fadeIn 0.5s ease-in)) {
    .full-support {
        display: none;
    }
    
    .partial-support {
        display: block;
    }
}

/* Optimisations pour les navigateurs avec support limité */
@supports not (display: grid) and not (backdrop-filter: blur(10px)) and not (animation: fadeIn 0.5s ease-in) {
    .limited-support {
        display: block;
    }
    
    .modern-support {
        display: none;
    }
}

/* Styles pour les navigateurs avec support complet */
@supports (display: grid) and (backdrop-filter: blur(10px)) and (animation: fadeIn 0.5s ease-in) {
    .limited-support {
        display: none;
    }
    
    .modern-support {
        display: block;
    }
}