/* Fichier de compatibilité pour navigateurs anciens */

/* Fallback pour les navigateurs sans support @property */
:root {
    --tw-translate-x: 0;
    --tw-translate-y: 0;
    --tw-translate-z: 0;
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    --tw-scale-z: 1;
    --tw-rotate-x: 0;
    --tw-rotate-y: 0;
    --tw-rotate-z: 0;
    --tw-skew-x: 0;
    --tw-skew-y: 0;
    --tw-space-y-reverse: 0;
    --tw-space-x-reverse: 0;
    --tw-divide-y-reverse: 0;
    --tw-border-style: solid;
    --tw-gradient-from: transparent;
    --tw-gradient-via: transparent;
    --tw-gradient-to: transparent;
    --tw-leading: normal;
    --tw-font-weight: normal;
    --tw-tracking: normal;
    --tw-shadow: 0 0 transparent;
    --tw-shadow-color: transparent;
    --tw-inset-shadow: 0 0 transparent;
    --tw-ring-color: currentcolor;
    --tw-ring-shadow: 0 0 transparent;
    --tw-inset-ring-shadow: 0 0 transparent;
    --tw-ring-offset-width: 0px;
    --tw-ring-offset-color: #fff;
    --tw-ring-offset-shadow: 0 0 transparent;
    --tw-outline-style: solid;
    --tw-blur: none;
    --tw-brightness: none;
    --tw-contrast: none;
    --tw-grayscale: none;
    --tw-hue-rotate: none;
    --tw-invert: none;
    --tw-opacity: 1;
    --tw-saturate: none;
    --tw-sepia: none;
    --tw-drop-shadow: none;
    --tw-backdrop-blur: none;
    --tw-backdrop-brightness: none;
    --tw-backdrop-contrast: none;
    --tw-backdrop-grayscale: none;
    --tw-backdrop-hue-rotate: none;
    --tw-backdrop-invert: none;
    --tw-backdrop-opacity: 1;
    --tw-backdrop-saturate: none;
    --tw-backdrop-sepia: none;
    --tw-duration: 0.15s;
    --tw-ease: ease;
}

/* Couleurs explicites pour les navigateurs sans color-mix */
.border-cyan-500\/30 { border-color: rgba(6, 182, 212, 0.3); }
.border-gray-200\/50 { border-color: rgba(229, 231, 235, 0.5); }
.border-gray-800\/50 { border-color: rgba(30, 41, 59, 0.5); }
.border-indigo-500\/20 { border-color: rgba(99, 102, 241, 0.2); }
.border-slate-700\/50 { border-color: rgba(51, 65, 85, 0.5); }

.bg-amber-500\/10 { background-color: rgba(245, 158, 11, 0.1); }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5); }
.bg-black\/90 { background-color: rgba(0, 0, 0, 0.9); }
.bg-blue-100\/50 { background-color: rgba(219, 234, 254, 0.5); }
.bg-blue-500\/10 { background-color: rgba(59, 130, 246, 0.1); }
.bg-blue-600\/10 { background-color: rgba(37, 99, 235, 0.1); }
.bg-cyan-500\/10 { background-color: rgba(6, 182, 212, 0.1); }
.bg-emerald-100\/50 { background-color: rgba(209, 250, 229, 0.5); }
.bg-emerald-500\/10 { background-color: rgba(16, 185, 129, 0.1); }
.bg-gray-50\/50 { background-color: rgba(249, 250, 251, 0.5); }
.bg-gray-50\/80 { background-color: rgba(249, 250, 251, 0.8); }
.bg-gray-900\/95 { background-color: rgba(17, 24, 39, 0.95); }
.bg-green-500\/10 { background-color: rgba(34, 197, 94, 0.1); }
.bg-indigo-500\/10 { background-color: rgba(99, 102, 241, 0.1); }
.bg-indigo-500\/20 { background-color: rgba(99, 102, 241, 0.2); }
.bg-orange-500\/10 { background-color: rgba(249, 115, 22, 0.1); }
.bg-purple-500\/10 { background-color: rgba(168, 85, 247, 0.1); }
.bg-red-500\/10 { background-color: rgba(239, 68, 68, 0.1); }
.bg-rose-400\/20 { background-color: rgba(251, 113, 133, 0.2); }
.bg-rose-500\/20 { background-color: rgba(244, 63, 94, 0.2); }
.bg-rose-600\/20 { background-color: rgba(225, 29, 72, 0.2); }
.bg-slate-800\/50 { background-color: rgba(30, 41, 59, 0.5); }
.bg-slate-900\/50 { background-color: rgba(15, 23, 42, 0.5); }
.bg-slate-950\/80 { background-color: rgba(2, 6, 23, 0.8); }
.bg-teal-500\/10 { background-color: rgba(20, 184, 166, 0.1); }
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/30 { background-color: rgba(255, 255, 255, 0.3); }
.bg-white\/50 { background-color: rgba(255, 255, 255, 0.5); }
.bg-white\/70 { background-color: rgba(255, 255, 255, 0.7); }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }

.from-rose-500\/10 { --tw-gradient-from: rgba(244, 63, 94, 0.1); }
.from-slate-900\/5 { --tw-gradient-from: rgba(15, 23, 42, 0.05); }
.to-rose-400\/5 { --tw-gradient-to: rgba(251, 113, 133, 0.05); }
.to-rose-600\/20 { --tw-gradient-to: rgba(225, 29, 72, 0.2); }
.to-white\/90 { --tw-gradient-to: rgba(255, 255, 255, 0.9); }

.text-white\/90 { color: rgba(255, 255, 255, 0.9); }

.shadow-blue-500\/30 { --tw-shadow-color: rgba(59, 130, 246, 0.3); }

.focus\:ring-rose-500\/20:focus { --tw-ring-color: rgba(244, 63, 94, 0.2); }

@media (hover:hover) {
    .hover\:bg-blue-50\/50:hover { background-color: rgba(239, 246, 255, 0.5); }
    .hover\:bg-rose-500\/50:hover { background-color: rgba(244, 63, 94, 0.5); }
    .hover\:bg-white\/5:hover { background-color: rgba(255, 255, 255, 0.05); }
    .hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, 0.2); }
    .hover\:shadow-blue-500\/30:hover { --tw-shadow-color: rgba(59, 130, 246, 0.3); }
    .hover\:shadow-orange-500\/30:hover { --tw-shadow-color: rgba(249, 115, 22, 0.3); }
}

/* Fallback backdrop-filter avec préfixes */
.backdrop-blur,
.backdrop-blur-sm,
.backdrop-blur-md,
.backdrop-blur-lg,
.backdrop-blur-xl {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.backdrop-blur-sm {
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.backdrop-blur-md {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.backdrop-blur-lg {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.backdrop-blur-xl {
    -webkit-backdrop-filter: blur(24px);
    backdrop-filter: blur(24px);
}

/* Fallback pour navigateurs sans backdrop-filter */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .backdrop-blur,
    .backdrop-blur-sm,
    .backdrop-blur-md,
    .backdrop-blur-lg,
    .backdrop-blur-xl {
        background-color: rgba(255, 255, 255, 0.95) !important;
    }
    
    .bg-white\/80,
    header.bg-white\/80 {
        background-color: rgba(255, 255, 255, 0.98) !important;
    }
    
    .bg-black\/50 {
        background-color: rgba(0, 0, 0, 0.75) !important;
    }
}

/* Fallback flexbox pour IE11 et anciens navigateurs */
.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.inline-flex {
    display: -webkit-inline-box;
    display: -webkit-inline-flex;
    display: -ms-inline-flexbox;
    display: inline-flex;
}

.flex-col {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

.flex-row {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}

.flex-wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.flex-1 {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 0%;
    -ms-flex: 1 1 0%;
    flex: 1 1 0%;
}

.flex-shrink-0 {
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.flex-grow {
    -webkit-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.items-center {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.items-start {
    -webkit-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.items-end {
    -webkit-box-align: end;
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.justify-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.justify-between {
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.justify-end {
    -webkit-box-pack: end;
    -webkit-justify-content: flex-end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

/* Grid fallback */
.grid {
    display: -ms-grid;
    display: grid;
}

/* Transform fallback */
.transform {
    -webkit-transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
    -ms-transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
    transform: translateX(var(--tw-translate-x, 0)) translateY(var(--tw-translate-y, 0)) rotate(var(--tw-rotate, 0)) skewX(var(--tw-skew-x, 0)) skewY(var(--tw-skew-y, 0)) scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
}

.translate-x-0 {
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0);
}

.-translate-x-full {
    -webkit-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    transform: translateX(-100%);
}

/* Transition fallback */
.transition,
.transition-all,
.transition-colors,
.transition-transform,
.transition-shadow {
    -webkit-transition-property: all;
    -o-transition-property: all;
    transition-property: all;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -o-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-transition-duration: 150ms;
    -o-transition-duration: 150ms;
    transition-duration: 150ms;
}

.duration-200 {
    -webkit-transition-duration: 200ms;
    -o-transition-duration: 200ms;
    transition-duration: 200ms;
}

.duration-300 {
    -webkit-transition-duration: 300ms;
    -o-transition-duration: 300ms;
    transition-duration: 300ms;
}

.duration-500 {
    -webkit-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms;
}

/* Animation fallback */
@-webkit-keyframes ping {
    75%, 100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

@keyframes ping {
    75%, 100% {
        -webkit-transform: scale(2);
        transform: scale(2);
        opacity: 0;
    }
}

@-webkit-keyframes pulse {
    50% {
        opacity: .5;
    }
}

@keyframes pulse {
    50% {
        opacity: .5;
    }
}

.animate-ping {
    -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.animate-pulse {
    -webkit-animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Scroll behavior fallback */
.scroll-smooth {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Object-fit fallback */
.object-cover {
    -o-object-fit: cover;
    object-fit: cover;
}

/* Apparence fallback */
.appearance-none {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Antialiased fallback */
.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Focus visible fallback pour les anciens navigateurs */
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Box sizing global */
*, *::before, *::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Gradient fallback pour les anciens navigateurs */
.bg-gradient-to-r {
    background-image: -webkit-linear-gradient(left, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
    background-image: -o-linear-gradient(left, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
    background-image: linear-gradient(to right, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
}

.bg-gradient-to-b {
    background-image: -webkit-linear-gradient(top, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
    background-image: -o-linear-gradient(top, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
    background-image: linear-gradient(to bottom, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
}

.bg-gradient-to-br {
    background-image: -webkit-linear-gradient(top left, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
    background-image: -o-linear-gradient(top left, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
    background-image: linear-gradient(to bottom right, var(--tw-gradient-from, transparent), var(--tw-gradient-to, transparent));
}

/* Fix pour Safari et iOS */
input, textarea, select, button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
}

/* Fix pour le scrolling sur iOS */
.overflow-auto,
.overflow-y-auto,
.overflow-x-auto {
    -webkit-overflow-scrolling: touch;
}

/* Fix height 100vh sur mobile */
.h-screen {
    height: 100vh;
    height: -webkit-fill-available;
}

.min-h-screen {
    min-height: 100vh;
    min-height: -webkit-fill-available;
}

/* =====================================================
   FALLBACKS POUR NAVIGATEURS DÉTECTÉS PAR JAVASCRIPT
   ===================================================== */

/* Fallback pour navigateurs sans backdrop-filter */
.no-backdrop-filter .backdrop-blur,
.no-backdrop-filter .backdrop-blur-sm,
.no-backdrop-filter .backdrop-blur-md,
.no-backdrop-filter .backdrop-blur-lg,
.no-backdrop-filter .backdrop-blur-xl {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

.no-backdrop-filter .bg-white\/80 {
    background-color: rgba(255, 255, 255, 0.98) !important;
}

.no-backdrop-filter .bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.85) !important;
}

.no-backdrop-filter header {
    background-color: #ffffff !important;
}

/* Fallback pour navigateurs sans CSS custom properties */
.no-css-vars .bg-slate-50 { background-color: #f8fafc !important; }
.no-css-vars .bg-slate-100 { background-color: #f1f5f9 !important; }
.no-css-vars .bg-slate-200 { background-color: #e2e8f0 !important; }
.no-css-vars .bg-slate-700 { background-color: #334155 !important; }
.no-css-vars .bg-slate-800 { background-color: #1e293b !important; }
.no-css-vars .bg-slate-900 { background-color: #0f172a !important; }
.no-css-vars .bg-gray-50 { background-color: #f9fafb !important; }
.no-css-vars .bg-gray-100 { background-color: #f3f4f6 !important; }
.no-css-vars .bg-white { background-color: #ffffff !important; }
.no-css-vars .text-white { color: #ffffff !important; }
.no-css-vars .text-slate-400 { color: #94a3b8 !important; }
.no-css-vars .text-slate-500 { color: #64748b !important; }
.no-css-vars .text-slate-600 { color: #475569 !important; }
.no-css-vars .text-slate-700 { color: #334155 !important; }
.no-css-vars .text-slate-800 { color: #1e293b !important; }
.no-css-vars .text-blue-400 { color: #60a5fa !important; }
.no-css-vars .text-blue-500 { color: #3b82f6 !important; }
.no-css-vars .text-blue-600 { color: #2563eb !important; }
.no-css-vars .text-emerald-400 { color: #34d399 !important; }
.no-css-vars .text-emerald-500 { color: #10b981 !important; }
.no-css-vars .text-emerald-600 { color: #059669 !important; }
.no-css-vars .border-gray-100 { border-color: #f3f4f6 !important; }
.no-css-vars .border-gray-200 { border-color: #e5e7eb !important; }
.no-css-vars .border-slate-700 { border-color: #334155 !important; }

/* Fallbacks spécifiques pour IE11 */
.ie-browser .flex { display: block; }
.ie-browser .grid { display: block; }
.ie-browser .hidden { display: none !important; }
.ie-browser aside { position: relative !important; float: left; }
.ie-browser main { margin-left: 256px; }

/* Fallbacks pour ancien Edge */
.old-edge .backdrop-blur,
.old-edge .backdrop-blur-md {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Fallbacks pour ancien Safari */
.old-safari .backdrop-blur,
.old-safari .backdrop-blur-md {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

/* Correction pour Safari - fix de l'affichage flexbox */
.old-safari .flex-1 {
    flex-basis: 0%;
    flex-grow: 1;
    flex-shrink: 1;
}

/* Fix pour Firefox ancien - scrollbar */
@-moz-document url-prefix() {
    * {
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }
}