/* Page Réalisations — extraction des styles inline (visuel identique) */

/* Hero */
#page-realisations .hero { min-height: 70vh; }
#page-realisations .hero-video { display: block !important; visibility: visible !important; }
#page-realisations .hero-content { display: flex; align-items: center; justify-content: center; text-align: center; }
#page-realisations .hero-title-mobile { font-size: clamp(3.3rem, 8vw, 6rem); font-weight: 900; color: #fff; margin: 0; text-shadow: 0 6px 30px rgba(0,0,0,0.7); }
#page-realisations .hero-title-mobile span { color: var(--primary); text-shadow: none; }

/* Section intro */
#page-realisations .section-intro { background: var(--bg-primary); padding: 2rem 0 1rem 0; }
#page-realisations .section-intro .section-header { margin-bottom: 1.5rem; }
#page-realisations .text-container-responsive { max-width: 1400px; margin: 0 auto 1rem auto; padding: 0 2rem; }
#page-realisations .text-frame-responsive { background: var(--bg-secondary); border-radius: 15px; padding: 1.2rem 2rem; position: relative; overflow: hidden; transition: border-color 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s cubic-bezier(0.4,0,0.2,1), background 0.4s cubic-bezier(0.4,0,0.2,1); border: 1px solid rgba(var(--color-primary-rgb),0.25); }
#page-realisations .text-frame-responsive p { color: var(--text-secondary); line-height: 1.5; font-size: 1rem; margin: 0; text-align: center; }

/* Accent de couleur sur le sous-titre du titre principal */
#page-realisations .title-campaigns .campaigns-line2 { color: var(--primary); }

/* Section portfolio (grille) */
#page-realisations .section-portfolio { background: var(--bg-secondary); padding: 0.5rem 0 1.5rem 0; }
#page-realisations .text-frame-responsive span[style*="color: var(--primary)"] { color: var(--primary) !important; font-weight: 600 !important; }

/* === Extracted inline styles from page-realisations.html === */
/* Cards modernes pour les chiffres clés - Style page d'accueil */
        .stat-hero-card {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 16px;
            padding: 1.5rem 1rem;
            -webkit-backdrop-filter: blur(10px);
            backdrop-filter: blur(10px);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: center;
            opacity: 1;
            transform: translateY(0);
        }
        
        .stat-hero-card:hover {
            transform: translateY(-4px);
            background: rgba(255, 255, 255, 0.08);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
            border-color: rgba(var(--color-primary-rgb), 0.2);
        }
        
        .stat-hero-card .stat-number {
            font-size: 2.9rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--primary) 0%, #1DD1CB 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            line-height: 1;
            margin-bottom: 0.4rem;
            transition: transform 0.3s ease, text-shadow 0.3s ease;
        }

        .stat-hero-card .stat-label {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .stat-hero-card:hover .stat-number {
            transform: scale(1.05);
            text-shadow: 0 0 20px rgba(var(--color-primary-rgb), 0.3);
        }
        
        .stat-hero-card:hover .stat-label {
            color: rgba(255, 255, 255, 0.95);
        }
        
        /* Responsive pour les cards */
        @media (max-width: 768px) {
            .stat-hero-card .stat-number {
                font-size: 2.5rem;
            }
            
            .stat-hero-card .stat-label {
                font-size: 0.9rem;
            }
        }
        
        /* Animation pour les chiffres clés au scroll - Style page d'accueil */
        .fade-in-scroll.visible {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        
        /* Hover effects portfolio modernes - Style page d'accueil */
        .portfolio-item:hover {
            transform: translateY(-5px);
        }
        
        .portfolio-item:hover .portfolio-play {
            transform: scale(1.1);
            background: rgba(var(--color-primary-rgb), 1);
            box-shadow: 0 10px 30px rgba(var(--color-primary-rgb), 0.4);
        }
        
        /* Grille portfolio plus dense - Page réalisations */
        #page-realisations .portfolio-grid {
            gap: 1rem;  /* Dense : 2rem → 1rem */
        }
        
        #page-realisations .portfolio-content {
            padding: 0.8rem 1rem;  /* Compact : vertical réduit */
        }
        
        #page-realisations .portfolio-title {
            font-size: 1.2rem;  /* Plus petit pour une ligne */
            margin-bottom: 0;    /* Supprimé : tout sur une ligne */
            line-height: 1.3;    /* Ligne compacte */
        }
        
        /* Espacement catégorie - Desktop */
        #page-realisations .portfolio-title span {
            margin-left: 1rem;     /* Espace avant séparateur */
            padding-left: 0.5rem;  /* Espace après séparateur */
        }
        
        @media (max-width: 768px) {
            .portfolio-play {
                width: 60px;
                height: 60px;
                font-size: 20px;
            }
            
            /* Hero mobile optimisé - Réduction 50% hauteur */
            .hero {
                min-height: 35vh;
            }
            
            /* CORRECTION VIDÉO MOBILE - Solution spécifique page réalisations */
            #page-realisations .hero-video {
                /* Libérer les contraintes min-dimensions qui bloquent le scale */
                min-width: auto;
                min-height: auto;

                /* Dimensions adaptées pour vidéo 16:9 dans conteneur 35vh */
                width: 120%;          /* Plus large pour compenser le crop */
                height: auto;         /* Hauteur automatique garde ratio 16:9 */

                /* Position et transformation optimisées */
                transform: translate(-50%, -50%) scale(0.85);
                object-fit: cover;

                /* S'assurer que la vidéo couvre bien la zone */
                max-width: none;
            }
            
            /* SOLUTION COMPLÈTE MOBILE iPhone */
            @media (max-width: 768px) {
                /* 1. Hero content - DESCENDRE le titre pour compenser logo */
                .hero-content {
                    align-items: flex-start;  /* Aligne vers le haut */
                    padding-top: 6%;          /* AJUSTE : reduit de 2% (8%->6%) */
                }
                
                /* 2. Hero titre - Force taille optimale iPhone */
                .hero-title-mobile {
                    font-size: 3.08rem; /* AUGMENTE : +10% (2.8rem->3.08rem) */
                    line-height: 1.1;
                    white-space: nowrap; /* Empeche cesure */
                }
                
                /* 3. Section titre - Rapprochement du hero */
                .fade-in {
                    padding: 0.5rem 0 0.5rem 0;  /* Reduit drastiquement l'espace */
                    margin-top: -1rem;           /* Remonte vers le hero */
                }
                
                .section-header {
                    margin-bottom: 0.8rem;       /* Reduit marge */
                }
                
                /* 3. Titre campagnes - Contrôle césure optimale */
                .title-campaigns {
                    text-align: center;
                    font-size: 1.8rem;  /* Taille controlee */
                    line-height: 1.2;
                }
                
                .campaigns-line1 {
                    display: block;
                    color: white;
                }
                
                .campaigns-line2 {
                    display: block;
                    color: var(--primary);
                    margin-top: 0.3rem;
                    font-size: 0.95em;  /* Légèrement plus petit pour éviter césure */
                }
                
                /* 4. Cadre texte - STRUCTURE SIMPLIFIÉE mobile */
                .text-container-responsive {
                    max-width: 100%;         /* Pleine largeur */
                    padding: 0;             /* SUPPRIME : padding externe */
                    margin: 0 auto 1.8rem auto; /* AUGMENTE : bottom spacing avec videos +80% */
                }
                
                .text-frame-responsive {
                    padding: 1rem 1.2rem;    /* padding interne confortable */
                    margin: 0 0.6rem;        /* Aeration laterale mobile (0.2rem -> 0.6rem) */
                }
                
                /* Grille dense mobile - Une ligne par projet */
                #page-realisations .portfolio-grid {
                    gap: 0.6rem;  /* Ultra-dense mobile */
                }
                
                #page-realisations .portfolio-content {
                    padding: 0.6rem 0.8rem;  /* Ultra-compact mobile */
                }
                
                #page-realisations .portfolio-title {
                    font-size: 1rem;    /* Optimise mobile une ligne */
                    margin-bottom: 0;   /* Supprime : une ligne */
                    line-height: 1.2;   /* Compact mobile */
                }
                
                /* Espacement catégorie - Mobile */
                #page-realisations .portfolio-title span {
                    margin-left: 0.8rem;     /* Espace reduit mobile */
                    padding-left: 0.4rem;    /* Espace apres separateur */
                }
            }
            
            /* iPhone spécifique - Optimisations ultra-précises */
            @media (max-width: 480px) {
                /* Hero centrage visuel encore plus précis iPhone */
                .hero-content {
                    padding-top: 9%;        /* AJUSTE : reduit de 2% (11%->9%) */
                }
                
                .hero-title-mobile {
                    font-size: 2.64rem;     /* AUGMENTE : +10% (2.4rem->2.64rem) */
                    transform: scale(0.95);            /* Léger rétrécissement */
                }
                
                /* Section - Rapprochement maximal iPhone */
                .fade-in {
                    margin-top: -1.5rem;    /* Remonte encore plus pres */
                }
                
                /* Titre campagnes ultra-optimisé iPhone */
                .title-campaigns {
                    font-size: 1.6rem;
                }
                
                .campaigns-line2 {
                    font-size: 0.9em;       /* Encore plus petit */
                }
                
                /* Texte cadre - STRUCTURE ULTRA-SIMPLIFIÉE iPhone */
                .text-container-responsive {
                    padding: 0;             /* SUPPRIME : pas de padding externe */
                    margin: 0 auto 1.8rem auto; /* AUGMENTE : bottom spacing avec videos +80% iPhone */
                }
                
                .text-frame-responsive {
                    padding: 0.8rem 1rem;   /* padding interne respirable iPhone */
                    margin: 0 0.5rem;       /* Aeration laterale iPhone (0.15rem -> 0.5rem) */
                    font-size: 0.95rem;     /* Texte legerement plus petit */
                }
                
                /* Grille ultra-dense iPhone - Une ligne */
                #page-realisations .portfolio-grid {
                    gap: 0.4rem;  /* Maximum densite iPhone */
                }
                
                #page-realisations .portfolio-content {
                    padding: 0.5rem 0.6rem;  /* Maximum compacite iPhone */
                }
                
                #page-realisations .portfolio-title {
                    font-size: 0.9rem;  /* Minimal iPhone une ligne */
                    margin-bottom: 0;   /* Supprime : une ligne */
                    line-height: 1.1;   /* Ultra-compact */
                }
                
                /* Espacement catégorie - iPhone */
                #page-realisations .portfolio-title span {
                    margin-left: 0.6rem;     /* Espace minimal iPhone */
                    padding-left: 0.3rem;    /* Espace apres separateur */
                }
            }
            
            /* Desktop/Tablette - Titre sur une ligne */
            @media (min-width: 769px) {
                .campaigns-line1,
                .campaigns-line2 {
                    display: inline;  /* Sur la même ligne */
                }
                
                .campaigns-line1 {
                    color: white;    /* "Des campagnes" en blanc */
                }
                
                .campaigns-line2 {
                    color: var(--primary);  /* "pour marquer les esprits" en turquoise */
                    margin-top: 0;
                }
            }
        
        /* Fix pour iOS - s'assurer que les vidéos sont visibles */
        .portfolio-video {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
        }
}