<?php
/**
 * Class MG_Frontend
 * Genere la page de maintenance visible aux visiteurs avec design personnalisable
 * Version 2.9.126
 */

if (!defined('ABSPATH')) {
    exit;
}

/**
 * MG_Frontend — Génère la page de maintenance complète (HTML/CSS/JS inline)
 * 
 * Structure du render():
 *   [L23-200]   CSS dynamique (couleurs, polices, animations, responsive)
 *   [L200-400]  HTML <head> (meta, OG, Google Fonts, Retry-After)
 *   [L400-700]  Contenu principal (logo, titre, message, Lottie, vidéo, parallax)
 *   [L700-900]  Sidebar repliable + countdown timer
 *   [L900-1200] Modales (notification email + accès visiteur + chat)
 *   [L1500-1900] JavaScript (countdown, sidebar, AJAX subscribe/login, chat)
 *   [L1900+]    Helpers PHP (darken_color, hex_to_rgb, hex_to_rgba)
 */
class MG_Frontend {

    private $settings;

    public function __construct($settings) {
        $this->settings = $settings;
    }

    /**
     * Afficher la page de maintenance
     */
    public function render() {
        $page_mode = $this->settings['page_mode'] ?? 'maintenance';

        if ( $page_mode === 'coming_soon' ) {
            status_header( 200 );
        } elseif (!empty($this->settings['seo_503_enabled'])) {
            status_header(503);
            header('HTTP/1.1 503 Service Temporarily Unavailable');
            if (!empty($this->settings['retry_after_hours'])) {
                $retry_seconds = intval($this->settings['retry_after_hours']) * 3600;
                header('Retry-After: ' . $retry_seconds);
            }
        }

        $show_visitor_button = !empty($this->settings['visitor_access_enabled']);
        $show_admin_button = $this->settings['show_admin_button'] ?? true;

        $bg_color_1 = $this->settings['bg_color_1'] ?? '#D4BADD';
        $bg_color_1_opacity = intval($this->settings['bg_color_1_opacity'] ?? 100);
        $bg_color_2 = $this->settings['bg_color_2'] ?? '#E4EFC5';
        $bg_color_2_opacity = intval($this->settings['bg_color_2_opacity'] ?? 100);
        $title_color = $this->settings['title_color'] ?? '#F97316';
        $title_opacity = intval($this->settings['title_opacity'] ?? 100);
        $message_color = $this->settings['message_color'] ?? '#555555';
        $message_opacity = intval($this->settings['message_opacity'] ?? 100);
        $button_color = $this->settings['button_color'] ?? '#F97316';
        $button_opacity = intval($this->settings['button_opacity'] ?? 100);
        $bg_image_enabled = $this->settings['bg_image_enabled'] ?? false;
        $bg_image_url = $this->settings['bg_image_url'] ?? '';
        $bg_overlay = intval($this->settings['bg_overlay_opacity'] ?? 50);


        $container_bg = $this->settings['container_bg_color'] ?? '#ffffff';
        $container_opacity = intval($this->settings['container_bg_opacity'] ?? 95);
        $container_shadow = $this->settings['container_shadow_enabled'] ?? true;
        $container_shadow_intensity = intval($this->settings['container_shadow_intensity'] ?? 30);

        $title_font = $this->settings['title_font'] ?? 'Poppins';
        $message_font = $this->settings['message_font'] ?? 'Open Sans';
        $mg_font_whitelist = MG_Settings::get_fonts();
        if ( ! isset( $mg_font_whitelist[ $title_font ] ) )   { $title_font = 'Poppins'; }
        if ( ! isset( $mg_font_whitelist[ $message_font ] ) ) { $message_font = 'Open Sans'; }
        $title_size = intval($this->settings['title_size'] ?? 42);
        $message_size = intval($this->settings['message_size'] ?? 18);

        $logo_size = intval($this->settings['logo_size'] ?? 150);

        $sidebar_tab_color = $this->settings['sidebar_tab_color'] ?? '#F97316';

        $container_max_width = intval($this->settings['container_max_width'] ?? 600);
        $container_padding = intval($this->settings['container_padding'] ?? 60);
        $container_border_radius = intval($this->settings['container_border_radius'] ?? 20);

        $animation_enabled = $this->settings['animation_enabled'] ?? true;
        $logo_animation = $this->settings['logo_animation'] ?? 'pulse';
        $text_animation = $this->settings['text_animation'] ?? 'fadeIn';
        $button_animation = $this->settings['button_animation'] ?? 'slideUp';
        $animation_duration = intval($this->settings['animation_duration'] ?? 1000);

        $rgpd_mode = !empty($this->settings['rgpd_mode']);
        
        $system_fonts = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';

        $sidebar_enabled = !empty($this->settings['sidebar_enabled']);
        $sidebar_position = $this->settings['sidebar_position'] ?? 'right';
        $sidebar_tab_color = $this->settings['sidebar_tab_color'] ?? '#F97316';
        
        $logo_size = intval($this->settings['logo_size'] ?? 150);

        $bg1_rgba = $this->hex_to_rgba($bg_color_1, $bg_color_1_opacity);
        $container_bg_rgba = $this->hex_to_rgba($container_bg, $container_opacity);
        $bg2_rgba = $this->hex_to_rgba($bg_color_2, $bg_color_2_opacity);
        $title_rgba = $this->hex_to_rgba($title_color, $title_opacity);
        $message_rgba = $this->hex_to_rgba($message_color, $message_opacity);
        $button_rgba = $this->hex_to_rgba($button_color, $button_opacity);

        $button_border = $this->darken_color($button_color, 10);
        $button_rgb = $this->hex_to_rgb($button_color);

        if ($bg_image_enabled && !empty($bg_image_url)) {
            $bg_overlay_value = floatval($bg_overlay) / 100.0;
            $bg_overlay_rgba = 'rgba(0, 0, 0, ' . $bg_overlay_value . ')';
            $background_css = "
                background-image:
                    linear-gradient({$bg_overlay_rgba}, {$bg_overlay_rgba}),
                    url('" . esc_url($bg_image_url) . "');
                background-size: cover;
                background-position: center;
                background-attachment: fixed;
            ";
        } else {
            $background_css = "background: linear-gradient(135deg, {$bg1_rgba} 0%, {$bg2_rgba} 100%);";
        }

        // CRITIQUE : on utilise $bg1_rgba et $bg2_rgba (avec opacités utilisateur) au lieu de
        // valeurs hardcoded, sinon les sliders d'opacité sont ignorés (bug v2.9.63/v2.9.69).
        $is_genius_preset = (
            strtolower($bg_color_1) === '#1f2937' &&
            strtolower($bg_color_2) === '#0f172a'
        );
        if ( $is_genius_preset && !($bg_image_enabled && !empty($bg_image_url)) ) {
            // Background Geometric Grid Tech respectant les opacités custom.
            // Les grilles orange (alpha 0.08) restent fixes — elles font partie de l'identité
            // visuelle du preset, pas un paramètre user.
            $background_css = "
                background-color: {$bg2_rgba};
                background-image:
                    repeating-linear-gradient(0deg, transparent 0, transparent 39px, rgba(249,115,22,0.18) 40px),
                    repeating-linear-gradient(90deg, transparent 0, transparent 39px, rgba(249,115,22,0.18) 40px),
                    radial-gradient(ellipse at center, {$bg1_rgba} 0%, {$bg2_rgba} 100%);
            ";
        }

        ?>
<!DOCTYPE html>
<html lang="<?php echo esc_attr( get_bloginfo( 'language' ) ); ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php if ( ( $page_mode ?? 'maintenance' ) === 'coming_soon' ): ?>
    <meta name="robots" content="noindex">
    <link rel="canonical" href="<?php echo esc_url( home_url( '/' ) ); ?>">
    <?php elseif (!empty($this->settings['noindex_enabled'])): ?>
    <meta name="robots" content="noindex, nofollow">
    <?php endif; ?>
    <title><?php echo esc_html($this->settings['title']); ?></title>

    <?php
    // Réf bible §16.3 + §7.2
    $site_name      = get_bloginfo( 'name' );
    $site_url       = home_url( '/' );
    $mm_title       = $this->settings['title'] ?? __( 'Site Under Maintenance', 'maintenance-genius' );
    $mm_description = wp_trim_words( wp_strip_all_tags( $this->settings['message'] ?? '' ), 30, '…' );
    if ( empty( $mm_description ) ) {
        /* translators: %s: site name */
        $mm_description = sprintf( __( '%s is currently performing scheduled maintenance. We will be back shortly.', 'maintenance-genius' ), $site_name );
    }
    $mm_image = ! empty( $this->settings['logo_url'] ) ? $this->settings['logo_url'] : ( ! empty( $bg_image_url ) ? $bg_image_url : '' );
    $mm_image = esc_url( $mm_image );
    ?>
    <meta name="description" content="<?php echo esc_attr( $mm_description ); ?>">

    <!-- Open Graph (Facebook, LinkedIn, etc.) -->
    <meta property="og:type" content="website">
    <meta property="og:title" content="<?php echo esc_attr( $mm_title ); ?>">
    <meta property="og:description" content="<?php echo esc_attr( $mm_description ); ?>">
    <meta property="og:url" content="<?php echo esc_url( $site_url ); ?>">
    <meta property="og:site_name" content="<?php echo esc_attr( $site_name ); ?>">
    <meta property="og:locale" content="<?php echo esc_attr( str_replace( '-', '_', get_bloginfo( 'language' ) ) ); ?>">
    <?php if ( ! empty( $mm_image ) ) : ?>
    <meta property="og:image" content="<?php echo esc_url( $mm_image ); ?>">
    <meta property="og:image:alt" content="<?php echo esc_attr( $mm_title ); ?>">
    <?php endif; ?>

    <!-- Twitter Card -->
    <meta name="twitter:card" content="<?php echo ! empty( $mm_image ) ? 'summary_large_image' : 'summary'; ?>">
    <meta name="twitter:title" content="<?php echo esc_attr( $mm_title ); ?>">
    <meta name="twitter:description" content="<?php echo esc_attr( $mm_description ); ?>">
    <?php if ( ! empty( $mm_image ) ) : ?>
    <meta name="twitter:image" content="<?php echo esc_url( $mm_image ); ?>">
    <?php endif; ?>

    <!-- PWA / Mobile (iOS Safari + Android Chrome) -->
    <meta name="theme-color" content="<?php echo esc_attr( $title_color ); ?>">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="<?php echo esc_attr( $site_name ); ?>">
    <meta name="format-detection" content="telephone=no">

    <!-- JSON-LD : SpecialAnnouncement (Schema.org, Google-supported) -->
    <script type="application/ld+json">
    <?php echo wp_json_encode( [
        '@context'        => 'https://schema.org',
        '@type'           => 'SpecialAnnouncement',
        'name'            => $mm_title,
        'text'            => $mm_description,
        'datePosted'      => gmdate( 'c' ),
        'expires'         => gmdate( 'c', time() + DAY_IN_SECONDS ),
        'category'        => 'Scheduled maintenance',
        'spatialCoverage' => [
            '@type' => 'WebSite',
            'name'  => $site_name,
            'url'   => $site_url,
        ],
        'publisher'       => [
            '@type' => 'Organization',
            'name'  => $site_name,
            'url'   => $site_url,
        ],
    ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE ); ?>
    </script>

    <!-- JSON-LD : WebSite (compagnon, contexte global) -->
    <script type="application/ld+json">
    <?php echo wp_json_encode( [
        '@context' => 'https://schema.org',
        '@type'    => 'WebSite',
        'name'     => $site_name,
        'url'      => $site_url,
    ], JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE ); ?>
    </script>

    <?php if (!$rgpd_mode): ?>
    <!-- Google Fonts (disabled in GDPR mode) -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <?php // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet, PluginCheck.CodeAnalysis.Offloading.OffloadedContent -- Google Fonts loaded conditionally, disabled in GDPR mode ?>
    <?php
    // family dupliqués. Si titre == message, on ne met qu'un seul family.
    // et l'API CSS2 rejette TOUTE la requête (400) si une graisse demandée est absente.
    $mg_gf = array();
    $mg_gf[ $title_font ]   = '400;700';
    if ( ! isset( $mg_gf[ $message_font ] ) ) {
        $mg_gf[ $message_font ] = '400;700';
    }
    $mg_gf_parts = array();
    foreach ( $mg_gf as $mg_fam => $mg_w ) {
        $mg_gf_parts[] = 'family=' . str_replace( ' ', '+', $mg_fam ) . ':wght@' . $mg_w;
    }
    $mg_gf_url = 'https://fonts.googleapis.com/css2?' . implode( '&', $mg_gf_parts ) . '&display=swap';
    wp_enqueue_style( 'mg-google-fonts', $mg_gf_url, array(), MG_VERSION );
    wp_print_styles( 'mg-google-fonts' );
    ?>
    <?php endif; ?>

    <?php 
    $turnstile_enabled = !empty($this->settings['turnstile_enabled']);
    $turnstile_site_key = $this->settings['turnstile_site_key'] ?? '';
    $turnstile_secret_key = $this->settings['turnstile_secret_key'] ?? '';
    $turnstile_on_notification = !empty($this->settings['turnstile_on_notification']);
    $turnstile_on_visitor = !empty($this->settings['turnstile_on_visitor']);
    
    if ($turnstile_enabled && !empty($turnstile_site_key)):
    ?>
    <!-- Cloudflare Turnstile (v2.6.14) -->
    <?php // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript, PluginCheck.CodeAnalysis.Offloading.OffloadedContent -- Cloudflare Turnstile API required for CAPTCHA, loaded conditionally ?>
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <?php endif; ?>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
            <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Pre-sanitized CSS
            echo $background_css; ?>
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .maintenance-container {
            background: <?php echo esc_attr($container_bg_rgba); ?>;
            padding: <?php echo esc_attr( $container_padding ); ?>px;
            border-radius: <?php echo esc_attr( $container_border_radius ); ?>px;
            max-width: <?php echo esc_attr( $container_max_width ); ?>px;
            width: 100%;
            position: relative;
            z-index: 1;
            <?php if ($container_shadow): ?>
            <?php
                // proportionnels à l'intensité, pour être bien visible même sur fond sombre.
                $shadow_alpha = floatval($container_shadow_intensity) / 100;
                $shadow_blur  = 20 + intval($container_shadow_intensity) / 2; // 20px → 70px
                $shadow_spread = intval($container_shadow_intensity) / 10;     // 0 → 10px
            ?>
            box-shadow: 0 <?php echo esc_attr( $shadow_spread + 10 ); ?>px <?php echo esc_attr( $shadow_blur ); ?>px <?php echo esc_attr( $shadow_spread ); ?>px rgba(0, 0, 0, <?php echo esc_attr( $shadow_alpha * 0.85 ); ?>);
            <?php else: ?>
            box-shadow: none;
            <?php endif; ?>
            text-align: center;
        }

        .maintenance-logo {
            margin-bottom: 30px;
        }

        .maintenance-logo img {
            max-width: <?php echo esc_attr($logo_size); ?>px;
            height: auto;
        }

        .maintenance-title {
            color: <?php echo esc_attr($title_rgba); ?>;
            font-family: <?php
                // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- $title_font validated against get_fonts() whitelist; $system_fonts is a hardcoded constant. esc_attr() would HTML-encode the quotes and break CSS inside <style>.
                echo $rgpd_mode ? $system_fonts : "'" . $title_font . "', sans-serif"; ?>;
            font-size: <?php echo esc_attr($title_size); ?>px;
            font-weight: 700;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .maintenance-subtitle {
            color: <?php echo esc_attr($title_rgba); ?>;
            font-family: <?php
                // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- $title_font validated against get_fonts() whitelist; $system_fonts is a hardcoded constant. esc_attr() would HTML-encode the quotes and break CSS inside <style>.
                echo $rgpd_mode ? $system_fonts : "'" . $title_font . "', sans-serif"; ?>;
            font-size: <?php echo esc_attr( max( 18, intval( $title_size ) - 16 ) ); ?>px;
            font-weight: 600;
            opacity: 0.92;
            margin-top: -8px;
            margin-bottom: 28px;
            line-height: 1.3;
        }

        .maintenance-message {
            color: <?php echo esc_attr($message_rgba); ?>;
            font-family: <?php
                // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- $message_font validated against get_fonts() whitelist; $system_fonts is a hardcoded constant. esc_attr() would HTML-encode the quotes and break CSS inside <style>.
                echo $rgpd_mode ? $system_fonts : "'" . $message_font . "', sans-serif"; ?>;
            font-size: <?php echo esc_attr($message_size); ?>px;
            line-height: 1.6;
            margin-bottom: 40px;
        }

        .maintenance-buttons {
            display: flex;
            gap: 15px;
            justify-content: center;
            margin: 40px 0;
        }

        .maintenance-btn {
            display: inline-block;
            padding: 16px 35px;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            cursor: pointer;
            min-width: 180px;
        }

        .maintenance-btn-admin {
            background: <?php echo esc_attr($button_rgba); ?>;
            color: #ffffff;
            border-color: <?php echo esc_attr($button_border); ?>;
        }

        .maintenance-btn-admin:hover {
            background: <?php echo esc_attr($button_border); ?>;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(<?php echo esc_attr( $button_rgb ); ?>, 0.4);
        }

        .maintenance-btn-visitor {
            background: transparent;
            color: <?php echo esc_attr($button_rgba); ?>;
            border-color: <?php echo esc_attr($button_rgba); ?>;
        }

        .maintenance-btn-visitor:hover {
            background: <?php echo esc_attr($button_rgba); ?>;
            color: #ffffff;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(<?php echo esc_attr( $button_rgb ); ?>, 0.4);
        }

        .maintenance-btn-notify {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #ffffff;
            border-color: transparent;
        }

        .maintenance-btn-notify:hover {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }

        /* Modal notification email */
        .mg-notify-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 10000;
            align-items: center;
            justify-content: center;
        }

        .mg-notify-content {
            background: #fff;
            padding: 30px;
            border-radius: 15px;
            max-width: 400px;
            width: 90%;
            text-align: center;
            box-shadow: 0 10px 40px rgba(0,0,0,0.2);
        }

        .mg-notify-content h3 {
            margin: 0 0 10px;
            color: #333;
            font-size: 22px;
        }

        .mg-notify-content p {
            margin: 0 0 20px;
            color: #666;
            font-size: 14px;
        }

        .mg-notify-form {
            display: flex;
            gap: 10px;
        }

        .mg-notify-form input[type="email"] {
            flex: 1;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 15px;
            transition: border-color 0.3s;
        }

        .mg-notify-form input[type="email"]:focus {
            outline: none;
            border-color: #667eea;
        }

        .mg-notify-form button {
            padding: 12px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #fff;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s;
        }

        .mg-notify-form button:hover {
            transform: scale(1.05);
        }

        .mg-notify-close {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            cursor: pointer;
            color: #999;
            background: none;
            border: none;
            padding: 4px;
            line-height: 1;
            -webkit-appearance: none;
            appearance: none;
        }

        .mg-notify-close:hover {
            color: #333;
        }

        .mg-notify-success {
            color: #27ae60;
            font-weight: 600;
            padding: 15px;
            background: #e8f8f0;
            border-radius: 8px;
        }

        .mg-notify-error {
            color: #e74c3c;
            font-size: 13px;
            margin-top: 10px;
        }

        /* ========================================
           COUNTDOWN (v2.6.15)
           ======================================== */
        .mg-countdown-wrapper {
            margin: 30px 0;
            text-align: center;
        }

        .mg-countdown-title {
            font-size: 16px;
            color: <?php echo esc_attr($message_rgba); ?>;
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

        .mg-countdown {
            display: flex;
            justify-content: center;
            gap: 10px;
            flex-wrap: wrap;
        }

        /* Style Boxes (par défaut) */
        .mg-countdown.mg-countdown-boxes .mg-countdown-item {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            padding: 20px 15px;
            border-radius: 12px;
            min-width: 70px;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .mg-countdown.mg-countdown-boxes .mg-countdown-value {
            font-size: 36px;
            font-weight: 700;
            color: <?php echo esc_attr($title_rgba); ?>;
            line-height: 1;
        }

        .mg-countdown.mg-countdown-boxes .mg-countdown-label {
            font-size: 11px;
            color: <?php echo esc_attr($message_rgba); ?>;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 8px;
        }

        /* Style Minimal */
        .mg-countdown.mg-countdown-minimal .mg-countdown-item {
            padding: 10px 15px;
        }

        .mg-countdown.mg-countdown-minimal .mg-countdown-value {
            font-size: 48px;
            font-weight: 300;
            color: <?php echo esc_attr($title_rgba); ?>;
            line-height: 1;
        }

        .mg-countdown.mg-countdown-minimal .mg-countdown-label {
            font-size: 12px;
            color: <?php echo esc_attr($message_rgba); ?>;
            text-transform: lowercase;
            margin-top: 5px;
        }

        .mg-countdown.mg-countdown-minimal .mg-countdown-separator {
            font-size: 48px;
            font-weight: 300;
            color: <?php echo esc_attr($title_rgba); ?>;
            opacity: 0.5;
            padding: 0 5px;
        }

        /* Style Circles */
        .mg-countdown.mg-countdown-circles .mg-countdown-item {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: 3px solid <?php echo esc_attr($button_rgba); ?>;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        .mg-countdown.mg-countdown-circles .mg-countdown-value {
            font-size: 28px;
            font-weight: 700;
            color: <?php echo esc_attr($title_rgba); ?>;
            line-height: 1;
        }

        .mg-countdown.mg-countdown-circles .mg-countdown-label {
            font-size: 9px;
            color: <?php echo esc_attr($message_rgba); ?>;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-top: 3px;
        }

        /* Countdown terminé */
        .mg-countdown-ended {
            font-size: 20px;
            color: <?php echo esc_attr($title_rgba); ?>;
            padding: 20px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: 12px;
            animation: pulse 2s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.02); opacity: 0.9; }
        }

        /* Responsive countdown */
        @media (max-width: 480px) {
            .mg-countdown.mg-countdown-boxes .mg-countdown-item {
                min-width: 60px;
                padding: 15px 10px;
            }
            .mg-countdown.mg-countdown-boxes .mg-countdown-value {
                font-size: 28px;
            }
            .mg-countdown.mg-countdown-minimal .mg-countdown-value,
            .mg-countdown.mg-countdown-minimal .mg-countdown-separator {
                font-size: 32px;
            }
            .mg-countdown.mg-countdown-circles .mg-countdown-item {
                width: 65px;
                height: 65px;
            }
            .mg-countdown.mg-countdown-circles .mg-countdown-value {
                font-size: 22px;
            }
        }




        /* Modal */
        .mg-modal {
            display: none;
            position: fixed;
            z-index: 9999;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            animation: fadeIn 0.3s;
        }

        .mg-modal-content {
            background-color: #ffffff;
            margin: 10% auto;
            padding: 40px;
            border-radius: 15px;
            max-width: 450px;
            width: 90%;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            animation: slideIn 0.3s;
        }

        .mg-modal-header {
            margin-bottom: 25px;
        }

        .mg-modal-header h3 {
            color: #333;
            font-size: 24px;
            margin-bottom: 10px;
        }

        .mg-modal-header p {
            color: #666;
            font-size: 14px;
        }

        .mg-modal-close {
            float: right;
            font-size: 28px;
            font-weight: bold;
            color: #999;
            cursor: pointer;
            line-height: 1;
            margin-top: -10px;
            background: none;
            border: none;
            padding: 4px;
            -webkit-appearance: none;
            appearance: none;
        }

        .mg-modal-close:hover {
            color: #333;
        }

        .mg-modal-body {
            margin-bottom: 20px;
        }

        .mg-form-group {
            margin-bottom: 20px;
        }

        .mg-form-group label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 600;
            text-align: left;
        }

        .mg-password-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .mg-form-group input {
            width: 100%;
            padding: 12px 45px 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 15px;
            transition: border-color 0.3s;
            box-sizing: border-box;
        }

        .mg-form-group input:focus {
            outline: none;
            border-color: <?php echo esc_attr($button_rgba); ?>;
        }

        /* Cacher l'icône par défaut du navigateur */
        .mg-form-group input::-ms-reveal,
        .mg-form-group input::-ms-clear,
        .mg-form-group input::-webkit-credentials-auto-fill-button {
            display: none;
        }

        .mg-toggle-password {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            padding: 5px;
            color: #999;
            font-size: 18px;
            line-height: 1;
            transition: color 0.3s;
        }

        .mg-toggle-password:hover {
            color: #333;
        }

        .mg-toggle-password svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
        }

        .mg-modal-footer {
            text-align: center;
        }

        .mg-modal-submit {
            background: <?php echo esc_attr($button_rgba); ?>;
            color: #ffffff;
            border: none;
            padding: 14px 40px;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            width: 100%;
        }

        .mg-modal-submit:hover {
            background: <?php echo esc_attr($button_border); ?>;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(<?php echo esc_attr( $button_rgb ); ?>, 0.4);
        }

        .mg-error-message {
            color: #e74c3c;
            background: #fadbd8;
            padding: 12px;
            border-radius: 6px;
            margin-bottom: 15px;
            display: none;
            font-size: 14px;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from {
                transform: translateY(-50px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }


        /* =============================
           ANIMATIONS v2.2.0
           ============================= */

        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }

        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes zoomIn {
            from {
                opacity: 0;
                transform: scale(0.8);
            }
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

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

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        <?php if ($animation_enabled): ?>
        /* Appliquer les animations */
        .maintenance-logo {
            animation: <?php echo esc_attr($logo_animation); ?> <?php echo esc_attr( $animation_duration ); ?>ms ease-out;
        }

        .maintenance-title,
        .maintenance-message {
            animation: <?php echo esc_attr($text_animation); ?> <?php echo esc_attr( $animation_duration ); ?>ms ease-out;
        }

        .maintenance-title {
            animation-delay: 0.2s;
            animation-fill-mode: both;
        }

        .maintenance-message {
            animation-delay: 0.4s;
            animation-fill-mode: both;
        }

        .maintenance-buttons {
            animation: <?php echo esc_attr($button_animation); ?> <?php echo esc_attr( $animation_duration ); ?>ms ease-out;
            animation-delay: 0.6s;
            animation-fill-mode: both;
        }
        <?php endif; ?>

        @media (max-width: 600px) {
            .maintenance-container {
                padding: 30px 20px;
                margin: 10px;
                width: calc(100% - 20px);
                max-width: calc(100% - 20px);
            }

            .maintenance-title {
                font-size: <?php echo esc_attr( max(22, intval($title_size * 0.7)) ); ?>px;
            }

            .maintenance-message {
                font-size: <?php echo esc_attr( max(14, intval($message_size * 0.85)) ); ?>px;
                margin-bottom: 25px;
            }

            .maintenance-buttons {
                flex-direction: column;
                gap: 10px;
            }

            .maintenance-btn {
                width: 100%;
                padding: 14px 20px;
                font-size: 14px;
            }

            .mg-modal-content {
                margin: 20% auto;
                padding: 30px 20px;
                overflow: hidden;
            }

            .mg-modal-content .cf-turnstile {
                transform: scale(0.85);
                transform-origin: left top;
            }
            
            .mg-sidebar {
                display: none;
            }
            
            .maintenance-logo img {
                max-width: <?php echo esc_attr( min(150, intval($logo_size * 0.7)) ); ?>px;
            }
            
        }
        
        /* v2.6.40 - Extra small screens */
        @media (max-width: 400px) {
            .maintenance-wrapper {
                padding: 15px;
            }
            
            .maintenance-container {
                padding: 25px 15px;
                margin: 5px;
                width: calc(100% - 10px);
                border-radius: <?php echo esc_attr( max(12, intval($container_border_radius * 0.6)) ); ?>px;
            }
            
            .maintenance-title {
                font-size: <?php echo esc_attr( max(20, intval($title_size * 0.6)) ); ?>px;
            }
            
            .maintenance-btn {
                padding: 12px 15px;
                font-size: 13px;
            }
        }

        /* Panneau latéral DISCRET avec slide (v2.6.10) */
        .mg-sidebar {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 8px;
            padding: 12px 8px;
            padding-top: 20px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
            z-index: 1002;
            backdrop-filter: blur(10px);
            transition: transform 0.3s ease;
        }
        
        .mg-sidebar-left {
            left: 0;
            transform: translateY(-50%) translateX(-100%);
            border-radius: 0 12px 12px 0;
        }
        
        .mg-sidebar-left.mg-sidebar-open {
            transform: translateY(-50%) translateX(0);
        }
        
        .mg-sidebar-right {
            right: 0;
            transform: translateY(-50%) translateX(100%);
            border-radius: 12px 0 0 12px;
        }
        
        .mg-sidebar-right.mg-sidebar-open {
            transform: translateY(-50%) translateX(0);
        }
        
        /* Onglet déclencheur - DISPARAIT quand ouvert */
        .mg-sidebar-trigger {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            width: 32px;
            height: 80px;
            background: linear-gradient(135deg, <?php echo esc_attr($sidebar_tab_color); ?>, <?php echo esc_attr($this->darken_color($sidebar_tab_color, 15)); ?>);
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 1001;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.2);
            opacity: 1;
            visibility: visible;
            /* Reset button element styles */
            border: none;
            padding: 0;
            font: inherit;
            -webkit-appearance: none;
            appearance: none;
        }
        
        .mg-sidebar-trigger:hover {
            width: 38px;
        }
        
        /* CACHER le tab quand le sidebar est ouvert */
        .mg-sidebar-trigger.mg-trigger-open {
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
        }
        
        .mg-sidebar-trigger-left {
            left: 0;
            border-radius: 0 8px 8px 0;
        }
        
        .mg-sidebar-trigger-right {
            right: 0;
            border-radius: 8px 0 0 8px;
        }
        
        .mg-sidebar-trigger svg {
            width: 18px;
            height: 18px;
            transition: transform 0.3s ease;
        }
        
        .mg-sidebar-section {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }
        
        .mg-sidebar-section + .mg-sidebar-section {
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
        }
        
        .mg-sidebar-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            color: #fff;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        /* Effet grossissement prononcé au hover */
        .mg-sidebar-icon:hover {
            transform: scale(1.25);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
            z-index: 10;
        }
        
        /* Bouton fermer le sidebar */
        .mg-sidebar-close {
            position: absolute;
            top: 5px;
            width: 24px;
            height: 24px;
            background: #e74c3c;
            border: 2px solid #fff;
            border-radius: 50%;
            color: #fff;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.2);
            transition: all 0.2s ease;
            line-height: 1;
        }
        
        .mg-sidebar-left .mg-sidebar-close {
            right: 5px;
        }
        
        .mg-sidebar-right .mg-sidebar-close {
            left: 5px;
        }
        
        .mg-sidebar-close:hover {
            background: #c0392b;
            transform: scale(1.1);
        }
        
        .mg-icon-facebook { background: #1877f2; }
        .mg-icon-twitter { background: #000000; }
        .mg-icon-instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
        .mg-icon-linkedin { background: #0077b5; }
        .mg-icon-youtube { background: #ff0000; }
        .mg-icon-tiktok { background: #000000; }
        .mg-icon-email { background: #667eea; }
        .mg-icon-phone { background: #25d366; }
        .mg-icon-whatsapp { background: #25d366; }

        /* ========================================
           LOTTIE ANIMATIONS (v2.6.19)
           ======================================== */
        .mg-lottie-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 20px auto;
        }
        
        .mg-lottie-container.mg-lottie-above-title {
            margin-bottom: 15px;
        }
        
        .mg-lottie-container.mg-lottie-below-title {
            margin-top: 10px;
            margin-bottom: 20px;
        }
        
        .mg-lottie-container.mg-lottie-above-message {
            margin-bottom: 15px;
        }
        
        .mg-lottie-container.mg-lottie-below-buttons {
            margin-top: 30px;
        }
        
        .mg-lottie-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 0;
            pointer-events: none;
            opacity: 0.3;
        }
        
        .mg-lottie-background > div {
            width: 100%;
            height: 100%;
        }
        
        /* Responsive Lottie */
        @media (max-width: 480px) {
            .mg-lottie-container {
                transform: scale(0.7);
                margin: 10px auto;
            }
        }

        /* ========================================
           VIDEO BACKGROUND (v2.6.27)
           ======================================== */
        .mg-video-background {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: -1;
            overflow: hidden;
            pointer-events: none;
        }

        .mg-video-background iframe {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100vw;
            height: 100vh;
            min-width: 177.77vh; /* 16:9 ratio */
            min-height: 56.25vw;
            transform: translate(-50%, -50%);
            border: none;
        }

        .mg-video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }

        /* ========================================
           PARALLAX EFFECT (v2.6.27)
           ======================================== */
        .mg-parallax-enabled {
            overflow: hidden;
        }

        .mg-parallax-enabled .maintenance-container {
            transition: transform 0.1s ease-out;
        }

        /* ========================================
           SCREEN READER ONLY (v2.9.114 — a11y)
           ======================================== */
        .screen-reader-text {
            border: 0;
            clip: rect(1px, 1px, 1px, 1px);
            clip-path: inset(50%);
            height: 1px;
            margin: -1px;
            overflow: hidden;
            padding: 0;
            position: absolute;
            width: 1px;
            word-wrap: normal !important;
        }

        /* ========================================
           SKIP LINK (v2.9.114 — a11y WCAG 2.1 §2.4.1)
           ======================================== */
        .mg-skip-link {
            position: absolute;
            top: -100%;
            left: 0;
            z-index: 99999;
            padding: 12px 24px;
            background: #000;
            color: #fff !important;
            font-size: 14px;
            font-weight: 700;
            text-decoration: none;
            border-radius: 0 0 4px 0;
            transition: top 0.1s;
        }
        .mg-skip-link:focus {
            top: 0;
        }

        /* ========================================
           FOCUS VISIBLE (v2.9.114 — a11y WCAG 2.1 §2.4.7)
           ======================================== */
        *:focus {
            outline: none;
        }
        *:focus-visible {
            outline: 3px solid #F97316;
            outline-offset: 3px;
            border-radius: 3px;
        }
        .maintenance-btn:focus-visible,
        .mg-modal-submit:focus-visible {
            outline: 3px solid #fff;
            outline-offset: 3px;
        }

        /* ========================================
           PREFERS-REDUCED-MOTION (v2.9.114 — a11y WCAG 2.1 §2.3.3)
           ======================================== */
        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
                scroll-behavior: auto !important;
            }
            .mg-parallax-enabled .maintenance-container {
                transition: none !important;
                transform: none !important;
            }
            .maintenance-logo,
            .maintenance-title,
            .maintenance-subtitle,
            .maintenance-message,
            .maintenance-btn {
                animation: none !important;
            }
        }
    </style>
    <?php 
    $lottie_enabled = !empty($this->settings['lottie_enabled']) && !empty($this->settings['lottie_url']) && !$rgpd_mode;
    if ($lottie_enabled): 
    ?>
    <?php // phpcs:ignore WordPress.WP.EnqueuedResources.NonEnqueuedScript -- DotLottie player bundled locally (v2.9.125), loaded conditionally on the standalone maintenance page; never loaded in GDPR strict mode ?>
    <script src="<?php echo esc_url( MG_PLUGIN_URL . 'assets/js/vendor/dotlottie/dotlottie-player.mjs?ver=' . MG_VERSION ); ?>" type="module"></script>
    <?php endif; ?>
</head>
<body>
    <a class="mg-skip-link" href="#mg-main-content"><?php esc_html_e( 'Skip to main content', 'maintenance-genius' ); ?></a>
    <?php if ($sidebar_enabled): ?>
    <!-- Onglet déclencheur du panneau latéral (v2.6.9) -->
    <button type="button"
            class="mg-sidebar-trigger mg-sidebar-trigger-<?php echo esc_attr($sidebar_position); ?>"
            id="mg-sidebar-trigger"
            onclick="toggleSidebar()"
            aria-expanded="false"
            aria-controls="mg-sidebar"
            aria-label="<?php esc_attr_e( 'Open contact panel', 'maintenance-genius' ); ?>">
        <?php if ($sidebar_position === 'left'): ?>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><polyline points="9 18 15 12 9 6"/></svg>
        <?php else: ?>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><polyline points="15 18 9 12 15 6"/></svg>
        <?php endif; ?>
    </button>
    
    <!-- Panneau latéral (v2.6.10) -->
    <nav id="mg-sidebar"
         class="mg-sidebar mg-sidebar-<?php echo esc_attr($sidebar_position); ?>"
         aria-label="<?php esc_attr_e( 'Contact and social media', 'maintenance-genius' ); ?>"
         aria-hidden="true">
        <!-- Bouton fermer -->
        <button type="button"
                class="mg-sidebar-close"
                onclick="toggleSidebar()"
                aria-label="<?php esc_attr_e( 'Close panel', 'maintenance-genius' ); ?>">&times;</button>
        <?php 
        $has_social = !empty($this->settings['social_facebook']) || !empty($this->settings['social_twitter']) || 
                      !empty($this->settings['social_instagram']) || !empty($this->settings['social_linkedin']) ||
                      !empty($this->settings['social_youtube']) || !empty($this->settings['social_tiktok']);
        $has_contact = !empty($this->settings['contact_email']) || !empty($this->settings['contact_phone']) || !empty($this->settings['contact_whatsapp']);
        
        if ($has_social): ?>
        <div class="mg-sidebar-section">
            <?php if (!empty($this->settings['social_facebook'])): ?>
            <a href="<?php echo esc_url($this->settings['social_facebook']); ?>" target="_blank" rel="noopener noreferrer" class="mg-sidebar-icon mg-icon-facebook" aria-label="Facebook">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
            </a>
            <?php endif; ?>
            <?php if (!empty($this->settings['social_twitter'])): ?>
            <a href="<?php echo esc_url($this->settings['social_twitter']); ?>" target="_blank" rel="noopener noreferrer" class="mg-sidebar-icon mg-icon-twitter" aria-label="X (Twitter)">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg>
            </a>
            <?php endif; ?>
            <?php if (!empty($this->settings['social_instagram'])): ?>
            <a href="<?php echo esc_url($this->settings['social_instagram']); ?>" target="_blank" rel="noopener noreferrer" class="mg-sidebar-icon mg-icon-instagram" aria-label="Instagram">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
            </a>
            <?php endif; ?>
            <?php if (!empty($this->settings['social_linkedin'])): ?>
            <a href="<?php echo esc_url($this->settings['social_linkedin']); ?>" target="_blank" rel="noopener noreferrer" class="mg-sidebar-icon mg-icon-linkedin" aria-label="LinkedIn">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
            </a>
            <?php endif; ?>
            <?php if (!empty($this->settings['social_youtube'])): ?>
            <a href="<?php echo esc_url($this->settings['social_youtube']); ?>" target="_blank" rel="noopener noreferrer" class="mg-sidebar-icon mg-icon-youtube" aria-label="YouTube">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
            </a>
            <?php endif; ?>
            <?php if (!empty($this->settings['social_tiktok'])): ?>
            <a href="<?php echo esc_url($this->settings['social_tiktok']); ?>" target="_blank" rel="noopener noreferrer" class="mg-sidebar-icon mg-icon-tiktok" aria-label="TikTok">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M12.525.02c1.31-.02 2.61-.01 3.91-.02.08 1.53.63 3.09 1.75 4.17 1.12 1.11 2.7 1.62 4.24 1.79v4.03c-1.44-.05-2.89-.35-4.2-.97-.57-.26-1.1-.59-1.62-.93-.01 2.92.01 5.84-.02 8.75-.08 1.4-.54 2.79-1.35 3.94-1.31 1.92-3.58 3.17-5.91 3.21-1.43.08-2.86-.31-4.08-1.03-2.02-1.19-3.44-3.37-3.65-5.71-.02-.5-.03-1-.01-1.49.18-1.9 1.12-3.72 2.58-4.96 1.66-1.44 3.98-2.13 6.15-1.72.02 1.48-.04 2.96-.04 4.44-.99-.32-2.15-.23-3.02.37-.63.41-1.11 1.04-1.36 1.75-.21.51-.15 1.07-.14 1.61.24 1.64 1.82 3.02 3.5 2.87 1.12-.01 2.19-.66 2.77-1.61.19-.33.4-.67.41-1.06.1-1.79.06-3.57.07-5.36.01-4.03-.01-8.05.02-12.07z"/></svg>
            </a>
            <?php endif; ?>
        </div>
        <?php endif; ?>
        
        <?php if ($has_contact): ?>
        <div class="mg-sidebar-section mg-sidebar-contact">
            <?php if (!empty($this->settings['contact_email'])): ?>
            <a href="mailto:<?php echo esc_attr($this->settings['contact_email']); ?>" class="mg-sidebar-icon mg-icon-email" aria-label="<?php esc_attr_e( 'Send an email', 'maintenance-genius' ); ?>">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
            </a>
            <?php endif; ?>
            <?php if (!empty($this->settings['contact_phone'])): ?>
            <a href="tel:<?php echo esc_attr(preg_replace('/[^0-9+]/', '', $this->settings['contact_phone'])); ?>" class="mg-sidebar-icon mg-icon-phone" aria-label="<?php esc_attr_e( 'Call by phone', 'maintenance-genius' ); ?>">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true" focusable="false"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
            </a>
            <?php endif; ?>
            <?php if (!empty($this->settings['contact_whatsapp'])): ?>
            <a href="https://wa.me/<?php echo esc_attr(preg_replace('/[^0-9]/', '', $this->settings['contact_whatsapp'])); ?>" target="_blank" rel="noopener noreferrer" class="mg-sidebar-icon mg-icon-whatsapp" aria-label="WhatsApp">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" focusable="false"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
            </a>
            <?php endif; ?>
        </div>
        <?php endif; ?>
    </nav>
    <?php endif; ?>

    <?php 
    $lottie_enabled = !empty($this->settings['lottie_enabled']) && !empty($this->settings['lottie_url']);
    $lottie_position = $this->settings['lottie_position'] ?? 'above-title';
    $lottie_size = $this->settings['lottie_size'] ?? 200;
    $lottie_url = $this->settings['lottie_url'] ?? '';
    $lottie_loop = $this->settings['lottie_loop'] ?? true;
    $lottie_autoplay = $this->settings['lottie_autoplay'] ?? true;
    $lottie_speed = $this->settings['lottie_speed'] ?? 1;
    
    if ($lottie_enabled && $lottie_position === 'background'): 
    ?>
    <div class="mg-lottie-background" aria-hidden="true">
        <dotlottie-player 
            src="<?php echo esc_url($lottie_url); ?>" 
            style="width: 100%; height: 100%;"
            background="transparent"
            speed="<?php echo esc_attr($lottie_speed); ?>"
            <?php echo $lottie_loop ? 'loop' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>
            <?php echo $lottie_autoplay ? 'autoplay' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>
        ></dotlottie-player>
    </div>
    <?php endif; ?>

    <?php 
    $video_bg_enabled = !empty($this->settings['video_bg_enabled']) && !empty($this->settings['video_bg_url']);
    $lottie_bg_active = $lottie_enabled && $lottie_position === 'background';
    
    if ($video_bg_enabled && !$lottie_bg_active): 
        $video_url = $this->settings['video_bg_url'];
        $video_opacity = intval($this->settings['video_bg_opacity'] ?? 30);
        $video_muted = $this->settings['video_bg_muted'] ?? true;
        
        $video_id = '';
        $video_type = '';
        
        if (preg_match('/(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/', $video_url, $matches)) {
            $video_id = $matches[1];
            $video_type = 'youtube';
        }
        elseif (preg_match('/(?:vimeo\.com\/)(\d+)/', $video_url, $matches)) {
            $video_id = $matches[1];
            $video_type = 'vimeo';
        }
        
        if ($video_id):
    ?>
    <div class="mg-video-background" style="opacity: 0; transition: opacity 0.6s ease-in;" data-mg-target-opacity="<?php echo esc_attr( $video_opacity / 100 ); ?>">
        <?php if ($video_type === 'youtube'): ?>
        <iframe 
            src="https://www.youtube.com/embed/<?php echo esc_attr($video_id); ?>?autoplay=1&<?php echo $video_muted ? 'mute=1' : ''; ?>&loop=1&playlist=<?php echo esc_attr($video_id); ?>&controls=0&showinfo=0&rel=0&modestbranding=1&playsinline=1&disablekb=1&iv_load_policy=3"
            allow="autoplay; encrypted-media"
            allowfullscreen
            title="<?php esc_attr_e( 'Background video', 'maintenance-genius' ); ?>"
            aria-hidden="true"
            tabindex="-1"
        ></iframe>
        <?php elseif ($video_type === 'vimeo'): ?>
        <iframe 
            src="https://player.vimeo.com/video/<?php echo esc_attr($video_id); ?>?autoplay=1&<?php echo $video_muted ? 'muted=1' : ''; ?>&loop=1&background=1&byline=0&title=0"
            allow="autoplay; encrypted-media"
            allowfullscreen
            title="<?php esc_attr_e( 'Background video', 'maintenance-genius' ); ?>"
            aria-hidden="true"
            tabindex="-1"
        ></iframe>
        <?php endif; ?>
    </div>
    <script>
    (function(){
        var bg = document.querySelector('.mg-video-background');
        if (!bg) return;
        var target = bg.getAttribute('data-mg-target-opacity') || '1';
        var iframe = bg.querySelector('iframe');
        var done = false;
        function reveal(){ if (done) return; done = true; bg.style.opacity = target; }
        if (iframe) {
            iframe.addEventListener('load', function(){ setTimeout(reveal, 500); });
        }
        setTimeout(reveal, 3000); // filet si l'event load ne se déclenche pas
    })();
    </script>
    <?php 
        endif;
    endif; 
    ?>

    <main id="mg-main-content" class="maintenance-container">

        <?php 
        if ($lottie_enabled && $lottie_position === 'above-title'): 
        ?>
        <div class="mg-lottie-container mg-lottie-above-title">
            <dotlottie-player 
                src="<?php echo esc_url($lottie_url); ?>" 
                style="width: <?php echo esc_attr($lottie_size); ?>px; height: <?php echo esc_attr($lottie_size); ?>px;"
                background="transparent"
                speed="<?php echo esc_attr($lottie_speed); ?>"
                <?php echo $lottie_loop ? 'loop' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>
                <?php echo $lottie_autoplay ? 'autoplay' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>
            ></dotlottie-player>
        </div>
        <?php endif; ?>

        <?php if (!empty($this->settings['logo_url'])): ?>
        <div class="maintenance-logo">
            <img src="<?php echo esc_url($this->settings['logo_url']); ?>" alt="<?php echo esc_attr( get_bloginfo('name') ); ?>">
        </div>
        <?php endif; ?>

        <h1 class="maintenance-title">
            <?php echo esc_html($this->settings['title']); ?>
        </h1>

        <?php if ( ! empty( $this->settings['subtitle'] ) ) : ?>
        <h2 class="maintenance-subtitle">
            <?php echo esc_html($this->settings['subtitle']); ?>
        </h2>
        <?php endif; ?>

        <?php 
        if ($lottie_enabled && $lottie_position === 'below-title'): 
        ?>
        <div class="mg-lottie-container mg-lottie-below-title">
            <dotlottie-player 
                src="<?php echo esc_url($lottie_url); ?>" 
                style="width: <?php echo esc_attr($lottie_size); ?>px; height: <?php echo esc_attr($lottie_size); ?>px;"
                background="transparent"
                speed="<?php echo esc_attr($lottie_speed); ?>"
                <?php echo $lottie_loop ? 'loop' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>
                <?php echo $lottie_autoplay ? 'autoplay' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>
            ></dotlottie-player>
        </div>
        <?php endif; ?>

        <?php 
        if ($lottie_enabled && $lottie_position === 'above-message'): 
        ?>
        <div class="mg-lottie-container mg-lottie-above-message">
            <dotlottie-player 
                src="<?php echo esc_url($lottie_url); ?>" 
                style="width: <?php echo esc_attr($lottie_size); ?>px; height: <?php echo esc_attr($lottie_size); ?>px;"
                background="transparent"
                speed="<?php echo esc_attr($lottie_speed); ?>"
                <?php echo $lottie_loop ? 'loop' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>
                <?php echo $lottie_autoplay ? 'autoplay' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>
            ></dotlottie-player>
        </div>
        <?php endif; ?>

        <div class="maintenance-message">
            <?php echo wp_kses_post(nl2br($this->settings['message'])); ?>
        </div>

        <?php 
        $countdown_enabled = !empty($this->settings['countdown_enabled']);
        $countdown_date = $this->settings['countdown_date'] ?? '';
        $countdown_time = $this->settings['countdown_time'] ?? '00:00';
        
        if ($countdown_enabled && !empty($countdown_date)):
            $countdown_title = $this->settings['countdown_title'] ?? __('Launching in', 'maintenance-genius');
            $countdown_end_text = $this->settings['countdown_end_text'] ?? __('The site is now online!', 'maintenance-genius');
            $countdown_style = $this->settings['countdown_style'] ?? 'boxes';
            $show_days = $this->settings['countdown_show_days'] ?? true;
            $show_hours = $this->settings['countdown_show_hours'] ?? true;
            $show_minutes = $this->settings['countdown_show_minutes'] ?? true;
            $show_seconds = $this->settings['countdown_show_seconds'] ?? true;
            
            $target_datetime = $countdown_date . ' ' . $countdown_time . ':00';
            
            $wp_timezone = wp_timezone();
            $target_date = new DateTime($target_datetime, $wp_timezone);
            $target_timestamp = $target_date->getTimestamp();
            
            $now_timestamp = time();
            $diff = $target_timestamp - $now_timestamp;
            $auto_disable = !empty($this->settings['countdown_auto_disable']);
        ?>
        <div class="mg-countdown-wrapper">
            <div class="mg-countdown-title"><?php echo esc_html($countdown_title); ?></div>
            <div class="mg-countdown mg-countdown-<?php echo esc_attr($countdown_style); ?>" 
                 id="mg-countdown"
                 role="timer"
                 aria-live="polite"
                 aria-atomic="false"
                 aria-label="<?php esc_attr_e( 'Countdown timer', 'maintenance-genius' ); ?>"
                 data-target="<?php echo esc_attr($target_timestamp); ?>"
                 data-end-text="<?php echo esc_attr($countdown_end_text); ?>"
                 data-show-days="<?php echo $show_days ? '1' : '0'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>"
                 data-show-hours="<?php echo $show_hours ? '1' : '0'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>"
                 data-show-minutes="<?php echo $show_minutes ? '1' : '0'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>"
                 data-show-seconds="<?php echo $show_seconds ? '1' : '0'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>"
                 data-style="<?php echo esc_attr($countdown_style); ?>"
                 data-auto-disable="<?php echo $auto_disable ? '1' : '0'; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>"
                 data-home-url="<?php echo esc_url(home_url()); ?>">
                <?php if ($show_days): ?>
                <div class="mg-countdown-item mg-countdown-days" aria-label="<?php esc_attr_e( 'Days', 'maintenance-genius' ); ?>">
                    <div class="mg-countdown-value" id="mg-countdown-days" aria-hidden="true">--</div>
                    <div class="mg-countdown-label" aria-hidden="true"><?php esc_html_e('Days', 'maintenance-genius'); ?></div>
                </div>
                <?php endif; ?>
                <?php if ($countdown_style === 'minimal' && $show_days && $show_hours): ?>
                <div class="mg-countdown-separator" aria-hidden="true">:</div>
                <?php endif; ?>
                <?php if ($show_hours): ?>
                <div class="mg-countdown-item mg-countdown-hours" aria-label="<?php esc_attr_e( 'Hours', 'maintenance-genius' ); ?>">
                    <div class="mg-countdown-value" id="mg-countdown-hours" aria-hidden="true">--</div>
                    <div class="mg-countdown-label" aria-hidden="true"><?php esc_html_e('Hours', 'maintenance-genius'); ?></div>
                </div>
                <?php endif; ?>
                <?php if ($countdown_style === 'minimal' && $show_hours && $show_minutes): ?>
                <div class="mg-countdown-separator" aria-hidden="true">:</div>
                <?php endif; ?>
                <?php if ($show_minutes): ?>
                <div class="mg-countdown-item mg-countdown-minutes" aria-label="<?php esc_attr_e( 'Minutes', 'maintenance-genius' ); ?>">
                    <div class="mg-countdown-value" id="mg-countdown-minutes" aria-hidden="true">--</div>
                    <div class="mg-countdown-label" aria-hidden="true"><?php esc_html_e('Min', 'maintenance-genius'); ?></div>
                </div>
                <?php endif; ?>
                <?php if ($countdown_style === 'minimal' && $show_minutes && $show_seconds): ?>
                <div class="mg-countdown-separator" aria-hidden="true">:</div>
                <?php endif; ?>
                <?php if ($show_seconds): ?>
                <div class="mg-countdown-item mg-countdown-seconds" aria-label="<?php esc_attr_e( 'Seconds', 'maintenance-genius' ); ?>">
                    <div class="mg-countdown-value" id="mg-countdown-seconds" aria-hidden="true">--</div>
                    <div class="mg-countdown-label" aria-hidden="true"><?php esc_html_e('Sec', 'maintenance-genius'); ?></div>
                </div>
                <?php endif; ?>
            </div>
        </div>
        <?php endif; ?>

        <div class="maintenance-buttons">
            <?php if ($show_admin_button): ?>
            <a href="<?php echo esc_url(wp_login_url()); ?>" class="maintenance-btn maintenance-btn-admin">
                <?php esc_html_e('Admin Login', 'maintenance-genius'); ?>
            </a>
            <?php endif; ?>

            <?php if ($show_visitor_button): ?>
            <button type="button" class="maintenance-btn maintenance-btn-visitor" id="mg-visitor-btn">
                <?php esc_html_e('Visitor Access', 'maintenance-genius'); ?>
            </button>
            <?php endif; ?>

            <?php 
            $notification_enabled = !empty($this->settings['notification_enabled']);
            if ($notification_enabled): 
            ?>
            <button type="button" class="maintenance-btn maintenance-btn-notify" id="mg-notify-btn">
                📧 <?php echo esc_html($this->settings['notification_button_text'] ?? __('Notify me', 'maintenance-genius')); ?>
            </button>
            <?php endif; ?>
        </div>

        <?php 
        if ($lottie_enabled && $lottie_position === 'below-buttons'): 
        ?>
        <div class="mg-lottie-container mg-lottie-below-buttons">
            <dotlottie-player 
                src="<?php echo esc_url($lottie_url); ?>" 
                style="width: <?php echo esc_attr($lottie_size); ?>px; height: <?php echo esc_attr($lottie_size); ?>px;"
                background="transparent"
                speed="<?php echo esc_attr($lottie_speed); ?>"
                <?php echo $lottie_loop ? 'loop' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>
                <?php echo $lottie_autoplay ? 'autoplay' : ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Static string ?>
            ></dotlottie-player>
        </div>
        <?php endif; ?>

        <?php
        // La barre position:fixed en fin de document est l'unique point d'attribution.
        ?>

    </main>

    <?php if (!empty($this->settings['notification_enabled'])): ?>
    <!-- Modal Notification Email (v2.6.12) -->
    <div id="mg-notify-modal"
         class="mg-notify-modal"
         role="dialog"
         aria-modal="true"
         aria-labelledby="mg-notify-modal-title"
         aria-hidden="true">
        <div class="mg-notify-content" style="position: relative;">
            <button type="button" class="mg-notify-close" id="mg-notify-close" aria-label="<?php esc_attr_e( 'Close', 'maintenance-genius' ); ?>">&times;</button>
            <h3 id="mg-notify-modal-title">📧 <?php esc_html_e('Stay informed', 'maintenance-genius'); ?></h3>
            <p><?php esc_html_e('Enter your email to be notified as soon as the site is back online.', 'maintenance-genius'); ?></p>
            <div id="mg-notify-form-container">
                <form class="mg-notify-form" id="mg-notify-form" style="flex-direction: column;">
                    <div style="display: flex; gap: 10px; width: 100%;">
                        <label for="mg-notify-email" class="screen-reader-text"><?php esc_html_e( 'Your email address', 'maintenance-genius' ); ?></label>
                        <input type="email" name="email" id="mg-notify-email" placeholder="<?php esc_attr_e('your@email.com', 'maintenance-genius'); ?>" required style="flex: 1;" autocomplete="email">
                        <button type="submit"><?php esc_html_e('Send', 'maintenance-genius'); ?></button>
                    </div>
                    <?php if ($turnstile_enabled && !empty($turnstile_site_key) && $turnstile_on_notification): ?>
                    <!-- Turnstile Widget -->
                    <div class="cf-turnstile" data-sitekey="<?php echo esc_attr($turnstile_site_key); ?>" data-callback="onNotifyTurnstileSuccess" data-theme="light" style="margin-top: 15px;"></div>
                    <input type="hidden" id="mg-notify-turnstile-token" name="turnstile_token" value="">
                    <?php endif; ?>
                </form>
                <div class="mg-notify-error" id="mg-notify-error" role="alert" style="display:none;"></div>
            </div>
            <div id="mg-notify-success" class="mg-notify-success" role="status" style="display:none;"></div>
        </div>
    </div>
    <?php endif; ?>

    <?php if ($show_visitor_button): ?>
    <!-- Modal Acces Visiteur -->
    <div id="mg-visitor-modal"
         class="mg-modal"
         role="dialog"
         aria-modal="true"
         aria-labelledby="mg-visitor-modal-title"
         aria-hidden="true">
        <div class="mg-modal-content">
            <button type="button" class="mg-modal-close" id="mg-modal-close" aria-label="<?php esc_attr_e( 'Close', 'maintenance-genius' ); ?>">&times;</button>
            <div class="mg-modal-header">
                <h3 id="mg-visitor-modal-title"><?php esc_html_e('Visitor Access', 'maintenance-genius'); ?></h3>
                <p><?php esc_html_e('Enter the password to access the site', 'maintenance-genius'); ?></p>
            </div>
            <div class="mg-modal-body">
                <div class="mg-error-message" id="mg-error-message"></div>
                <form id="mg-visitor-form">
                    <div class="mg-form-group">
                        <label for="mg-visitor-password-input"><?php esc_html_e('Password', 'maintenance-genius'); ?></label>
                        <div class="mg-password-wrapper">
                            <input
                                type="password"
                                id="mg-visitor-password-input"
                                name="password"
                                placeholder="<?php esc_attr_e('Enter the password', 'maintenance-genius'); ?>"
                                required
                                autocomplete="off"
                            >
                            <button type="button" class="mg-toggle-password" id="mg-toggle-password"
                                    aria-label="<?php esc_attr_e('Show password', 'maintenance-genius'); ?>"
                                    aria-pressed="false">
                                <svg id="mg-eye-icon" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                                    <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
                                </svg>
                                <svg id="mg-eye-off-icon" style="display:none;" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
                                    <path d="M12 7c2.76 0 5 2.24 5 5 0 .65-.13 1.26-.36 1.83l2.92 2.92c1.51-1.26 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-3.98.7l2.16 2.16C10.74 7.13 11.35 7 12 7zM2 4.27l2.28 2.28.46.46C3.08 8.3 1.78 10.02 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.42.42L19.73 22 21 20.73 3.27 3 2 4.27zM7.53 9.8l1.55 1.55c-.05.21-.08.43-.08.65 0 1.66 1.34 3 3 3 .22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53-2.76 0-5-2.24-5-5 0-.79.2-1.53.53-2.2zm4.31-.78l3.15 3.15.02-.16c0-1.66-1.34-3-3-3l-.17.01z"/>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <?php if ($turnstile_enabled && !empty($turnstile_site_key) && $turnstile_on_visitor): ?>
                    <!-- Turnstile Widget -->
                    <div class="mg-form-group" style="margin-top: 15px;">
                        <div class="cf-turnstile" data-sitekey="<?php echo esc_attr($turnstile_site_key); ?>" data-callback="onVisitorTurnstileSuccess" data-theme="light"></div>
                        <input type="hidden" id="mg-visitor-turnstile-token" name="turnstile_token" value="">
                    </div>
                    <?php endif; ?>
                    <div class="mg-modal-footer">
                        <button type="submit" class="mg-modal-submit" id="mg-visitor-submit">
                            <?php esc_html_e('Enter', 'maintenance-genius'); ?>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script>
        var mgI18n = {
            send: <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JSON encoded
            echo json_encode(__('Send', 'maintenance-genius')); ?>,
            enter: <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JSON encoded
            echo json_encode(__('Enter', 'maintenance-genius')); ?>,
            verifying: <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JSON encoded
            echo json_encode(__('Verifying...', 'maintenance-genius')); ?>,
            error: <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JSON encoded
            echo json_encode(__('Server error. Please try again.', 'maintenance-genius')); ?>,
            connectionError: <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JSON encoded
            echo json_encode(__('Connection error', 'maintenance-genius')); ?>,
            turnstileRequired: <?php // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- JSON encoded
            echo json_encode(__('Please complete the security verification', 'maintenance-genius')); ?>
        };
        var mgVisitorNonce = '<?php echo esc_js( wp_create_nonce("mg_visitor_nonce") ); ?>';

        function toggleSidebar() {
            const sidebar = document.getElementById('mg-sidebar');
            const trigger = document.getElementById('mg-sidebar-trigger');
            
            if (sidebar && trigger) {
                const isOpen = sidebar.classList.toggle('mg-sidebar-open');
                trigger.classList.toggle('mg-trigger-open');
                trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
                sidebar.setAttribute('aria-hidden', isOpen ? 'false' : 'true');
                trigger.setAttribute('aria-label', isOpen
                    ? trigger.getAttribute('data-label-close') || '<?php echo esc_js( __( 'Close contact panel', 'maintenance-genius' ) ); ?>'
                    : '<?php echo esc_js( __( 'Open contact panel', 'maintenance-genius' ) ); ?>'
                );
            }
        }
        
        document.addEventListener('click', function(e) {
            const sidebar = document.getElementById('mg-sidebar');
            const trigger = document.getElementById('mg-sidebar-trigger');
            
            if (sidebar && sidebar.classList.contains('mg-sidebar-open')) {
                if (!sidebar.contains(e.target) && !trigger.contains(e.target)) {
                    sidebar.classList.remove('mg-sidebar-open');
                    trigger.classList.remove('mg-trigger-open');
                    trigger.setAttribute('aria-expanded', 'false');
                    sidebar.setAttribute('aria-hidden', 'true');
                }
            }
        });

        (function() {
            const countdownEl = document.getElementById('mg-countdown');
            if (!countdownEl) return;

            const targetTimestamp = parseInt(countdownEl.dataset.target) * 1000;
            const endText = countdownEl.dataset.endText;
            const showDays = countdownEl.dataset.showDays === '1';
            const showHours = countdownEl.dataset.showHours === '1';
            const showMinutes = countdownEl.dataset.showMinutes === '1';
            const showSeconds = countdownEl.dataset.showSeconds === '1';
            const autoDisable = countdownEl.dataset.autoDisable === '1';
            const homeUrl = countdownEl.dataset.homeUrl || '/';

            const daysEl = document.getElementById('mg-countdown-days');
            const hoursEl = document.getElementById('mg-countdown-hours');
            const minutesEl = document.getElementById('mg-countdown-minutes');
            const secondsEl = document.getElementById('mg-countdown-seconds');

            function updateCountdown() {
                const now = Date.now();
                const diff = targetTimestamp - now;

                if (diff <= 0) {
                    if (autoDisable) {
                        countdownEl.innerHTML = '<div class="mg-countdown-ended">🚀 <?php echo esc_js(__('Redirecting...', 'maintenance-genius')); ?></div>';
                        setTimeout(function() {
                            window.location.href = homeUrl;
                        }, 1500);
                    } else {
                        countdownEl.innerHTML = '<div class="mg-countdown-ended">' + endText + '</div>';
                    }
                    return;
                }

                const days = Math.floor(diff / (1000 * 60 * 60 * 24));
                const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
                const seconds = Math.floor((diff % (1000 * 60)) / 1000);

                if (daysEl && showDays) daysEl.textContent = String(days).padStart(2, '0');
                if (hoursEl && showHours) hoursEl.textContent = String(hours).padStart(2, '0');
                if (minutesEl && showMinutes) minutesEl.textContent = String(minutes).padStart(2, '0');
                if (secondsEl && showSeconds) secondsEl.textContent = String(seconds).padStart(2, '0');
            }

            updateCountdown();
            setInterval(updateCountdown, 1000);
        })();

        function onNotifyTurnstileSuccess(token) {
            const hiddenInput = document.getElementById('mg-notify-turnstile-token');
            if (hiddenInput) hiddenInput.value = token;
        }
        
        function onVisitorTurnstileSuccess(token) {
            const hiddenInput = document.getElementById('mg-visitor-turnstile-token');
            if (hiddenInput) hiddenInput.value = token;
        }

        (function() {
            const notifyModal = document.getElementById('mg-notify-modal');
            const notifyBtn = document.getElementById('mg-notify-btn');
            const notifyClose = document.getElementById('mg-notify-close');
            const notifyForm = document.getElementById('mg-notify-form');
            const notifyError = document.getElementById('mg-notify-error');
            const notifySuccess = document.getElementById('mg-notify-success');
            const formContainer = document.getElementById('mg-notify-form-container');

            function openNotifyModal() {
                notifyModal.style.display = 'flex';
                notifyModal.setAttribute('aria-hidden', 'false');
                const firstInput = notifyModal.querySelector('input[type="email"]');
                if (firstInput) { setTimeout(function() { firstInput.focus(); }, 50); }
            }
            function closeNotifyModal() {
                notifyModal.style.display = 'none';
                notifyModal.setAttribute('aria-hidden', 'true');
                if (notifyBtn) { notifyBtn.focus(); }
            }

            if (notifyBtn && notifyModal) {
                notifyBtn.onclick = openNotifyModal;

                notifyClose.onclick = closeNotifyModal;

                notifyModal.onclick = function(e) {
                    if (e.target === notifyModal) {
                        closeNotifyModal();
                    }
                };

                notifyForm.onsubmit = function(e) {
                    e.preventDefault();
                    const email = document.getElementById('mg-notify-email').value;
                    const turnstileToken = document.getElementById('mg-notify-turnstile-token');
                    const submitBtn = notifyForm.querySelector('button');
                    
                    if (turnstileToken && !turnstileToken.value) {
                        notifyError.textContent = mgI18n.turnstileRequired;
                        notifyError.style.display = 'block';
                        return;
                    }
                    
                    submitBtn.disabled = true;
                    submitBtn.textContent = '...';
                    notifyError.style.display = 'none';

                    let bodyData = 'action=mg_subscribe_notification&nonce=' + encodeURIComponent(mgVisitorNonce) + '&email=' + encodeURIComponent(email);
                    if (turnstileToken && turnstileToken.value) {
                        bodyData += '&turnstile_token=' + encodeURIComponent(turnstileToken.value);
                    }

                    fetch('<?php echo esc_url( admin_url('admin-ajax.php') ); ?>', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        body: bodyData
                    })
                    .then(response => response.json())
                    .then(data => {
                        if (data.success) {
                            formContainer.style.display = 'none';
                            notifySuccess.textContent = data.data.message;
                            notifySuccess.style.display = 'block';
                        } else {
                            notifyError.textContent = data.data.message;
                            notifyError.style.display = 'block';
                            submitBtn.disabled = false;
                            submitBtn.textContent = mgI18n.send;
                            if (typeof turnstile !== 'undefined') turnstile.reset();
                        }
                    })
                    .catch(error => {
                        notifyError.textContent = mgI18n.connectionError;
                        notifyError.style.display = 'block';
                        submitBtn.disabled = false;
                        submitBtn.textContent = mgI18n.send;
                    });
                };
            }
        })();
        
        (function() {
            const modal = document.getElementById('mg-visitor-modal');
            const btn = document.getElementById('mg-visitor-btn');
            const closeBtn = document.getElementById('mg-modal-close');
            const form = document.getElementById('mg-visitor-form');
            const submitBtn = document.getElementById('mg-visitor-submit');
            const errorMsg = document.getElementById('mg-error-message');
            const passwordInput = document.getElementById('mg-visitor-password-input');
            const togglePassword = document.getElementById('mg-toggle-password');
            const eyeIcon = document.getElementById('mg-eye-icon');
            const eyeOffIcon = document.getElementById('mg-eye-off-icon');

            var labelShow = '<?php echo esc_js( __( 'Show password', 'maintenance-genius' ) ); ?>';
            var labelHide = '<?php echo esc_js( __( 'Hide password', 'maintenance-genius' ) ); ?>';

            togglePassword.onclick = function(e) {
                e.preventDefault();
                if (passwordInput.type === 'password') {
                    passwordInput.type = 'text';
                    eyeIcon.style.display = 'none';
                    eyeOffIcon.style.display = 'block';
                    togglePassword.setAttribute('aria-label', labelHide);
                    togglePassword.setAttribute('aria-pressed', 'true');
                } else {
                    passwordInput.type = 'password';
                    eyeIcon.style.display = 'block';
                    eyeOffIcon.style.display = 'none';
                    togglePassword.setAttribute('aria-label', labelShow);
                    togglePassword.setAttribute('aria-pressed', 'false');
                }
                passwordInput.focus();
            };

            function openVisitorModal() {
                modal.style.display = 'block';
                modal.setAttribute('aria-hidden', 'false');
                setTimeout(function() { passwordInput.focus(); }, 100);
            }
            function closeVisitorModal() {
                modal.style.display = 'none';
                modal.setAttribute('aria-hidden', 'true');
                errorMsg.style.display = 'none';
                form.reset();
                passwordInput.type = 'password';
                eyeIcon.style.display = 'block';
                eyeOffIcon.style.display = 'none';
                if (btn) { btn.focus(); }
            }

            btn.onclick = openVisitorModal;

            closeBtn.onclick = closeVisitorModal;

            window.onclick = function(event) {
                if (event.target === modal) {
                    closeVisitorModal();
                }
            }

            form.onsubmit = function(e) {
                e.preventDefault();

                const password = passwordInput.value;
                const turnstileToken = document.getElementById('mg-visitor-turnstile-token');
                
                if (turnstileToken && !turnstileToken.value) {
                    errorMsg.textContent = mgI18n.turnstileRequired;
                    errorMsg.style.display = 'block';
                    return;
                }
                
                errorMsg.style.display = 'none';
                submitBtn.textContent = mgI18n.verifying;
                submitBtn.disabled = true;

                var ajaxUrl = '<?php echo esc_url( admin_url("admin-ajax.php") ); ?>';
                var nonceXhr = new XMLHttpRequest();
                nonceXhr.open('POST', ajaxUrl, true);
                nonceXhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                nonceXhr.onload = function() {
                    var freshNonce = '<?php echo esc_js( wp_create_nonce("mg_visitor_nonce") ); ?>';
                    try {
                        var r = JSON.parse(nonceXhr.responseText);
                        if (r.success && r.data.nonce) freshNonce = r.data.nonce;
                    } catch(ex) {}
                    doLogin(freshNonce);
                };
                nonceXhr.onerror = function() {
                    doLogin('<?php echo esc_js( wp_create_nonce("mg_visitor_nonce") ); ?>');
                };
                nonceXhr.send('action=mg_refresh_nonce');

                function doLogin(nonce) {
                    const xhr = new XMLHttpRequest();
                    xhr.open('POST', ajaxUrl, true);
                    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

                    xhr.onload = function() {
                        try {
                            if (xhr.status === 200) {
                                const response = JSON.parse(xhr.responseText);
                                if (response.success) {
                                    setTimeout(function() {
                                        if (window.location.search.indexOf('mg_preview') !== -1) {
                                            window.location.href = '/';
                                        } else {
                                            window.location.reload();
                                        }
                                    }, 300);
                                } else {
                                    errorMsg.textContent = response.data.message || mgI18n.error;
                                    errorMsg.style.display = 'block';
                                    submitBtn.textContent = mgI18n.enter;
                                    submitBtn.disabled = false;
                                    passwordInput.focus();
                                    if (typeof turnstile !== 'undefined') turnstile.reset();
                                }
                            } else {
                                errorMsg.textContent = mgI18n.error || 'Server error. Please try again.';
                                errorMsg.style.display = 'block';
                                submitBtn.textContent = mgI18n.enter;
                                submitBtn.disabled = false;
                            }
                        } catch(e) {
                            errorMsg.textContent = mgI18n.error || 'Server error. Please try again.';
                            errorMsg.style.display = 'block';
                            submitBtn.textContent = mgI18n.enter;
                            submitBtn.disabled = false;
                        }
                    };

                    xhr.onerror = function() {
                        errorMsg.textContent = mgI18n.error || 'Connection error. Please try again.';
                        errorMsg.style.display = 'block';
                        submitBtn.textContent = mgI18n.enter;
                        submitBtn.disabled = false;
                    };

                    xhr.timeout = 15000;
                    xhr.ontimeout = function() {
                        errorMsg.textContent = mgI18n.error || 'Request timed out. Please try again.';
                        errorMsg.style.display = 'block';
                        submitBtn.textContent = mgI18n.enter;
                        submitBtn.disabled = false;
                    };

                    let sendData = 'action=mg_visitor_login&password=' + encodeURIComponent(password) + '&nonce=' + encodeURIComponent(nonce);
                    if (turnstileToken && turnstileToken.value) {
                        sendData += '&turnstile_token=' + encodeURIComponent(turnstileToken.value);
                    }
                    xhr.send(sendData);
                }
            };
        })();
    </script>
    <?php endif; ?>

    <?php 
    $parallax_enabled = !empty($this->settings['parallax_enabled']);
    if ($parallax_enabled): 
        $parallax_intensity = intval($this->settings['parallax_intensity'] ?? 50);
    ?>
    <script>
    (function() {
        if (window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
            return;
        }
        var body = document.body;
        var container = document.getElementById('mg-main-content');
        var intensity = <?php echo esc_js( $parallax_intensity ); ?> / 100;
        var maxMove = 20 * intensity;
        
        body.classList.add('mg-parallax-enabled');
        
        document.addEventListener('mousemove', function(e) {
            var x = (e.clientX / window.innerWidth - 0.5) * 2;
            var y = (e.clientY / window.innerHeight - 0.5) * 2;
            
            if (container) {
                container.style.transform = 'translate(' + (x * maxMove * -0.5) + 'px, ' + (y * maxMove * -0.5) + 'px)';
            }
            
            var bg = document.querySelector('.maintenance-wrapper');
            if (bg) {
                bg.style.backgroundPosition = (50 + x * maxMove) + '% ' + (50 + y * maxMove) + '%';
            }
        });
    })();
    </script>
    <?php endif; ?>

    <?php 
    $stats_enabled = !empty($this->settings['stats_enabled']);
    if ($stats_enabled): 
    ?>
    <script>
    (function() {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', '<?php echo esc_url( admin_url('admin-ajax.php') ); ?>', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('action=mg_track_visit&nonce=' + mgVisitorNonce);
    })();
    </script>
    <?php endif; ?>

    <?php

    // Affiché UNIQUEMENT si l'utilisateur a coché « Afficher le crédit » (show_powered_by).
    // Les anciens réglages hide_credits/hide_powered_by n'ont plus d'effet : le défaut est déjà masqué.
    if ( ! empty( $this->settings['show_powered_by'] ) ) :
    ?>
    <div class="mg-powered-by" style="position:fixed;bottom:12px;left:0;right:0;text-align:center;z-index:9999;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:12px;color:#fed7aa !important;letter-spacing:0.3px;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,0.4);">
        <?php
        printf(
            /* translators: %s is replaced by the 1001Web link (brand attribution footer). */
            esc_html__( 'Propulsé par %s', 'maintenance-genius' ),
            '<a href="https://1001web.ca" target="_blank" rel="noopener nofollow" style="color:#F97316;text-decoration:none;font-weight:700;pointer-events:auto;">1001Web&trade;</a>'
        );
        ?>
    </div>
    <?php endif; ?>

</body>
</html>
        <?php
    }

    /**
     * Assombrir une couleur hexadecimale
     */
    private function darken_color($hex, $percent) {
        $hex = str_replace('#', '', $hex);

        if (strlen($hex) == 3) {
            $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
        }

        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));

        $r = (int)max(0, min(255, $r - ($r * $percent / 100)));
        $g = (int)max(0, min(255, $g - ($g * $percent / 100)));
        $b = (int)max(0, min(255, $b - ($b * $percent / 100)));

        return '#' . str_pad(dechex($r), 2, '0', STR_PAD_LEFT)
                   . str_pad(dechex($g), 2, '0', STR_PAD_LEFT)
                   . str_pad(dechex($b), 2, '0', STR_PAD_LEFT);
    }

    /**
     * Convertir hex en RGB pour box-shadow
     */
    private function hex_to_rgb($hex) {
        $hex = str_replace('#', '', $hex);

        if (strlen($hex) == 3) {
            $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
        }

        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));

        return "$r, $g, $b";
    }

    /**
     * Convertir hex + opacité en rgba
     */
    private function hex_to_rgba($hex, $opacity) {
        $hex = str_replace('#', '', $hex);
        $hex = preg_replace('/[^0-9A-Fa-f]/', '', $hex);
        
        if (empty($hex) || (strlen($hex) !== 3 && strlen($hex) !== 6)) {
            return "rgba(0, 0, 0, " . (floatval($opacity) / 100) . ")";
        }

        if (strlen($hex) == 3) {
            $hex = $hex[0] . $hex[0] . $hex[1] . $hex[1] . $hex[2] . $hex[2];
        }

        $r = hexdec(substr($hex, 0, 2));
        $g = hexdec(substr($hex, 2, 2));
        $b = hexdec(substr($hex, 4, 2));

        if (intval($opacity) >= 100) {
            return "#" . $hex;
        }

        $alpha = floatval($opacity) / 100;

        return "rgba($r, $g, $b, $alpha)";
    }
}
