/* ==========================================================================
   VENDORS - Surcharges et customisations des bibliothèques externes
   Fichier: 07-vendors/custom-vendor.css
   ========================================================================== */

/* ==========================================================================
   CONFIGURATION VENDORS
   ========================================================================== */

/* Liste des vendors potentiellement utilisés :
   - Font Awesome (icônes)
   - Google Fonts (typographie)
   - Normalize.css (reset)
   - Prism.js (coloration syntaxique)
   - PDF.js (visionneuse PDF)
   - Swiper.js (carrousels)
   - Lightbox (galeries)
*/

/* ==========================================================================
   FONT AWESOME - Surcharges et corrections
   ========================================================================== */

/* Import Font Awesome si nécessaire (décommentez si utilisé) */
/* @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); */

/* Corrections Font Awesome */
.fa, .fas, .far, .fal, .fab {
    /* Assure une ligne de base cohérente */
    vertical-align: baseline;
    /* Évite les problèmes de rendu */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Tailles personnalisées Font Awesome */
.fa-xs-custom { 
    font-size: 0.75em; 
    line-height: 1; 
}

.fa-sm-custom { 
    font-size: 0.875em; 
    line-height: 1; 
}

.fa-lg-custom { 
    font-size: 1.25em; 
    line-height: 1; 
}

.fa-xl-custom { 
    font-size: 1.5em; 
    line-height: 1; 
}

/* Couleurs personnalisées pour les icônes */
.fa-primary-color { 
    color: var(--primary, #1a73e8); 
}

.fa-secondary-color { 
    color: var(--secondary, #34a853); 
}

.fa-accent-color { 
    color: var(--accent, #fbbc05); 
}

.fa-warning-color { 
    color: var(--warning, #ff3b30); 
}

/* ==========================================================================
   GOOGLE FONTS - Optimisations et fallbacks
   ========================================================================== */

/* Import Google Fonts si nécessaire (décommentez si utilisé) */
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */

/* Fallbacks pour les polices Google */
body {
    /* Fallback si Google Fonts ne charge pas */
    font-family: 
        'Inter', 
        -apple-system, 
        BlinkMacSystemFont, 
        'Segoe UI', 
        Roboto, 
        Oxygen, 
        Ubuntu, 
        Cantarell, 
        sans-serif;
}

/* Optimisation du rendu des polices */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ==========================================================================
   PRISM.JS - Coloration syntaxique (si utilisé)
   ========================================================================== */

/* Surcharges du thème Prism par défaut */
code[class*="language-"],
pre[class*="language-"] {
    font-family: 'Monaco', 'Menlo', 'Consolas', monospace !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    border-radius: 8px !important;
}

/* Container de code personnalisé */
.code-block {
    position: relative;
    margin: 20px 0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.code-header {
    background: #2d3748;
    color: #e2e8f0;
    padding: 10px 15px;
    font-size: 0.85rem;
    font-weight: 600;
    border-bottom: 1px solid #4a5568;
}

.code-content {
    background: #1a202c;
    padding: 0;
}

.code-content pre {
    margin: 0 !important;
    padding: 20px !important;
    background: transparent !important;
}

/* Bouton de copie personnalisé */
.copy-code-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.copy-code-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* ==========================================================================
   PDF.JS - Visionneuse PDF (si utilisé)
   ========================================================================== */

/* Surcharges pour l'intégration PDF.js */
.pdf-viewer-container {
    width: 100%;
    height: 600px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #f8f9fa;
}

.pdf-viewer-container iframe {
    width: 100%;
    height: 100%;
    border: none;
}

/* Contrôles PDF personnalisés */
.pdf-controls {
    background: #343a40;
    color: white;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pdf-controls button {
    background: rgba(255,255,255,0.1);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pdf-controls button:hover {
    background: rgba(255,255,255,0.2);
}

/* ==========================================================================
   SWIPER.JS - Carrousels (si utilisé)
   ========================================================================== */

/* Surcharges Swiper pour correspondre au design */
.swiper {
    border-radius: 10px !important;
    overflow: hidden !important;
}

.swiper-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Boutons de navigation personnalisés */
.swiper-button-next,
.swiper-button-prev {
    color: var(--primary, #1a73e8) !important;
    background: rgba(255,255,255,0.9) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2) !important;
    transition: all 0.3s ease !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: white !important;
    transform: scale(1.1) !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 16px !important;
    font-weight: bold !important;
}

/* Pagination personnalisée */
.swiper-pagination-bullet {
    background: var(--primary, #1a73e8) !important;
    opacity: 0.5 !important;
    transition: all 0.3s ease !important;
}

.swiper-pagination-bullet-active {
    opacity: 1 !important;
    transform: scale(1.2) !important;
}

/* ==========================================================================
   LIGHTBOX - Galeries d'images (si utilisé)
   ========================================================================== */

/* Surcharges Lightbox pour le design Ecophot */
.lightbox-overlay {
    background: rgba(0,0,0,0.9) !important;
    backdrop-filter: blur(5px) !important;
}

.lightbox-container {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5) !important;
}

.lightbox-close {
    background: rgba(255,255,255,0.2) !important;
    color: white !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.3) !important;
    transform: scale(1.1) !important;
}

/* ==========================================================================
   NORMALIZE.CSS - Corrections supplémentaires
   ========================================================================== */

/* Corrections post-normalize pour Ecophot */
html {
    /* Améliore le scroll sur mobile */
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

/* Amélioration des champs de formulaire */
input, textarea, select {
    /* Assure une cohérence cross-browser */
    font-family: inherit;
    font-size: 100%;
    box-sizing: border-box;
}

/* Correction des boutons */
button {
    /* Évite les styles par défaut indésirables */
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    outline: none;
}

button:focus-visible {
    outline: 2px solid var(--primary, #1a73e8);
    outline-offset: 2px;
}

/* ==========================================================================
   CORRECTIONS DE CONFLITS VENDORS
   ========================================================================== */

/* Résolution des conflits entre vendors et styles custom */

/* Bootstrap conflicts (si utilisé) */
.btn:not(.btn-ecophot) {
    /* Évite les conflits avec nos boutons custom */
    font-family: inherit !important;
}

/* Font Awesome conflicts */
.fa:not([class*="fa-"]) {
    /* Évite l'application automatique des styles FA */
    font-family: inherit !important;
}

/* Reset des styles vendors indésirables */
* {
    /* Évite les box-sizing incohérents */
    box-sizing: border-box;
}

/* ==========================================================================
   OPTIMISATIONS PERFORMANCE VENDORS
   ========================================================================== */

/* Préchargement des ressources critiques */
/* À ajouter dans le <head> du HTML si nécessaire :
<link rel="preload" href="path/to/font.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
*/

/* Optimisation du chargement différé */
.vendor-lazy {
    /* Pour les éléments vendors à charger en différé */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vendor-lazy.loaded {
    opacity: 1;
}

/* ==========================================================================
   VERSIONS MOBILES VENDORS
   ========================================================================== */

@media (max-width: 768px) {
    /* Ajustements mobiles pour les vendors */
    
    /* Swiper mobile */
    .swiper-button-next,
    .swiper-button-prev {
        width: 35px !important;
        height: 35px !important;
    }
    
    .swiper-button-next::after,
    .swiper-button-prev::after {
        font-size: 14px !important;
    }
    
    /* PDF viewer mobile */
    .pdf-viewer-container {
        height: 400px;
    }
    
    /* Code blocks mobile */
    .code-content pre {
        padding: 15px !important;
        font-size: 0.8rem !important;
    }
    
    .copy-code-btn {
        top: 5px;
        right: 5px;
        padding: 3px 6px;
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    /* Très petits écrans */
    
    .code-content pre {
        padding: 10px !important;
        font-size: 0.75rem !important;
    }
    
    .pdf-viewer-container {
        height: 300px;
    }
}

/* ==========================================================================
   CLASSES UTILITAIRES VENDORS
   ========================================================================== */

/* Classes d'aide pour l'intégration des vendors */
.vendor-hidden {
    display: none !important;
}

.vendor-visible {
    display: block !important;
}

.vendor-loading {
    position: relative;
    opacity: 0.6;
}

.vendor-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid var(--primary, #1a73e8);
    border-radius: 50%;
    animation: vendor-spin 1s linear infinite;
}

@keyframes vendor-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   NOTES DE MAINTENANCE VENDORS
   ========================================================================== */

/*
VENDORS ACTUELLEMENT INTÉGRÉS:
- Font Awesome: Prêt pour intégration
- Google Fonts: Fallbacks configurés
- Prism.js: Styles personnalisés
- PDF.js: Intégration basique
- Swiper.js: Surcharges design
- Lightbox: Personnalisation

VENDORS À CONSIDÉRER:
- Bootstrap: Non nécessaire (CSS custom suffisant)
- Tailwind: Non compatible avec l'architecture actuelle
- jQuery UI: Non utilisé
- AOS (Animate On Scroll): Peut être ajouté si besoin

MAINTENANCE:
- Vérifier les versions des vendors régulièrement
- Tester les conflits après mise à jour
- Optimiser le chargement des ressources externes
- Monitorer l'impact sur les performances

PERFORMANCE:
- Charger uniquement les vendors nécessaires
- Utiliser le préchargement pour les ressources critiques
- Considérer le chargement différé pour les vendors non-critiques
- Minimiser les requêtes HTTP externes
*/