<?php
/**
 * Maintenance GENIUS - Admin Page Template
 * Template de la page d'administration
 * Version 2.9.126
 * 
 * Variables disponibles:
 * - $settings : array des paramètres
 * - $fonts : array des polices disponibles
 * - $animations : array des animations disponibles
 */

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

$page_mode    = $settings['page_mode'] ?? 'maintenance';
$status_text  = $settings['maintenance_enabled'] ? ( $page_mode === 'coming_soon' ? __('COMING SOON', 'maintenance-genius') : 'ON' ) : 'OFF';
$status_class = $settings['maintenance_enabled'] ? 'active' : 'inactive';
$access_duration = $settings['visitor_access_duration'] ?? 86400;

$bg1_opacity = $settings['bg_color_1_opacity'] ?? 100;
$bg2_opacity = $settings['bg_color_2_opacity'] ?? 100;
$title_opacity = $settings['title_opacity'] ?? 100;
$message_opacity = $settings['message_opacity'] ?? 100;
$button_opacity = $settings['button_opacity'] ?? 100;
$bg_overlay = $settings['bg_overlay_opacity'] ?? 50;

$container_bg = $settings['container_bg_color'] ?? '#ffffff';
$container_opacity = $settings['container_bg_opacity'] ?? 95;
$container_shadow = $settings['container_shadow_enabled'] ?? true;
$container_shadow_intensity = $settings['container_shadow_intensity'] ?? 30;

$title_font = $settings['title_font'] ?? 'Poppins';
$message_font = $settings['message_font'] ?? 'Open Sans';

$container_max_width = $settings['container_max_width'] ?? 600;
$container_padding = $settings['container_padding'] ?? 60;
$container_border_radius = $settings['container_border_radius'] ?? 20;

$animation_enabled = $settings['animation_enabled'] ?? true;
$logo_animation = $settings['logo_animation'] ?? 'pulse';
$text_animation = $settings['text_animation'] ?? 'fadeIn';
$button_animation = $settings['button_animation'] ?? 'slideUp';
$animation_duration = $settings['animation_duration'] ?? 1000;

$presets = MG_Settings::get_presets();

$mg_themes      = MG_Settings::get_themes();
if ( ( $settings['page_mode'] ?? 'maintenance' ) === 'coming_soon' && isset( $mg_themes['horizon'] ) ) {
    $mg_themes = [ 'horizon' => $mg_themes['horizon'] ] + array_diff_key( $mg_themes, [ 'horizon' => null ] );
}
$mg_active_theme = MG_Settings::get_active_theme();
$mg_has_snapshot = MG_Settings::has_theme_snapshot();

$roles = MG_Settings::get_roles();
$countries = MG_Settings::get_countries();

$has_visitor_password = !empty($settings['visitor_password']);

$is_pro = get_option('mg_license_valid', false);
$license_key = get_option('mg_license_key', '');

$wizard_completed = get_option('mg_wizard_completed', false);
$wizard_needed = !$wizard_completed;
?>
        <div class="mg-wrapper<?php echo esc_attr( $is_pro ? ' mg-is-pro' : '' ); ?>">

            <!-- Header avec gradient -->
            <div class="mg-header">
                <div class="mg-header-content">
                    <div class="mg-header-left">
                        <img src="<?php echo esc_url( MG_PLUGIN_URL . 'assets/images/mg-logo-header.png' ); ?>" alt="Maintenance GENIUS" class="mg-header-logo" style="height: 56px; width: auto; margin-right: 16px; vertical-align: middle;">
                        <h1><?php esc_html_e('Maintenance GENIUS', 'maintenance-genius'); ?></h1>
                        <?php                        $mg_update = class_exists('MG_Updates') ? MG_Updates::get_available_update() : null; ?>
                        <?php if ($mg_update): ?>
                        <span class="mg-version mg-version-update" id="mg-update-badge" role="button" tabindex="0" aria-haspopup="true" aria-expanded="false" title="<?php esc_attr_e('Update available — click for details', 'maintenance-genius'); ?>">
                            v<?php echo esc_html( MG_VERSION ); ?> → <?php echo esc_html($mg_update['version']); ?>
                        </span>
                        <div id="mg-update-panel" style="display:none;" data-version="<?php echo esc_attr($mg_update['version']); ?>">
                            <div class="mg-update-panel-head">
                                🚀 <strong><?php printf(esc_html__('Version %s available', 'maintenance-genius'), esc_html($mg_update['version'])); ?></strong>
                                <?php if (!empty($mg_update['date'])): ?><span class="mg-update-date"><?php echo esc_html($mg_update['date']); ?></span><?php endif; ?>
                            </div>
                            <?php if (!empty($mg_update['changelog'])): ?>
                            <div class="mg-update-changelog"><?php echo nl2br(esc_html($mg_update['changelog'])); ?></div>
                            <?php endif; ?>
                            <div class="mg-update-panel-actions">
                                <a href="<?php echo esc_url($mg_update['download_url']); ?>" target="_blank" rel="noopener" class="mg-btn-update-download">⬇ <?php esc_html_e('Download the update', 'maintenance-genius'); ?></a>
                                <button type="button" class="mg-btn-update-later" id="mg-update-later"><?php esc_html_e('Later', 'maintenance-genius'); ?></button>
                            </div>
                        </div>
                        <?php else: ?>
                        <span class="mg-version">v<?php echo esc_html( MG_VERSION ); ?></span>
                        <?php endif; ?>
                        <?php if ($is_pro): ?>
                        <span class="mg-license-badge">
                            <svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/></svg>
                            PRO
                        </span>
                        <?php endif; ?>
                    </div>
                    <div class="mg-header-right">
                        <span class="mg-toggle-label" id="mg-mode-label"><?php echo $page_mode === 'coming_soon' ? esc_html__('COMING SOON MODE', 'maintenance-genius') : esc_html__('MAINTENANCE MODE', 'maintenance-genius'); ?></span>
                        <label class="mg-switch-modern">
                            <input type="checkbox" id="mg-toggle" data-tooltip="<?php esc_attr_e('Enable/disable maintenance mode', 'maintenance-genius'); ?>" data-tooltip-pos="bottom" <?php checked($settings['maintenance_enabled'], true); ?>>
                            <span class="mg-slider-modern"></span>
                        </label>
                        <span class="mg-status-badge <?php echo esc_attr( $status_class ); ?><?php echo ( $settings['maintenance_enabled'] && $page_mode === 'coming_soon' ) ? ' coming-soon' : ''; ?>" id="mg-status-badge">
                            <?php echo esc_html( $status_text ); ?>
                        </span>
                        <?php
                        if (class_exists('MG_Diagnostic') && !empty($settings['maintenance_enabled'])) {
                            $mg_503_badge = MG_Diagnostic::section_badge('http503');
                            if ('' === $mg_503_badge) {
                                $mg_503_badge = MG_Diagnostic::section_badge('mu_plugin');
                            }
                            echo $mg_503_badge; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped inside section_badge()
                        }
                        ?>
                    </div>
                </div>
            </div>

            <?php
            // Affiché seulement pour les échecs qui trahissent la promesse produit.
            $mg_diag_banner = class_exists('MG_Diagnostic') ? MG_Diagnostic::get_critical_banner() : null;
            if ($mg_diag_banner && !get_transient('mg_diag_banner_dismissed_' . $mg_diag_banner['check_id'])) :
            ?>
            <div class="mg-diag-banner" id="mg-diag-banner" data-check="<?php echo esc_attr($mg_diag_banner['check_id']); ?>" role="alert">
                <span class="mg-diag-banner-icon" aria-hidden="true">🚨</span>
                <span class="mg-diag-banner-text"><?php echo esc_html($mg_diag_banner['message']); ?></span>
                <button type="button" class="mg-btn mg-btn-sm" id="mg-diag-banner-view"><?php esc_html_e('View diagnostic', 'maintenance-genius'); ?></button>
                <button type="button" class="mg-diag-banner-close" id="mg-diag-banner-close" aria-label="<?php esc_attr_e('Dismiss', 'maintenance-genius'); ?>">&times;</button>
            </div>
            <?php endif; ?>

            <!-- Navigation par onglets -->
            <div class="mg-tabs-wrapper">
                <!-- v2.9.80 — Barre de recherche réglages -->
                <div class="mg-settings-search">
                    <svg class="mg-search-icon" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                    <input type="search" id="mg-settings-search" class="mg-settings-search-input" placeholder="<?php esc_attr_e('Search a setting…', 'maintenance-genius'); ?>" autocomplete="off">
                    <button type="button" id="mg-settings-search-clear" class="mg-settings-search-clear" aria-label="<?php esc_attr_e('Clear', 'maintenance-genius'); ?>" hidden>&times;</button>
                    <span class="mg-search-count" id="mg-search-count" aria-live="polite" data-empty="<?php esc_attr_e('No setting found', 'maintenance-genius'); ?>"></span>
                </div>
                <div class="mg-tabs">
                    <button type="button" class="mg-tab active" data-tab="general"><?php esc_html_e('General', 'maintenance-genius'); ?></button>
                    <button type="button" class="mg-tab" data-tab="design"><?php esc_html_e('Appearance', 'maintenance-genius'); ?></button>
                    <button type="button" class="mg-tab" data-mg-level="advanced" data-tab="access"><?php esc_html_e('Access', 'maintenance-genius'); ?></button>
                    <?php
                    $mg_diag_counts = class_exists('MG_Diagnostic') ? MG_Diagnostic::get_badge_counts() : ['fails' => 0, 'warns' => 0, 'never' => true];
                    ?>
                    <button type="button" class="mg-tab" data-tab="diagnostic">
                        🩺 <?php esc_html_e('Diagnostic', 'maintenance-genius'); ?>
                        <?php if ($mg_diag_counts['fails'] > 0) : ?>
                        <span class="mg-diag-pill mg-diag-pill-fail" title="<?php esc_attr_e('Issues detected — open the Diagnostic tab', 'maintenance-genius'); ?>"><?php echo intval($mg_diag_counts['fails']); ?></span>
                        <?php elseif ($mg_diag_counts['warns'] > 0) : ?>
                        <span class="mg-diag-pill mg-diag-pill-warn" title="<?php esc_attr_e('Warnings detected — open the Diagnostic tab', 'maintenance-genius'); ?>"><?php echo intval($mg_diag_counts['warns']); ?></span>
                        <?php endif; ?>
                    </button>
                    <button type="button" class="mg-tab" data-mg-level="advanced" data-tab="help">
                        <span style="margin-right:3px;">🤖</span><?php esc_html_e('AI', 'maintenance-genius'); ?>
                    </button>
                    <button type="button" class="mg-tab" data-mg-level="advanced" data-tab="advanced" data-panels="tab-seo tab-monitoring">
                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align: -2px; margin-right: 3px;">
                            <circle cx="12" cy="12" r="3"/>
                            <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 8 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H2a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4 8a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H8a1.65 1.65 0 0 0 1-1.51V2a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H22a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/>
                        </svg>
                        <?php esc_html_e('Advanced', 'maintenance-genius'); ?>
                    </button>
                    <button type="button" class="mg-tab mg-tab-pro" data-tab="pro">
                        <?php if ( $is_pro ) : ?>
                        <span style="color: #16A34A;">&#9679;</span> <?php esc_html_e( 'License', 'maintenance-genius' ); ?>
                        <?php else : ?>
                        <span style="color: #f39c12;">&#9733;</span> PRO
                        <?php endif; ?>
                    </button>
                    <div class="mg-mode-switch" role="group" aria-label="<?php esc_attr_e('Display mode', 'maintenance-genius'); ?>">
                        <button type="button" class="mg-mode-seg is-active" data-mode="simple"><?php esc_html_e('Simple', 'maintenance-genius'); ?></button>
                        <button type="button" class="mg-mode-seg" data-mode="expert"><?php esc_html_e('Expert', 'maintenance-genius'); ?></button>
                    </div>
                </div>
            </div>

            <!-- Bandeau mode simple -->
            <div class="mg-mode-hint">
                <?php esc_html_e('Simple mode shows only the essentials.', 'maintenance-genius'); ?>
                <button type="button" class="mg-mode-hint-link" data-mode="expert"><?php esc_html_e('Switch to Expert for all settings', 'maintenance-genius'); ?></button>
            </div>

            <!-- Contenu principal -->
            <div class="mg-content">

                <!-- Onglet General -->
                <div class="mg-tab-content active" id="tab-general">
                    <div class="mg-card">
                        <div class="mg-card-header">
                            <h2><?php esc_html_e('General Configuration', 'maintenance-genius'); ?></h2>
                            <div class="mg-accordion-controls">
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-expand-all"><?php esc_html_e('Expand All', 'maintenance-genius'); ?></button>
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-collapse-all"><?php esc_html_e('Collapse All', 'maintenance-genius'); ?></button>
                            </div>
                        </div>
                        <div class="mg-card-body">

                            <form id="mg-settings-form">

                                <!-- v2.9.119 — MODE SELECTOR : Maintenance vs Coming Soon -->
                                <div class="mg-mode-selector">
                                    <label class="mg-mode-selector-label"><?php esc_html_e('Page Mode', 'maintenance-genius'); ?></label>
                                    <div class="mg-mode-selector-options">
                                        <label class="mg-mode-option <?php echo esc_attr( $page_mode === 'maintenance' ? 'is-active' : '' ); ?>">
                                            <input type="radio" name="page_mode" value="maintenance" <?php checked($page_mode, 'maintenance'); ?>>
                                            <span class="mg-mode-option-icon">🔧</span>
                                            <span class="mg-mode-option-title"><?php esc_html_e('Maintenance', 'maintenance-genius'); ?></span>
                                            <span class="mg-mode-option-desc"><?php esc_html_e('HTTP 503 — site temporarily unavailable. Search engines will not index.', 'maintenance-genius'); ?></span>
                                        </label>
                                        <label class="mg-mode-option <?php echo esc_attr( $page_mode === 'coming_soon' ? 'is-active' : '' ); ?>">
                                            <input type="radio" name="page_mode" value="coming_soon" <?php checked($page_mode, 'coming_soon'); ?>>
                                            <span class="mg-mode-option-icon">🚀</span>
                                            <span class="mg-mode-option-title"><?php esc_html_e('Coming Soon', 'maintenance-genius'); ?></span>
                                            <span class="mg-mode-option-desc"><?php esc_html_e('HTTP 200 — site accessible to search engines. Noindex meta only.', 'maintenance-genius'); ?></span>
                                        </label>
                                    </div>
                                </div>

                                <!-- ACCORDION: Titre & Message -->
                                <div class="mg-accordion is-open">
                                    <div class="mg-accordion-header">
                                        <span class="mg-accordion-arrow">▶</span>
                                        <h3 class="mg-accordion-title">📝 <?php esc_html_e('Title & Message', 'maintenance-genius'); ?></h3>
                                        <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Configure the main title and message displayed to your visitors during maintenance.', 'maintenance-genius'); ?>">?</span>
                                        <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    </div>
                                    <div class="mg-accordion-body" style="display:block;">

                                <!-- Titre -->
                                <div class="mg-form-group">
                                    <label for="mg-title">
                                        <?php esc_html_e('Page Title', 'maintenance-genius'); ?>
                                        <span class="mg-field-tag">H1</span>
                                        <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Displayed as the H1 heading on the maintenance page. Keep it short and informative.', 'maintenance-genius'); ?>">?</span>
                                    </label>
                                    <input
                                        type="text"
                                        id="mg-title" title="<?php esc_attr_e('Main H1 heading displayed on the maintenance page', 'maintenance-genius'); ?>"
                                        name="title"
                                        value="<?php echo esc_attr($settings['title']); ?>"
                                        placeholder="<?php esc_attr_e('Site Under Maintenance', 'maintenance-genius'); ?>"
                                    >
                                </div>

                                <!-- Sous-titre (H2) -->
                                <div class="mg-form-group">
                                    <label for="mg-subtitle">
                                        <?php esc_html_e('Subtitle', 'maintenance-genius'); ?>
                                        <span class="mg-field-tag">H2</span>
                                        <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Optional. Rendered as the H2 heading, between the title and the message. Leave empty to output no H2. Useful for SEO in coming-soon mode.', 'maintenance-genius'); ?>">?</span>
                                    </label>
                                    <input
                                        type="text"
                                        id="mg-subtitle" title="<?php esc_attr_e('Optional H2 heading shown under the title', 'maintenance-genius'); ?>"
                                        name="subtitle"
                                        value="<?php echo esc_attr($settings['subtitle']); ?>"
                                        placeholder="<?php esc_attr_e('e.g. Back online shortly', 'maintenance-genius'); ?>"
                                    >
                                </div>

                                <!-- Message -->
                                <div class="mg-form-group">
                                    <label for="mg-message">
                                        <?php esc_html_e('Message to visitors', 'maintenance-genius'); ?>
                                        <span class="mg-field-tag mg-field-tag--soft"><?php esc_html_e('paragraph', 'maintenance-genius'); ?></span>
                                        <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Rendered as a paragraph (not a heading). Briefly explain why the site is under maintenance and when it will be back.', 'maintenance-genius'); ?>">?</span>
                                    </label>
                                    <textarea
                                        id="mg-message" title="<?php esc_attr_e('Explanatory message for your visitors', 'maintenance-genius'); ?>"
                                        name="message"
                                        rows="4"
                                        placeholder="<?php esc_attr_e('We are currently performing maintenance...', 'maintenance-genius'); ?>"
                                    ><?php echo esc_textarea($settings['message']); ?></textarea>
                                </div>

                                    </div>
                                </div><!-- Fin ACCORDION Titre & Message -->

                                <!-- ACCORDION: Maintenance Programmée (PRO) -->
                                <div data-mg-level="advanced" class="mg-accordion">
                                    <div class="mg-accordion-header">
                                        <span class="mg-accordion-arrow">▶</span>
                                        <h3 class="mg-accordion-title">🗓️ <?php esc_html_e('Scheduled Maintenance', 'maintenance-genius'); ?></h3>
                                        <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Schedule automatic activation and deactivation of maintenance mode at specific dates and times.', 'maintenance-genius'); ?>">?</span>
                                        <?php if (!empty($settings['schedule_enabled'])): ?>
                                        <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                        <?php else: ?>
                                        <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                        <?php endif; ?>
                                    </div>
                                    <div class="mg-accordion-body">

                                <!-- Section Maintenance Programmée (v2.6.28 PRO) -->
                                <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                                <?php if (!$is_pro): ?>
                                <a href="#tab-pro" class="mg-pro-locked-overlay">
                                    🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                                </a>
                                <?php endif; ?>
                                
                                <h3 class="mg-section-title">
                                    🗓️ <?php esc_html_e('Scheduled Maintenance', 'maintenance-genius'); ?>
                                    <span class="mg-pro-badge">PRO</span>
                                    <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Schedule automatic activation and deactivation of maintenance at specific dates and times.', 'maintenance-genius'); ?>" data-tooltip-pos="right">?</span>
                                </h3>

                                <div class="mg-form-group">
                                    <label class="mg-checkbox-label">
                                        <input type="checkbox" id="mg-schedule-enabled" 
                                               <?php checked($settings['schedule_enabled'] ?? false, true); ?>
                                               <?php disabled(!$is_pro); ?>>
                                        <?php esc_html_e('Enable automatic scheduling', 'maintenance-genius'); ?>
                                    </label>
                                </div>

                                <div id="mg-schedule-options" style="<?php echo empty($settings['schedule_enabled']) ? 'display:none;' : ''; ?>">
                                    
                                    <!-- Fuseau horaire -->
                                    <div class="mg-form-group">
                                        <label for="mg-schedule-timezone">
                                            <?php esc_html_e('Timezone', 'maintenance-genius'); ?>
                                            <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Select your timezone so the times are correct.', 'maintenance-genius'); ?>" data-tooltip-pos="right">?</span>
                                        </label>
                                        <select id="mg-schedule-timezone" <?php disabled(!$is_pro); ?>>
                                            <?php
                                            $current_tz = $settings['schedule_timezone'] ?? 'America/Montreal';
                                            $timezones = [
                                                'America/Montreal' => '🇨🇦 Montréal (EST)',
                                                'America/Toronto' => '🇨🇦 Toronto (EST)',
                                                'America/Vancouver' => '🇨🇦 Vancouver (PST)',
                                                'America/New_York' => '🇺🇸 New York (EST)',
                                                'America/Los_Angeles' => '🇺🇸 Los Angeles (PST)',
                                                'America/Chicago' => '🇺🇸 Chicago (CST)',
                                                'Europe/Paris' => '🇫🇷 Paris (CET)',
                                                'Europe/London' => '🇬🇧 Londres (GMT)',
                                                'Europe/Brussels' => '🇧🇪 Bruxelles (CET)',
                                                'Europe/Zurich' => '🇨🇭 Zurich (CET)',
                                                'UTC' => '🌍 UTC'
                                            ];
                                            foreach ($timezones as $tz => $label): ?>
                                                <option value="<?php echo esc_attr($tz); ?>" <?php selected($current_tz, $tz); ?>><?php echo esc_html($label); ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>

                                    <!-- Début de maintenance -->
                                    <div class="mg-form-row">
                                        <div class="mg-form-group mg-half">
                                            <label for="mg-schedule-start-date">
                                                📅 <?php esc_html_e('Start date', 'maintenance-genius'); ?>
                                            </label>
                                            <input type="date" id="mg-schedule-start-date" 
                                                   value="<?php echo esc_attr($settings['schedule_start_date'] ?? ''); ?>"
                                                   <?php disabled(!$is_pro); ?>>
                                        </div>
                                        <div class="mg-form-group mg-half">
                                            <label for="mg-schedule-start-time">
                                                🕐 <?php esc_html_e('Start time', 'maintenance-genius'); ?>
                                            </label>
                                            <input type="time" id="mg-schedule-start-time" 
                                                   value="<?php echo esc_attr($settings['schedule_start_time'] ?? ''); ?>"
                                                   <?php disabled(!$is_pro); ?>>
                                        </div>
                                    </div>

                                    <!-- Fin de maintenance -->
                                    <div class="mg-form-row">
                                        <div class="mg-form-group mg-half">
                                            <label for="mg-schedule-end-date">
                                                📅 <?php esc_html_e('End date', 'maintenance-genius'); ?>
                                            </label>
                                            <input type="date" id="mg-schedule-end-date" 
                                                   value="<?php echo esc_attr($settings['schedule_end_date'] ?? ''); ?>"
                                                   <?php disabled(!$is_pro); ?>>
                                        </div>
                                        <div class="mg-form-group mg-half">
                                            <label for="mg-schedule-end-time">
                                                🕐 <?php esc_html_e('End time', 'maintenance-genius'); ?>
                                            </label>
                                            <input type="time" id="mg-schedule-end-time" 
                                                   value="<?php echo esc_attr($settings['schedule_end_time'] ?? ''); ?>"
                                                   <?php disabled(!$is_pro); ?>>
                                        </div>
                                    </div>

                                    <!-- Status actuel -->
                                    <div id="mg-schedule-status" class="mg-info-box" style="background: #e8f5e9; border-left: 4px solid #4caf50; padding: 12px; border-radius: 4px; margin-top: 10px;">
                                        <?php
                                        $schedule_start = ($settings['schedule_start_date'] ?? '') . ' ' . ($settings['schedule_start_time'] ?? '');
                                        $schedule_end = ($settings['schedule_end_date'] ?? '') . ' ' . ($settings['schedule_end_time'] ?? '');
                                        $tz = new DateTimeZone($settings['schedule_timezone'] ?? 'America/Montreal');
                                        $now = new DateTime('now', $tz);
                                        
                                        if (!empty($settings['schedule_start_date']) && !empty($settings['schedule_end_date'])):
                                            $start_dt = DateTime::createFromFormat('Y-m-d H:i', trim($schedule_start), $tz);
                                            $end_dt = DateTime::createFromFormat('Y-m-d H:i', trim($schedule_end), $tz);
                                        ?>
                                        <p style="margin: 0; font-size: 13px; color: #2e7d32;">
                                            <strong>📊 <?php esc_html_e('Active schedule:', 'maintenance-genius'); ?></strong><br>
                                            🟢 <?php esc_html_e('Start:', 'maintenance-genius'); ?> <?php echo esc_html( $start_dt ? date_i18n('Y-m-d H:i', $start_dt->getTimestamp()) : __('Not set', 'maintenance-genius') ); ?><br>
                                            🔴 <?php esc_html_e('End:', 'maintenance-genius'); ?> <?php echo esc_html( $end_dt ? date_i18n('Y-m-d H:i', $end_dt->getTimestamp()) : __('Not set', 'maintenance-genius') ); ?><br>
                                            🕐 <?php esc_html_e('Current time:', 'maintenance-genius'); ?> <?php echo esc_html( date_i18n('Y-m-d H:i') ); ?>
                                        </p>
                                        <?php else: ?>
                                        <p style="margin: 0; font-size: 13px; color: #666;">
                                            💡 <?php esc_html_e('Configure the dates and times above to schedule your maintenance.', 'maintenance-genius'); ?>
                                        </p>
                                        <?php endif; ?>
                                    </div>

                                    <div class="mg-info-box" style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px; border-radius: 4px; margin-top: 10px;">
                                        <p style="margin: 0; font-size: 13px; color: #856404;">
                                            ⚠️ <strong><?php esc_html_e('Important:', 'maintenance-genius'); ?></strong> <?php esc_html_e('Verification is done on each visit. For maximum precision, make sure your server has good time synchronization.', 'maintenance-genius'); ?>
                                        </p>
                                    </div>
                                </div>
                                </div><!-- Fin Maintenance Programmée -->

                                    </div>
                                </div><!-- Fin ACCORDION Maintenance Programmée -->

                                <!-- ACCORDION: Notification Email -->
                                <div data-mg-level="advanced" class="mg-accordion">
                                    <div class="mg-accordion-header">
                                        <span class="mg-accordion-arrow">▶</span>
                                        <h3 class="mg-accordion-title">📧 <?php esc_html_e('Email Notifications', 'maintenance-genius'); ?></h3>
                                        <?php if (class_exists('MG_Diagnostic')) { echo MG_Diagnostic::section_badge('email'); /* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped inside section_badge() */ } ?>
                                        <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Allow visitors to subscribe and be notified when the site is back online. Emails are sent automatically.', 'maintenance-genius'); ?>">?</span>
                                        <?php if (!empty($settings['notification_enabled'])): ?>
                                        <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                        <?php else: ?>
                                        <span class="mg-accordion-badge mg-badge-default">○</span>
                                        <?php endif; ?>
                                    </div>
                                    <div class="mg-accordion-body">

                                <div class="mg-form-group">
                                    <label class="mg-checkbox-label">
                                        <input
                                            type="checkbox"
                                            id="mg-notification-enabled"
                                            name="notification_enabled"
                                            <?php checked(!empty($settings['notification_enabled']), true); ?>
                                        >
                                        <?php esc_html_e('Enable "Notify me" form', 'maintenance-genius'); ?>
                                    </label>
                                    <p class="mg-field-description">
                                        <?php esc_html_e('Displays a button allowing visitors to leave their email to be notified.', 'maintenance-genius'); ?>
                                    </p>
                                </div>

                                <div id="mg-notification-options" style="<?php echo empty($settings['notification_enabled']) ? 'display:none;' : ''; ?>">
                                    <div class="mg-form-group">
                                        <label for="mg-notification-button-text"><?php esc_html_e('Button text', 'maintenance-genius'); ?></label>
                                        <input type="text" id="mg-notification-button-text" 
                                               value="<?php echo esc_attr($settings['notification_button_text'] ?? 'Me notifier'); ?>"
                                               placeholder="Me notifier">
                                    </div>
                                    
                                    <div class="mg-form-group">
                                        <label for="mg-notification-success-msg"><?php esc_html_e('Confirmation message', 'maintenance-genius'); ?></label>
                                        <input type="text" id="mg-notification-success-msg" 
                                               value="<?php echo esc_attr($settings['notification_success_msg'] ?? __('Thank you! You will be notified as soon as the site is back online.', 'maintenance-genius')); ?>"
                                               placeholder="<?php esc_attr_e('Thank you! You will be notified...', 'maintenance-genius'); ?>">
                                    </div>

                                    <?php 
                                    $notification_emails = MG_Settings::get_notification_emails();
                                    $email_count = count($notification_emails);
                                    ?>
                                    <div class="mg-notification-stats" style="background: #f0f7ff; padding: 15px; border-radius: 8px; margin-top: 15px;">
                                        <p style="margin: 0;">
                                            <strong>📊 Emails collectés :</strong> 
                                            <span id="mg-email-count"><?php echo intval( $email_count ); ?></span>
                                            <?php if ($email_count > 0): ?>
                                            <button type="button" class="mg-btn mg-btn-sm mg-btn-secondary" id="mg-export-emails" style="margin-left: 10px;">
                                                📥 <?php esc_html_e('Export CSV', 'maintenance-genius'); ?>
                                            </button>
                                            <button type="button" class="mg-btn mg-btn-sm mg-btn-danger" id="mg-clear-emails" style="margin-left: 5px;">
                                                🗑️ Vider
                                            </button>
                                            <?php endif; ?>
                                        </p>
                                    </div>
                                </div>

                                    </div>
                                </div><!-- Fin ACCORDION Notification -->

                                <!-- ACCORDION: Countdown (FREE — v2.9.126) -->
                                <div data-mg-level="advanced" class="mg-accordion">
                                    <div class="mg-accordion-header">
                                        <span class="mg-accordion-arrow">▶</span>
                                        <h3 class="mg-accordion-title">⏰ <?php esc_html_e('Countdown Timer', 'maintenance-genius'); ?></h3>
                                        <?php if (class_exists('MG_Diagnostic')) { echo MG_Diagnostic::section_badge('cron'); /* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped inside section_badge() */ } ?>
                                        <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Display a countdown timer to show visitors when the site will be back online. Creates anticipation!', 'maintenance-genius'); ?>">?</span>
                                        <?php if (!empty($settings['countdown_enabled'])): ?>
                                        <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                        <?php endif; ?>
                                    </div>
                                    <div class="mg-accordion-body">

                                <div style="position: relative;">

                                <div class="mg-form-group">
                                    <label class="mg-checkbox-label">
                                        <input
                                            type="checkbox"
                                            id="mg-countdown-enabled"
                                            name="countdown_enabled"
                                            <?php checked(!empty($settings['countdown_enabled']), true); ?>
                                        >
                                        <?php esc_html_e('Enable countdown timer', 'maintenance-genius'); ?>
                                    </label>
                                </div>

                                <div id="mg-countdown-options" style="<?php echo empty($settings['countdown_enabled']) ? 'display:none;' : ''; ?>">

                                    <?php
                                    $wp_tz_string = get_option( 'timezone_string' );
                                    $wp_tz_offset = get_option( 'gmt_offset' );
                                    if ( ! empty( $wp_tz_string ) ) {
                                        try {
                                            $tz_obj = new DateTimeZone( $wp_tz_string );
                                            $now = new DateTime( 'now', $tz_obj );
                                            $offset_hours = $tz_obj->getOffset( $now ) / 3600;
                                            $tz_label = $wp_tz_string . ' (UTC' . ( $offset_hours >= 0 ? '+' : '' ) . $offset_hours . ')';
                                        } catch ( Exception $e ) {
                                            $tz_label = $wp_tz_string;
                                        }
                                        $is_suspect = false;
                                    } else {
                                        $tz_label = 'UTC' . ( $wp_tz_offset >= 0 ? '+' : '' ) . $wp_tz_offset;
                                        // Détection suspecte : UTC sans offset = défaut WordPress jamais changé
                                        $is_suspect = ( $wp_tz_offset == 0 );
                                    }
                                    ?>
                                    <div class="mg-tz-note" style="display:flex;gap:12px;align-items:flex-start;padding:12px 16px;margin-bottom:20px;background:<?php echo esc_attr( $is_suspect ? '#fef2f2' : '#fff7ed' ); ?>;border-left:4px solid <?php echo esc_attr( $is_suspect ? '#dc2626' : '#F97316' ); ?>;border-radius:4px;font-size:13px;line-height:1.5;">
                                        <span style="font-size:18px;flex-shrink:0;"><?php echo esc_html( $is_suspect ? '⚠️' : 'ℹ️' ); ?></span>
                                        <div style="flex:1;">
                                            <strong style="color:<?php echo esc_attr( $is_suspect ? '#991b1b' : '#9a3412' ); ?>;">
                                                <?php
                                                echo esc_html(
                                                    $is_suspect
                                                        ? __( 'Timezone alert', 'maintenance-genius' )
                                                        : __( 'Important — Verify your WordPress timezone', 'maintenance-genius' )
                                                );
                                                ?>
                                            </strong>
                                            <div style="margin-top:4px;color:#374151;">
                                                <?php
                                                if ( $is_suspect ) :
                                                    esc_html_e( 'Your timezone is set to UTC (default WordPress value). Countdown calculations may be incorrect. Please update it in', 'maintenance-genius' );
                                                else :
                                                    esc_html_e( 'The countdown uses your WordPress timezone. Current setting:', 'maintenance-genius' );
                                                endif;
                                                ?>
                                                <strong style="color:<?php echo $is_suspect ? '#991b1b' : '#F97316'; ?>;"><?php echo esc_html( $tz_label ); ?></strong>
                                                <a href="<?php echo esc_url( admin_url( 'options-general.php#timezone_string' ) ); ?>" target="_blank" style="color:#F97316;font-weight:600;text-decoration:none;margin-left:8px;">
                                                    <?php esc_html_e( 'Modify timezone', 'maintenance-genius' ); ?> →
                                                </a>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mg-form-row">
                                        <div class="mg-form-group mg-half">
                                            <label for="mg-countdown-date">
                                                <?php esc_html_e('End date', 'maintenance-genius'); ?>
                                                <span class="mg-info-tooltip" data-tooltip="<?php
                                                    /* translators: %s: WordPress timezone label */
                                                    echo esc_attr( sprintf( __( 'Date when the site will go live. Uses WordPress timezone: %s. Adjust accordingly.', 'maintenance-genius' ), $tz_label ) );
                                                ?>" data-tooltip-pos="bottom">?</span>
                                            </label>
                                            <input type="date" id="mg-countdown-date" 
                                                   value="<?php echo esc_attr($settings['countdown_date'] ?? ''); ?>"
                                                   min="<?php echo esc_attr( gmdate('Y-m-d') ); ?>">
                                        </div>
                                        <div class="mg-form-group mg-half">
                                            <label for="mg-countdown-time">
                                                <?php esc_html_e('End time', 'maintenance-genius'); ?>
                                                <span class="mg-info-tooltip" data-tooltip="<?php
                                                    /* translators: %s: WordPress timezone label */
                                                    echo esc_attr( sprintf( __( 'Time when the site will go live. Uses WordPress timezone: %s. Adjust accordingly.', 'maintenance-genius' ), $tz_label ) );
                                                ?>" data-tooltip-pos="bottom">?</span>
                                            </label>
                                            <input type="time" id="mg-countdown-time" 
                                                   value="<?php echo esc_attr($settings['countdown_time'] ?? '00:00'); ?>">
                                        </div>
                                    </div>

                                    <div class="mg-form-group">
                                        <label for="mg-countdown-title"><?php esc_html_e('Title above countdown', 'maintenance-genius'); ?></label>
                                        <input type="text" id="mg-countdown-title" 
                                               value="<?php echo esc_attr($settings['countdown_title'] ?? 'Lancement dans'); ?>"
                                               placeholder="<?php esc_attr_e('Launching in', 'maintenance-genius'); ?>">
                                    </div>

                                    <div class="mg-form-group">
                                        <label for="mg-countdown-end-text"><?php esc_html_e('Message when countdown ends', 'maintenance-genius'); ?></label>
                                        <input type="text" id="mg-countdown-end-text" 
                                               value="<?php echo esc_attr($settings['countdown_end_text'] ?? 'Le site est maintenant en ligne !'); ?>"
                                               placeholder="<?php esc_attr_e('The site is now online!', 'maintenance-genius'); ?>">
                                    </div>

                                    <div class="mg-form-group">
                                        <label for="mg-countdown-style"><?php esc_html_e('Display style', 'maintenance-genius'); ?></label>
                                        <select id="mg-countdown-style">
                                            <option value="boxes" <?php selected($settings['countdown_style'] ?? 'boxes', 'boxes'); ?>>📦 <?php esc_html_e('Boxes (modern)', 'maintenance-genius'); ?></option>
                                            <option value="minimal" <?php selected($settings['countdown_style'] ?? 'boxes', 'minimal'); ?>>✨ <?php esc_html_e('Minimal', 'maintenance-genius'); ?></option>
                                            <option value="circles" <?php selected($settings['countdown_style'] ?? 'boxes', 'circles'); ?>>⭕ <?php esc_html_e('Circles', 'maintenance-genius'); ?></option>
                                        </select>
                                    </div>

                                    <div class="mg-separator" style="margin: 15px 0;"></div>
                                    <p class="mg-field-description" style="margin-bottom: 10px;"><strong><?php esc_html_e('Display:', 'maintenance-genius'); ?></strong></p>
                                    
                                    <div class="mg-form-row" style="flex-wrap: wrap; gap: 15px;">
                                        <label class="mg-checkbox-label" style="flex: none;">
                                            <input type="checkbox" id="mg-countdown-show-days" 
                                                   <?php checked($settings['countdown_show_days'] ?? true, true); ?>>
                                            <?php esc_html_e('Days', 'maintenance-genius'); ?>
                                        </label>
                                        <label class="mg-checkbox-label" style="flex: none;">
                                            <input type="checkbox" id="mg-countdown-show-hours" 
                                                   <?php checked($settings['countdown_show_hours'] ?? true, true); ?>>
                                            <?php esc_html_e('Hours', 'maintenance-genius'); ?>
                                        </label>
                                        <label class="mg-checkbox-label" style="flex: none;">
                                            <input type="checkbox" id="mg-countdown-show-minutes" 
                                                   <?php checked($settings['countdown_show_minutes'] ?? true, true); ?>>
                                            <?php esc_html_e('Minutes', 'maintenance-genius'); ?>
                                        </label>
                                        <label class="mg-checkbox-label" style="flex: none;">
                                            <input type="checkbox" id="mg-countdown-show-seconds" 
                                                   <?php checked($settings['countdown_show_seconds'] ?? true, true); ?>>
                                            <?php esc_html_e('Seconds', 'maintenance-genius'); ?>
                                        </label>
                                    </div>

                                    <div class="mg-countdown-preview" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 12px; margin-top: 20px; text-align: center;">
                                        <p style="color: rgba(255,255,255,0.8); margin: 0 0 10px; font-size: 14px;"><?php esc_html_e('Preview (Boxes style)', 'maintenance-genius'); ?></p>
                                        <div style="display: flex; justify-content: center; gap: 10px;">
                                            <div style="background: rgba(255,255,255,0.2); padding: 15px 20px; border-radius: 8px; min-width: 60px;">
                                                <div style="font-size: 28px; font-weight: bold; color: #fff;">07</div>
                                                <div style="font-size: 11px; color: rgba(255,255,255,0.7); text-transform: uppercase;"><?php esc_html_e('Days', 'maintenance-genius'); ?></div>
                                            </div>
                                            <div style="background: rgba(255,255,255,0.2); padding: 15px 20px; border-radius: 8px; min-width: 60px;">
                                                <div style="font-size: 28px; font-weight: bold; color: #fff;">14</div>
                                                <div style="font-size: 11px; color: rgba(255,255,255,0.7); text-transform: uppercase;"><?php esc_html_e('Hours', 'maintenance-genius'); ?></div>
                                            </div>
                                            <div style="background: rgba(255,255,255,0.2); padding: 15px 20px; border-radius: 8px; min-width: 60px;">
                                                <div style="font-size: 28px; font-weight: bold; color: #fff;">32</div>
                                                <div style="font-size: 11px; color: rgba(255,255,255,0.7); text-transform: uppercase;"><?php esc_html_e('Min', 'maintenance-genius'); ?></div>
                                            </div>
                                            <div style="background: rgba(255,255,255,0.2); padding: 15px 20px; border-radius: 8px; min-width: 60px;">
                                                <div style="font-size: 28px; font-weight: bold; color: #fff;">58</div>
                                                <div style="font-size: 11px; color: rgba(255,255,255,0.7); text-transform: uppercase;"><?php esc_html_e('Sec', 'maintenance-genius'); ?></div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="mg-separator" style="margin: 20px 0;"></div>
                                    
                                    <!-- Option désactivation automatique -->
                                    <div class="mg-form-group">
                                        <label class="mg-checkbox-label">
                                            <input type="checkbox" id="mg-countdown-auto-disable" 
                                                   <?php checked($settings['countdown_auto_disable'] ?? true, true); ?>>
                                            🚀 <strong><?php esc_html_e('Automatically disable maintenance when countdown ends', 'maintenance-genius'); ?></strong>
                                        </label>
                                        <p class="mg-field-description" style="margin-left: 25px;">
                                            ✅ <?php esc_html_e('The site will be automatically accessible', 'maintenance-genius'); ?><br>
                                            ✅ <?php esc_html_e('Notification emails will be sent to subscribers', 'maintenance-genius'); ?><br>
                                            ✅ <?php esc_html_e('Visitors will be redirected to the live site', 'maintenance-genius'); ?>
                                        </p>
                                    </div>
                                    
                                    <div class="mg-info-box" style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px; border-radius: 4px; margin-top: 10px;">
                                        <p style="margin: 0; font-size: 13px; color: #856404;">
                                            <strong>💡 <?php esc_html_e('Tip:', 'maintenance-genius'); ?></strong> <?php esc_html_e('If you are not sure the site will be ready on time, disable this option. You can manually disable maintenance when everything is ready.', 'maintenance-genius'); ?>
                                        </p>
                                    </div>
                                </div>
                                </div><!-- Fin wrapper countdown (gratuit v2.9.126) -->

                                    </div>
                                </div><!-- Fin ACCORDION Countdown -->

                                <!-- Boutons d'action -->
                                <div class="mg-form-actions">
                                    <button type="button" class="mg-btn mg-btn-secondary" id="mg-preview-btn" title="<?php esc_attr_e('Preview the page in a new tab', 'maintenance-genius'); ?>">
                                        <?php esc_html_e('Preview', 'maintenance-genius'); ?>
                                    </button>
                                    <button type="submit" class="mg-btn mg-btn-primary">
                                        <?php esc_html_e('Save changes', 'maintenance-genius'); ?>
                                    </button>
                                </div>

                            </form>

                        </div>
                    </div>
                </div>

                <!-- Onglet Personnalisation -->
                <div class="mg-tab-content" id="tab-design" style="display:none;">
                    <div class="mg-card">
                        <div class="mg-card-header">
                            <h2><?php esc_html_e('Page Customization', 'maintenance-genius'); ?></h2>
                            <div class="mg-accordion-controls">
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-expand-all"><?php esc_html_e('Expand All', 'maintenance-genius'); ?></button>
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-collapse-all"><?php esc_html_e('Collapse All', 'maintenance-genius'); ?></button>
                            </div>
                        </div>
                        <div class="mg-card-body">

                            <!-- v2.9.118 — THÈMES COMPLETS : visible en mode Simple, EN PREMIER -->
                            <div class="mg-themes-section" id="mg-themes-section">
                                <div class="mg-themes-header">
                                    <span class="mg-themes-title">🎨 <?php esc_html_e('Complete Themes', 'maintenance-genius'); ?></span>
                                    <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Applies a complete configuration — colors, fonts, layout and animations. Your texts, logo and advanced settings are never modified. Reversible with one click.', 'maintenance-genius'); ?>" data-tooltip-pos="bottom">?</span>
                                    <?php if ($mg_has_snapshot): ?>
                                    <button type="button" class="mg-btn mg-btn-sm mg-btn-secondary" id="mg-revert-theme" title="<?php esc_attr_e('Restore design before last theme', 'maintenance-genius'); ?>">
                                        ↩ <?php esc_html_e('Revert Theme', 'maintenance-genius'); ?>
                                    </button>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-themes-grid" role="list">
                                <?php foreach ($mg_themes as $t_id => $theme):
                                    $is_active = ($mg_active_theme === $t_id);
                                    $from      = esc_attr($theme['css_preview']['from']);
                                    $to        = esc_attr($theme['css_preview']['to']);
                                    $accent    = esc_attr($theme['css_preview']['accent']);
                                ?>
                                    <button
                                        type="button"
                                        class="mg-theme-card<?php echo esc_attr( $is_active ? ' is-active' : '' ); ?>"
                                        data-theme-id="<?php echo esc_attr($t_id); ?>"
                                        aria-label="<?php
                                            /* translators: %s: theme label */
                                            echo esc_attr(sprintf(__('Apply theme %s', 'maintenance-genius'), $theme['label']));
                                        ?>"
                                        role="listitem"
                                    >
                                        <div class="mg-theme-preview" style="background: linear-gradient(135deg, <?php echo esc_attr($from); ?> 0%, <?php echo esc_attr($to); ?> 100%);" aria-hidden="true">
                                            <span class="mg-theme-aa" style="color: <?php echo esc_attr($accent); ?>; font-family: '<?php echo esc_attr($theme['font_preview']); ?>', sans-serif;">Aa</span>
                                            <span class="mg-theme-dot" style="background: <?php echo esc_attr($accent); ?>;"></span>
                                        </div>
                                        <div class="mg-theme-info">
                                            <strong class="mg-theme-label"><?php echo esc_html($theme['label']); ?></strong>
                                            <?php if ($is_active): ?>
                                            <span class="mg-theme-active-badge"><?php esc_html_e('applied', 'maintenance-genius'); ?></span>
                                            <?php endif; ?>
                                            <span class="mg-theme-desc"><?php echo esc_html($theme['description']); ?></span>
                                        </div>
                                    </button>
                                <?php endforeach; ?>
                                </div>
                            </div>
                            <!-- /Thèmes complets -->

                            <div class="mg-group-heading"><span><?php esc_html_e('Identity', 'maintenance-genius'); ?></span></div>
                            <!-- ACCORDION: Logo -->
                            <div class="mg-accordion is-open">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🖼️ <?php esc_html_e('Logo', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Add your logo to personalize the maintenance page with your brand identity.', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['logo_url'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-default">○</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body" style="display:block;">

                            <!-- Logo (v2.5.6 - déplacé ici) -->
                            <div class="mg-form-group">
                                <label><?php esc_html_e('Your site logo', 'maintenance-genius'); ?></label>
                                <p class="mg-field-description"><?php esc_html_e('Add your logo to personalize the maintenance page', 'maintenance-genius'); ?></p>
                                <div class="mg-logo-upload">
                                    <input type="hidden" id="mg-logo-url" name="logo_url" value="<?php echo esc_url($settings['logo_url']); ?>">

                                    <div class="mg-logo-preview" id="mg-logo-preview" style="<?php echo empty($settings['logo_url']) ? 'display:none;' : ''; ?>">
                                        <img src="<?php echo esc_url($settings['logo_url']); ?>" alt="Logo preview">
                                    </div>
                                    
                                    <div class="mg-logo-placeholder" id="mg-logo-placeholder" style="<?php echo !empty($settings['logo_url']) ? 'display:none;' : ''; ?>">
                                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#ccc" stroke-width="1.5">
                                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                            <circle cx="8.5" cy="8.5" r="1.5"/>
                                            <polyline points="21 15 16 10 5 21"/>
                                        </svg>
                                        <p><?php esc_html_e('No logo selected', 'maintenance-genius'); ?></p>
                                    </div>

                                    <div class="mg-logo-buttons">
                                        <button type="button" class="mg-btn mg-btn-secondary" id="mg-upload-logo" title="<?php esc_attr_e('Upload a logo from your library', 'maintenance-genius'); ?>">
                                            <?php esc_html_e('Choose a logo', 'maintenance-genius'); ?>
                                        </button>
                                        <button type="button" class="mg-btn mg-btn-danger" id="mg-remove-logo" title="<?php esc_attr_e('Remove current logo', 'maintenance-genius'); ?>" style="<?php echo empty($settings['logo_url']) ? 'display:none;' : ''; ?>">
                                            <?php esc_html_e('Remove', 'maintenance-genius'); ?>
                                        </button>
                                    </div>
                                    
                                    <!-- Taille du logo (v2.6.10) -->
                                    <div class="mg-form-group" id="mg-logo-size-container" style="margin-top: 15px;<?php echo empty($settings['logo_url']) ? ' display:none;' : ''; ?>">
                                        <label for="mg-logo-size"><?php esc_html_e('Logo size', 'maintenance-genius'); ?></label>
                                        <div class="mg-range-container">
                                            <input type="range" id="mg-logo-size" min="50" max="300" value="<?php echo esc_attr($settings['logo_size'] ?? 150); ?>">
                                            <span class="mg-range-value"><?php echo esc_html($settings['logo_size'] ?? 150); ?>px</span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                                </div>
                            </div><!-- Fin ACCORDION Logo -->

                            <!-- v2.9.80 — ARRIÈRE-PLAN UNIFIÉ (sélecteur de type) -->
                            <div class="mg-bg-unified" id="mg-bg-unified">
                                <div class="mg-bg-unified-head">
                                    <button type="button" class="mg-bg-toggle" aria-expanded="false">
                                        <span class="mg-accordion-arrow">▶</span>
                                        <h3 class="mg-bg-unified-title">🌅 <?php esc_html_e('Background', 'maintenance-genius'); ?></h3>
                                    </button>
                                    <div class="mg-bg-switch" role="tablist" aria-label="<?php esc_attr_e('Background type', 'maintenance-genius'); ?>">
                                        <button type="button" class="mg-bg-seg" data-bg-type="preset" title="<?php esc_attr_e('Solid color or ready-made gradient preset', 'maintenance-genius'); ?>">🎨 <?php esc_html_e('Presets', 'maintenance-genius'); ?></button>
                                        <button type="button" class="mg-bg-seg is-active" data-bg-type="gradient" title="<?php esc_attr_e('Custom two-color gradient background', 'maintenance-genius'); ?>">🌈 <?php esc_html_e('Gradient', 'maintenance-genius'); ?></button>
                                        <button type="button" class="mg-bg-seg" data-bg-type="image" title="<?php esc_attr_e('Custom background image', 'maintenance-genius'); ?>">🖼️ <?php esc_html_e('Image', 'maintenance-genius'); ?></button>
                                        <button type="button" class="mg-bg-seg" data-bg-type="video" title="<?php esc_attr_e('Background video (MP4/WebM)', 'maintenance-genius'); ?>">🎥 <?php esc_html_e('Video', 'maintenance-genius'); ?></button>
                                        <button type="button" class="mg-bg-seg" data-bg-type="animation" title="<?php esc_attr_e('Animated background (Lottie / particles)', 'maintenance-genius'); ?>">✨ <?php esc_html_e('Animation', 'maintenance-genius'); ?></button>
                                    </div>
                                </div>
                                <div class="mg-bg-host" id="mg-bg-host"><!-- .mg-bg-panel déplacés ici par admin.js (v2.9.80) --></div>
                            </div>
                            <!-- /Arrière-plan unifié -->

                            <!-- ACCORDION: Presets (PRO) -->
                            <div class="mg-accordion mg-bg-panel" data-bg-type="preset">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🎨 <?php esc_html_e('Design Presets', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('14 professional designs with HD images and video backgrounds. Click to apply instantly.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                </div>
                                <div class="mg-accordion-body">

                            <!-- Presets (PRO) -->
                            <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                            <?php if (!$is_pro): ?>
                            <a href="#tab-pro" class="mg-pro-locked-overlay">
                                🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                            </a>
                            <?php endif; ?>
                            
                            <div class="mg-form-group">
                                <label>
                                    <?php esc_html_e('Design Presets', 'maintenance-genius'); ?>
                                    <span class="mg-pro-badge">PRO</span>
                                    <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('10 professional designs with HD images. Click to apply instantly.', 'maintenance-genius'); ?>" data-tooltip-pos="bottom">?</span>
                                </label>

                                <div class="mg-presets-grid">
                                    <?php foreach ($presets as $key => $preset): 
                                        $is_video_preset = !empty($preset['video_bg_enabled']);
                                    ?>
                                    <button type="button" class="mg-preset-btn <?php echo $is_video_preset ? 'mg-preset-video' : ''; ?>" data-preset="<?php echo esc_attr($key); ?>" <?php disabled(!$is_pro); ?>>
                                        <div class="mg-preset-preview" style="background: linear-gradient(135deg, <?php echo esc_attr($preset['bg_color_1']); ?> 0%, <?php echo esc_attr($preset['bg_color_2']); ?> 100%);<?php echo !empty($preset['bg_image_url']) ? ' background-image: url(' . esc_url($preset['bg_image_url']) . '); background-size: cover; background-position: center;' : ''; ?>">
                                            <?php if ($is_video_preset): ?><span class="mg-video-badge">🎬</span><?php endif; ?>
                                        </div>
                                        <span class="mg-preset-name"><?php echo esc_html($preset['name']); ?></span>
                                    </button>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                            </div><!-- Fin PRO locked presets -->

                                </div>
                            </div><!-- Fin ACCORDION Presets -->

                            <!-- ACCORDION: Couleurs -->
                            <div class="mg-accordion is-open mg-bg-panel" data-bg-type="gradient">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🎨 <?php esc_html_e('Custom Colors', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Customize background, title, message and button colors with adjustable opacity.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                </div>
                                <div class="mg-accordion-body" style="display:block;">

                            <div class="mg-form-row">
                                <div class="mg-form-group mg-half">
                                    <label for="mg-bg-color-1"><?php esc_html_e('Background color 1', 'maintenance-genius'); ?></label>
                                    <input type="text" id="mg-bg-color-1" class="mg-color-picker" value="<?php echo esc_attr($settings['bg_color_1']); ?>">
                                    <div class="mg-opacity-control">
                                        <label><?php esc_html_e('Opacity:', 'maintenance-genius'); ?> <span id="mg-bg1-opacity-val"><?php echo esc_html( $bg1_opacity ); ?>%</span></label>
                                        <input type="range" class="mg-opacity-slider mg-range-slider" min="0" max="100" value="<?php echo esc_attr( $bg1_opacity ); ?>" data-target="mg-bg1-opacity-val" id="mg-bg1-opacity">
                                    </div>
                                </div>
                                <div class="mg-form-group mg-half">
                                    <label for="mg-bg-color-2"><?php esc_html_e('Background color 2', 'maintenance-genius'); ?></label>
                                    <input type="text" id="mg-bg-color-2" class="mg-color-picker" value="<?php echo esc_attr($settings['bg_color_2']); ?>">
                                    <div class="mg-opacity-control">
                                        <label><?php esc_html_e('Opacity:', 'maintenance-genius'); ?> <span id="mg-bg2-opacity-val"><?php echo esc_html( $bg2_opacity ); ?>%</span></label>
                                        <input type="range" class="mg-opacity-slider mg-range-slider" min="0" max="100" value="<?php echo esc_attr( $bg2_opacity ); ?>" data-target="mg-bg2-opacity-val" id="mg-bg2-opacity">
                                    </div>
                                </div>
                            </div>

                            <div class="mg-form-row">
                                <div class="mg-form-group mg-half">
                                    <label for="mg-title-color"><?php esc_html_e('Title color', 'maintenance-genius'); ?></label>
                                    <input type="text" id="mg-title-color" class="mg-color-picker" value="<?php echo esc_attr($settings['title_color']); ?>">
                                    <div class="mg-opacity-control">
                                        <label><?php esc_html_e('Opacity:', 'maintenance-genius'); ?> <span id="mg-title-opacity-val"><?php echo esc_html( $title_opacity ); ?>%</span></label>
                                        <input type="range" class="mg-opacity-slider mg-range-slider" min="0" max="100" value="<?php echo esc_attr( $title_opacity ); ?>" data-target="mg-title-opacity-val" id="mg-title-opacity">
                                    </div>
                                </div>
                                <div class="mg-form-group mg-half">
                                    <label for="mg-message-color"><?php esc_html_e('Message color', 'maintenance-genius'); ?></label>
                                    <input type="text" id="mg-message-color" class="mg-color-picker" value="<?php echo esc_attr($settings['message_color']); ?>">
                                    <div class="mg-opacity-control">
                                        <label><?php esc_html_e('Opacity:', 'maintenance-genius'); ?> <span id="mg-message-opacity-val"><?php echo esc_html( $message_opacity ); ?>%</span></label>
                                        <input type="range" class="mg-opacity-slider mg-range-slider" min="0" max="100" value="<?php echo esc_attr( $message_opacity ); ?>" data-target="mg-message-opacity-val" id="mg-message-opacity">
                                    </div>
                                </div>
                            </div>

                            <div class="mg-form-group" style="max-width: 300px;">
                                <label for="mg-button-color"><?php esc_html_e('Button color', 'maintenance-genius'); ?></label>
                                <input type="text" id="mg-button-color" class="mg-color-picker" value="<?php echo esc_attr($settings['button_color']); ?>">
                                <div class="mg-opacity-control">
                                    <label><?php esc_html_e('Opacity:', 'maintenance-genius'); ?> <span id="mg-button-opacity-val"><?php echo esc_html( $button_opacity ); ?>%</span></label>
                                    <input type="range" class="mg-opacity-slider mg-range-slider" min="0" max="100" value="<?php echo esc_attr( $button_opacity ); ?>" data-target="mg-button-opacity-val" id="mg-button-opacity">
                                </div>
                            </div>

                                </div>
                            </div><!-- Fin ACCORDION Couleurs -->

                            <!-- ACCORDION: Image de fond (PRO) -->
                            <div class="mg-accordion mg-bg-panel" data-bg-type="image">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🖼️ <?php esc_html_e('Background Image', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Add a custom background image with gradient overlay opacity control.', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['bg_image_url'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">

                            <!-- Image de fond (PRO) -->
                            <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                            <?php if (!$is_pro): ?>
                            <a href="#tab-pro" class="mg-pro-locked-overlay">
                                🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                            </a>
                            <?php endif; ?>

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input type="checkbox" id="mg-bg-image-enabled" <?php checked(!empty($settings['bg_image_enabled']), true); ?> <?php disabled(!$is_pro); ?>>
                                    <?php esc_html_e('Use a background image', 'maintenance-genius'); ?>
                                </label>
                            </div>

                            <div id="mg-bg-image-group" style="<?php echo empty($settings['bg_image_url']) ? 'display:none;' : ''; ?>">
                                <div class="mg-logo-upload">
                                    <input type="hidden" id="mg-bg-image-url" name="bg_image_url" value="<?php echo esc_url($settings['bg_image_url'] ?? ''); ?>">

                                    <?php if (!empty($settings['bg_image_url'])): ?>
                                    <div class="mg-bg-image-preview" id="mg-bg-image-preview">
                                        <img src="<?php echo esc_url($settings['bg_image_url']); ?>" alt="Background">
                                    </div>
                                    <?php endif; ?>

                                    <div class="mg-logo-buttons">
                                        <button type="button" class="mg-btn mg-btn-secondary" id="mg-upload-bg-image">
                                            <?php esc_html_e('Choose an image', 'maintenance-genius'); ?>
                                        </button>
                                        <button type="button" class="mg-btn mg-btn-danger" id="mg-remove-bg-image" style="<?php echo empty($settings['bg_image_url']) ? 'display:none;' : ''; ?>">
                                            <?php esc_html_e('Remove', 'maintenance-genius'); ?>
                                        </button>
                                    </div>
                                </div>

                                <div class="mg-opacity-control" style="margin-top: 15px;">
                                    <label><?php esc_html_e('Overlay opacity:', 'maintenance-genius'); ?> <span id="mg-bg-overlay-val"><?php echo esc_html( $bg_overlay ); ?>%</span></label>
                                    <input type="range" class="mg-opacity-slider mg-range-slider" min="0" max="100" value="<?php echo esc_attr( $bg_overlay ); ?>" data-target="mg-bg-overlay-val" id="mg-bg-overlay-opacity">
                                </div>
                            </div>
                            </div><!-- Fin PRO locked image fond -->

                                </div>
                            </div><!-- Fin ACCORDION Image de fond -->

                            <div class="mg-group-heading"><span><?php esc_html_e('Layout &amp; text', 'maintenance-genius'); ?></span></div>
                            <!-- ACCORDION: Conteneur -->
                            <div data-mg-level="advanced" class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">📦 <?php esc_html_e('Style du conteneur', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Customize the central block appearance: background color, shadow and dimensions.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="mg-form-row">
                                <div class="mg-form-group mg-half">
                                    <label for="mg-container-bg-color"><?php esc_html_e('Background color', 'maintenance-genius'); ?></label>
                                    <input type="text" id="mg-container-bg-color" class="mg-color-picker" value="<?php echo esc_attr($container_bg); ?>">
                                    <div class="mg-opacity-control">
                                        <label><?php esc_html_e('Opacity:', 'maintenance-genius'); ?> <span id="mg-container-opacity-val"><?php echo esc_html( $container_opacity ); ?>%</span></label>
                                        <input type="range" class="mg-opacity-slider mg-range-slider" min="0" max="100" value="<?php echo esc_attr( $container_opacity ); ?>" data-target="mg-container-opacity-val" id="mg-container-opacity">
                                    </div>
                                </div>
                            </div>

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input type="checkbox" id="mg-container-shadow" <?php checked($container_shadow, true); ?>>
                                    <?php esc_html_e('Enable drop shadow', 'maintenance-genius'); ?>
                                </label>
                            </div>

                            <div id="mg-container-shadow-group" style="<?php echo !$container_shadow ? 'display:none;' : ''; ?>">
                                <div class="mg-opacity-control">
                                    <label><?php esc_html_e('Shadow intensity:', 'maintenance-genius'); ?> <span id="mg-shadow-intensity-val"><?php echo esc_html( $container_shadow_intensity ); ?>%</span></label>
                                    <input type="range" class="mg-opacity-slider mg-range-slider" min="0" max="100" value="<?php echo esc_attr( $container_shadow_intensity ); ?>" data-target="mg-shadow-intensity-val" id="mg-shadow-intensity">
                                </div>
                            </div>

                            <div class="mg-separator"></div>

                            <!-- Dimensions -->
                            <h3 class="mg-section-title">
                                <?php esc_html_e('Container dimensions', 'maintenance-genius'); ?>
                                <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Adjust the maximum width, inner padding and corner radius of the container.', 'maintenance-genius'); ?>" data-tooltip-pos="right">?</span>
                            </h3>

                            <div class="mg-form-group">
                                <label><?php esc_html_e('Maximum width:', 'maintenance-genius'); ?> <span id="mg-max-width-val"><?php echo esc_html( $container_max_width ); ?>px</span></label>
                                <input type="range" class="mg-range-slider mg-opacity-slider" min="400" max="1000" value="<?php echo esc_attr( $container_max_width ); ?>" data-target="mg-max-width-val" id="mg-container-max-width">
                            </div>

                            <div class="mg-form-group">
                                <label><?php esc_html_e('Inner padding:', 'maintenance-genius'); ?> <span id="mg-padding-val"><?php echo esc_html( $container_padding ); ?>px</span></label>
                                <input type="range" class="mg-range-slider mg-opacity-slider" min="20" max="100" value="<?php echo esc_attr( $container_padding ); ?>" data-target="mg-padding-val" id="mg-container-padding">
                            </div>

                            <div class="mg-form-group">
                                <label><?php esc_html_e('Corner radius:', 'maintenance-genius'); ?> <span id="mg-radius-val"><?php echo esc_html( $container_border_radius ); ?>px</span></label>
                                <input type="range" class="mg-range-slider mg-opacity-slider" min="0" max="50" value="<?php echo esc_attr( $container_border_radius ); ?>" data-target="mg-radius-val" id="mg-container-radius">
                            </div>

                                </div>
                            </div><!-- Fin ACCORDION Conteneur -->

                            <!-- ACCORDION: Typographie -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🔤 <?php esc_html_e('Typography', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Choose Google Fonts for title and message. Font sizes are customizable in PRO.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="mg-form-row">
                                <div class="mg-form-group mg-half">
                                    <label for="mg-title-font"><?php esc_html_e('Title font', 'maintenance-genius'); ?></label>
                                    <select id="mg-title-font">
                                        <?php foreach ($fonts as $font): ?>
                                        <option value="<?php echo esc_attr($font); ?>" <?php selected($title_font, $font); ?>><?php echo esc_html($font); ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                                <div class="mg-form-group mg-half">
                                    <label for="mg-message-font"><?php esc_html_e('Message font', 'maintenance-genius'); ?></label>
                                    <select id="mg-message-font">
                                        <?php foreach ($fonts as $font): ?>
                                        <option value="<?php echo esc_attr($font); ?>" <?php selected($message_font, $font); ?>><?php echo esc_html($font); ?></option>
                                        <?php endforeach; ?>
                                    </select>
                                </div>
                            </div>

                            <!-- Tailles de police (PRO) -->
                            <div class="mg-form-row" style="margin-top: 15px;">
                                <div class="mg-form-group mg-half">
                                    <label for="mg-title-size">
                                        <?php esc_html_e('Title size (H1)', 'maintenance-genius'); ?>
                                        <span class="mg-pro-badge" data-tooltip="<?php esc_attr_e('Customize the main title size. PRO feature.', 'maintenance-genius'); ?>">PRO</span>
                                    </label>
                                    <div class="mg-range-container">
                                        <input type="range" id="mg-title-size" min="24" max="72" value="<?php echo esc_attr($settings['title_size'] ?? 42); ?>" <?php echo !$is_pro ? 'disabled' : ''; ?>>
                                        <span class="mg-range-value"><?php echo esc_html($settings['title_size'] ?? 42); ?>px</span>
                                    </div>
                                    <?php if (!$is_pro): ?>
                                    <p class="mg-pro-hint">🔒 <?php esc_html_e('Upgrade to PRO to customize', 'maintenance-genius'); ?></p>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-form-group mg-half">
                                    <label for="mg-message-size">
                                        <?php esc_html_e('Message size (H2)', 'maintenance-genius'); ?>
                                        <span class="mg-pro-badge" data-tooltip="<?php esc_attr_e('Customize the message size. PRO feature.', 'maintenance-genius'); ?>">PRO</span>
                                    </label>
                                    <div class="mg-range-container">
                                        <input type="range" id="mg-message-size" min="12" max="36" value="<?php echo esc_attr($settings['message_size'] ?? 18); ?>" <?php echo !$is_pro ? 'disabled' : ''; ?>>
                                        <span class="mg-range-value"><?php echo esc_html($settings['message_size'] ?? 18); ?>px</span>
                                    </div>
                                    <?php if (!$is_pro): ?>
                                    <p class="mg-pro-hint">🔒 <?php esc_html_e('Upgrade to PRO to customize', 'maintenance-genius'); ?></p>
                                    <?php endif; ?>
                                </div>
                            </div>
                            <?php if ($is_pro): ?>
                            <div style="text-align: right; margin-top: 10px;">
                                <button type="button" class="mg-btn mg-btn-secondary mg-btn-sm" id="mg-reset-font-sizes" title="<?php esc_attr_e('Reset to default values', 'maintenance-genius'); ?>">
                                    ↩ <?php esc_html_e('Reset H1/H2', 'maintenance-genius'); ?>
                                </button>
                            </div>
                            <?php endif; ?>

                                </div>
                            </div><!-- Fin ACCORDION Typographie -->

                            <div class="mg-group-heading" data-mg-level="advanced"><span><?php esc_html_e('Effects', 'maintenance-genius'); ?></span></div>
                            <!-- ACCORDION: Animations -->
                            <div data-mg-level="advanced" class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">✨ <?php esc_html_e('Animations', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Add dynamic visual effects: fade, slide, bounce, zoom...', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($animation_enabled)): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-default">○</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input type="checkbox" id="mg-animation-enabled" <?php checked($animation_enabled, true); ?>>
                                    <?php esc_html_e('Enable animations', 'maintenance-genius'); ?>
                                </label>
                            </div>

                            <div id="mg-animation-controls" style="<?php echo !$animation_enabled ? 'display:none;' : ''; ?>">
                                <div class="mg-form-row">
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-logo-animation"><?php esc_html_e('Logo animation', 'maintenance-genius'); ?></label>
                                        <select id="mg-logo-animation">
                                            <?php foreach ($animations as $key => $name): ?>
                                            <option value="<?php echo esc_attr($key); ?>" <?php selected($logo_animation, $key); ?>><?php echo esc_html($name); ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-text-animation"><?php esc_html_e('Text animation', 'maintenance-genius'); ?></label>
                                        <select id="mg-text-animation">
                                            <?php foreach ($animations as $key => $name): ?>
                                            <option value="<?php echo esc_attr($key); ?>" <?php selected($text_animation, $key); ?>><?php echo esc_html($name); ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                </div>

                                <div class="mg-form-row">
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-button-animation"><?php esc_html_e('Button animation', 'maintenance-genius'); ?></label>
                                        <select id="mg-button-animation">
                                            <?php foreach ($animations as $key => $name): ?>
                                            <option value="<?php echo esc_attr($key); ?>" <?php selected($button_animation, $key); ?>><?php echo esc_html($name); ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>
                                    <div class="mg-form-group mg-half">
                                        <label><?php esc_html_e('Duration:', 'maintenance-genius'); ?> <span id="mg-animation-duration-val"><?php echo esc_html( $animation_duration ); ?>ms</span></label>
                                        <input type="range" class="mg-range-slider mg-opacity-slider" min="200" max="2000" step="100" value="<?php echo esc_attr( $animation_duration ); ?>" data-target="mg-animation-duration-val" id="mg-animation-duration">
                                    </div>
                                </div>
                            </div>

                                </div>
                            </div><!-- Fin ACCORDION Animations -->

                            <!-- ACCORDION: Lottie (PRO) -->
                            <div class="mg-accordion mg-bg-panel" data-bg-type="animation">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🎬 <?php esc_html_e('Lottie Animations', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Add lightweight vector animations from LottieFiles.com', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['lottie_enabled'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                            <?php if (!$is_pro): ?>
                            <a href="#tab-pro" class="mg-pro-locked-overlay">
                                🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                            </a>
                            <?php endif; ?>

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input type="checkbox" id="mg-lottie-enabled" 
                                           <?php checked(!empty($settings['lottie_enabled']), true); ?>
                                           <?php disabled(!$is_pro); ?>>
                                    <?php esc_html_e('Enable Lottie animation', 'maintenance-genius'); ?>
                                </label>
                            </div>

                            <div id="mg-lottie-options" style="<?php echo empty($settings['lottie_enabled']) ? 'display:none;' : ''; ?>">
                                
                                <div class="mg-form-group">
                                    <label>
                                        <?php esc_html_e('Animation source', 'maintenance-genius'); ?>
                                        <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Choose between uploading a JSON file or using an external URL', 'maintenance-genius'); ?>" data-tooltip-pos="right">?</span>
                                    </label>
                                    <div style="display: flex; gap: 15px; margin-top: 8px;">
                                        <label class="mg-checkbox-label" style="margin: 0;">
                                            <input type="radio" name="lottie_source" id="mg-lottie-source-upload" value="upload" 
                                                   <?php checked(empty($settings['lottie_url']) || strpos($settings['lottie_url'] ?? '', home_url()) !== false, true); ?>
                                                   <?php disabled(!$is_pro); ?>>
                                            📁 <?php esc_html_e('Upload a file', 'maintenance-genius'); ?>
                                        </label>
                                        <label class="mg-checkbox-label" style="margin: 0;">
                                            <input type="radio" name="lottie_source" id="mg-lottie-source-url" value="url"
                                                   <?php checked(!empty($settings['lottie_url']) && strpos($settings['lottie_url'] ?? '', home_url()) === false, true); ?>
                                                   <?php disabled(!$is_pro); ?>>
                                            🔗 <?php esc_html_e('External URL', 'maintenance-genius'); ?>
                                        </label>
                                    </div>
                                </div>

                                <!-- Option Upload avec Drag & Drop -->
                                <div id="mg-lottie-upload-section" class="mg-form-group">
                                    <label><?php esc_html_e('Lottie animation file (.json or .lottie)', 'maintenance-genius'); ?></label>
                                    
                                    <!-- Zone Drag & Drop -->
                                    <div id="mg-lottie-dropzone" class="mg-dropzone" style="
                                        border: 2px dashed #ccc;
                                        border-radius: 12px;
                                        padding: 30px;
                                        text-align: center;
                                        cursor: pointer;
                                        transition: all 0.3s ease;
                                        background: #fafafa;
                                        margin-top: 10px;
                                    ">
                                        <div id="mg-lottie-dropzone-content">
                                            <?php if (!empty($settings['lottie_url'])): ?>
                                            <div style="color: #27ae60; font-size: 14px;">
                                                ✅ <strong><?php echo esc_html(basename($settings['lottie_url'])); ?></strong>
                                            </div>
                                            <p style="color: #666; margin: 10px 0 0 0; font-size: 12px;"><?php esc_html_e('Drag a new file to replace', 'maintenance-genius'); ?></p>
                                            <?php else: ?>
                                            <div style="font-size: 40px; margin-bottom: 10px;">📁</div>
                                            <p style="color: #666; margin: 0; font-size: 14px;">
                                                <strong><?php esc_html_e('Drag and drop', 'maintenance-genius'); ?></strong> <?php esc_html_e('your .json or .lottie file here', 'maintenance-genius'); ?>
                                            </p>
                                            <p style="color: #999; margin: 5px 0 0 0; font-size: 12px;"><?php esc_html_e('or click to select', 'maintenance-genius'); ?></p>
                                            <?php endif; ?>
                                        </div>
                                        <div id="mg-lottie-upload-progress" style="display: none; margin-top: 15px;">
                                            <div style="background: #e0e0e0; border-radius: 10px; height: 8px; overflow: hidden;">
                                                <div id="mg-lottie-progress-bar" style="background: linear-gradient(90deg, #667eea, #764ba2); height: 100%; width: 0%; transition: width 0.3s;"></div>
                                            </div>
                                            <p style="color: #667eea; margin: 8px 0 0 0; font-size: 12px;">⏳ <?php esc_html_e('Uploading...', 'maintenance-genius'); ?></p>
                                        </div>
                                    </div>
                                    
                                    <!-- Input file caché -->
                                    <input type="file" id="mg-lottie-file-input" accept=".json,.lottie" style="display: none;">
                                    <input type="hidden" id="mg-lottie-url" name="lottie_url" value="<?php echo esc_attr($settings['lottie_url'] ?? ''); ?>">
                                    
                                    <!-- Bouton supprimer -->
                                    <div style="margin-top: 10px; <?php echo empty($settings['lottie_url']) ? 'display:none;' : ''; ?>" id="mg-lottie-actions">
                                        <button type="button" class="mg-btn mg-btn-danger" id="mg-remove-lottie" <?php disabled(!$is_pro); ?>>
                                            🗑️ <?php esc_html_e('Remove animation', 'maintenance-genius'); ?>
                                        </button>
                                    </div>
                                    
                                    <p class="mg-field-description" style="margin-top: 10px;">
                                        📥 <?php esc_html_e('Download free animations from', 'maintenance-genius'); ?> <a href="https://lottiefiles.com/free-animations" target="_blank" style="color: #667eea;">LottieFiles.com</a>
                                    </p>
                                </div>

                                <!-- Option URL externe -->
                                <div id="mg-lottie-url-section" class="mg-form-group" style="display: none;">
                                    <label for="mg-lottie-url-input">
                                        <?php esc_html_e('Animation URL (.json)', 'maintenance-genius'); ?>
                                    </label>
                                    <input type="url" id="mg-lottie-url-input" 
                                           placeholder="https://assets.lottiefiles.com/packages/xxx.json"
                                           value="<?php echo esc_attr($settings['lottie_url'] ?? ''); ?>"
                                           <?php disabled(!$is_pro); ?>>
                                    <p class="mg-field-description" style="margin-top: 5px; padding: 8px; background: #fff3cd; border-radius: 4px; color: #856404;">
                                        ⚠️ <?php esc_html_e('The URL must point directly to a .json file', 'maintenance-genius'); ?>
                                    </p>
                                </div>

                                <!-- Contrôles Lottie AVANT l'aperçu -->
                                <div class="mg-form-row">
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-lottie-position"><?php esc_html_e('Position', 'maintenance-genius'); ?></label>
                                        <select id="mg-lottie-position" <?php disabled(!$is_pro); ?>>
                                            <option value="above-title" <?php selected(($settings['lottie_position'] ?? 'above-title'), 'above-title'); ?>><?php esc_html_e('Above title', 'maintenance-genius'); ?></option>
                                            <option value="below-title" <?php selected(($settings['lottie_position'] ?? ''), 'below-title'); ?>><?php esc_html_e('Below title', 'maintenance-genius'); ?></option>
                                            <option value="above-message" <?php selected(($settings['lottie_position'] ?? ''), 'above-message'); ?>><?php esc_html_e('Above message', 'maintenance-genius'); ?></option>
                                            <option value="below-buttons" <?php selected(($settings['lottie_position'] ?? ''), 'below-buttons'); ?>><?php esc_html_e('Below buttons', 'maintenance-genius'); ?></option>
                                            <option value="background" <?php selected(($settings['lottie_position'] ?? ''), 'background'); ?>><?php esc_html_e('Background (fullscreen)', 'maintenance-genius'); ?></option>
                                        </select>
                                    </div>
                                    <div class="mg-form-group mg-half">
                                        <label><?php esc_html_e('Size on page:', 'maintenance-genius'); ?> <span id="mg-lottie-size-val"><?php echo esc_html( $settings['lottie_size'] ?? 200 ); ?>px</span></label>
                                        <input type="range" class="mg-range-slider" id="mg-lottie-size" 
                                               min="50" max="500" step="10" 
                                               value="<?php echo esc_attr( $settings['lottie_size'] ?? 200 ); ?>"
                                               <?php disabled(!$is_pro); ?>>
                                    </div>
                                </div>

                                <div class="mg-form-row">
                                    <div class="mg-form-group mg-half">
                                        <label><?php esc_html_e('Speed:', 'maintenance-genius'); ?> <span id="mg-lottie-speed-val"><?php echo esc_html( $settings['lottie_speed'] ?? 1 ); ?>x</span></label>
                                        <input type="range" class="mg-range-slider" id="mg-lottie-speed" 
                                               min="0.25" max="3" step="0.25" 
                                               value="<?php echo esc_attr( $settings['lottie_speed'] ?? 1 ); ?>"
                                               <?php disabled(!$is_pro); ?>>
                                    </div>
                                    <div class="mg-form-group mg-half" style="display: flex; gap: 20px; align-items: center; padding-top: 25px;">
                                        <label class="mg-checkbox-label" style="margin: 0;">
                                            <input type="checkbox" id="mg-lottie-loop" 
                                                   <?php checked($settings['lottie_loop'] ?? true, true); ?>
                                                   <?php disabled(!$is_pro); ?>>
                                            <?php esc_html_e('Loop', 'maintenance-genius'); ?>
                                        </label>
                                        <label class="mg-checkbox-label" style="margin: 0;">
                                            <input type="checkbox" id="mg-lottie-autoplay" 
                                                   <?php checked($settings['lottie_autoplay'] ?? true, true); ?>
                                                   <?php disabled(!$is_pro); ?>>
                                            <?php esc_html_e('Autoplay', 'maintenance-genius'); ?>
                                        </label>
                                    </div>
                                </div>

                                <!-- Aperçu Lottie - TAILLE FIXE -->
                                <div id="mg-lottie-preview-container" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 12px; margin: 15px 0; text-align: center; height: 200px; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                                    <div id="mg-lottie-preview" style="width: 150px; height: 150px; max-width: 100%; max-height: 100%;"></div>
                                    <p id="mg-lottie-preview-placeholder" style="color: rgba(255,255,255,0.7); margin: 0;">
                                        <?php esc_html_e('Enter a URL to see the preview', 'maintenance-genius'); ?>
                                    </p>
                                </div>

                                <div class="mg-info-box" style="background: #e3f2fd; border-left: 4px solid #2196f3; padding: 12px; border-radius: 4px; margin-top: 10px;">
                                    <p style="margin: 0; font-size: 13px; color: #1565c0;">
                                        <strong>💡 <?php esc_html_e('Animation suggestions:', 'maintenance-genius'); ?></strong><br>
                                        • <?php esc_html_e('Maintenance: gears, tools, construction', 'maintenance-genius'); ?><br>
                                        • <?php esc_html_e('Coming Soon: rocket, countdown, loading', 'maintenance-genius'); ?><br>
                                        • <?php esc_html_e('Professional: animated logo, business icons', 'maintenance-genius'); ?>
                                    </p>
                                </div>
                            </div>
                            </div><!-- Fin PRO locked Lottie -->

                                </div>
                            </div><!-- Fin ACCORDION Lottie -->

                            <!-- ACCORDION: Vidéo (PRO) -->
                            <div class="mg-accordion mg-bg-panel" data-bg-type="video">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🎥 <?php esc_html_e('Video Background', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Add a YouTube or Vimeo video as background for your maintenance page.', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['video_bg_enabled'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                            <?php if (!$is_pro): ?>
                            <a href="#tab-pro" class="mg-pro-locked-overlay">
                                🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                            </a>
                            <?php endif; ?>

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input type="checkbox" id="mg-video-bg-enabled" 
                                           <?php checked($settings['video_bg_enabled'] ?? false, true); ?>
                                           <?php disabled(!$is_pro); ?>>
                                    <?php esc_html_e('Enable background video', 'maintenance-genius'); ?>
                                </label>
                            </div>

                            <div id="mg-video-bg-options" style="<?php echo empty($settings['video_bg_enabled']) ? 'display:none;' : ''; ?>">
                                <div class="mg-form-group">
                                    <label for="mg-video-bg-url">
                                        <?php esc_html_e('Video URL (YouTube or Vimeo)', 'maintenance-genius'); ?>
                                        <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Paste the full video URL. E.g.: https://www.youtube.com/watch?v=xxxxx or https://vimeo.com/xxxxx', 'maintenance-genius'); ?>" data-tooltip-pos="right">?</span>
                                    </label>
                                    <input type="url" id="mg-video-bg-url" 
                                           placeholder="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
                                           value="<?php echo esc_attr($settings['video_bg_url'] ?? ''); ?>"
                                           <?php disabled(!$is_pro); ?>>
                                    <p id="mg-video-detected" class="mg-field-description" style="margin-top: 5px; display: none;">
                                        <span id="mg-video-type-badge" style="display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: bold;"></span>
                                        <span id="mg-video-id" style="color: #666; margin-left: 5px;"></span>
                                    </p>
                                </div>

                                <div class="mg-form-row">
                                    <div class="mg-form-group mg-half">
                                        <label><?php esc_html_e('Opacity:', 'maintenance-genius'); ?> <span id="mg-video-opacity-val"><?php echo esc_html( $settings['video_bg_opacity'] ?? 30 ); ?>%</span></label>
                                        <input type="range" class="mg-range-slider" id="mg-video-bg-opacity" 
                                               min="10" max="100" step="5" 
                                               value="<?php echo esc_attr( $settings['video_bg_opacity'] ?? 30 ); ?>"
                                               <?php disabled(!$is_pro); ?>>
                                        <p class="mg-field-description"><?php esc_html_e('Lower = more subtle video', 'maintenance-genius'); ?></p>
                                    </div>
                                    <div class="mg-form-group mg-half" style="padding-top: 25px;">
                                        <label class="mg-checkbox-label">
                                            <input type="checkbox" id="mg-video-bg-muted" 
                                                   <?php checked($settings['video_bg_muted'] ?? true, true); ?>
                                                   <?php disabled(!$is_pro); ?>>
                                            🔇 <?php esc_html_e('Muted video (recommended)', 'maintenance-genius'); ?>
                                        </label>
                                    </div>
                                </div>

                                <!-- Aperçu vidéo -->
                                <div id="mg-video-preview-container" style="background: #1a1a2e; border-radius: 12px; margin: 15px 0; overflow: hidden; height: 200px; display: none;">
                                    <div id="mg-video-preview" style="width: 100%; height: 100%;"></div>
                                </div>

                                <div class="mg-info-box" style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px; border-radius: 4px;">
                                    <p style="margin: 0; font-size: 13px; color: #856404;">
                                        ⚠️ <strong><?php esc_html_e('Note:', 'maintenance-genius'); ?></strong> <?php esc_html_e('The video will not display if Lottie background animation is enabled.', 'maintenance-genius'); ?>
                                    </p>
                                </div>
                            </div>
                            </div><!-- Fin Video Background -->

                                </div>
                            </div><!-- Fin ACCORDION Video -->

                            <!-- ACCORDION: Parallax (PRO) -->
                            <div data-mg-level="advanced" class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🌀 <?php esc_html_e('Parallax Effect', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Add a depth effect on mouse movement.', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['parallax_enabled'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                            <?php if (!$is_pro): ?>
                            <a href="#tab-pro" class="mg-pro-locked-overlay">
                                🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                            </a>
                            <?php endif; ?>

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input type="checkbox" id="mg-parallax-enabled" 
                                           <?php checked($settings['parallax_enabled'] ?? false, true); ?>
                                           <?php disabled(!$is_pro); ?>>
                                    <?php esc_html_e('Enable parallax effect', 'maintenance-genius'); ?>
                                </label>
                            </div>

                            <div id="mg-parallax-options" style="<?php echo empty($settings['parallax_enabled']) ? 'display:none;' : ''; ?>">
                                <div class="mg-form-group">
                                    <label><?php esc_html_e('Intensity:', 'maintenance-genius'); ?> <span id="mg-parallax-intensity-val"><?php echo esc_html( $settings['parallax_intensity'] ?? 50 ); ?>%</span></label>
                                    <input type="range" class="mg-range-slider" id="mg-parallax-intensity" 
                                           min="10" max="100" step="10" 
                                           value="<?php echo esc_attr( $settings['parallax_intensity'] ?? 50 ); ?>"
                                           <?php disabled(!$is_pro); ?>>
                                    <p class="mg-field-description"><?php esc_html_e('Higher = more pronounced movement', 'maintenance-genius'); ?></p>
                                </div>

                                <div class="mg-info-box" style="background: #e3f2fd; border-left: 4px solid #2196f3; padding: 12px; border-radius: 4px;">
                                    <p style="margin: 0; font-size: 13px; color: #1565c0;">
                                        💡 <?php esc_html_e('The parallax effect slightly shifts the central container with mouse movement, creating a subtle 3D depth impression.', 'maintenance-genius'); ?>
                                    </p>
                                </div>
                            </div>
                            </div><!-- Fin Parallax -->

                                </div>
                            </div><!-- Fin ACCORDION Parallax -->

                            <!-- ACCORDION: Panneau latéral (PRO) -->
                            <div data-mg-level="advanced" class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">📱 <?php esc_html_e('Side Panel (Social & Contact)', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Add a discreet side panel with social media links and contact info.', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['sidebar_enabled'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                            <?php if (!$is_pro): ?>
                            <a href="#tab-pro" class="mg-pro-locked-overlay">
                                🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                            </a>
                            <?php endif; ?>

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input
                                        type="checkbox"
                                        id="mg-sidebar-enabled"
                                        name="sidebar_enabled"
                                        <?php checked(!empty($settings['sidebar_enabled']), true); ?>
                                        <?php disabled(!$is_pro); ?>
                                    >
                                    <?php esc_html_e('Enable side panel', 'maintenance-genius'); ?>
                                </label>
                            </div>

                            <div id="mg-sidebar-options" style="<?php echo empty($settings['sidebar_enabled']) ? 'display:none;' : ''; ?>">
                                
                                <div class="mg-form-row">
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-sidebar-position"><?php esc_html_e('Panel position', 'maintenance-genius'); ?></label>
                                        <select id="mg-sidebar-position" name="sidebar_position">
                                            <option value="left" <?php selected($settings['sidebar_position'] ?? 'right', 'left'); ?>><?php esc_html_e('Left', 'maintenance-genius'); ?></option>
                                            <option value="right" <?php selected($settings['sidebar_position'] ?? 'right', 'right'); ?>><?php esc_html_e('Right', 'maintenance-genius'); ?></option>
                                        </select>
                                    </div>
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-sidebar-tab-color"><?php esc_html_e('Tab color', 'maintenance-genius'); ?></label>
                                        <input type="text" id="mg-sidebar-tab-color" class="mg-color-picker" value="<?php echo esc_attr($settings['sidebar_tab_color'] ?? '#667eea'); ?>">
                                    </div>
                                </div>

                                <div class="mg-separator"></div>
                                <p class="mg-field-description" style="margin-bottom: 15px;">
                                    <strong><?php esc_html_e('Social Networks', 'maintenance-genius'); ?></strong> - <?php esc_html_e('Leave empty to hide', 'maintenance-genius'); ?>
                                </p>

                                <div class="mg-form-row">
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-social-facebook">
                                            <span style="color:#1877f2;">●</span> Facebook
                                        </label>
                                        <input type="url" id="mg-social-facebook" name="social_facebook" 
                                               value="<?php echo esc_attr($settings['social_facebook'] ?? ''); ?>"
                                               placeholder="https://facebook.com/yourpage">
                                    </div>
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-social-twitter">
                                            <span style="color:#1da1f2;">●</span> X (Twitter)
                                        </label>
                                        <input type="url" id="mg-social-twitter" name="social_twitter" 
                                               value="<?php echo esc_attr($settings['social_twitter'] ?? ''); ?>"
                                               placeholder="https://x.com/youraccount">
                                    </div>
                                </div>

                                <div class="mg-form-row">
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-social-instagram">
                                            <span style="color:#e4405f;">●</span> Instagram
                                        </label>
                                        <input type="url" id="mg-social-instagram" name="social_instagram" 
                                               value="<?php echo esc_attr($settings['social_instagram'] ?? ''); ?>"
                                               placeholder="https://instagram.com/youraccount">
                                    </div>
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-social-linkedin">
                                            <span style="color:#0077b5;">●</span> LinkedIn
                                        </label>
                                        <input type="url" id="mg-social-linkedin" name="social_linkedin" 
                                               value="<?php echo esc_attr($settings['social_linkedin'] ?? ''); ?>"
                                               placeholder="https://linkedin.com/company/...">
                                    </div>
                                </div>

                                <div class="mg-form-row">
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-social-youtube">
                                            <span style="color:#ff0000;">●</span> YouTube
                                        </label>
                                        <input type="url" id="mg-social-youtube" name="social_youtube" 
                                               value="<?php echo esc_attr($settings['social_youtube'] ?? ''); ?>"
                                               placeholder="https://youtube.com/@yourchannel">
                                    </div>
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-social-tiktok">
                                            <span style="color:#000000;">●</span> TikTok
                                        </label>
                                        <input type="url" id="mg-social-tiktok" name="social_tiktok" 
                                               value="<?php echo esc_attr($settings['social_tiktok'] ?? ''); ?>"
                                               placeholder="https://tiktok.com/@youraccount">
                                    </div>
                                </div>

                                <div class="mg-separator"></div>
                                <p class="mg-field-description" style="margin-bottom: 15px;">
                                    <strong><?php esc_html_e('Contact', 'maintenance-genius'); ?></strong> - <?php esc_html_e('Contact information', 'maintenance-genius'); ?>
                                </p>

                                <div class="mg-form-row">
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-contact-email">
                                            📧 <?php esc_html_e('Contact Email', 'maintenance-genius'); ?>
                                        </label>
                                        <input type="email" id="mg-contact-email" name="contact_email" 
                                               value="<?php echo esc_attr($settings['contact_email'] ?? ''); ?>"
                                               placeholder="contact@exemple.com">
                                    </div>
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-contact-phone">
                                            📞 <?php esc_html_e('Phone', 'maintenance-genius'); ?>
                                        </label>
                                        <input type="tel" id="mg-contact-phone" name="contact_phone" 
                                               value="<?php echo esc_attr($settings['contact_phone'] ?? ''); ?>"
                                               placeholder="+1 514 555-1234">
                                    </div>
                                </div>

                                <div class="mg-form-group">
                                    <label for="mg-contact-whatsapp">
                                        💬 <?php esc_html_e('WhatsApp (number with country code)', 'maintenance-genius'); ?>
                                    </label>
                                    <input type="tel" id="mg-contact-whatsapp" name="contact_whatsapp" 
                                           value="<?php echo esc_attr($settings['contact_whatsapp'] ?? ''); ?>"
                                           placeholder="+15145551234">
                                    <p class="mg-field-description"><?php esc_html_e('International format without spaces or dashes', 'maintenance-genius'); ?></p>
                                </div>

                            </div>
                            </div><!-- Fin mg-pro-locked panneau latéral -->

                            <!-- Separateur -->
                            <div class="mg-separator"></div>

                            <!-- v2.9.86 — Image de fond personnalisée (custom_bg) supprimée : doublon migré vers Arrière-plan > Image -->

                                </div>
                            </div><!-- Fin ACCORDION Sidebar -->

                            <!-- ACCORDION: Presets personnalisés (PRO) -->
                            <div data-mg-level="advanced" class="mg-accordion mg-bg-panel" data-bg-type="preset">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">💾 <?php esc_html_e('My Custom Presets', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Save your current design as a reusable preset. Export and import presets between sites.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                            <?php if (!$is_pro): ?>
                            <a href="#tab-pro" class="mg-pro-locked-overlay">
                                🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                            </a>
                            <?php endif; ?>

                            <!-- Sauvegarder le design actuel -->
                            <div class="mg-form-group">
                                <label><?php esc_html_e('Save current design as new preset', 'maintenance-genius'); ?></label>
                                <div style="display: flex; gap: 10px; margin-top: 8px;">
                                    <input type="text" id="mg-preset-name" placeholder="<?php esc_attr_e('Preset name (e.g. My Corporate Design)', 'maintenance-genius'); ?>" 
                                           style="flex: 1;" <?php disabled(!$is_pro); ?>>
                                    <button type="button" class="mg-btn mg-btn-primary" id="mg-save-preset" <?php disabled(!$is_pro); ?>>
                                        💾 <?php esc_html_e('Save', 'maintenance-genius'); ?>
                                    </button>
                                </div>
                            </div>

                            <!-- Liste des presets sauvegardés -->
                            <?php 
                            $custom_presets = $settings['custom_presets'] ?? [];
                            ?>
                            <div class="mg-custom-presets-list" id="mg-custom-presets-list">
                                <?php if (empty($custom_presets)): ?>
                                <p class="mg-no-presets" style="color: #666; font-style: italic; padding: 15px; background: #f5f5f5; border-radius: 8px; text-align: center;">
                                    <?php esc_html_e('No custom preset saved yet.', 'maintenance-genius'); ?><br>
                                    <?php esc_html_e('Configure your perfect design, then save it here!', 'maintenance-genius'); ?>
                                </p>
                                <?php else: ?>
                                <div class="mg-presets-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 15px;">
                                    <?php foreach ($custom_presets as $preset_id => $preset): ?>
                                    <div class="mg-custom-preset-card" data-preset-id="<?php echo esc_attr($preset_id); ?>" 
                                         style="background: linear-gradient(135deg, <?php echo esc_attr($preset['data']['bg_color_1'] ?? '#667eea'); ?> 0%, <?php echo esc_attr($preset['data']['bg_color_2'] ?? '#764ba2'); ?> 100%); 
                                                padding: 15px; border-radius: 10px; position: relative; min-height: 120px;">
                                        <div style="color: #fff; font-weight: 600; margin-bottom: 5px; text-shadow: 0 1px 2px rgba(0,0,0,0.3);">
                                            <?php echo esc_html($preset['name']); ?>
                                        </div>
                                        <div style="color: rgba(255,255,255,0.7); font-size: 11px; margin-bottom: 10px;">
                                            <?php esc_html_e('Created on', 'maintenance-genius'); ?> <?php echo esc_html(gmdate('d/m/Y', strtotime($preset['created']))); ?>
                                        </div>
                                        <div class="mg-preset-actions" style="position: absolute; bottom: 10px; left: 10px; right: 10px; display: flex; gap: 5px;">
                                            <button type="button" class="mg-btn mg-btn-sm mg-preset-apply" title="<?php esc_attr_e('Apply this preset', 'maintenance-genius'); ?>" 
                                                    style="flex: 1; background: rgba(255,255,255,0.9); color: #333; border: none; padding: 5px 8px; border-radius: 4px; font-size: 11px; cursor: pointer;">
                                                ✓ <?php esc_html_e('Apply', 'maintenance-genius'); ?>
                                            </button>
                                            <button type="button" class="mg-btn mg-btn-sm mg-preset-export" title="<?php esc_attr_e('Export', 'maintenance-genius'); ?>" 
                                                    style="background: rgba(255,255,255,0.9); color: #333; border: none; padding: 5px 8px; border-radius: 4px; font-size: 11px; cursor: pointer;">
                                                📤
                                            </button>
                                            <button type="button" class="mg-btn mg-btn-sm mg-preset-delete" title="<?php esc_attr_e('Delete', 'maintenance-genius'); ?>" 
                                                    style="background: rgba(220,53,69,0.9); color: #fff; border: none; padding: 5px 8px; border-radius: 4px; font-size: 11px; cursor: pointer;">
                                                🗑️
                                            </button>
                                        </div>
                                    </div>
                                    <?php endforeach; ?>
                                </div>
                                <?php endif; ?>
                            </div>

                            <!-- Import/Export -->
                            <div class="mg-separator" style="margin: 20px 0;"></div>
                            <div class="mg-form-row">
                                <div class="mg-form-group mg-half">
                                    <label><?php esc_html_e('Import preset (.json)', 'maintenance-genius'); ?></label>
                                    <div style="display: flex; gap: 10px; margin-top: 8px;">
                                        <input type="file" id="mg-import-preset-file" accept=".json" style="display: none;" <?php disabled(!$is_pro); ?>>
                                        <button type="button" class="mg-btn mg-btn-secondary" id="mg-import-preset-btn" <?php disabled(!$is_pro); ?>>
                                            📥 <?php esc_html_e('Import a preset', 'maintenance-genius'); ?>
                                        </button>
                                    </div>
                                </div>
                                <div class="mg-form-group mg-half">
                                    <label><?php esc_html_e('Export all my presets', 'maintenance-genius'); ?></label>
                                    <div style="margin-top: 8px;">
                                        <button type="button" class="mg-btn mg-btn-secondary" id="mg-export-all-presets" 
                                                <?php echo empty($custom_presets) ? 'disabled' : ''; ?> <?php disabled(!$is_pro); ?>>
                                            <?php
                                            // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Safe integer in translation
                                            /* translators: %d: number of presets */
                                            printf( '📤 ' . esc_html( _n( 'Export all (%d preset)', 'Export all (%d presets)', count($custom_presets), 'maintenance-genius' ) ), count($custom_presets) );
                                            ?>
                                        </button>
                                    </div>
                                </div>
                            </div>

                            <div class="mg-info-box" style="background: #e8f5e9; border-left: 4px solid #27ae60; padding: 12px; border-radius: 4px; margin-top: 15px;">
                                <p style="margin: 0; font-size: 13px; color: #1b5e20;">
                                    <strong>💡 <?php esc_html_e('Tip:', 'maintenance-genius'); ?></strong> <?php esc_html_e('Export your presets to reuse them on other WordPress sites, or share them with your clients!', 'maintenance-genius'); ?>
                                </p>
                            </div>
                            </div><!-- Fin PRO locked presets -->

                                </div>
                            </div><!-- Fin ACCORDION Presets personnalisés -->

                            <!-- Actions -->
                            <div class="mg-form-actions">
                                <button type="button" class="mg-btn mg-btn-secondary" id="mg-reset-design">
                                    <?php esc_html_e('Reset', 'maintenance-genius'); ?>
                                </button>
                                <button type="button" class="mg-btn mg-btn-secondary" id="mg-preview-btn-design">
                                    <?php esc_html_e('Preview', 'maintenance-genius'); ?>
                                </button>
                                <button type="button" class="mg-btn mg-btn-primary" id="mg-save-design">
                                    <?php esc_html_e('Save design', 'maintenance-genius'); ?>
                                </button>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- Onglet Access -->
                <div class="mg-tab-content" id="tab-access" style="display:none;">
                    <div class="mg-card">
                        <div class="mg-card-header">
                            <h2><?php esc_html_e('Access Control', 'maintenance-genius'); ?></h2>
                            <div class="mg-accordion-controls">
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-expand-all"><?php esc_html_e('Expand All', 'maintenance-genius'); ?></button>
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-collapse-all"><?php esc_html_e('Collapse All', 'maintenance-genius'); ?></button>
                            </div>
                        </div>
                        <div class="mg-card-body">

                            <!-- ACCORDION: Accès Visiteur par Mot de Passe -->
                            <div class="mg-accordion is-open">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🔐 <?php esc_html_e('Visitor Access by Password', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Share a password with your clients to let them preview the site during maintenance.', 'maintenance-genius'); ?>">?</span>
                                    <?php if ($settings['visitor_access_enabled']): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-default">—</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body" style="display:block;">
                                    <p class="mg-field-description" style="margin-bottom: 20px;">
                                        <?php esc_html_e('Allow visitors to temporarily access the site with a shared password.', 'maintenance-genius'); ?>
                                    </p>

                                    <div class="mg-form-group">
                                        <label class="mg-checkbox-label">
                                            <input
                                                type="checkbox"
                                                id="mg-visitor-access" title="<?php esc_attr_e('Allow temporary access with password', 'maintenance-genius'); ?>"
                                                name="visitor_access_enabled"
                                                <?php checked($settings['visitor_access_enabled'], true); ?>
                                            >
                                            <span><?php esc_html_e('Enable visitor access with password', 'maintenance-genius'); ?></span>
                                        </label>
                                    </div>

                                    <div id="mg-visitor-password-section" style="<?php echo !$settings['visitor_access_enabled'] ? 'display:none;' : ''; ?>">
                                        
                                        <div class="mg-separator"></div>

                                        <!-- Mot de passe visiteur -->
                                        <div class="mg-form-group" id="mg-visitor-password-group">
                                            <label for="mg-visitor-password"><?php esc_html_e('Visitor password', 'maintenance-genius'); ?></label>
                                            
                                            <div class="mg-password-field-wrapper">
                                                <div class="mg-password-input-group">
                                                    <input 
                                                        type="password" 
                                                        id="mg-visitor-password" 
                                                        name="visitor_password" 
                                                        value=""
                                                        placeholder="<?php echo $has_visitor_password ? '••••••••' : esc_attr__('Enter a password', 'maintenance-genius'); ?>"
                                                        class="mg-password-input"
                                                        autocomplete="new-password"
                                                    >
                                                    
                                                    <div class="mg-password-actions">
                                                        <!-- Toggle visibility -->
                                                        <button type="button" 
                                                                class="mg-password-btn mg-toggle-password" 
                                                                title="<?php esc_attr_e('Show/Hide', 'maintenance-genius'); ?>"
                                                                data-target="mg-visitor-password">
                                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                                <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                                                                <circle cx="12" cy="12" r="3"></circle>
                                                            </svg>
                                                        </button>
                                                        
                                                        <!-- Copy -->
                                                        <button type="button" 
                                                                class="mg-password-btn mg-copy-password" 
                                                                title="<?php esc_attr_e('Copy', 'maintenance-genius'); ?>"
                                                                data-target="mg-visitor-password">
                                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                                <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                                                                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
                                                            </svg>
                                                        </button>
                                                        
                                                        <!-- Generate -->
                                                        <button type="button" 
                                                                class="mg-password-btn mg-generate-password" 
                                                                title="<?php esc_attr_e('Generate a password', 'maintenance-genius'); ?>"
                                                                data-target="mg-visitor-password">
                                                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                                                <path d="M21 2l-2 2m-7.61 7.61a5.5 5.5 0 1 1-7.778 7.778 5.5 5.5 0 0 1 7.777-7.777zm0 0L15.5 7.5m0 0l3 3L22 7l-3-3m-3.5 3.5L19 4"></path>
                                                            </svg>
                                                        </button>
                                                    </div>
                                                </div>
                                                
                                                <div class="mg-password-status">
                                                    <?php if ($has_visitor_password): ?>
                                                    <span class="mg-status-ok">✓ <?php esc_html_e('Password set', 'maintenance-genius'); ?></span>
                                                    <?php endif; ?>
                                                    <span class="mg-password-hint"><?php esc_html_e('Leave empty to keep current, or enter a new password.', 'maintenance-genius'); ?></span>
                                                </div>
                                                <?php if ($has_visitor_password): ?>
                                                <label class="mg-clear-password-row" style="display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:#b91c1c;cursor:pointer;">
                                                    <input type="checkbox" id="mg-clear-visitor-password" style="margin:0;">
                                                    <?php esc_html_e('Remove the stored password (visitor access will require a new one)', 'maintenance-genius'); ?>
                                                </label>
                                                <?php endif; ?>
                                            </div>
                                        </div>

                                        <!-- Durée d'accès (v2.9.73 : clé unifiée visitor_access_duration en SECONDES) -->
                                        <?php
                                        $vad = intval($settings['visitor_access_duration'] ?? 86400);
                                        $vad_presets = [3600, 21600, 43200, 86400, 172800, 604800, 1209600, 2592000];
                                        $vad_is_custom = !in_array($vad, $vad_presets, true);
                                        $vad_custom_days = $vad_is_custom ? max(1, (int) round($vad / DAY_IN_SECONDS)) : '';
                                        ?>
                                        <div class="mg-form-group">
                                            <label for="mg-visitor-duration"><?php esc_html_e('Visitor access duration', 'maintenance-genius'); ?></label>
                                            <select id="mg-visitor-duration" name="visitor_access_duration">
                                                <option value="3600" <?php selected($vad, 3600); ?>><?php esc_html_e('1 hour', 'maintenance-genius'); ?></option>
                                                <option value="21600" <?php selected($vad, 21600); ?>><?php esc_html_e('6 hours', 'maintenance-genius'); ?></option>
                                                <option value="43200" <?php selected($vad, 43200); ?>><?php esc_html_e('12 hours', 'maintenance-genius'); ?></option>
                                                <option value="86400" <?php selected($vad, 86400); ?>><?php esc_html_e('24 hours (default)', 'maintenance-genius'); ?></option>
                                                <option value="172800" <?php selected($vad, 172800); ?>><?php esc_html_e('48 hours', 'maintenance-genius'); ?></option>
                                                <option value="604800" <?php selected($vad, 604800); ?>><?php esc_html_e('1 week', 'maintenance-genius'); ?></option>
                                                <option value="1209600" <?php selected($vad, 1209600); ?>><?php esc_html_e('2 weeks', 'maintenance-genius'); ?></option>
                                                <option value="2592000" <?php selected($vad, 2592000); ?>><?php esc_html_e('1 month', 'maintenance-genius'); ?></option>
                                                <option value="custom" <?php selected($vad_is_custom, true); ?>><?php esc_html_e('Custom (days)', 'maintenance-genius'); ?></option>
                                            </select>
                                            <div class="mg-vad-custom" style="margin-top:8px;<?php echo esc_attr( $vad_is_custom ? '' : 'display:none;' ); ?>">
                                                <input type="number" min="1" max="365" step="1" id="mg-visitor-custom-days" name="visitor_access_custom_days" value="<?php echo esc_attr($vad_custom_days); ?>" placeholder="<?php esc_attr_e('Number of days', 'maintenance-genius'); ?>" style="max-width:120px;">
                                                <span><?php esc_html_e('days (1–365)', 'maintenance-genius'); ?></span>
                                            </div>
                                            <p class="mg-field-description"><?php esc_html_e('Visitors will be able to access the site for this duration after login', 'maintenance-genius'); ?></p>
                                        </div>

                                        <!-- Bouton révoquer -->
                                        <div class="mg-form-group">
                                            <button type="button" class="mg-btn mg-btn-danger" id="mg-revoke-visitor-access" style="margin-top: 10px;">
                                                <?php esc_html_e('Revoke all active visitor access', 'maintenance-genius'); ?>
                                            </button>
                                            <p class="mg-field-description"><?php esc_html_e('Immediately disconnects all visitors who used the password', 'maintenance-genius'); ?></p>
                                        </div>
                                    </div>

                                    <div class="mg-form-actions">
                                        <button type="button" class="mg-btn mg-btn-primary" id="mg-save-visitor-access">
                                            <?php esc_html_e('Save', 'maintenance-genius'); ?>
                                        </button>
                                    </div>
                                </div>
                            </div>


                            <!-- ACCORDION: Turnstile (PRO) -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🛡️ <?php esc_html_e('Turnstile CAPTCHA', 'maintenance-genius'); ?></h3>
                                        <?php if (class_exists('MG_Diagnostic')) { echo MG_Diagnostic::section_badge('turnstile'); /* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped inside section_badge() */ } ?>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Protect your forms against bots and spam with Cloudflare Turnstile. Free, privacy-friendly and GDPR compliant.', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['turnstile_enabled'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                            <?php if (!$is_pro): ?>
                            <a href="#tab-pro" class="mg-pro-locked-overlay">
                                🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                            </a>
                            <?php endif; ?>

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input
                                        type="checkbox"
                                        id="mg-turnstile-enabled"
                                        name="turnstile_enabled"
                                        <?php checked(!empty($settings['turnstile_enabled']), true); ?>
                                        <?php disabled(!$is_pro); ?>
                                    >
                                    <?php esc_html_e('Enable Cloudflare Turnstile', 'maintenance-genius'); ?>
                                </label>
                                <p class="mg-field-description">
                                    <?php esc_html_e('Protects forms against bots.', 'maintenance-genius'); ?> 
                                    <a href="https://dash.cloudflare.com/?to=/:account/turnstile" target="_blank"><?php esc_html_e('Get your keys for free →', 'maintenance-genius'); ?></a>
                                </p>
                            </div>

                            <div id="mg-turnstile-options" style="<?php echo empty($settings['turnstile_enabled']) ? 'display:none;' : ''; ?>">
                                <div class="mg-form-row">
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-turnstile-site-key">
                                            <?php esc_html_e('Site Key (Public key)', 'maintenance-genius'); ?>
                                            <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Public key provided by Cloudflare, used on the frontend.', 'maintenance-genius'); ?>" data-tooltip-pos="bottom">?</span>
                                        </label>
                                        <input type="text" id="mg-turnstile-site-key" 
                                               value="<?php echo esc_attr($settings['turnstile_site_key'] ?? ''); ?>"
                                               placeholder="0x4AAAAAAA..."
                                               <?php disabled(!$is_pro); ?>>
                                    </div>
                                    <div class="mg-form-group mg-half">
                                        <label for="mg-turnstile-secret-key">
                                            <?php esc_html_e('Secret Key (Private key)', 'maintenance-genius'); ?>
                                            <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Secret key provided by Cloudflare, used server-side for verification.', 'maintenance-genius'); ?>" data-tooltip-pos="bottom">?</span>
                                        </label>
                                        <input type="password" id="mg-turnstile-secret-key" 
                                               value="<?php echo esc_attr($settings['turnstile_secret_key'] ?? ''); ?>"
                                               placeholder="0x4AAAAAAA..."
                                               <?php disabled(!$is_pro); ?>>
                                    </div>
                                </div>

                                <div class="mg-separator" style="margin: 15px 0;"></div>
                                <p class="mg-field-description" style="margin-bottom: 10px;"><strong><?php esc_html_e('Protect forms:', 'maintenance-genius'); ?></strong></p>
                                
                                <div class="mg-form-group">
                                    <label class="mg-checkbox-label">
                                        <input type="checkbox" id="mg-turnstile-on-notification" 
                                               <?php checked(!empty($settings['turnstile_on_notification']), true); ?>
                                               <?php disabled(!$is_pro); ?>>
                                        📧 <?php esc_html_e('"Notify me" form (email notification)', 'maintenance-genius'); ?>
                                    </label>
                                </div>
                                <div class="mg-form-group">
                                    <label class="mg-checkbox-label">
                                        <input type="checkbox" id="mg-turnstile-on-visitor"
                                               <?php checked(!empty($settings['turnstile_on_visitor']), true); ?>
                                               <?php disabled(!$is_pro); ?>>
                                        🔐 <?php esc_html_e('"Visitor Access" form (password)', 'maintenance-genius'); ?>
                                    </label>
                                </div>

                                <div class="mg-turnstile-help" style="background: #e3f2fd; padding: 12px; border-radius: 8px; margin-top: 15px;">
                                    <p style="margin: 0; font-size: 13px;">
                                        <strong>📘 <?php esc_html_e('How to get your keys:', 'maintenance-genius'); ?></strong><br>
                                        1. <?php esc_html_e('Create a', 'maintenance-genius'); ?> <a href="https://dash.cloudflare.com/sign-up" target="_blank">Cloudflare</a> (<?php esc_html_e('free', 'maintenance-genius'); ?>)<br>
                                        2. <?php esc_html_e('Go to', 'maintenance-genius'); ?> <a href="https://dash.cloudflare.com/?to=/:account/turnstile" target="_blank">Turnstile</a><br>
                                        3. <?php esc_html_e('Click "Add site" and enter your domain', 'maintenance-genius'); ?><br>
                                        4. <?php esc_html_e('Copy Site Key and Secret Key here', 'maintenance-genius'); ?>
                                    </p>
                                </div>
                            </div>
                            </div><!-- Fin PRO locked Turnstile -->

                                </div>
                            </div><!-- Fin ACCORDION Turnstile -->

                            <!-- ACCORDION: Statistiques (PRO) -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">📊 <?php esc_html_e('Visitor Statistics', 'maintenance-genius'); ?></h3>
                                        <?php if (class_exists('MG_Diagnostic')) { echo MG_Diagnostic::section_badge('db_write'); /* phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped inside section_badge() */ } ?>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Track visits while your site is under maintenance.', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['stats_enabled'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                            <?php if (!$is_pro): ?>
                            <a href="#tab-pro" class="mg-pro-locked-overlay">
                                🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                            </a>
                            <?php endif; ?>

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input type="checkbox" id="mg-stats-enabled" 
                                           <?php checked($settings['stats_enabled'] ?? false, true); ?>
                                           <?php disabled(!$is_pro); ?>>
                                    <?php esc_html_e('Enable statistics tracking', 'maintenance-genius'); ?>
                                </label>
                            </div>

                            <div id="mg-stats-display" style="margin-top: 15px;">
                                <?php 
                                $mg_stats_disp = MG_Settings::get_stats();
                                $stats_visits = intval($mg_stats_disp['visits']);
                                $stats_unique = intval($mg_stats_disp['unique']);
                                $stats_start = $settings['stats_start_date'] ?? '';
                                ?>
                                
                                <?php if (empty($settings['stats_enabled']) && ($stats_visits > 0 || $stats_unique > 0)): ?>
                                <p class="mg-field-description" style="margin: 0 0 12px; padding: 8px 12px; background: #fff8e5; border-radius: 6px; color: #6b4e00;">
                                    ⏸ <?php esc_html_e('Tracking is disabled — the numbers below are historical data. New visits are no longer counted.', 'maintenance-genius'); ?>
                                </p>
                                <?php endif; ?>
                                
                                <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                                    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 12px; padding: 20px 30px; text-align: center; flex: 1; min-width: 150px;">
                                        <div style="font-size: 36px; font-weight: bold; color: #fff;" id="mg-stats-visits-count"><?php echo number_format($stats_visits); ?></div>
                                        <div style="font-size: 14px; color: rgba(255,255,255,0.8);"><?php esc_html_e('Total visits', 'maintenance-genius'); ?></div>
                                    </div>
                                    <div style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%); border-radius: 12px; padding: 20px 30px; text-align: center; flex: 1; min-width: 150px;">
                                        <div style="font-size: 36px; font-weight: bold; color: #fff;" id="mg-stats-unique-count"><?php echo number_format($stats_unique); ?></div>
                                        <div style="font-size: 14px; color: rgba(255,255,255,0.8);"><?php esc_html_e('Unique visitors', 'maintenance-genius'); ?></div>
                                    </div>
                                </div>

                                <?php if ($stats_start): ?>
                                <p style="margin-top: 15px; color: #666; font-size: 13px; text-align: center;">
                                    📅 <?php esc_html_e('Since', 'maintenance-genius'); ?> <?php echo esc_html( date_i18n('F j, Y H:i', strtotime($stats_start)) ); ?>
                                </p>
                                <?php endif; ?>

                                <div style="margin-top: 15px; text-align: center;">
                                    <button type="button" id="mg-reset-stats" class="button" style="color: #dc3545; border-color: #dc3545;" <?php disabled(!$is_pro); ?>>
                                        🗑️ <?php esc_html_e('Reset statistics', 'maintenance-genius'); ?>
                                    </button>
                                </div>
                            </div>
                            </div><!-- Fin PRO locked Stats -->
                                </div>
                            </div><!-- Fin ACCORDION Stats -->

                            <!-- ACCORDION: Whitelist -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">✅ <?php esc_html_e('Whitelist (Allow Access)', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Define who can access the site during maintenance: roles, IPs, specific URLs.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                                        <?php if (!$is_pro): ?>
                                        <a href="#tab-pro" class="mg-pro-locked-overlay">
                                            🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                                        </a>
                                        <?php endif; ?>
                                        
                                        <p class="mg-field-description" style="margin-bottom: 20px;">
                                            <?php esc_html_e('Items in the whitelist can access the site EVEN if maintenance is enabled.', 'maintenance-genius'); ?>
                                        </p>

                                        <div class="mg-form-group">
                                            <label class="mg-checkbox-label">
                                                <input type="checkbox" id="mg-whitelist-enabled" <?php checked(!empty($settings['whitelist_enabled']), true); ?> <?php disabled(!$is_pro); ?>>
                                                <?php esc_html_e('Enable custom whitelist', 'maintenance-genius'); ?>
                                            </label>
                                            <p class="mg-field-description"><?php esc_html_e('Note: WordPress administrators always have access.', 'maintenance-genius'); ?></p>
                                        </div>

                                        <div id="mg-whitelist-options" style="<?php echo empty($settings['whitelist_enabled']) ? 'display:none;' : ''; ?>">
                                            
                                            <div class="mg-separator"></div>

                                            <!-- Whitelist Roles -->
                                            <div class="mg-form-group">
                                                <label><?php esc_html_e('Allowed roles', 'maintenance-genius'); ?></label>
                                                <div class="mg-checkbox-grid">
                                                    <?php foreach ($roles as $role => $name): ?>
                                                    <label class="mg-checkbox-label">
                                                        <input type="checkbox" 
                                                               name="whitelist_roles[]" 
                                                               value="<?php echo esc_attr($role); ?>"
                                                               <?php checked(in_array($role, $settings['whitelist_roles'] ?? ['administrator']), true); ?>
                                                               <?php disabled($role, 'administrator'); ?>>
                                                        <?php echo esc_html($name); ?>
                                                        <?php if ($role === 'administrator'): ?><small>(toujours actif)</small><?php endif; ?>
                                                    </label>
                                                    <?php endforeach; ?>
                                                </div>
                                            </div>

                                            <!-- Whitelist URLs -->
                                            <div class="mg-form-group">
                                                <label for="mg-whitelist-urls"><?php esc_html_e('Accessible URLs (one per line)', 'maintenance-genius'); ?></label>
                                                <textarea id="mg-whitelist-urls" rows="4" placeholder="/contact&#10;/mentions-legales&#10;/api/*"><?php echo esc_textarea(implode("\n", $settings['whitelist_urls'] ?? [])); ?></textarea>
                                            </div>

                                            <!-- Whitelist IPs -->
                                            <div class="mg-form-group">
                                                <label for="mg-whitelist-ips"><?php esc_html_e('Allowed IPs (one per line)', 'maintenance-genius'); ?></label>
                                                <textarea id="mg-whitelist-ips" rows="4" placeholder="192.168.1.*&#10;10.0.0.0/24&#10;203.0.113.50"><?php echo esc_textarea(implode("\n", $settings['whitelist_ips'] ?? [])); ?></textarea>
                                            </div>

                                            <!-- Whitelist User-Agents -->
                                            <div class="mg-form-group">
                                                <label for="mg-whitelist-user-agents"><?php esc_html_e('Allowed User-Agents (SEO Bots)', 'maintenance-genius'); ?></label>
                                                <textarea id="mg-whitelist-user-agents" rows="3" placeholder="Googlebot&#10;Bingbot&#10;Slurp"><?php echo esc_textarea(implode("\n", $settings['whitelist_user_agents'] ?? [])); ?></textarea>
                                            </div>

                                        </div>

                                        <div class="mg-form-actions">
                                            <button type="button" class="mg-btn mg-btn-primary" id="mg-save-whitelist">
                                                <?php esc_html_e('Save whitelist', 'maintenance-genius'); ?>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- ACCORDION: Blacklist -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🚫 <?php esc_html_e('Blacklist (Block Access)', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Block specific IPs or user agents from accessing your site.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                                        <?php if (!$is_pro): ?>
                                        <a href="#tab-pro" class="mg-pro-locked-overlay">
                                            🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                                        </a>
                                        <?php endif; ?>
                                        
                                        <p class="mg-field-description" style="margin-bottom: 20px;">
                                            <?php esc_html_e('Items in the blacklist are blocked EVEN if maintenance is disabled.', 'maintenance-genius'); ?>
                                        </p>

                                        <div class="mg-form-group">
                                            <label class="mg-checkbox-label">
                                                <input type="checkbox" id="mg-blacklist-enabled" <?php checked(!empty($settings['blacklist_enabled']), true); ?> <?php disabled(!$is_pro); ?>>
                                                <?php esc_html_e('Enable blacklist', 'maintenance-genius'); ?>
                                            </label>
                                        </div>

                                        <div id="mg-blacklist-options" style="<?php echo empty($settings['blacklist_enabled']) ? 'display:none;' : ''; ?>">
                                            
                                            <div class="mg-separator"></div>

                                            <!-- Blacklist IPs -->
                                            <div class="mg-form-group">
                                                <label for="mg-blacklist-ips"><?php esc_html_e('Blocked IPs (one per line)', 'maintenance-genius'); ?></label>
                                                <textarea id="mg-blacklist-ips" rows="4" placeholder="192.168.1.100&#10;10.0.0.50"><?php echo esc_textarea(implode("\n", $settings['blacklist_ips'] ?? [])); ?></textarea>
                                            </div>

                                            <!-- Blacklist User-Agents -->
                                            <div class="mg-form-group">
                                                <label for="mg-blacklist-user-agents"><?php esc_html_e('Blocked User-Agents', 'maintenance-genius'); ?></label>
                                                <textarea id="mg-blacklist-user-agents" rows="3" placeholder="BadBot&#10;MaliciousCrawler"><?php echo esc_textarea(implode("\n", $settings['blacklist_user_agents'] ?? [])); ?></textarea>
                                            </div>

                                            <!-- Message personnalisé -->
                                            <div class="mg-form-group">
                                                <label for="mg-blacklist-message"><?php esc_html_e('Message shown to blocked visitors', 'maintenance-genius'); ?></label>
                                                <textarea id="mg-blacklist-message" rows="2" placeholder="<?php esc_attr_e('Access denied', 'maintenance-genius'); ?>"><?php echo esc_textarea($settings['blacklist_message'] ?? 'Access denied.'); ?></textarea>
                                            </div>

                                        </div>

                                        <div class="mg-form-actions">
                                            <button type="button" class="mg-btn mg-btn-primary" id="mg-save-blacklist">
                                                <?php esc_html_e('Save blacklist', 'maintenance-genius'); ?>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- ACCORDION: Custom Tokens -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🎟️ <?php esc_html_e('Custom Access Tokens', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Create unique access links for clients or testers.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                                        <?php if (!$is_pro): ?>
                                        <a href="#tab-pro" class="mg-pro-locked-overlay">
                                            🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                                        </a>
                                        <?php endif; ?>
                                        
                                        <p class="mg-field-description" style="margin-bottom: 20px;">
                                            <?php esc_html_e('Create unique access links for your clients or testers. Each token can be limited in time and number of uses.', 'maintenance-genius'); ?>
                                        </p>

                                        <!-- Créer un nouveau token -->
                                        <div class="mg-form-group">
                                            <label><?php esc_html_e('Create new access token', 'maintenance-genius'); ?></label>
                                            <div class="mg-token-create" style="display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;">
                                                <div style="flex: 1; min-width: 200px;">
                                                    <input type="text" id="mg-new-token-name" placeholder="<?php esc_attr_e('Token name (e.g. Client ABC)', 'maintenance-genius'); ?>" <?php disabled(!$is_pro); ?>>
                                                </div>
                                                <div style="width: 150px;">
                                                    <select id="mg-new-token-duration" <?php disabled(!$is_pro); ?>>
                                                        <option value="3600"><?php esc_html_e('1 hour', 'maintenance-genius'); ?></option>
                                                        <option value="86400" selected><?php esc_html_e('24 hours', 'maintenance-genius'); ?></option>
                                                        <option value="604800"><?php esc_html_e('1 week', 'maintenance-genius'); ?></option>
                                                        <option value="2592000"><?php esc_html_e('30 days', 'maintenance-genius'); ?></option>
                                                        <option value="0"><?php esc_html_e('Unlimited', 'maintenance-genius'); ?></option>
                                                    </select>
                                                </div>
                                                <button type="button" class="mg-btn mg-btn-primary" id="mg-create-token" <?php disabled(!$is_pro); ?>>
                                                    + <?php esc_html_e('Create token', 'maintenance-genius'); ?>
                                                </button>
                                            </div>
                                        </div>

                                        <!-- Liste des tokens -->
                                        <div class="mg-form-group">
                                            <label><?php esc_html_e('Active tokens', 'maintenance-genius'); ?></label>
                                            <div id="mg-tokens-list" class="mg-tokens-list">
                                                <?php 
                                                $mg_access_tokens = MG_Settings::get_access_tokens();
                                                if (empty($mg_access_tokens)): ?>
                                                <p class="mg-no-tokens" style="color: #666; font-style: italic;"><?php esc_html_e('No token created', 'maintenance-genius'); ?></p>
                                                <?php else: ?>
                                                <?php foreach ($mg_access_tokens as $mg_token_id => $mg_token): 
                                                    $mg_token_expired = !empty($mg_token['expires']) && strtotime($mg_token['expires']) <= current_time('timestamp');
                                                ?>
                                                <div class="mg-token-item<?php echo $mg_token_expired ? ' mg-token-expired' : ''; ?>" data-token="<?php echo esc_attr($mg_token_id); ?>">
                                                    <div class="mg-token-info">
                                                        <strong><?php echo esc_html($mg_token['name']); ?></strong>
                                                        <span class="mg-token-meta">
                                                            <?php if (!empty($mg_token['expires'])): ?>
                                                            <?php echo $mg_token_expired ? esc_html__('Expired on', 'maintenance-genius') : esc_html__('Expires on', 'maintenance-genius'); ?> <?php echo esc_html( date_i18n('d/m/Y H:i', strtotime($mg_token['expires'])) ); ?>
                                                            <?php else: ?>
                                                            <?php esc_html_e('Unlimited', 'maintenance-genius'); ?>
                                                            <?php endif; ?>
                                                            | <?php echo intval($mg_token['visits'] ?? 0); ?> <?php esc_html_e('visits', 'maintenance-genius'); ?>
                                                        </span>
                                                    </div>
                                                    <div class="mg-token-actions">
                                                        <button type="button" class="mg-btn mg-btn-secondary mg-copy-token" data-url="<?php echo esc_attr( home_url('?mg_access=' . $mg_token_id) ); ?>">
                                                            <?php esc_html_e('Copy link', 'maintenance-genius'); ?>
                                                        </button>
                                                        <button type="button" class="mg-btn mg-btn-danger mg-delete-token" data-token="<?php echo esc_attr($mg_token_id); ?>" data-name="<?php echo esc_attr($mg_token['name']); ?>" aria-label="<?php esc_attr_e('Delete token', 'maintenance-genius'); ?>">
                                                            &times;
                                                        </button>
                                                    </div>
                                                </div>
                                                <?php endforeach; ?>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- ACCORDION: Blacklist Logs -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">📋 <?php esc_html_e('Blacklist Logs', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('View blocked access attempts.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                                        <?php if (!$is_pro): ?>
                                        <a href="#tab-pro" class="mg-pro-locked-overlay">
                                            🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                                        </a>
                                        <?php endif; ?>
                                        
                                        <p class="mg-field-description" style="margin-bottom: 20px;">
                                            <?php esc_html_e('History of blocked access attempts by the blacklist.', 'maintenance-genius'); ?>
                                        </p>

                                        <div id="mg-blacklist-logs" class="mg-logs-container">
                                            <?php 
                                            $logs = get_option('mg_blacklist_logs', []);
                                            if (empty($logs)): ?>
                                            <p class="mg-no-logs" style="color: #666; font-style: italic;"><?php esc_html_e('No blocks recorded', 'maintenance-genius'); ?></p>
                                            <?php else: ?>
                                            <table class="mg-logs-table">
                                                <thead>
                                                    <tr>
                                                        <th><?php esc_html_e('Date', 'maintenance-genius'); ?></th>
                                                        <th><?php esc_html_e('IP', 'maintenance-genius'); ?></th>
                                                        <th><?php esc_html_e('User-Agent', 'maintenance-genius'); ?></th>
                                                        <th><?php esc_html_e('Reason', 'maintenance-genius'); ?></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php foreach (array_slice(array_reverse($logs), 0, 50) as $log): ?>
                                                    <tr>
                                                        <td><?php echo esc_html(date_i18n('d/m/Y H:i:s', $log['time'])); ?></td>
                                                        <td><?php echo esc_html($log['ip']); ?></td>
                                                        <td class="mg-log-ua"><?php echo esc_html(substr($log['user_agent'] ?? '-', 0, 50)); ?></td>
                                                        <td><?php echo esc_html($log['reason']); ?></td>
                                                    </tr>
                                                    <?php endforeach; ?>
                                                </tbody>
                                            </table>
                                            <?php endif; ?>
                                        </div>

                                        <div class="mg-form-actions">
                                            <button type="button" class="mg-btn mg-btn-secondary" id="mg-refresh-logs">
                                                🔄 <?php esc_html_e('Refresh', 'maintenance-genius'); ?>
                                            </button>
                                            <button type="button" class="mg-btn mg-btn-danger" id="mg-clear-logs">
                                                🗑️ <?php esc_html_e('Clear logs', 'maintenance-genius'); ?>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- ================================================
                                 ACCORDION: Toggle à Distance (v2.7.1 PRO)
                                 ================================================ -->
                            <?php
                            $remote_config = MG_Remote::load_config();
                            $remote_enabled = !empty($remote_config['enabled']);
                            $remote_has_token = !empty($remote_config['token_hash']);
                            $remote_has_pin = !empty($remote_config['pin_hash']);
                            $remote_ip_whitelist = $remote_config['ip_whitelist'] ?? [];
                            $remote_ip_enabled = !empty($remote_config['ip_whitelist_enabled']);
                            ?>
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">📱 <?php esc_html_e('Remote Toggle', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Control maintenance mode ON/OFF from your phone without WordPress login.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                    <?php if ($remote_enabled && $remote_has_token): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                                        <?php if (!$is_pro): ?>
                                        <a href="#tab-pro" class="mg-pro-locked-overlay">
                                            🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                                        </a>
                                        <?php endif; ?>

                                        <p class="mg-field-description" style="margin-bottom: 20px;">
                                            <?php esc_html_e('Enable/disable maintenance from your phone with a secure link. No WordPress login required.', 'maintenance-genius'); ?>
                                        </p>

                                        <!-- Activer le Remote Control -->
                                        <div class="mg-form-group">
                                            <label class="mg-checkbox-label">
                                                <input type="checkbox" id="mg-remote-enabled" <?php checked($remote_enabled, true); ?> <?php disabled(!$is_pro); ?>>
                                                <span><?php esc_html_e('Enable remote toggle', 'maintenance-genius'); ?></span>
                                                <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Permet d\'activer/désactiver la maintenance depuis votre téléphone via un lien sécurisé, sans connexion WordPress.', 'maintenance-genius'); ?>">?</span>
                                            </label>
                                        </div>

                                        <div id="mg-remote-options" style="<?php echo !$remote_enabled ? 'display:none;' : ''; ?>">

                                            <!-- Guide rapide -->
                                            <div style="background:linear-gradient(135deg,#f8f0ff,#f0f4ff);border:1px solid #e0d4f5;border-radius:10px;padding:16px 20px;margin:20px 0;">
                                                <p style="margin:0;font-size:13px;color:#555;line-height:1.6;">
                                                    <strong style="color:#667eea;">📋 <?php esc_html_e('Configuration en 3 étapes :', 'maintenance-genius'); ?></strong><br>
                                                    <span style="color:#888;">①</span> <?php esc_html_e('Configurez la sécurité (PIN, IP)', 'maintenance-genius'); ?> →
                                                    <span style="color:#888;">②</span> <?php esc_html_e('Générez votre lien sécurisé', 'maintenance-genius'); ?> →
                                                    <span style="color:#888;">③</span> <?php esc_html_e('Envoyez-le par email sur votre téléphone', 'maintenance-genius'); ?>
                                                </p>
                                            </div>

                                            <?php
                                            // États des étapes
                                            $step1_color = '#667eea'; $step1_icon = '1'; // bleu = rien
                                            if ($remote_has_pin) {
                                                $step1_color = '#4CAF50'; $step1_icon = '✓'; // vert = PIN configuré
                                            } elseif ($remote_ip_enabled) {
                                                $step1_color = '#e67e22'; $step1_icon = '!'; // orange = IP seul, pas de PIN
                                            }
                                            $step2_done = $remote_has_token;
                                            $step3_done = !empty($remote_config['email_sent']);
                                            ?>

                                            <!-- ━━━ ÉTAPE 1 : Sécurité ━━━ -->
                                            <div style="display:flex;align-items:center;gap:10px;margin-bottom:15px;">
                                                <span id="mg-remote-step1" style="display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:<?php echo esc_attr( $step1_color ); ?>;color:#fff;font-weight:700;font-size:14px;"><?php echo esc_html( $step1_icon ); ?></span>
                                                <h4 style="margin:0;font-size:15px;color:#333;"><?php esc_html_e('Sécurité', 'maintenance-genius'); ?>
                                                    <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Protégez l\'accès avec un code PIN et/ou une liste blanche IP. Le PIN est fortement recommandé.', 'maintenance-genius'); ?>">?</span>
                                                </h4>
                                            </div>

                                            <div id="mg-remote-step1-bar" style="border-left:3px solid <?php echo esc_attr( $step1_color ); ?>;padding-left:20px;margin-left:13px;margin-bottom:25px;">
                                                <!-- Code PIN -->
                                                <div class="mg-form-group" style="margin-bottom:15px;">
                                                    <label class="mg-checkbox-label" style="margin-bottom:8px;">
                                                        <input type="checkbox" id="mg-remote-pin-enabled" <?php checked(!empty($remote_config['pin_enabled']), true); ?> <?php disabled(!$is_pro); ?>>
                                                        <span>🔐 <?php esc_html_e('Require PIN to toggle (recommended)', 'maintenance-genius'); ?></span>
                                                    </label>
                                                    <div id="mg-remote-pin-section" style="<?php echo empty($remote_config['pin_enabled']) ? 'display:none;' : ''; ?>padding-left:10px;">
                                                        <div style="display:flex;gap:10px;align-items:center;">
                                                            <input type="password" id="mg-remote-pin" placeholder="<?php echo $remote_has_pin ? '••••••' : esc_attr__('Enter a PIN (4-8 digits)', 'maintenance-genius'); ?>" maxlength="8" pattern="[0-9]*" inputmode="numeric" style="max-width:200px;" <?php disabled(!$is_pro); ?>>
                                                            <?php if ($remote_has_pin): ?>
                                                            <span class="mg-status-ok" style="font-size:12px;">✓ <?php esc_html_e('PIN configured', 'maintenance-genius'); ?></span>
                                                            <?php endif; ?>
                                                        </div>
                                                        <p class="mg-field-description"><?php esc_html_e('Leave empty to keep current PIN. Required for each remote access.', 'maintenance-genius'); ?></p>
                                                    </div>
                                                </div>

                                                <!-- Liste blanche IP -->
                                                <div class="mg-form-group">
                                                    <label class="mg-checkbox-label" style="margin-bottom:8px;">
                                                        <input type="checkbox" id="mg-remote-ip-enabled" <?php checked($remote_ip_enabled, true); ?> <?php disabled(!$is_pro); ?>>
                                                        <span>🌐 <?php esc_html_e('Restrict to specific IPs', 'maintenance-genius'); ?></span>
                                                    </label>
                                                    <div id="mg-remote-ip-section" style="<?php echo !$remote_ip_enabled ? 'display:none;' : ''; ?>padding-left:10px;">
                                                        <textarea id="mg-remote-ip-whitelist" rows="3" placeholder="<?php echo esc_attr( sanitize_text_field( wp_unslash( $_SERVER['REMOTE_ADDR'] ?? '' ) ) ); ?>&#10;192.168.1.*&#10;10.0.0.0/24" <?php disabled(!$is_pro); ?>><?php echo esc_textarea(implode("\n", $remote_ip_whitelist)); ?></textarea>
                                                        <p class="mg-field-description">
                                                            <?php esc_html_e('Votre IP actuelle :', 'maintenance-genius'); ?> <code style="background:#f0f0f0;padding:2px 6px;border-radius:3px;"><?php echo esc_html( sanitize_text_field( wp_unslash( $_SERVER['REMOTE_ADDR'] ?? '—' ) ) ); ?></code>
                                                        </p>
                                                    </div>
                                                </div>

                                                <div class="mg-form-actions" style="margin-top:15px;">
                                                    <button type="button" class="mg-btn mg-btn-secondary" id="mg-remote-save-config" <?php disabled(!$is_pro); ?> style="font-size:13px;">
                                                        💾 <?php esc_html_e('Enregistrer les paramètres', 'maintenance-genius'); ?>
                                                    </button>
                                                </div>
                                            </div>

                                            <!-- ━━━ ÉTAPE 2 : Générer le lien ━━━ -->
                                            <div style="display:flex;align-items:center;gap:10px;margin-bottom:15px;">
                                                <span style="display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:<?php echo esc_attr( $remote_has_token ? '#4CAF50' : '#667eea' ); ?>;color:#fff;font-weight:700;font-size:14px;"><?php echo esc_html( $remote_has_token ? '✓' : '2' ); ?></span>
                                                <h4 style="margin:0;font-size:15px;color:#333;"><?php esc_html_e('Générer le lien sécurisé', 'maintenance-genius'); ?>
                                                    <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Génère un lien unique. Vos paramètres de sécurité sont sauvegardés automatiquement.', 'maintenance-genius'); ?>">?</span>
                                                </h4>
                                            </div>

                                            <div style="border-left:3px solid <?php echo esc_attr( $remote_has_token ? '#4CAF50' : '#667eea' ); ?>;padding-left:20px;margin-left:13px;margin-bottom:25px;">
                                                <?php if ($remote_has_token): ?>
                                                <div style="display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;">
                                                    <span class="mg-status-ok">✓ <?php esc_html_e('Jeton actif', 'maintenance-genius'); ?></span>
                                                    <span style="color:#666;font-family:monospace;font-size:12px;"><?php echo esc_html($remote_config['token_hint'] ?? ''); ?></span>
                                                    <?php if (!empty($remote_config['token_created'])): ?>
                                                    <span style="color:#888;font-size:11px;"><?php esc_html_e('Created on', 'maintenance-genius'); ?> <?php echo esc_html( date_i18n('j M Y', strtotime($remote_config['token_created'])) ); ?></span>
                                                    <?php endif; ?>
                                                    <?php if (!empty($remote_config['token_expires']) && $remote_config['token_expires'] > 0): ?>
                                                    <span style="color:#e67e22;font-size:11px;">⏰ <?php esc_html_e('Expire le', 'maintenance-genius'); ?> <?php echo esc_html( date_i18n('j M Y', $remote_config['token_expires']) ); ?></span>
                                                    <?php endif; ?>
                                                </div>
                                                <?php endif; ?>

                                                <div style="display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap;">
                                                    <div>
                                                        <label for="mg-remote-token-expires" style="font-size:12px;color:#888;"><?php esc_html_e('Expiration', 'maintenance-genius'); ?></label>
                                                        <select id="mg-remote-token-expires" <?php disabled(!$is_pro); ?>>
                                                            <option value="never"><?php esc_html_e('Jamais', 'maintenance-genius'); ?></option>
                                                            <option value="30d"><?php esc_html_e('30 jours', 'maintenance-genius'); ?></option>
                                                            <option value="90d"><?php esc_html_e('90 jours', 'maintenance-genius'); ?></option>
                                                            <option value="180d"><?php esc_html_e('6 mois', 'maintenance-genius'); ?></option>
                                                            <option value="365d"><?php esc_html_e('1 an', 'maintenance-genius'); ?></option>
                                                        </select>
                                                    </div>
                                                    <button type="button" class="mg-btn mg-btn-primary" id="mg-remote-generate-token" <?php disabled(!$is_pro); ?>>
                                                        🔑 <?php echo esc_html( $remote_has_token ? __('Regenerate token', 'maintenance-genius') : __('Generate token', 'maintenance-genius') ); ?>
                                                    </button>
                                                </div>
                                                <p class="mg-field-description" style="margin-top:8px;font-style:italic;"><?php esc_html_e('💡 Vos paramètres de sécurité sont sauvegardés automatiquement lors de la génération.', 'maintenance-genius'); ?></p>
                                            </div>

                                            <!-- ━━━ ÉTAPE 3 : Envoyer par email ━━━ -->
                                            <div style="display:flex;align-items:center;gap:10px;margin-bottom:15px;">
                                                <span id="mg-remote-step3" style="display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:<?php echo esc_attr( $step3_done ? '#4CAF50' : ( $remote_has_token ? '#667eea' : '#ccc' ) ); ?>;color:#fff;font-weight:700;font-size:14px;"><?php echo esc_html( $step3_done ? '✓' : '3' ); ?></span>
                                                <h4 style="margin:0;font-size:15px;color:<?php echo $remote_has_token ? '#333' : '#999'; ?>;"><?php esc_html_e('Envoyer le lien par email', 'maintenance-genius'); ?>
                                                    <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Envoie le lien avec les instructions pour l\'ajouter sur l\'écran d\'accueil iOS/Android.', 'maintenance-genius'); ?>">?</span>
                                                </h4>
                                            </div>

                                            <div id="mg-remote-step3-bar" style="border-left:3px solid <?php echo esc_attr( $step3_done ? '#4CAF50' : ( $remote_has_token ? '#667eea' : '#ccc' ) ); ?>;padding-left:20px;margin-left:13px;margin-bottom:25px;">
                                                <?php if ($remote_has_token): ?>
                                                <div style="display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;">
                                                    <div style="flex:1;min-width:200px;">
                                                        <input type="email" id="mg-remote-email-direct" placeholder="<?php esc_attr_e('Adresse email', 'maintenance-genius'); ?>" value="<?php echo esc_attr(get_option('admin_email')); ?>" style="width:100%;">
                                                    </div>
                                                    <label class="mg-checkbox-label" style="white-space:nowrap;">
                                                        <input type="checkbox" id="mg-remote-include-pin-direct" <?php checked(!empty($remote_config['pin_enabled']), true); ?>>
                                                        <span><?php esc_html_e('Inclure le PIN', 'maintenance-genius'); ?></span>
                                                    </label>
                                                    <button type="button" class="mg-btn mg-btn-primary" id="mg-remote-send-email-direct-btn" <?php disabled(!$is_pro); ?>>
                                                        <?php esc_html_e('Envoyer', 'maintenance-genius'); ?>
                                                    </button>
                                                </div>
                                                <p id="mg-remote-email-direct-status" style="margin-top:10px;display:none;"></p>
                                                <?php else: ?>
                                                <p style="color:#999;font-size:13px;font-style:italic;">
                                                    <?php esc_html_e('Générez d\'abord un jeton à l\'étape 2 pour pouvoir envoyer le lien.', 'maintenance-genius'); ?>
                                                </p>
                                                <?php endif; ?>
                                            </div>

                                            <!-- Journal d'accès (collapsible) -->
                                            <details style="margin-top:5px;">
                                                <summary style="cursor:pointer;font-weight:600;font-size:14px;color:#555;padding:8px 0;">
                                                    📋 <?php esc_html_e('Remote access log', 'maintenance-genius'); ?>
                                                    <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Historique des connexions et actions via le contrôle à distance.', 'maintenance-genius'); ?>">?</span>
                                                </summary>
                                                <div style="padding-top:10px;">
                                                    <div id="mg-remote-logs" style="max-height:200px;overflow-y:auto;background:#f8f8f8;border:1px solid #ddd;border-radius:8px;padding:10px;font-size:12px;font-family:monospace;">
                                                        <em style="color:#999;"><?php esc_html_e('Click \"Load\" to view logs', 'maintenance-genius'); ?></em>
                                                    </div>
                                                    <div style="display:flex;gap:10px;margin-top:10px;">
                                                        <button type="button" class="mg-btn mg-btn-secondary" id="mg-remote-load-logs" <?php disabled(!$is_pro); ?>>
                                                            🔄 <?php esc_html_e('Load', 'maintenance-genius'); ?>
                                                        </button>
                                                        <button type="button" class="mg-btn mg-btn-danger" id="mg-remote-clear-logs" <?php disabled(!$is_pro); ?>>
                                                            🗑️ <?php esc_html_e('Vider', 'maintenance-genius'); ?>
                                                        </button>
                                                        <button type="button" class="mg-btn mg-btn-secondary" id="mg-remote-reset-ratelimit" <?php disabled(!$is_pro); ?>>
                                                            🔓 <?php esc_html_e('Unblock IPs', 'maintenance-genius'); ?>
                                                        </button>
                                                    </div>
                                                </div>
                                            </details>

                                        </div>

                                </div>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- Modal: Jeton Remote Généré (v2.7.1) -->
                <div id="mg-remote-token-modal" class="mg-modal" style="display:none;">
                    <div class="mg-modal-overlay"></div>
                    <div class="mg-modal-content">
                        <div class="mg-modal-header">
                            <h3>🔑 <?php esc_html_e('Remote token generated!', 'maintenance-genius'); ?></h3>
                            <button type="button" class="mg-modal-close" id="mg-remote-modal-close">&times;</button>
                        </div>
                        <div class="mg-modal-body">
                            <p style="color:#e67e22;font-weight:600;margin-bottom:15px;">
                                ⚠️ <?php esc_html_e('Copy this URL now! It will not be shown again.', 'maintenance-genius'); ?>
                            </p>
                            <div class="mg-url-display">
                                <input type="text" id="mg-remote-created-url" readonly value="">
                                <button type="button" class="mg-btn mg-btn-secondary" id="mg-remote-copy-url">
                                    <?php esc_html_e('Copy', 'maintenance-genius'); ?>
                                </button>
                            </div>

                        </div>
                        <div class="mg-modal-footer">
                            <button type="button" class="mg-btn mg-btn-primary" id="mg-remote-modal-done"><?php esc_html_e('Done', 'maintenance-genius'); ?></button>
                        </div>
                    </div>
                </div>

                <!-- Modal Token Success -->
                <div id="mg-token-modal" class="mg-modal" style="display:none;">
                    <div class="mg-modal-overlay"></div>
                    <div class="mg-modal-content">
                        <div class="mg-modal-header">
                            <h3>✅ <?php esc_html_e('Token created successfully!', 'maintenance-genius'); ?></h3>
                            <button type="button" class="mg-modal-close" id="mg-token-modal-close">&times;</button>
                        </div>
                        <div class="mg-modal-body">
                            <p>><?php esc_html_e('Here is the access link to share:', 'maintenance-genius'); ?></p>
                            <div class="mg-url-display">
                                <input type="text" id="mg-created-url" readonly value="">
                                <button type="button" class="mg-btn mg-btn-secondary" id="mg-copy-created-url">
                                    <?php esc_html_e('Copy', 'maintenance-genius'); ?>
                                </button>
                            </div>
                            <p id="mg-email-status" style="margin-top:15px;color:#4CAF50;display:none;">
                                ✓ <?php esc_html_e('Email sent!', 'maintenance-genius'); ?>
                            </p>
                        </div>
                        <div class="mg-modal-footer">
                            <button type="button" class="mg-btn mg-btn-primary" id="mg-success-close"><?php esc_html_e('Close', 'maintenance-genius'); ?></button>
                        </div>
                    </div>
                </div>

                </div><!-- /tab-access (fix v2.8.0) -->

                <!-- ========================================
                     ONGLET PRO (v2.6.2)
                     ======================================== -->
                <!-- ========================================
                     ONGLET PRO (v2.6.38)
                     ======================================== -->

                <div class="mg-tab-content" id="tab-seo" style="display:none;">
                    <div class="mg-card">
                        <div class="mg-card-header">
                            <h2><?php esc_html_e('SEO & Technical', 'maintenance-genius'); ?></h2>
                            <div class="mg-accordion-controls">
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-expand-all"><?php esc_html_e('Expand All', 'maintenance-genius'); ?></button>
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-collapse-all"><?php esc_html_e('Collapse All', 'maintenance-genius'); ?></button>
                            </div>
                        </div>
                        <div class="mg-card-body">

                            <!-- v2.9.90 — Données & désinstallation -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🗑️ <?php esc_html_e('Data &amp; Uninstall', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Controls what happens to your settings when the plugin is deleted.', 'maintenance-genius'); ?>">?</span>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="mg-form-group">
                                        <label class="mg-checkbox-label">
                                            <input type="checkbox" id="mg-purge-data-on-uninstall" name="purge_data_on_uninstall" <?php checked(!empty($settings['purge_data_on_uninstall']), true); ?>>
                                            <?php esc_html_e('Delete all my settings if I uninstall the plugin', 'maintenance-genius'); ?>
                                            <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('OFF by default: your settings, presets and stats are kept even if the plugin is deleted, so you can reinstall without losing anything. Enable only if you want a full wipe on uninstall.', 'maintenance-genius'); ?>" data-tooltip-pos="bottom">?</span>
                                        </label>
                                        <p class="mg-field-description" style="color:#b45309;">
                                            ⚠️ <?php esc_html_e('When enabled, deleting the plugin erases everything permanently. Leave OFF to keep your configuration safe across reinstalls and updates.', 'maintenance-genius'); ?>
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- Moved from General tab (v2.9.18) -->
                            <!-- ACCORDION: SEO (PRO) -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🔍 <?php esc_html_e('SEO & Search Engines', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Configure how search engines handle your site during maintenance. HTTP 503 tells them to come back later.', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['seo_503_enabled'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">

                            <!-- Section SEO 503 (PRO) -->
                            <div class="<?php echo !$is_pro ? 'mg-pro-locked' : ''; ?>" style="position: relative;">
                            <?php if (!$is_pro): ?>
                            <a href="#tab-pro" class="mg-pro-locked-overlay">
                                🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?>
                            </a>
                            <?php endif; ?>

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input
                                        type="checkbox"
                                        id="mg-seo-503"
                                        name="seo_503_enabled"
                                        <?php checked(!empty($settings['seo_503_enabled']), true); ?>
                                        <?php disabled(!$is_pro); ?>
                                    >
                                    <?php esc_html_e('Enable HTTP 503 response (Service Unavailable)', 'maintenance-genius'); ?>
                                </label>
                                <p class="mg-field-description">
                                    <?php esc_html_e('Tells search engines that the site is temporarily unavailable.', 'maintenance-genius'); ?> 
                                </p>
                            </div>

                            <div class="mg-form-group">
                                <label for="mg-retry-after">
                                    <?php esc_html_e('Retry-After (hours)', 'maintenance-genius'); ?>
                                    <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Tells bots how long to wait before coming back.', 'maintenance-genius'); ?>" data-tooltip-pos="bottom">?</span>
                                </label>
                                <input 
                                    type="number" 
                                    id="mg-retry-after" 
                                    name="retry_after_hours"
                                    value="<?php echo esc_attr($settings['retry_after_hours'] ?? ''); ?>"
                                    placeholder="Ex: 24"
                                    min="1"
                                    max="168"
                                    style="width: 100px;"
                                    <?php disabled(!$is_pro); ?>
                                >
                            </div>

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input
                                        type="checkbox"
                                        id="mg-noindex"
                                        name="noindex_enabled"
                                        <?php checked(!empty($settings['noindex_enabled']), true); ?>
                                        <?php disabled(!$is_pro); ?>
                                    >
                                    <?php esc_html_e('Add meta noindex, nofollow', 'maintenance-genius'); ?>
                                </label>
                            </div>
                            </div><!-- Fin PRO locked SEO -->

                                </div>
                            </div><!-- Fin ACCORDION SEO -->

                            <!-- ACCORDION: Crédits — opt-in gratuit (v2.9.130, WP.org guideline 10) -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">©️ <?php esc_html_e('Credits', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('The maintenance page is 100% white-label by default. You can optionally display a small credit to support development.', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['show_powered_by'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-default">○</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input
                                        type="checkbox"
                                        id="mg-show-powered-by"
                                        name="show_powered_by"
                                        <?php checked(!empty($settings['show_powered_by']), true); ?>
                                    >
                                    <?php esc_html_e('Display a "Powered by 1001Web&trade;" credit on the maintenance page', 'maintenance-genius'); ?>
                                    <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Disabled by default. Checking this box shows a small, discreet credit at the bottom of your maintenance page and helps support development. Thank you!', 'maintenance-genius'); ?>" data-tooltip-pos="bottom">?</span>
                                </label>
                            </div>

                                </div>
                            </div><!-- Fin ACCORDION Crédits -->

                            <!-- Moved from General tab (v2.9.18) -->
                            <!-- ACCORDION: Admin Login Button (v2.8.6) -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🔑 <?php esc_html_e('Admin Login Button', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Show or hide the Admin Login button on the maintenance page. Recommended to hide if you use a plugin like WPS Hide Login to secure your login URL.', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['show_admin_button'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-default">○</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="mg-form-group">
                                        <label class="mg-checkbox-label">
                                            <input
                                                type="checkbox"
                                                id="mg-show-admin-button"
                                                name="show_admin_button"
                                                <?php checked(!empty($settings['show_admin_button']), true); ?>
                                            >
                                            <?php esc_html_e('Show "Admin Login" button on maintenance page', 'maintenance-genius'); ?>
                                        </label>
                                        <p class="mg-field-description">
                                            <?php esc_html_e('When enabled, an "Admin Login" button linking to wp-login.php is displayed on the maintenance page. Disable this option if you use a plugin like WPS Hide Login to keep your login URL secret.', 'maintenance-genius'); ?>
                                        </p>
                                    </div>
                                </div>
                            </div><!-- Fin ACCORDION Admin Login Button -->

                            <!-- Moved from General tab (v2.9.18) -->
                            <!-- ACCORDION: RGPD -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🔒 <?php esc_html_e('GDPR Compliance', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Enable GDPR mode to use system fonts instead of Google Fonts, avoiding external requests.', 'maintenance-genius'); ?>">?</span>
                                    <?php if (!empty($settings['rgpd_mode'])): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-default">○</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body">

                            <div class="mg-form-group">
                                <label class="mg-checkbox-label">
                                    <input
                                        type="checkbox"
                                        id="mg-rgpd-mode"
                                        name="rgpd_mode"
                                        <?php checked(!empty($settings['rgpd_mode']), true); ?>
                                    >
                                    <?php esc_html_e('GDPR mode (system fonts)', 'maintenance-genius'); ?>
                                </label>
                                <p class="mg-field-description">
                                    <?php esc_html_e('Enabled: Uses the visitor\'s system fonts (no requests to Google).', 'maintenance-genius'); ?><br>
                                    <?php esc_html_e('Disabled: Loads Google Fonts (better appearance but sends IP to Google).', 'maintenance-genius'); ?>
                                </p>
                            </div>

                                </div>
                            </div><!-- Fin ACCORDION RGPD -->

                        </div><!-- /mg-card-body -->
                    </div><!-- /mg-card -->
                </div><!-- /tab-seo -->

                <div class="mg-tab-content" id="tab-pro" style="display:none;">
                    
                    <?php if (!$is_pro): ?>
                    <!-- Bannière promotion PRO -->
                    <div class="mg-pro-card">
                        <h3>🌟 <?php esc_html_e('Upgrade to Maintenance GENIUS PRO', 'maintenance-genius'); ?></h3>
                        <p style="color: #666; font-size: 15px; margin-bottom: 20px;">
                            <?php esc_html_e('Unlock all advanced features to create professional and customized maintenance pages.', 'maintenance-genius'); ?>
                        </p>
                        
                        <div class="mg-pro-price">49$ <span style="font-size: 16px; font-weight: normal;"><?php esc_html_e('/year', 'maintenance-genius'); ?></span></div>
                        <p class="mg-pro-price-note"><?php esc_html_e('Annual subscription · cancel anytime', 'maintenance-genius'); ?></p>
                        
                        <div class="mg-pro-cta">
                            <a href="https://client.1001web.ca/store/plugin-wordpress" target="_blank" class="mg-btn-pro">
                                🛒 <?php esc_html_e('Buy a PRO license', 'maintenance-genius'); ?>
                            </a>
                        </div>
                    </div>
                    <?php endif; ?>

                    <div class="mg-card">
                        <div class="mg-card-header">
                            <h2><?php echo $is_pro ? esc_html__( 'License', 'maintenance-genius' ) : esc_html__( 'PRO License & Features', 'maintenance-genius' ); ?></h2>
                            <div class="mg-accordion-controls">
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-expand-all"><?php esc_html_e('Expand All', 'maintenance-genius'); ?></button>
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-collapse-all"><?php esc_html_e('Collapse All', 'maintenance-genius'); ?></button>
                            </div>
                        </div>
                        <div class="mg-card-body">

                            <?php if ( ! $is_pro ) : ?>
                            <!-- ACCORDION: Fonctionnalités PRO -->
                            <div class="mg-accordion is-open">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">✨ <?php esc_html_e('PRO Features', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('All premium features included with PRO license.', 'maintenance-genius'); ?>">?</span>
                                    <?php if ($is_pro): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓ <?php esc_html_e('Activated', 'maintenance-genius'); ?></span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-pro">PRO</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body" style="display:block;">
                                    
                                    <div class="mg-pro-features-grid">
                                        
                                        <div class="mg-pro-feature-item">
                                            <h4>🎨 <?php esc_html_e('10+ HD Presets', 'maintenance-genius'); ?></h4>
                                            <p><?php esc_html_e('Professional designs with high definition images: Corporate, Nature, Tech, Construction, Christmas, and more.', 'maintenance-genius'); ?></p>
                                        </div>
                                        
                                        <div class="mg-pro-feature-item">
                                            <h4>🖼️ <?php esc_html_e('Custom Background Image', 'maintenance-genius'); ?></h4>
                                            <p><?php esc_html_e('Upload your own background image from the WordPress media library for total customization.', 'maintenance-genius'); ?></p>
                                        </div>
                                        
                                        <div class="mg-pro-feature-item">
                                            <h4>📱 <?php esc_html_e('Side Panel', 'maintenance-genius'); ?></h4>
                                            <p><?php esc_html_e('Add your social networks (Facebook, Instagram, LinkedIn, YouTube, TikTok) and contact information.', 'maintenance-genius'); ?></p>
                                        </div>
                                        
                                        <div class="mg-pro-feature-item">
                                            <h4>🎟️ <?php esc_html_e('Token Access', 'maintenance-genius'); ?></h4>
                                            <p><?php esc_html_e('Create personalized access links with expiration dates for your clients and collaborators.', 'maintenance-genius'); ?></p>
                                        </div>
                                        
                                        <div class="mg-pro-feature-item">
                                            <h4>📧 <?php esc_html_e('Automatic Email Sending', 'maintenance-genius'); ?></h4>
                                            <p><?php esc_html_e('Automatically send access links by email when creating tokens.', 'maintenance-genius'); ?></p>
                                        </div>
                                        
                                        <div class="mg-pro-feature-item">
                                            <h4>🛡️ <?php esc_html_e('Advanced Whitelist / Blacklist', 'maintenance-genius'); ?></h4>
                                            <p><?php esc_html_e('Fine-grained access control by role, IP, User-Agent, country and URL with wildcards.', 'maintenance-genius'); ?></p>
                                        </div>
                                        
                                        <div class="mg-pro-feature-item">
                                            <h4>📊 <?php esc_html_e('Detailed Access Logs', 'maintenance-genius'); ?></h4>
                                            <p><?php esc_html_e('Track who accesses your site during maintenance with complete history and CSV export.', 'maintenance-genius'); ?></p>
                                        </div>
                                        
                                        <div class="mg-pro-feature-item">
                                            <h4>⚡ <?php esc_html_e('Priority Support', 'maintenance-genius'); ?></h4>
                                            <p><?php esc_html_e('Access to priority technical support by email with response within 24 hours.', 'maintenance-genius'); ?></p>
                                        </div>

                                        <div class="mg-pro-feature-item">
                                            <h4>📡 <?php esc_html_e('Uptime Monitoring', 'maintenance-genius'); ?></h4>
                                            <p><?php esc_html_e('Real-time site availability monitoring with email alerts, customizable templates and event history.', 'maintenance-genius'); ?></p>
                                        </div>
                                        
                                    </div>

                                </div>
                            </div>
                            <?php endif; // fin upsell PRO Features (masqué si licence active) ?>

                            <!-- ACCORDION: Activation de licence -->
                            <div class="mg-accordion is-open">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🔐 <?php esc_html_e('License Activation', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Activate your PRO license key.', 'maintenance-genius'); ?>">?</span>
                                    <?php if ($is_pro): ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓ <?php esc_html_e('Activated', 'maintenance-genius'); ?></span>
                                    <?php else: ?>
                                    <span class="mg-accordion-badge mg-badge-default">—</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body" <?php echo !$is_pro ? 'style="display:block;"' : ''; ?>>
                                    
                                    <?php if ($is_pro): ?>
                                    <div class="mg-license-status active">
                                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                            <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/>
                                            <polyline points="22 4 12 14.01 9 11.01"/>
                                        </svg>
                                        <?php esc_html_e('PRO License active', 'maintenance-genius'); ?>
                                    </div>
                                    <p style="margin-top: 15px; color: #666;">
                                        <?php esc_html_e('Key:', 'maintenance-genius'); ?> <code><?php echo esc_html(substr($license_key, 0, 3) . str_repeat('*', max(0, strlen($license_key) - 5)) . substr($license_key, -2)); ?></code>
                                    </p>
                                    <div class="mg-form-actions">
                                        <button type="button" class="mg-btn mg-btn-danger" id="mg-deactivate-license">
                                            <?php esc_html_e('Deactivate license', 'maintenance-genius'); ?>
                                        </button>
                                    </div>
                                    <?php else: ?>
                                    <div class="mg-license-form">
                                        <label for="mg-license-key"><?php esc_html_e('License key', 'maintenance-genius'); ?></label>
                                        <div style="display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap;">
                                            <input type="text" id="mg-license-key" placeholder="MG-XXXX-XXXX-XXXX-XXXX" value="<?php echo esc_attr($license_key); ?>" style="flex: 1; min-width: 250px;">
                                            <button type="button" class="mg-btn mg-btn-primary" id="mg-activate-license">
                                                <?php esc_html_e('Activate', 'maintenance-genius'); ?>
                                            </button>
                                        </div>
                                        <p style="margin-top: 10px; color: #888; font-size: 13px;">
                                            <?php esc_html_e('Enter your license key received by email after purchase.', 'maintenance-genius'); ?>
                                        </p>
                                    </div>
                                    <?php endif; ?>

                                </div>
                            </div>

                        </div>
                    </div>

                </div>


                <!-- ========================================
                     ONGLET MONITORING (v2.8.4)
                     ======================================== -->
                <?php if ( ! ( defined( 'MG_DISABLE_MONITORING_UI' ) && MG_DISABLE_MONITORING_UI ) ) : ?>
                <div class="mg-tab-content" id="tab-monitoring" style="display:none;">
                    <div class="mg-card">
                        <div class="mg-card-header">
                            <h2>
                                <svg class="mg-radar-icon" viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                    <circle cx="12" cy="12" r="10"/>
                                    <circle cx="12" cy="12" r="6"/>
                                    <circle cx="12" cy="12" r="2"/>
                                    <line x1="12" y1="2" x2="12" y2="12" class="mg-radar-sweep"/>
                                </svg>
                                <?php esc_html_e('Uptime Monitoring', 'maintenance-genius'); ?>
                                <span class="mg-pro-badge-inline" title="PRO">★ PRO</span>
                            </h2>
                            <?php if ($is_pro): ?>
                            <div class="mg-accordion-controls">
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-expand-all"><?php esc_html_e('Expand All', 'maintenance-genius'); ?></button>
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-collapse-all"><?php esc_html_e('Collapse All', 'maintenance-genius'); ?></button>
                            </div>
                            <?php endif; ?>
                        </div>
                        <div class="mg-card-body">

                            <?php if (!$is_pro): ?>
                            <!-- Overlay PRO -->
                            <div class="mg-pro-locked" style="position: relative;">
                                <a href="#tab-pro" class="mg-pro-locked-overlay">
                                    <span>🔒 <?php esc_html_e('Unlock with PRO', 'maintenance-genius'); ?></span>
                                </a>

                                <div style="opacity: 0.4; pointer-events: none;">
                            <?php endif; ?>

                            <!-- Statut actuel -->
                            <?php $mon_status = MG_Monitoring::get_status(); ?>
                            <div class="mg-monitoring-status-bar" id="mg-monitoring-status-bar">
                                <?php if (!empty($settings['monitoring_enabled'])): ?>
                                    <?php if ($mon_status['is_down']): ?>
                                        <div class="mg-status-badge mg-status-down">
                                            ⚠️ <?php esc_html_e('Site is DOWN', 'maintenance-genius'); ?>
                                            <?php if (!empty($mon_status['since'])): ?>
                                                <?php /* translators: %s: name or value */ ?>
                                                — <?php printf( esc_html__('since %s', 'maintenance-genius'), esc_html($mon_status['since'])); ?>
                                            <?php endif; ?>
                                        </div>
                                    <?php else: ?>
                                        <div class="mg-status-badge mg-status-up">
                                            ✅ <?php esc_html_e('Site is online', 'maintenance-genius'); ?>
                                        </div>
                                    <?php endif; ?>
                                    <?php if (!empty($mon_status['last_check'])): ?>
                                        <span class="mg-status-last-check">
                                            <?php /* translators: %s: name or value */ ?>
                                            <?php printf( esc_html__('Last check: %s', 'maintenance-genius'), esc_html($mon_status['last_check'])); ?>
                                            <?php if ($mon_status['last_code']): ?>
                                                (HTTP <?php echo intval($mon_status['last_code']); ?>)
                                            <?php endif; ?>
                                        </span>
                                    <?php endif; ?>
                                <?php else: ?>
                                    <div class="mg-status-badge mg-status-inactive">
                                        ⏸️ <?php esc_html_e('Monitoring is disabled', 'maintenance-genius'); ?>
                                    </div>
                                <?php endif; ?>
                            </div>

                            <!-- ACCORDION: Paramètres -->
                            <div class="mg-accordion is-open">
                                <div class="mg-accordion-header">
                                    <h3 class="mg-section-title">
                                        <span class="mg-accordion-icon">▼</span>
                                        ⚙️ <?php esc_html_e('Settings', 'maintenance-genius'); ?>
                                        <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Configure uptime monitoring to receive email alerts when your site goes offline.', 'maintenance-genius'); ?>">?</span>
                                    </h3>
                                </div>
                                <div class="mg-accordion-body">

                                    <!-- Activer le monitoring -->
                                    <div class="mg-form-group">
                                        <label class="mg-toggle-label">
                                            <input type="checkbox" id="mg-monitoring-enabled" <?php checked(!empty($settings['monitoring_enabled'])); ?> <?php disabled(!$is_pro); ?>>
                                            <span class="mg-toggle-switch"></span>
                                            <?php esc_html_e('Enable uptime monitoring', 'maintenance-genius'); ?>
                                        </label>
                                    </div>

                                    <!-- Monitoring indépendant -->
                                    <div class="mg-form-group">
                                        <label class="mg-toggle-label">
                                            <input type="checkbox" id="mg-monitoring-independent" <?php checked(!empty($settings['monitoring_independent'])); ?> <?php disabled(!$is_pro); ?>>
                                            <span class="mg-toggle-switch"></span>
                                            <?php esc_html_e('Keep monitoring active even when maintenance mode is OFF', 'maintenance-genius'); ?>
                                        </label>
                                        <p class="mg-field-help"><?php esc_html_e('If checked, the site will be monitored continuously regardless of the maintenance mode status.', 'maintenance-genius'); ?></p>
                                    </div>

                                    <!-- Intervalle -->
                                    <div class="mg-form-group">
                                        <label for="mg-monitoring-interval">
                                            <?php esc_html_e('Check interval', 'maintenance-genius'); ?>
                                            <span class="mg-accordion-tooltip" title="<?php esc_attr_e('How often the site availability is checked. Lower intervals detect outages faster but use slightly more resources.', 'maintenance-genius'); ?>">?</span>
                                        </label>
                                        <select id="mg-monitoring-interval" class="mg-select" <?php disabled(!$is_pro); ?>>
                                            <option value="2" <?php selected($settings['monitoring_interval'] ?? 5, 2); ?>><?php esc_html_e('Every 2 minutes', 'maintenance-genius'); ?></option>
                                            <option value="5" <?php selected($settings['monitoring_interval'] ?? 5, 5); ?>><?php esc_html_e('Every 5 minutes', 'maintenance-genius'); ?></option>
                                            <option value="10" <?php selected($settings['monitoring_interval'] ?? 5, 10); ?>><?php esc_html_e('Every 10 minutes', 'maintenance-genius'); ?></option>
                                            <option value="15" <?php selected($settings['monitoring_interval'] ?? 5, 15); ?>><?php esc_html_e('Every 15 minutes', 'maintenance-genius'); ?></option>
                                            <option value="30" <?php selected($settings['monitoring_interval'] ?? 5, 30); ?>><?php esc_html_e('Every 30 minutes', 'maintenance-genius'); ?></option>
                                        </select>
                                    </div>

                                    <!-- Cooldown entre notifications -->
                                    <div class="mg-form-group">
                                        <label for="mg-monitoring-cooldown">
                                            <?php esc_html_e('Minimum time between notifications', 'maintenance-genius'); ?>
                                            <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Prevents email flooding when the site goes up/down repeatedly.', 'maintenance-genius'); ?>">?</span>
                                        </label>
                                        <select id="mg-monitoring-cooldown" class="mg-select" <?php disabled(!$is_pro); ?>>
                                            <option value="5" <?php selected($settings['monitoring_email_cooldown'] ?? 5, 5); ?>>5 <?php esc_html_e('minutes', 'maintenance-genius'); ?></option>
                                            <option value="10" <?php selected($settings['monitoring_email_cooldown'] ?? 5, 10); ?>>10 <?php esc_html_e('minutes', 'maintenance-genius'); ?></option>
                                            <option value="15" <?php selected($settings['monitoring_email_cooldown'] ?? 5, 15); ?>>15 <?php esc_html_e('minutes', 'maintenance-genius'); ?></option>
                                            <option value="30" <?php selected($settings['monitoring_email_cooldown'] ?? 5, 30); ?>>30 <?php esc_html_e('minutes', 'maintenance-genius'); ?></option>
                                            <option value="60" <?php selected($settings['monitoring_email_cooldown'] ?? 5, 60); ?>>1 <?php esc_html_e('hour', 'maintenance-genius'); ?></option>
                                        </select>
                                    </div>

                                </div>
                            </div>

                            <!-- ACCORDION: Destinataires email -->
                            <div class="mg-accordion is-open">
                                <div class="mg-accordion-header">
                                    <h3 class="mg-section-title">
                                        <span class="mg-accordion-icon">▼</span>
                                        📧 <?php esc_html_e('Email Notifications', 'maintenance-genius'); ?>
                                        <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Add unlimited email recipients. All will receive alerts when the site goes offline or comes back online.', 'maintenance-genius'); ?>">?</span>
                                    </h3>
                                </div>
                                <div class="mg-accordion-body">

                                    <div class="mg-form-group">
                                        <label for="mg-monitoring-emails"><?php esc_html_e('Notification recipients (one email per line)', 'maintenance-genius'); ?></label>
                                        <textarea id="mg-monitoring-emails" class="mg-textarea" rows="4" placeholder="admin@example.com&#10;tech@example.com&#10;client@example.com" <?php disabled(!$is_pro); ?>><?php echo esc_textarea($settings['monitoring_emails'] ?? ''); ?></textarea>
                                        <p class="mg-field-help"><?php esc_html_e('Unlimited recipients. All will be notified when the site goes down or comes back online.', 'maintenance-genius'); ?></p>
                                    </div>

                                    <div class="mg-form-group">
                                        <button type="button" class="mg-btn mg-btn-primary mg-monitoring-save-btn" <?php disabled(!$is_pro); ?> title="<?php esc_attr_e('Save all monitoring settings.', 'maintenance-genius'); ?>">
                                            💾 <?php esc_html_e('Save Monitoring Settings', 'maintenance-genius'); ?>
                                        </button>
                                        <button type="button" class="mg-btn mg-btn-secondary" id="mg-monitoring-test-email" <?php disabled(!$is_pro); ?> title="<?php esc_attr_e('Send a test notification to all configured recipients to verify email delivery.', 'maintenance-genius'); ?>">
                                            📧 <?php esc_html_e('Send test email', 'maintenance-genius'); ?>
                                        </button>
                                        <span class="mg-monitoring-save-result mg-inline-result"></span>
                                        <span id="mg-monitoring-test-email-result" class="mg-inline-result"></span>
                                    </div>

                                </div>
                            </div>

                            <!-- ACCORDION: Personnalisation des emails -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <h3 class="mg-section-title">
                                        <span class="mg-accordion-icon">▼</span>
                                        ✏️ <?php esc_html_e('Customize Email Templates', 'maintenance-genius'); ?>
                                        <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Customize the subject and body of notification emails. Leave empty to use default templates.', 'maintenance-genius'); ?>">?</span>
                                    </h3>
                                </div>
                                <div class="mg-accordion-body" style="display:none;">

                                    <p class="mg-field-help" style="margin-bottom:15px;">
                                        <?php esc_html_e('Available placeholders:', 'maintenance-genius'); ?>
                                        <code>{site_name}</code> <code>{site_url}</code> <code>{status_code}</code> <code>{error}</code> <code>{datetime}</code> <code>{down_since}</code>
                                    </p>

                                    <h4 style="margin-top:0;">⚠️ <?php esc_html_e('When site goes DOWN', 'maintenance-genius'); ?></h4>

                                    <div class="mg-form-group">
                                        <label for="mg-monitoring-subject-down"><?php esc_html_e('Subject', 'maintenance-genius'); ?></label>
                                        <input type="text" id="mg-monitoring-subject-down" class="mg-input" value="<?php echo esc_attr($settings['monitoring_subject_down'] ?? ''); ?>" placeholder="⚠️ [{site_name}] Site is DOWN" <?php disabled(!$is_pro); ?>>
                                    </div>

                                    <div class="mg-form-group">
                                        <label for="mg-monitoring-body-down"><?php esc_html_e('Body', 'maintenance-genius'); ?></label>
                                        <textarea id="mg-monitoring-body-down" class="mg-textarea" rows="5" placeholder="<?php esc_attr_e('Leave empty for default message', 'maintenance-genius'); ?>" <?php disabled(!$is_pro); ?>><?php echo esc_textarea($settings['monitoring_body_down'] ?? ''); ?></textarea>
                                    </div>

                                    <h4>✅ <?php esc_html_e('When site comes back UP', 'maintenance-genius'); ?></h4>

                                    <div class="mg-form-group">
                                        <label for="mg-monitoring-subject-up"><?php esc_html_e('Subject', 'maintenance-genius'); ?></label>
                                        <input type="text" id="mg-monitoring-subject-up" class="mg-input" value="<?php echo esc_attr($settings['monitoring_subject_up'] ?? ''); ?>" placeholder="✅ [{site_name}] Site is back ONLINE" <?php disabled(!$is_pro); ?>>
                                    </div>

                                    <div class="mg-form-group">
                                        <label for="mg-monitoring-body-up"><?php esc_html_e('Body', 'maintenance-genius'); ?></label>
                                        <textarea id="mg-monitoring-body-up" class="mg-textarea" rows="5" placeholder="<?php esc_attr_e('Leave empty for default message', 'maintenance-genius'); ?>" <?php disabled(!$is_pro); ?>><?php echo esc_textarea($settings['monitoring_body_up'] ?? ''); ?></textarea>
                                    </div>

                                </div>
                            </div>

                            <!-- ACCORDION: Calendrier d'événements -->
                            <div class="mg-accordion is-open">
                                <div class="mg-accordion-header">
                                    <h3 class="mg-section-title">
                                        <span class="mg-accordion-icon">▼</span>
                                        📅 <?php esc_html_e('Event Log', 'maintenance-genius'); ?>
                                        <span class="mg-accordion-tooltip" title="<?php esc_attr_e('History of all status changes (online/offline). Keeps the last 100 events.', 'maintenance-genius'); ?>">?</span>
                                    </h3>
                                </div>
                                <div class="mg-accordion-body">

                                    <?php $events = MG_Monitoring::get_events(50); ?>
                                    <?php if (!empty($events)): ?>
                                        <div class="mg-monitoring-events-table-wrapper">
                                            <table class="mg-logs-table" id="mg-monitoring-events-table">
                                                <thead>
                                                    <tr>
                                                        <th><?php esc_html_e('Status', 'maintenance-genius'); ?></th>
                                                        <th><?php esc_html_e('HTTP Code', 'maintenance-genius'); ?></th>
                                                        <th><?php esc_html_e('Details', 'maintenance-genius'); ?></th>
                                                        <th><?php esc_html_e('Date / Time', 'maintenance-genius'); ?></th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <?php foreach ($events as $event): ?>
                                                        <tr class="mg-event-<?php echo esc_attr($event['type']); ?>">
                                                            <td>
                                                                <?php if ($event['type'] === 'down'): ?>
                                                                    <span class="mg-badge mg-badge-danger">⚠️ DOWN</span>
                                                                <?php else: ?>
                                                                    <span class="mg-badge mg-badge-success">✅ UP</span>
                                                                <?php endif; ?>
                                                            </td>
                                                            <td><?php echo intval($event['status_code']); ?></td>
                                                            <td><?php echo esc_html($event['error'] ?: '—'); ?></td>
                                                            <td><?php echo esc_html($event['datetime']); ?></td>
                                                        </tr>
                                                    <?php endforeach; ?>
                                                </tbody>
                                            </table>
                                        </div>
                                        <div style="margin-top: 10px;">
                                            <button type="button" class="mg-btn mg-btn-danger mg-btn-sm" id="mg-monitoring-clear-events" <?php disabled(!$is_pro); ?>>
                                                🗑️ <?php esc_html_e('Clear history', 'maintenance-genius'); ?>
                                            </button>
                                        </div>
                                    <?php else: ?>
                                        <p class="mg-empty-state">📊 <?php esc_html_e('No events recorded yet. Events will appear here when the site status changes.', 'maintenance-genius'); ?></p>
                                    <?php endif; ?>

                                </div>
                            </div>

                            <!-- Boutons d'action -->
                            <div class="mg-form-actions" style="margin-top: 20px;">
                                <button type="button" class="mg-btn mg-btn-primary mg-monitoring-save-btn" id="mg-monitoring-save" <?php disabled(!$is_pro); ?> title="<?php esc_attr_e('Save all monitoring settings.', 'maintenance-genius'); ?>">
                                    💾 <?php esc_html_e('Save Monitoring Settings', 'maintenance-genius'); ?>
                                </button>
                                <button type="button" class="mg-btn mg-btn-secondary" id="mg-monitoring-test-check" <?php disabled(!$is_pro); ?> title="<?php esc_attr_e('Run an immediate availability check without waiting for the next scheduled check.', 'maintenance-genius'); ?>">
                                    🔍 <?php esc_html_e('Test check now', 'maintenance-genius'); ?>
                                </button>
                                <span id="mg-monitoring-save-result" class="mg-monitoring-save-result mg-inline-result"></span>
                            </div>

                            <?php if (!$is_pro): ?>
                                </div><!-- /opacity wrapper -->
                            </div><!-- /mg-pro-locked -->
                            <?php endif; ?>

                        </div>
                    </div>
                </div>
                <?php endif; // MG_DISABLE_MONITORING_UI ?>

                <!-- ========================================
                     ONGLET AIDE & SYSTÈME (v2.6.9)
                     ======================================== -->
                <!-- ========================================
                     ONGLET DIAGNOSTIC (v2.9.116)
                     ======================================== -->
                <div class="mg-tab-content" id="tab-diagnostic" style="display:none;">
                    <div class="mg-card">
                        <div class="mg-card-header">
                            <h2>🩺 <?php esc_html_e('Diagnostic — Verify everything works', 'maintenance-genius'); ?></h2>
                        </div>
                        <div class="mg-card-body">
                            <p class="mg-diag-intro">
                                <?php esc_html_e('Run this analysis before collecting subscribers or enabling maintenance on a client site. Each check verifies that your server can actually deliver what the plugin promises — and tells you exactly how to fix any issue found.', 'maintenance-genius'); ?>
                                <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('All checks are read-only except the email test (one real message to the admin address) and a temporary database probe that is deleted immediately. Nothing runs in the background — the analysis only executes when you click the button.', 'maintenance-genius'); ?>">?</span>
                            </p>

                            <div class="mg-diag-actions">
                                <button type="button" class="mg-btn mg-btn-primary" id="mg-diag-run">
                                    🔍 <?php esc_html_e('Run analysis', 'maintenance-genius'); ?>
                                </button>
                                <span class="mg-diag-last" id="mg-diag-last">
                                    <?php
                                    $mg_diag_results = class_exists('MG_Diagnostic') ? MG_Diagnostic::get_results() : null;
                                    if ($mg_diag_results) {
                                        /* translators: %s: formatted date */
                                        echo esc_html( sprintf( __('Last analysis: %s', 'maintenance-genius'), date_i18n( get_option('date_format') . ' ' . get_option('time_format'), $mg_diag_results['timestamp'] ) ) );
                                    } else {
                                        esc_html_e('Never analyzed — run your first check.', 'maintenance-genius');
                                    }
                                    ?>
                                </span>
                            </div>

                            <div class="mg-diag-results" id="mg-diag-results">
                                <?php
                                if ($mg_diag_results && !empty($mg_diag_results['checks'])) :
                                    foreach ($mg_diag_results['checks'] as $mg_diag_id => $mg_diag_check) :
                                ?>
                                <div class="mg-diag-item mg-diag-<?php echo esc_attr($mg_diag_check['status']); ?>" data-check="<?php echo esc_attr($mg_diag_id); ?>">
                                    <span class="mg-diag-status" aria-hidden="true"></span>
                                    <div class="mg-diag-body">
                                        <strong class="mg-diag-label">
                                            <?php echo esc_html($mg_diag_check['label']); ?>
                                            <?php if (!empty($mg_diag_check['tooltip'])) : ?>
                                            <span class="mg-info-tooltip" data-tooltip="<?php echo esc_attr($mg_diag_check['tooltip']); ?>">?</span>
                                            <?php endif; ?>
                                        </strong>
                                        <p class="mg-diag-detail"><?php echo esc_html($mg_diag_check['detail']); ?></p>
                                        <?php if (!empty($mg_diag_check['fix'])) : ?>
                                        <p class="mg-diag-fix">💡 <?php echo esc_html($mg_diag_check['fix']); ?></p>
                                        <?php endif; ?>
                                    </div>
                                </div>
                                <?php
                                    endforeach;
                                endif;
                                ?>
                            </div>

                            <!-- Test courriel à la demande (throttlé 1/min côté serveur) -->
                            <div class="mg-diag-email-test">
                                <h3><?php esc_html_e('Send a test email', 'maintenance-genius'); ?>
                                    <span class="mg-info-tooltip" data-tooltip="<?php esc_attr_e('Sends one real email through your server, exactly like a subscriber notification. Limited to one test per minute. Leave the field empty to use the admin address.', 'maintenance-genius'); ?>">?</span>
                                </h3>
                                <div class="mg-diag-email-row">
                                    <label for="mg-diag-email-to" class="screen-reader-text"><?php esc_html_e('Recipient email address', 'maintenance-genius'); ?></label>
                                    <input type="email" id="mg-diag-email-to" placeholder="<?php echo esc_attr( get_option('admin_email') ); ?>" autocomplete="email">
                                    <button type="button" class="mg-btn mg-btn-secondary" id="mg-diag-email-send">
                                        📧 <?php esc_html_e('Send test', 'maintenance-genius'); ?>
                                    </button>
                                </div>
                                <p class="mg-diag-email-result" id="mg-diag-email-result" role="status"></p>
                            </div>

                        </div>
                    </div>
                </div>

                <!-- ========================================
                     ONGLET AIDE & SYSTÈME (v2.6.38)
                     ======================================== -->
                <div class="mg-tab-content" id="tab-help" style="display:none;">
                    <div class="mg-card">
                        <div class="mg-card-header">
                            <h2><?php esc_html_e('Help & System Information', 'maintenance-genius'); ?></h2>
                            <div class="mg-accordion-controls">
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-expand-all"><?php esc_html_e('Expand All', 'maintenance-genius'); ?></button>
                                <button type="button" class="mg-btn mg-btn-sm mg-btn-collapse-all"><?php esc_html_e('Collapse All', 'maintenance-genius'); ?></button>
                            </div>
                        </div>
                        <div class="mg-card-body">

                            <!-- ACCORDION: Clé API IA (BYOK) — v2.9.106 -->
                            <?php $mg_ai_key_status = class_exists('MG_Chat') ? MG_Chat::get_key_status() : ['source' => 'none', 'last4' => '']; ?>
                            <div class="mg-accordion is-open">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🔑 <?php esc_html_e('AI API Key', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Your Anthropic key powers the AI assistant. It is encrypted, never displayed, and never sent anywhere except to Anthropic.', 'maintenance-genius'); ?>">?</span>
                                    <?php if ( 'none' === $mg_ai_key_status['source'] ) : ?>
                                    <span class="mg-accordion-badge" style="background:#f39c12;color:#fff;">!</span>
                                    <?php else : ?>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                    <?php endif; ?>
                                </div>
                                <div class="mg-accordion-body" style="display:block;">
                                    <?php if ( 'constant' === $mg_ai_key_status['source'] ) : ?>
                                    <p>
                                        ✅ <?php esc_html_e('Key defined in wp-config.php (MG_ANTHROPIC_KEY) — it takes priority.', 'maintenance-genius'); ?>
                                        <code>••••<?php echo esc_html( $mg_ai_key_status['last4'] ); ?></code>
                                    </p>
                                    <?php else : ?>
                                    <p style="margin-top:0;">
                                        <?php esc_html_e('The AI assistant requires an Anthropic API key (pay-per-use account, a few cents per conversation).', 'maintenance-genius'); ?>
                                        <a href="https://console.anthropic.com" target="_blank" rel="noopener"><?php esc_html_e('Get a key', 'maintenance-genius'); ?> ↗</a>
                                    </p>
                                    <div class="mg-form-group">
                                        <label for="mg-ai-api-key"><?php esc_html_e('Anthropic API Key', 'maintenance-genius'); ?></label>
                                        <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
                                            <input type="password" id="mg-ai-api-key" autocomplete="off" spellcheck="false"
                                                   placeholder="<?php echo ( 'option' === $mg_ai_key_status['source'] ) ? esc_attr( '••••••••••••' . $mg_ai_key_status['last4'] ) : 'sk-ant-...'; ?>"
                                                   style="flex:1;min-width:220px;">
                                            <button type="button" class="mg-btn mg-btn-primary" id="mg-save-ai-key"><?php esc_html_e('Save key', 'maintenance-genius'); ?></button>
                                            <?php if ( 'option' === $mg_ai_key_status['source'] ) : ?>
                                            <button type="button" class="mg-btn mg-btn-sm" id="mg-clear-ai-key"><?php esc_html_e('Remove', 'maintenance-genius'); ?></button>
                                            <?php endif; ?>
                                        </div>
                                        <p class="description" id="mg-ai-key-feedback" aria-live="polite">
                                            <?php esc_html_e('Encrypted (AES-256) in your database. Never displayed again after saving.', 'maintenance-genius'); ?>
                                        </p>
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </div>

                            <!-- ACCORDION: Informations Plugin -->
                            <div class="mg-accordion is-open">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">📦 <?php esc_html_e('Plugin Information', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Plugin version and license status.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                </div>
                                <div class="mg-accordion-body" style="display:block;">
                                    <div class="mg-system-info">
                                        <div class="mg-info-row">
                                            <span class="mg-info-label"><?php esc_html_e('Plugin version', 'maintenance-genius'); ?></span>
                                            <span class="mg-info-value"><strong><?php echo esc_html(MG_VERSION); ?></strong></span>
                                        </div>
                                        <div class="mg-info-row">
                                            <span class="mg-info-label"><?php esc_html_e('License status', 'maintenance-genius'); ?></span>
                                            <span class="mg-info-value">
                                                <?php if ($is_pro): ?>
                                                    <span style="color: #27ae60; font-weight: 600;">✓ <?php esc_html_e('PRO Activated', 'maintenance-genius'); ?></span>
                                                <?php else: ?>
                                                    <span style="color: #888;"><?php esc_html_e('Free Version', 'maintenance-genius'); ?></span>
                                                <?php endif; ?>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- ACCORDION: Environnement Système -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🖥️ <?php esc_html_e('System Environment', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Server and WordPress information.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-default">ℹ</span>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="mg-system-info">
                                        <div class="mg-info-row">
                                            <span class="mg-info-label"><?php esc_html_e('WordPress version', 'maintenance-genius'); ?></span>
                                            <span class="mg-info-value"><?php echo esc_html(get_bloginfo('version')); ?></span>
                                        </div>
                                        <div class="mg-info-row">
                                            <span class="mg-info-label"><?php esc_html_e('PHP version', 'maintenance-genius'); ?></span>
                                            <span class="mg-info-value">
                                                <?php 
                                                $php_version = phpversion();
                                                $php_ok = version_compare($php_version, '7.4', '>=');
                                                echo '<span style="color: ' . ($php_ok ? '#27ae60' : '#e74c3c') . ';">' . esc_html($php_version) . '</span>';
                                                if (!$php_ok) echo ' <small>(' . esc_html__('7.4+ recommended', 'maintenance-genius') . ')</small>';
                                                ?>
                                            </span>
                                        </div>
                                        <div class="mg-info-row">
                                            <span class="mg-info-label"><?php esc_html_e('Web server', 'maintenance-genius'); ?></span>
                                            <span class="mg-info-value"><?php echo esc_html( sanitize_text_field( wp_unslash( $_SERVER['SERVER_SOFTWARE'] ?? 'Non disponible' ) ) ); ?></span>
                                        </div>
                                        <div class="mg-info-row">
                                            <span class="mg-info-label"><?php esc_html_e('PHP memory limit', 'maintenance-genius'); ?></span>
                                            <span class="mg-info-value"><?php echo esc_html(ini_get('memory_limit')); ?></span>
                                        </div>
                                        <div class="mg-info-row">
                                            <span class="mg-info-label"><?php esc_html_e('Max upload', 'maintenance-genius'); ?></span>
                                            <span class="mg-info-value"><?php echo esc_html(ini_get('upload_max_filesize')); ?></span>
                                        </div>
                                        <div class="mg-info-row">
                                            <span class="mg-info-label"><?php esc_html_e('Active theme', 'maintenance-genius'); ?></span>
                                            <span class="mg-info-value"><?php echo esc_html(wp_get_theme()->get('Name')); ?></span>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- ACCORDION: Sécurité -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🔒 <?php esc_html_e('Plugin Security', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Security features implemented in this plugin.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-ok">✓</span>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="mg-security-info" style="background: #e8f5e9; padding: 15px; border-radius: 8px; border-left: 4px solid #27ae60;">
                                        <p style="margin: 0 0 15px; font-weight: 600; color: #27ae60;">
                                            ✅ <?php esc_html_e('This plugin follows WordPress security best practices', 'maintenance-genius'); ?>
                                        </p>
                                        <div class="mg-security-checks" style="display: grid; gap: 8px;">
                                            <div style="display: flex; align-items: center; gap: 8px;">
                                                <span style="color: #27ae60;">✓</span>
                                                <span><strong><?php esc_html_e('CSRF Protection', 'maintenance-genius'); ?></strong> - <?php esc_html_e('WordPress nonces on all AJAX requests', 'maintenance-genius'); ?></span>
                                            </div>
                                            <div style="display: flex; align-items: center; gap: 8px;">
                                                <span style="color: #27ae60;">✓</span>
                                                <span><strong><?php esc_html_e('Sanitization', 'maintenance-genius'); ?></strong> - <?php esc_html_e('All user inputs are sanitized', 'maintenance-genius'); ?></span>
                                            </div>
                                            <div style="display: flex; align-items: center; gap: 8px;">
                                                <span style="color: #27ae60;">✓</span>
                                                <span><strong><?php esc_html_e('Escaping', 'maintenance-genius'); ?></strong> - <?php esc_html_e('All outputs are escaped (esc_html, esc_attr)', 'maintenance-genius'); ?></span>
                                            </div>
                                            <div style="display: flex; align-items: center; gap: 8px;">
                                                <span style="color: #27ae60;">✓</span>
                                                <span><strong><?php esc_html_e('Permissions', 'maintenance-genius'); ?></strong> - <?php esc_html_e('User capability verification (manage_options)', 'maintenance-genius'); ?></span>
                                            </div>
                                            <div style="display: flex; align-items: center; gap: 8px;">
                                                <span style="color: #27ae60;">✓</span>
                                                <span><strong><?php esc_html_e('No direct SQL', 'maintenance-genius'); ?></strong> - <?php esc_html_e('Uses WordPress Options API', 'maintenance-genius'); ?></span>
                                            </div>
                                            <div style="display: flex; align-items: center; gap: 8px;">
                                                <span style="color: #27ae60;">✓</span>
                                                <span><strong><?php esc_html_e('Passwords', 'maintenance-genius'); ?></strong> - <?php esc_html_e('Hashed with password_hash() (bcrypt)', 'maintenance-genius'); ?></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- ACCORDION: Backup & Migration -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">💾 <?php esc_html_e('Backup & Migration', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Export or import all your settings.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-default">ℹ</span>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="mg-backup-section" style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px;">
                                        <!-- Export -->
                                        <div style="background: #f0f9ff; border: 2px dashed #3498db; border-radius: 12px; padding: 20px; text-align: center;">
                                            <div style="font-size: 40px; margin-bottom: 10px;">📤</div>
                                            <h4 style="margin: 0 0 10px; color: #2980b9;"><?php esc_html_e('Export All Settings', 'maintenance-genius'); ?></h4>
                                            <p style="color: #666; font-size: 13px; margin-bottom: 15px;">
                                                <?php esc_html_e('Download a complete backup of all your settings.', 'maintenance-genius'); ?>
                                            </p>
                                            <button type="button" id="mg-export-all-settings" class="mg-btn mg-btn-primary">
                                                📥 <?php esc_html_e('Download Backup', 'maintenance-genius'); ?>
                                            </button>
                                        </div>
                                        
                                        <!-- Import -->
                                        <div style="background: #f0fff4; border: 2px dashed #27ae60; border-radius: 12px; padding: 20px; text-align: center;">
                                            <div style="font-size: 40px; margin-bottom: 10px;">📥</div>
                                            <h4 style="margin: 0 0 10px; color: #27ae60;"><?php esc_html_e('Import Settings', 'maintenance-genius'); ?></h4>
                                            <p style="color: #666; font-size: 13px; margin-bottom: 15px;">
                                                <?php esc_html_e('Restore settings from a backup file.', 'maintenance-genius'); ?>
                                            </p>
                                            <input type="file" id="mg-import-settings-file" accept=".json" style="display: none;">
                                            <button type="button" id="mg-import-all-settings" class="mg-btn" style="background: #27ae60; color: #fff;">
                                                📤 <?php esc_html_e('Upload Backup', 'maintenance-genius'); ?>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="mg-info-box" style="background: #fff3cd; border-left: 4px solid #ffc107; padding: 12px; border-radius: 4px; margin-top: 15px;">
                                        <p style="margin: 0; font-size: 13px; color: #856404;">
                                            ⚠️ <strong><?php esc_html_e('Note:', 'maintenance-genius'); ?></strong> 
                                            <?php esc_html_e('Import will overwrite current settings. Statistics are preserved.', 'maintenance-genius'); ?>
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- ACCORDION: Assistant IA -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🤖 <?php esc_html_e('AI Assistant', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Get help from our AI assistant.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-ok">💬</span>
                                </div>
                                <div class="mg-accordion-body">
                                    <p style="margin-bottom: 15px; color: #666;">
                                        <?php esc_html_e('Need help? The AI assistant can answer your questions about Maintenance GENIUS.', 'maintenance-genius'); ?>
                                    </p>
                                    <button type="button" class="mg-btn mg-btn-primary" id="mg-open-ai-help" data-mg-open-chat="1">
                                        <span style="margin-right: 8px;">💬</span> <?php esc_html_e('Open AI assistant', 'maintenance-genius'); ?>
                                    </button>
                                    <div style="margin-top: 15px; padding: 12px; background: #f0f7ff; border-radius: 8px; border-left: 4px solid #667eea;">
                                        <p style="margin: 0; font-size: 13px; color: #555;">
                                            <strong>💡 <?php esc_html_e('Tip:', 'maintenance-genius'); ?></strong> <?php esc_html_e('The AI assistant is also accessible via the purple "💬" floating button.', 'maintenance-genius'); ?>
                                            <?php if (!$is_pro): ?>
                                            <br><span style="color: #888;"><?php esc_html_e('Unlimited questions with your own API key (BYOK)', 'maintenance-genius'); ?></span>
                                            <?php else: ?>
                                            <br><span style="color: #27ae60;">✓ <?php esc_html_e('PRO: Unlimited questions', 'maintenance-genius'); ?></span>
                                            <?php endif; ?>
                                        </p>
                                    </div>
                                </div>
                            </div>

                            <!-- ACCORDION: Liens Utiles -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🔗 <?php esc_html_e('Useful Links', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Support and resources.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-default">ℹ</span>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="mg-help-links">
                                        <a href="https://client.1001web.ca/submitticket.php" target="_blank" class="mg-help-link">
                                            <span class="mg-help-icon">🎫</span>
                                            <span><?php esc_html_e('Technical Support', 'maintenance-genius'); ?></span>
                                        </a>
                                        <a href="https://client.1001web.ca/store/plugin-wordpress" target="_blank" class="mg-help-link">
                                            <span class="mg-help-icon">⭐</span>
                                            <span><?php esc_html_e('Buy PRO', 'maintenance-genius'); ?></span>
                                        </a>
                                        <a href="https://1001web.ca" target="_blank" class="mg-help-link">
                                            <span class="mg-help-icon">🌐</span>
                                            <span><?php esc_html_e('1001Web&trade; Website', 'maintenance-genius'); ?></span>
                                        </a>
                                    </div>
                                </div>
                            </div>

                            <!-- ACCORDION: Mises à jour -->
                            <div class="mg-accordion">
                                <div class="mg-accordion-header">
                                    <span class="mg-accordion-arrow">▶</span>
                                    <h3 class="mg-accordion-title">🔄 <?php esc_html_e('Updates', 'maintenance-genius'); ?></h3>
                                    <span class="mg-accordion-tooltip" title="<?php esc_attr_e('Check for plugin updates.', 'maintenance-genius'); ?>">?</span>
                                    <span class="mg-accordion-badge mg-badge-default">ℹ</span>
                                </div>
                                <div class="mg-accordion-body">
                                    <div class="mg-update-check">
                                        <p><?php esc_html_e('Current version:', 'maintenance-genius'); ?> <strong id="mg-current-version-display"><?php echo esc_html(MG_VERSION); ?></strong></p>
                                        <button type="button" class="mg-btn mg-btn-secondary" id="mg-check-update">
                                            <?php esc_html_e('Check for updates', 'maintenance-genius'); ?>
                                        </button>
                                        <div id="mg-update-result" style="margin-top: 10px;"></div>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>

        </div>

        <!-- Footer du plugin -->
        <div class="mg-footer">
            <p>
                <?php esc_html_e('Developed with passion by', 'maintenance-genius'); ?> <a href="https://www.1001web.ca" target="_blank">1001Web&trade;</a>
                | Anjou, Montréal, Québec
            </p>
        </div>


        <!-- ========================================
             BOUTONS FLOTTANTS (v2.5.6)
             ======================================== -->
        <div class="mg-floating-buttons" id="mg-floating-buttons">
            <button type="button" class="mg-float-btn mg-float-toggle <?php echo $settings['maintenance_enabled'] ? 'is-on' : 'is-off'; ?>" id="mg-float-toggle" aria-label="<?php esc_attr_e('Enable/Disable maintenance', 'maintenance-genius'); ?>" title="<?php esc_attr_e('Enable/Disable maintenance', 'maintenance-genius'); ?>">
                <span class="mg-float-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M18.36 6.64a9 9 0 1 1-12.73 0"/>
                        <line x1="12" y1="2" x2="12" y2="12"/>
                    </svg>
                </span>
                <span class="mg-float-label" id="mg-float-status"><?php echo esc_html( $settings['maintenance_enabled'] ? 'ON' : 'OFF' ); ?></span>
            </button>
            
            <button type="button" class="mg-float-btn mg-float-preview" id="mg-float-preview" aria-label="<?php esc_attr_e('Maintenance page preview', 'maintenance-genius'); ?>" title="<?php esc_attr_e('Maintenance page preview', 'maintenance-genius'); ?>">
                <span class="mg-float-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
                        <circle cx="12" cy="12" r="3"/>
                    </svg>
                </span>
            </button>
            
            <button type="button" class="mg-float-btn mg-float-save" id="mg-float-save" aria-label="<?php esc_attr_e('Save all settings', 'maintenance-genius'); ?>" title="<?php esc_attr_e('Save all settings', 'maintenance-genius'); ?>" data-label-pending="<?php esc_attr_e('Unsaved changes', 'maintenance-genius'); ?>" data-label-saving="<?php esc_attr_e('Saving…', 'maintenance-genius'); ?>" data-label-saved="<?php esc_attr_e('Saved ✓', 'maintenance-genius'); ?>" data-label-error="<?php esc_attr_e('Error', 'maintenance-genius'); ?>">
                <span class="mg-float-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
                        <polyline points="17 21 17 13 7 13 7 21"/>
                        <polyline points="7 3 7 8 15 8"/>
                    </svg>
                </span>
            </button>

            <button type="button" class="mg-float-btn mg-float-help" id="mg-float-help" aria-label="<?php esc_attr_e('AI Help - Maintenance GENIUS Assistant', 'maintenance-genius'); ?>" title="<?php esc_attr_e('AI Help - Maintenance GENIUS Assistant', 'maintenance-genius'); ?>">
                <span class="mg-float-icon">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
                        <circle cx="12" cy="10" r="1" fill="currentColor"/>
                        <circle cx="8" cy="10" r="1" fill="currentColor"/>
                        <circle cx="16" cy="10" r="1" fill="currentColor"/>
                    </svg>
                </span>
            </button>
        </div>

        <!-- Modal Chat IA -->
        <div id="mg-chat-modal" class="mg-chat-modal" style="display: none;">
            <div class="mg-chat-container">
                <div class="mg-chat-header">
                    <div class="mg-chat-title">
                        <span class="mg-chat-icon">🤖</span>
                        <span><?php esc_html_e('Maintenance GENIUS Assistant', 'maintenance-genius'); ?></span>
                    </div>
                    <div class="mg-chat-status">
                        <?php if ($is_pro): ?>
                            <span class="mg-chat-pro-badge"><?php esc_html_e('PRO - Unlimited', 'maintenance-genius'); ?></span>
                        <?php else: ?>
                            <span class="mg-chat-free-badge"><?php esc_html_e('Free', 'maintenance-genius'); ?> - <span id="mg-chat-remaining">5</span>/5 <?php esc_html_e('questions', 'maintenance-genius'); ?></span>
                        <?php endif; ?>
                    </div>
                    <button type="button" class="mg-chat-close" id="mg-chat-close">&times;</button>
                </div>
                <div class="mg-chat-messages" id="mg-chat-messages">
                    <div class="mg-chat-message mg-chat-bot">
                        <div class="mg-chat-avatar">🤖</div>
                        <div class="mg-chat-bubble">
                            <?php esc_html_e('Hello! I am the Maintenance GENIUS assistant. I can help you with:', 'maintenance-genius'); ?>
                            <ul>
                                <li>><?php esc_html_e('Installation and configuration', 'maintenance-genius'); ?></li>
                                <li>><?php esc_html_e('PRO license activation', 'maintenance-genius'); ?></li>
                                <li>><?php esc_html_e('Page customization', 'maintenance-genius'); ?></li>
                                <li>><?php esc_html_e('Troubleshooting', 'maintenance-genius'); ?></li>
                            </ul>
                            <?php esc_html_e('How can I help you?', 'maintenance-genius'); ?>
                        </div>
                    </div>
                </div>
                <div class="mg-chat-input-wrapper">
                    <input type="text" id="mg-chat-input" class="mg-chat-input" placeholder="<?php esc_attr_e('Ask your question about Maintenance GENIUS...', 'maintenance-genius'); ?>" maxlength="500">
                    <button type="button" id="mg-chat-send" class="mg-chat-send">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <line x1="22" y1="2" x2="11" y2="13"/>
                            <polygon points="22 2 15 22 11 13 2 9 22 2"/>
                        </svg>
                    </button>
                </div>
                <div class="mg-chat-footer">
                    <small>><?php esc_html_e('This chat only answers questions about Maintenance GENIUS', 'maintenance-genius'); ?></small>
                    <a href="https://client.1001web.ca/submitticket.php" target="_blank" rel="noopener" class="mg-chat-help-link"><?php esc_html_e('Need help?', 'maintenance-genius'); ?></a>
                </div>
            </div>
        </div>

<?php if ($wizard_needed): ?>
<!-- ============================================ -->
<!-- ONBOARDING WIZARD (v2.9.42)                  -->
<!-- ============================================ -->
<style>
@keyframes mg-rocket-flame { 0%,100%{text-shadow:0 0 8px #ff6b35,0 0 16px #ff4500;transform:scale(1)} 50%{text-shadow:0 0 16px #ff6b35,0 0 32px #ff4500,0 0 48px #ff0;transform:scale(1.15)} }
@keyframes mg-rocket-launch { 0%{transform:translateY(0) rotate(0)} 30%{transform:translateY(-8px) rotate(-5deg)} 60%{transform:translateY(-20px) rotate(-15deg)} 100%{transform:translateY(-60px) rotate(-25deg);opacity:0} }
@keyframes mg-rocket-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-2px)} 75%{transform:translateX(2px)} }
.mg-wiz-tip{display:flex;align-items:flex-start;gap:8px;background:#f0f4ff;border:1px solid #d4deff;border-radius:8px;padding:10px 14px;margin-bottom:20px;font-size:13px;color:#4a5568;line-height:1.4}
.mg-wiz-tip-icon{flex-shrink:0;font-size:16px}
#mg-wiz-rocket{position:absolute;top:-18px;transition:left 0.5s cubic-bezier(0.34,1.56,0.64,1);z-index:2;width:28px;height:28px}
#mg-wiz-rocket.launched .mg-rocket-flame{opacity:1;animation:mg-rocket-flame 0.3s ease infinite}
#mg-wiz-rocket.launched{animation:mg-rocket-shake 0.1s ease infinite}
#mg-wiz-rocket.liftoff{animation:mg-rocket-launch 0.8s ease forwards}
.mg-rocket-flame{opacity:0;transition:opacity 0.2s}
.mg-wiz-pro-features{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}
.mg-wiz-pro-feat{display:flex;align-items:center;gap:6px;font-size:13px;color:#555;padding:6px 10px;background:#f8f9fa;border-radius:6px}
.mg-wiz-license-result{margin-top:10px;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:600;display:none}
</style>
<div id="mg-wizard-overlay" style="position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.7);z-index:999999;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);">
<div id="mg-wizard" style="background:#fff;border-radius:16px;max-width:640px;width:95%;max-height:90vh;overflow-y:auto;box-shadow:0 25px 80px rgba(0,0,0,0.3);position:relative;">

    <!-- Progress bar with rocket -->
    <div style="position:relative;height:8px;background:#e9ecef;border-radius:8px;margin:30px 40px 0;overflow:visible;">
        <div id="mg-wizard-progress" style="height:100%;background:linear-gradient(90deg,#667eea,#764ba2);width:20%;transition:width 0.5s cubic-bezier(0.34,1.56,0.64,1);border-radius:8px;"></div>
        <div id="mg-wiz-rocket" style="left:calc(20% - 14px);"><svg viewBox="0 0 64 64" width="28" height="28" style="display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2))"><path d="M32 2c-4 8-6 16-6 24 0 4 .5 8 2 12h8c1.5-4 2-8 2-12 0-8-2-16-6-24z" fill="#e74c3c"/><path d="M28 38c-1 2-2 5-2 8l6-4 6 4c0-3-1-6-2-8h-8z" fill="#e74c3c"/><path d="M32 6c-3 7-4.5 14-4.5 20 0 4 .5 7.5 1.5 11h6c1-3.5 1.5-7 1.5-11 0-6-1.5-13-4.5-20z" fill="#ecf0f1"/><ellipse cx="32" cy="28" rx="3" ry="3.5" fill="#3498db"/><path d="M22 30c-4-2-6 0-7 4 2 2 5 3 8 4l-1-8z" fill="#e74c3c"/><path d="M42 30c4-2 6 0 7 4-2 2-5 3-8 4l1-8z" fill="#e74c3c"/><g class="mg-rocket-flame"><path d="M29 46c-1 4-2 10 3 16 5-6 4-12 3-16h-6z" fill="#f39c12"/><path d="M30 46c-.5 3-1 7 2 12 3-5 2.5-9 2-12h-4z" fill="#e74c3c"/><path d="M31 46c0 2-.5 5 1 8 1.5-3 1-6 1-8h-2z" fill="#f1c40f"/></g></svg></div>
    </div>

    <!-- Step 1: Bienvenue + Titre/Message -->
    <div class="mg-wizard-step" data-step="1" style="padding:20px 40px 30px;">
        <div style="text-align:center;margin-bottom:25px;">
            <h2 style="margin:0 0 8px;font-size:24px;color:#1B3A5C;"><?php esc_html_e('Welcome to Maintenance GENIUS!', 'maintenance-genius'); ?></h2>
            <p style="margin:0;color:#666;font-size:15px;"><?php esc_html_e('Set up your maintenance page in less than 60 seconds.', 'maintenance-genius'); ?></p>
        </div>
        <div class="mg-wiz-tip"><span class="mg-wiz-tip-icon">💡</span><span><?php esc_html_e('Your title and message will be visible to all your visitors during maintenance.', 'maintenance-genius'); ?></span></div>
        <div style="margin-bottom:20px;">
            <label style="display:block;font-weight:600;margin-bottom:6px;color:#333;"><?php esc_html_e('Page title', 'maintenance-genius'); ?></label>
            <input type="text" id="mg-wiz-title" value="<?php echo esc_attr($settings['title']); ?>" style="width:100%;padding:10px 14px;border:2px solid #e0e0e0;border-radius:8px;font-size:15px;transition:border-color 0.2s;" onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e0e0e0'">
        </div>
        <div style="margin-bottom:20px;">
            <label style="display:block;font-weight:600;margin-bottom:6px;color:#333;"><?php esc_html_e('Message for visitors', 'maintenance-genius'); ?></label>
            <textarea id="mg-wiz-message" rows="3" style="width:100%;padding:10px 14px;border:2px solid #e0e0e0;border-radius:8px;font-size:15px;resize:vertical;transition:border-color 0.2s;" onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e0e0e0'"><?php echo esc_textarea($settings['message']); ?></textarea>
        </div>
        <div style="display:flex;justify-content:flex-end;gap:10px;margin-top:25px;">
            <button type="button" class="mg-wiz-skip" style="padding:10px 20px;background:none;border:1px solid #ccc;border-radius:8px;color:#666;cursor:pointer;font-size:14px;" data-mg-wizard-complete="1"><?php esc_html_e('Skip wizard', 'maintenance-genius'); ?></button>
            <button type="button" class="mg-wiz-next" data-mg-wizard-next="2" style="padding:10px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;"><?php esc_html_e('Next', 'maintenance-genius'); ?> →</button>
        </div>
    </div>

    <!-- Step 2: Design Preset -->
    <div class="mg-wizard-step" data-step="2" style="padding:20px 40px 30px;display:none;">
        <div style="text-align:center;margin-bottom:20px;">
            <div style="font-size:40px;margin-bottom:8px;">🎨</div>
            <h2 style="margin:0 0 8px;font-size:24px;color:#1B3A5C;"><?php esc_html_e('Choose a style', 'maintenance-genius'); ?></h2>
        </div>
        <div class="mg-wiz-tip"><span class="mg-wiz-tip-icon">💡</span><span><?php esc_html_e('You can customize every detail (colors, fonts, animations) after the wizard.', 'maintenance-genius'); ?></span></div>
        <div style="display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:25px;">
            <?php 
            $wizard_presets = ['default','construction','dark','light','corporate','startup','nature','tech','fun'];
            foreach ($wizard_presets as $key): 
                if (!isset($presets[$key])) continue;
                $p = $presets[$key];
                $bg_style = "background:linear-gradient(135deg,{$p['bg_color_1']} 0%,{$p['bg_color_2']} 100%);";
                if (!empty($p['bg_image_url'])) {
                    $bg_style .= "background-image:url({$p['bg_image_url']});background-size:cover;background-position:center;";
                }
                $is_default = ($key === 'default');
            ?>
            <button type="button" class="mg-wiz-preset" data-preset="<?php echo esc_attr($key); ?>" 
                style="border:3px solid <?php echo esc_attr( $is_default ? '#667eea' : 'transparent' ); ?>;border-radius:12px;overflow:hidden;cursor:pointer;padding:0;transition:all 0.2s;background:none;<?php echo esc_attr( $is_default ? 'transform:scale(1.05);' : '' ); ?>"
                data-mg-wizard-preset="<?php echo esc_attr($key); ?>">
                <div style="<?php echo esc_attr( $bg_style ); ?>height:100px;border-radius:9px 9px 0 0;display:flex;align-items:center;justify-content:center;">
                    <div style="background:<?php echo esc_attr($p['container_bg_color']); ?>;opacity:0.95;border-radius:8px;padding:8px 14px;text-align:center;max-width:85%;box-shadow:0 2px 10px rgba(0,0,0,0.15);">
                        <div style="font-family:Poppins,sans-serif;font-size:10px;font-weight:700;color:<?php echo esc_attr($p['title_color']); ?>;line-height:1.2;">Maintenance</div>
                        <div style="font-size:7px;color:<?php echo esc_attr($p['message_color']); ?>;margin-top:2px;">We'll be back soon</div>
                    </div>
                </div>
                <div style="padding:6px 8px;font-size:11px;text-align:center;background:#f8f9fa;border-radius:0 0 9px 9px;font-weight:500;">
                    <?php echo esc_html($p['name']); ?>
                </div>
            </button>
            <?php endforeach; ?>
        </div>
        <div style="display:flex;justify-content:space-between;margin-top:25px;">
            <button type="button" class="mg-wiz-back" data-mg-wizard-next="1" style="padding:10px 20px;background:none;border:1px solid #ccc;border-radius:8px;color:#666;cursor:pointer;font-size:14px;">← <?php esc_html_e('Back', 'maintenance-genius'); ?></button>
            <button type="button" class="mg-wiz-next" data-mg-wizard-next="3" style="padding:10px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;"><?php esc_html_e('Next', 'maintenance-genius'); ?> →</button>
        </div>
    </div>

    <!-- Step 3: Mot de passe visiteur -->
    <div class="mg-wizard-step" data-step="3" style="padding:20px 40px 30px;display:none;">
        <div style="text-align:center;margin-bottom:20px;">
            <div style="font-size:40px;margin-bottom:8px;">🔐</div>
            <h2 style="margin:0 0 8px;font-size:24px;color:#1B3A5C;"><?php esc_html_e('Visitor access', 'maintenance-genius'); ?></h2>
        </div>
        <div class="mg-wiz-tip"><span class="mg-wiz-tip-icon">💡</span><span><?php esc_html_e('Share this password with your clients or collaborators so they can access the site.', 'maintenance-genius'); ?></span></div>
        <div style="background:#f8f9fa;border-radius:12px;padding:20px;margin-bottom:20px;">
            <label style="display:flex;align-items:center;gap:10px;cursor:pointer;margin-bottom:15px;">
                <input type="checkbox" id="mg-wiz-visitor-enabled" style="width:18px;height:18px;cursor:pointer;" <?php checked(!empty($settings['visitor_access_enabled'])); ?>>
                <span style="font-weight:600;color:#333;"><?php esc_html_e('Enable visitor password', 'maintenance-genius'); ?></span>
            </label>
            <div id="mg-wiz-password-field" style="<?php echo empty($settings['visitor_access_enabled']) ? 'display:none;' : ''; ?>">
                <?php if (!empty($settings['visitor_password'])): ?>
                <p style="margin:0 0 8px;font-size:13px;color:#28a745;">✅ <?php esc_html_e('A password is already set.', 'maintenance-genius'); ?></p>
                <input type="text" id="mg-wiz-password" value="" placeholder="<?php esc_attr_e('Leave empty to keep current password, or enter a new one...', 'maintenance-genius'); ?>" style="width:100%;padding:10px 14px;border:2px solid #e0e0e0;border-radius:8px;font-size:15px;transition:border-color 0.2s;" onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e0e0e0'">
                <?php else: ?>
                <input type="text" id="mg-wiz-password" value="" placeholder="<?php esc_attr_e('Enter a password...', 'maintenance-genius'); ?>" style="width:100%;padding:10px 14px;border:2px solid #e0e0e0;border-radius:8px;font-size:15px;transition:border-color 0.2s;" onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e0e0e0'">
                <?php endif; ?>
            </div>
        </div>
        <div style="display:flex;justify-content:space-between;margin-top:25px;">
            <button type="button" class="mg-wiz-back" data-mg-wizard-next="2" style="padding:10px 20px;background:none;border:1px solid #ccc;border-radius:8px;color:#666;cursor:pointer;font-size:14px;">← <?php esc_html_e('Back', 'maintenance-genius'); ?></button>
            <button type="button" class="mg-wiz-next" data-mg-wizard-next="4" style="padding:10px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;"><?php esc_html_e('Next', 'maintenance-genius'); ?> →</button>
        </div>
    </div>

    <!-- Step 4: Licence PRO -->
    <div class="mg-wizard-step" data-step="4" style="padding:20px 40px 30px;display:none;">
        <div style="text-align:center;margin-bottom:20px;">
            <div style="font-size:40px;margin-bottom:8px;">⭐</div>
            <h2 style="margin:0 0 8px;font-size:24px;color:#1B3A5C;"><?php esc_html_e('Do you have a PRO license?', 'maintenance-genius'); ?></h2>
            <p style="margin:0;color:#666;font-size:15px;"><?php esc_html_e('Unlock all features with your license key.', 'maintenance-genius'); ?></p>
        </div>
        <div class="mg-wiz-tip"><span class="mg-wiz-tip-icon">💡</span><span><?php esc_html_e('PRO unlocks: HD presets, Lottie animations, video background, access tokens, uptime monitoring and more.', 'maintenance-genius'); ?></span></div>

        <div style="background:#f8f9fa;border-radius:12px;padding:20px;margin-bottom:15px;">
            <label style="display:block;font-weight:600;margin-bottom:8px;color:#333;"><?php esc_html_e('License key', 'maintenance-genius'); ?></label>
            <div style="display:flex;gap:8px;">
                <input type="text" id="mg-wiz-license-key" placeholder="XXXX-XXXX-XXXX-XXXX" style="flex:1;padding:10px 14px;border:2px solid #e0e0e0;border-radius:8px;font-size:15px;font-family:monospace;text-transform:uppercase;transition:border-color 0.2s;" onfocus="this.style.borderColor='#667eea'" onblur="this.style.borderColor='#e0e0e0'">
                <button type="button" id="mg-wiz-activate-license" data-mg-wizard-license="1" style="padding:10px 18px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;white-space:nowrap;"><?php esc_html_e('Activate', 'maintenance-genius'); ?></button>
            </div>
            <div id="mg-wiz-license-result" class="mg-wiz-license-result"></div>
        </div>

        <div class="mg-wiz-pro-features">
            <div class="mg-wiz-pro-feat">✨ <?php esc_html_e('HD presets', 'maintenance-genius'); ?></div>
            <div class="mg-wiz-pro-feat">🎬 <?php esc_html_e('Lottie animations', 'maintenance-genius'); ?></div>
            <div class="mg-wiz-pro-feat">📹 <?php esc_html_e('Video background', 'maintenance-genius'); ?></div>
            <div class="mg-wiz-pro-feat">🔑 <?php esc_html_e('Access tokens', 'maintenance-genius'); ?></div>
            <div class="mg-wiz-pro-feat">📊 <?php esc_html_e('Uptime monitoring', 'maintenance-genius'); ?></div>
            <div class="mg-wiz-pro-feat">🛡️ <?php esc_html_e('Turnstile CAPTCHA', 'maintenance-genius'); ?></div>
            <div class="mg-wiz-pro-feat">📱 <?php esc_html_e('Remote control', 'maintenance-genius'); ?></div>
            <div class="mg-wiz-pro-feat">💬 <?php esc_html_e('Priority support', 'maintenance-genius'); ?></div>
        </div>

        <div style="text-align:center;margin:15px 0 5px;">
            <a href="https://client.1001web.ca/store/plugin-wordpress" target="_blank" rel="noopener" style="display:inline-flex;align-items:center;gap:6px;padding:10px 20px;background:linear-gradient(135deg,#ff6b35,#f7931e);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 3px 12px rgba(255,107,53,0.3);transition:transform 0.2s;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='none'">
                🛒 <?php esc_html_e('Buy a PRO license', 'maintenance-genius'); ?>
            </a>
        </div>

        <div style="display:flex;justify-content:space-between;align-items:center;margin-top:20px;">
            <button type="button" class="mg-wiz-back" data-mg-wizard-next="3" style="padding:10px 20px;background:none;border:1px solid #ccc;border-radius:8px;color:#666;cursor:pointer;font-size:14px;">← <?php esc_html_e('Back', 'maintenance-genius'); ?></button>
            <div style="text-align:right;">
                <button type="button" class="mg-wiz-next" data-mg-wizard-next="5" style="padding:10px 24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;"><?php esc_html_e('Continue with free version', 'maintenance-genius'); ?> →</button>
                <p style="margin:6px 0 0;font-size:12px;color:#999;"><?php esc_html_e('You can activate a PRO license anytime from the PRO tab.', 'maintenance-genius'); ?></p>
            </div>
        </div>
    </div>

    <!-- Step 5: Activer -->
    <div class="mg-wizard-step" data-step="5" style="padding:20px 40px 30px;display:none;">
        <div style="text-align:center;margin-bottom:25px;">
            <div style="font-size:40px;margin-bottom:8px;">✨</div>
            <h2 style="margin:0 0 8px;font-size:24px;color:#1B3A5C;"><?php esc_html_e('Ready to go!', 'maintenance-genius'); ?></h2>
            <p style="margin:0;color:#666;font-size:15px;"><?php esc_html_e('Your maintenance page is configured. Activate it now?', 'maintenance-genius'); ?></p>
        </div>
        <div class="mg-wiz-tip"><span class="mg-wiz-tip-icon">💡</span><span><?php esc_html_e('You can disable maintenance at any time from the admin bar.', 'maintenance-genius'); ?></span></div>

        <!-- Mini preview -->
        <div id="mg-wiz-preview" style="border-radius:12px;overflow:hidden;height:180px;display:flex;align-items:center;justify-content:center;margin-bottom:25px;background:linear-gradient(135deg,#D4BADD 0%,#E4EFC5 100%);position:relative;">
            <div style="background:rgba(255,255,255,0.95);border-radius:12px;padding:20px 30px;text-align:center;max-width:80%;box-shadow:0 8px 30px rgba(0,0,0,0.15);">
                <div id="mg-wiz-preview-title" style="font-family:Poppins,sans-serif;font-size:18px;font-weight:700;color:#F97316;margin-bottom:6px;"><?php echo esc_html($settings['title']); ?></div>
                <div id="mg-wiz-preview-message" style="font-family:'Open Sans',sans-serif;font-size:12px;color:#555;line-height:1.4;"><?php echo esc_html(wp_trim_words($settings['message'], 12)); ?></div>
            </div>
        </div>

        <!-- v2.9.130 — Crédit opt-in proposé au wizard (WP.org guideline 10 : opt-in explicite) -->
        <div class="mg-form-group" style="text-align:center;margin-bottom:18px;">
            <label class="mg-checkbox-label" style="justify-content:center;font-size:13px;color:#555;">
                <input type="checkbox" id="mg-wiz-show-credit">
                <?php esc_html_e('Support development by displaying a small, discreet credit on the maintenance page', 'maintenance-genius'); ?> 💛
            </label>
        </div>

        <div style="display:flex;gap:12px;justify-content:center;margin-bottom:20px;">
            <button type="button" id="mg-wiz-activate" data-mg-wizard-finish="true" style="padding:14px 30px;background:linear-gradient(135deg,#28a745,#20c997);color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:16px;font-weight:700;box-shadow:0 4px 15px rgba(40,167,69,0.3);transition:transform 0.2s;" onmouseover="this.style.transform='translateY(-2px)'" onmouseout="this.style.transform='none'">
                🚀 <?php esc_html_e('Launch maintenance!', 'maintenance-genius'); ?>
            </button>
            <button type="button" data-mg-wizard-finish="false" style="padding:14px 24px;background:#f8f9fa;color:#666;border:1px solid #ddd;border-radius:10px;cursor:pointer;font-size:14px;">
                <?php esc_html_e('Save without activating', 'maintenance-genius'); ?>
            </button>
        </div>

        <div style="display:flex;justify-content:flex-start;">
            <button type="button" class="mg-wiz-back" data-mg-wizard-next="4" style="padding:10px 20px;background:none;border:1px solid #ccc;border-radius:8px;color:#666;cursor:pointer;font-size:14px;">← <?php esc_html_e('Back', 'maintenance-genius'); ?></button>
        </div>
    </div>

</div>
</div>

<script>
(function(){
    var selectedPreset = 'default';
    var totalSteps = 5;

    document.getElementById('mg-wiz-visitor-enabled').addEventListener('change', function(){
        document.getElementById('mg-wiz-password-field').style.display = this.checked ? '' : 'none';
    });

    window.mgWizardNext = function(step) {
        document.querySelectorAll('.mg-wizard-step').forEach(function(el){ el.style.display = 'none'; });
        document.querySelector('.mg-wizard-step[data-step="'+step+'"]').style.display = '';
        var pct = (step / totalSteps) * 100;
        document.getElementById('mg-wizard-progress').style.width = pct + '%';
        var rocket = document.getElementById('mg-wiz-rocket');
        rocket.style.left = 'calc(' + pct + '% - 10px)';
        rocket.className = '';

        if (step === 5) {
            var title = document.getElementById('mg-wiz-title').value || '<?php echo esc_js($settings['title']); ?>';
            var msg = document.getElementById('mg-wiz-message').value || '<?php echo esc_js($settings['message']); ?>';
            document.getElementById('mg-wiz-preview-title').textContent = title;
            document.getElementById('mg-wiz-preview-message').textContent = msg.length > 80 ? msg.substring(0, 80) + '...' : msg;

            var presetData = <?php echo json_encode(array_intersect_key($presets, array_flip($wizard_presets))); ?>;
            if (presetData[selectedPreset]) {
                var p = presetData[selectedPreset];
                var preview = document.getElementById('mg-wiz-preview');
                var bg = 'linear-gradient(135deg,' + p.bg_color_1 + ' 0%,' + p.bg_color_2 + ' 100%)';
                if (p.bg_image_url) {
                    preview.style.backgroundImage = 'url(' + p.bg_image_url + ')';
                    preview.style.backgroundSize = 'cover';
                    preview.style.backgroundPosition = 'center';
                } else {
                    preview.style.backgroundImage = 'none';
                    preview.style.background = bg;
                }
                document.getElementById('mg-wiz-preview-title').style.color = p.title_color;
                document.getElementById('mg-wiz-preview-message').style.color = p.message_color;
            }
        }
    };

    window.mgWizardSelectPreset = function(btn, preset) {
        document.querySelectorAll('.mg-wiz-preset').forEach(function(el){ 
            el.style.borderColor = 'transparent'; 
            el.style.transform = 'none';
        });
        btn.style.borderColor = '#667eea';
        btn.style.transform = 'scale(1.05)';
        selectedPreset = preset;
    };

    window.mgWizardActivateLicense = function() {
        var key = document.getElementById('mg-wiz-license-key').value.trim();
        var resultEl = document.getElementById('mg-wiz-license-result');
        var btn = document.getElementById('mg-wiz-activate-license');
        if (!key) { resultEl.style.display = 'block'; resultEl.style.background = '#fff3cd'; resultEl.style.color = '#856404'; resultEl.textContent = '<?php echo esc_js(__('Please enter a license key.', 'maintenance-genius')); ?>'; return; }
        btn.textContent = '⏳...';
        btn.disabled = true;
        jQuery.post(ajaxurl, { action: 'mg_activate_license', nonce: mgAdmin.nonce, license_key: key }, function(response) {
            resultEl.style.display = 'block';
            if (response.success) {
                resultEl.style.background = '#d4edda'; resultEl.style.color = '#155724';
                resultEl.innerHTML = '✅ <?php echo esc_js(__('License activated! PRO features unlocked.', 'maintenance-genius')); ?>';
                var nextBtn = document.querySelector('.mg-wizard-step[data-step="4"] .mg-wiz-next');
                if (nextBtn) nextBtn.innerHTML = '<?php echo esc_js(__('Next', 'maintenance-genius')); ?> →';
            } else {
                resultEl.style.background = '#f8d7da'; resultEl.style.color = '#721c24';
                resultEl.textContent = '❌ ' + (response.data && response.data.message ? response.data.message : '<?php echo esc_js(__('Invalid license key.', 'maintenance-genius')); ?>');
            }
            btn.textContent = '<?php echo esc_js(__('Activate', 'maintenance-genius')); ?>';
            btn.disabled = false;
        }).fail(function(){ resultEl.style.display = 'block'; resultEl.style.background = '#f8d7da'; resultEl.style.color = '#721c24'; resultEl.textContent = '<?php echo esc_js(__('Connection error.', 'maintenance-genius')); ?>'; btn.textContent = '<?php echo esc_js(__('Activate', 'maintenance-genius')); ?>'; btn.disabled = false; });
    };

    window.mgWizardFinish = function(activate) {
        var data = {
            action: 'mg_wizard_save',
            nonce: mgAdmin.nonce,
            title: document.getElementById('mg-wiz-title').value,
            message: document.getElementById('mg-wiz-message').value,
            preset: selectedPreset,
            visitor_enabled: document.getElementById('mg-wiz-visitor-enabled').checked ? 1 : 0,
            visitor_password: document.getElementById('mg-wiz-password').value,
            show_powered_by: document.getElementById('mg-wiz-show-credit').checked ? 1 : 0,
            activate: activate ? 1 : 0
        };

        var rocket = document.getElementById('mg-wiz-rocket');
        var btn = document.getElementById('mg-wiz-activate');

        if (activate) {
            rocket.className = 'launched';
            btn.innerHTML = '🚀🔥 <?php echo esc_js(__('Launching...', 'maintenance-genius')); ?>';
            setTimeout(function(){ rocket.className = 'liftoff'; }, 800);
        }

        jQuery.post(ajaxurl, data, function(response) {
            if (response.success) {
                setTimeout(function(){
                    document.getElementById('mg-wizard-overlay').style.opacity = '0';
                    document.getElementById('mg-wizard-overlay').style.transition = 'opacity 0.3s';
                    setTimeout(function(){ location.reload(); }, 300);
                }, activate ? 1200 : 0);
            } else {
                alert(response.data.message || 'Error');
                rocket.className = '';
                if (btn) btn.innerHTML = '🚀 <?php echo esc_js(__('Launch maintenance!', 'maintenance-genius')); ?>';
            }
        });
    };

    window.mgWizardComplete = function() {
        jQuery.post(ajaxurl, { action: 'mg_wizard_save', nonce: mgAdmin.nonce, skip: 1 }, function(){
            document.getElementById('mg-wizard-overlay').style.opacity = '0';
            document.getElementById('mg-wizard-overlay').style.transition = 'opacity 0.3s';
            setTimeout(function(){ document.getElementById('mg-wizard-overlay').remove(); }, 300);
        });
    };

    var defaultBtn = document.querySelector('.mg-wiz-preset[data-preset="default"]');
    if (defaultBtn) {
        defaultBtn.style.borderColor = '#667eea';
        defaultBtn.style.transform = 'scale(1.05)';
    }
})();
</script>
<?php endif; ?>
