/*
🌐 EMOCARD CROSS-BROWSER FIXES v2.0.0
Corrections spécifiques pour éliminer les différences Safari/Firefox/Chrome

PROBLÈMES RÉSOLUS:
- Boutons ronds → carrés sur Firefox (focus states)
- Vitesses animations différentes entre navigateurs  
- Styles par défaut navigateur qui écrasent le design
- Prefixes CSS manquants
- Outlines bleus moches sur Chrome/Firefox/Edge

@version 2.0.0
@date 2025-10-06
@author EMOCARD Team
*/

/* 🔄 RESET COMPLET NAVIGATEURS - BASE COMMUNE */
*:focus,
*:focus-within {
    outline: none !important; /* Force la suppression partout */
}

/* Ciblage spécifique des éléments problématiques */
button:focus,
button:active,
a:focus,
a:active,
input:focus,
input:active,
textarea:focus,
textarea:active,
select:focus,
select:active,
[role="button"]:focus,
[tabindex]:focus {
    outline: none !important;
    box-shadow: none !important; /* Supprime aussi les box-shadow par défaut */
}

/* =========================================================================
   🎯 SECTION 2 : :FOCUS-VISIBLE POUR L'ACCESSIBILITÉ
   ========================================================================= */

/**
 * ♿ ACCESSIBILITÉ : Outline élégant pour navigation clavier uniquement
 * 
 * :focus-visible = activé SEULEMENT lors de navigation au clavier (Tab)
 * Pas d'outline moche au clic souris, mais visible pour les utilisateurs
 * qui naviguent au clavier (accessibilité WCAG).
 */

/* Outline premium EMOCARD pour navigation clavier */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid rgba(170, 123, 76, 0.6) !important; /* Cuivre EMOCARD */
    outline-offset: 3px !important;
    border-radius: 4px;
    transition: outline 0.2s ease;
}

/* Style spécial pour boutons primaires */
.btn-primary:focus-visible,
.btn-emocard:focus-visible,
.btn-premium:focus-visible {
    outline: 3px solid rgba(170, 123, 76, 0.8) !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 4px rgba(170, 123, 76, 0.15) !important;
}

/* =========================================================================
   🎯 SECTION 3 : FIXES SPÉCIFIQUES CHROME
   ========================================================================= */

/**
 * 🌐 CHROME : Suppression des comportements par défaut moches
 */

/* Supprime le bord bleu au tap sur mobile Chrome */
* {
    -webkit-tap-highlight-color: transparent !important;
}

/* Supprime le focus rectangle bleu sur divs contenteditable */
[contenteditable]:focus {
    outline: none !important;
}

/* Supprime l'autofill background jaune moche de Chrome */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: #333 !important;
}

/* =========================================================================
   🎯 SECTION 4 : FIXES SPÉCIFIQUES FIREFOX
   ========================================================================= */

/**
 * 🦊 FIREFOX : Corrections spécifiques
 */

/* Supprime le focus dotted border sur boutons/liens */
button::-moz-focus-inner,
a::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner {
    border: none !important;
    padding: 0 !important;
}

/* Normalisation des boutons Firefox */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    -moz-appearance: none !important;
    appearance: none !important;
}

/* =========================================================================
   🎯 SECTION 5 : FIXES SPÉCIFIQUES SAFARI
   ========================================================================= */

/**
 * 🍎 SAFARI : Corrections pour WebKit
 */

/* Supprime le focus ring bleu Safari */
button,
input,
select,
textarea,
a {
    -webkit-appearance: none;
    appearance: none;
}

/* Normalisation des inputs Safari */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
textarea {
    -webkit-appearance: none;
    appearance: none;
    border-radius: 8px; /* Cohérence EMOCARD */
}

/* Fix pour les selects Safari */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23aa7b4c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

/* =========================================================================
   🎯 SECTION 6 : NORMALISATION DES EMOJIS CROSS-BROWSER
   ========================================================================= */

/**
 * 😊 EMOJIS : Harmonisation du rendu entre Safari/Chrome/Firefox
 * 
 * Problème : Les emojis s'affichent différemment selon les navigateurs.
 * Safari utilise Apple Color Emoji, Chrome utilise Noto Color Emoji,
 * Firefox utilise Twemoji Mozilla.
 * 
 * Solution : Stack de fonts emojis pour cohérence maximale.
 */

/* Font stack universel pour emojis */
body,
html,
* {
    /* Prioriser les emojis natifs du système pour cohérence */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
                 "Helvetica Neue", Arial, sans-serif,
                 /* Stack emojis pour tous les OS */
                 "Apple Color Emoji",    /* macOS/iOS */
                 "Segoe UI Emoji",       /* Windows */
                 "Segoe UI Symbol",      /* Windows ancien */
                 "Noto Color Emoji",     /* Android/Chrome */
                 "EmojiOne Color",       /* Fallback Web */
                 "Android Emoji",        /* Android ancien */
                 "Twemoji Mozilla";      /* Firefox fallback */
}

/* Force le rendu natif des emojis (pas de conversion en texte) */
.emoji,
[class*="emoji"],
[data-emoji] {
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", 
                 "Noto Color Emoji", "EmojiOne Color", "Android Emoji";
    font-style: normal !important;
    font-weight: normal !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Forcer le rendu emoji Unicode (pas de variante texte) */
.emoji::before,
.emoji::after,
[data-emoji]::before,
[data-emoji]::after {
    /* U+FE0F = Emoji Presentation Selector (force emoji rendering) */
    content: "\FE0F";
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    pointer-events: none;
}

/* =========================================================================
   🎯 SECTION 7 : FIXES DIVERS CROSS-BROWSER
   ========================================================================= */

/**
 * 🔧 AUTRES FIXES pour harmonisation totale
 */

/* Normalisation box-sizing pour tous les navigateurs */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Supprime les marges/paddings par défaut différents entre navigateurs */
button,
input,
select,
textarea {
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    line-height: inherit;
}

/* Harmonisation des transitions (Chrome plus rapide que Firefox/Safari) */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Fix scroll smooth cross-browser */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}

/* Normalisation des liens */
a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

a:hover,
a:active {
    text-decoration: none;
    outline: none;
}

/* =========================================================================
   🎯 SECTION 8 : FIXES RESPONSIVE CROSS-BROWSER
   ========================================================================= */

/**
 * 📱 RESPONSIVE : Fixes pour mobile Safari/Chrome/Firefox
 */

/* Fix pour éviter le zoom iOS Safari sur focus input */
@media screen and (max-width: 768px) {
    input,
    select,
    textarea {
        font-size: 16px !important; /* iOS zoom si < 16px */
    }
}

/* Fix pour éviter le scroll horizontal sur mobile */
body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Fix pour le 100vh sur mobile Safari (barre d'adresse) */
.full-height {
    height: 100vh;
    height: calc(var(--vh, 1vh) * 100); /* Fallback JavaScript */
}

/* =========================================================================
   🎯 SECTION 9 : DEBUG MODE (à retirer en production)
   ========================================================================= */

/**
 * 🐛 MODE DEBUG : Activer pour voir les éléments focusables
 * 
 * Décommenter pour voir visuellement tous les éléments qui reçoivent
 * le focus et vérifier qu'ils n'ont plus l'outline bleu.
 */

/* Décommenter pour debug :
*:focus {
    outline: 3px dashed red !important;
    outline-offset: 5px !important;
}

*:focus-visible {
    outline: 3px solid green !important;
    outline-offset: 5px !important;
}
*/

/* =========================================================================
   FIN DES CROSS-BROWSER FIXES
   ========================================================================= */

/**
 * 📝 NOTES D'UTILISATION :
 * 
 * 1. Charger ce CSS EN PRIORITÉ dans le <head> avant tous les autres CSS
 * 2. Utiliser !important car les resets doivent être absolus
 * 3. Tester sur Chrome, Firefox, Safari, Edge
 * 4. Vérifier l'accessibilité avec navigation clavier (Tab)
 * 5. Valider avec outils : axe DevTools, Lighthouse
 * 
 * 🧪 TESTS RECOMMANDÉS :
 * - Cliquer sur tous les boutons → pas d'outline bleu
 * - Naviguer au Tab → outline cuivre visible
 * - Vérifier emojis 🎨😊✨ dans tous les navigateurs
 * - Tester sur mobile iOS/Android
 */

/* =========================================================================
   🎯 SECTION NOUVELLES CORRECTIONS v2.0.0 - FIREFOX vs SAFARI
   ========================================================================= */

/* 🔘 BOUTONS UNIVERSELS - FORCER APPARENCE IDENTIQUE */
button, 
input[type="button"], 
input[type="submit"], 
.btn, 
.like-button,
.portfolio-like-button,
[class*="button"]:not(.scroll-down-elegant):not(.like-button):not(.portfolio-like-button) {
    /* Reset complet des styles navigateur */
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    
    /* Border-radius forcé sur TOUS les états (SAUF scroll-down-elegant) */
    border-radius: inherit !important;
    -webkit-border-radius: inherit !important;
    -moz-border-radius: inherit !important;
    
    /* Supprimer outline par défaut */
    outline: none !important;
    
    /* Forcer box-sizing */
    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
}

/* 🔘 FIX SPÉCIAL : Boutons TOUJOURS ronds */
#scroll-down-btn.scroll-down-elegant,
button.scroll-down-elegant,
.like-button,
.portfolio-like-button,
button.like-button,
button.portfolio-like-button {
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
}

/* 🎯 ÉTATS BOUTONS - PRÉSERVER BORDER-RADIUS */
button:hover, 
button:focus, 
button:active, 
button:focus-visible,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="button"]:active,
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="submit"]:active,
.btn:hover,
.btn:focus,
.btn:active,
.like-button:hover,
.like-button:focus,
.like-button:active,
.portfolio-like-button:hover,
.portfolio-like-button:focus,
.portfolio-like-button:active {
    border-radius: inherit !important;
    -webkit-border-radius: inherit !important;
    -moz-border-radius: inherit !important;
    outline: none !important;
}

/* 🔥 FIREFOX SPÉCIFIQUE - SUPPRIMER BORDURES INTERNES */
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
.btn::-moz-focus-inner,
.like-button::-moz-focus-inner,
.portfolio-like-button::-moz-focus-inner {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 🔥 FIREFOX SPÉCIFIQUE - DETECTION ET STYLES */
@-moz-document url-prefix() {
    /* Forcer border-radius sur Firefox */
    .like-button,
    .portfolio-like-button {
        border-radius: 50% !important;
    }
    
    /* Animation fixes Firefox */
    .testimonials-track,
    .portfolio-track,
    [class*="carousel"] {
        -moz-animation-fill-mode: both;
        -moz-backface-visibility: hidden;
    }
    
    /* BOUTONS LIKES - RÈGLES ULTRA-SPÉCIFIQUES FIREFOX */
    .like-button:hover,
    .like-button:focus,
    .like-button:active,
    .portfolio-like-button:hover,
    .portfolio-like-button:focus,
    .portfolio-like-button:active {
        border-radius: 50% !important;
        outline: none !important;
    }
}

/* 🎯 BOUTONS LIKES SPÉCIFIQUES - FORCER ROND */
.like-button,
.portfolio-like-button,
.about-image .portfolio-like-container .portfolio-like-button {
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
}

/* 🎯 ÉTATS BOUTONS LIKES - PRÉSERVER RONDEUR */
.like-button:hover,
.like-button:focus,
.like-button:active,
.like-button:focus-visible,
.portfolio-like-button:hover,
.portfolio-like-button:focus,
.portfolio-like-button:active,
.portfolio-like-button:focus-visible {
    border-radius: 50% !important;
    -webkit-border-radius: 50% !important;
    -moz-border-radius: 50% !important;
    outline: none !important;
}

/* ⚡ ANIMATIONS CAROUSEL - PREFIXES UNIFIÉS */
@keyframes carouselFlow {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-100%, 0, 0); }
}

@-webkit-keyframes carouselFlow {
    0% { -webkit-transform: translate3d(0, 0, 0); }
    100% { -webkit-transform: translate3d(-100%, 0, 0); }
}

@-moz-keyframes carouselFlow {
    0% { -moz-transform: translate3d(0, 0, 0); }
    100% { -moz-transform: translate3d(-100%, 0, 0); }
}

/* 🎨 CAROUSEL ANIMATIONS - HARDWARE ACCELERATION */
.testimonials-track,
.portfolio-track,
.testimonials-track-seamless,
.portfolio-track-seamless {
    /* Préfixes transform complets */
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    
    /* Préfixes animation complets */
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    
    /* Hardware acceleration */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    
    will-change: transform;
}