* {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        
        :root {
            --glass-bg: rgba(255, 255, 255, 0.72);
            --glass-border: rgba(255, 255, 255, 0.5);
            --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            --text-primary: #1d1d1f;
            --text-secondary: #6b7280;
            --bg-card: rgba(255,255,255,0.85);
            --bg-input: rgba(255, 255, 255, 0.9);
            --border-input: rgba(0, 0, 0, 0.1);
        }

        html.dark {
            --glass-bg: rgba(28, 28, 40, 0.88);
            --glass-border: rgba(255, 255, 255, 0.09);
            --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
            --text-primary: #e8e8f0;
            --text-secondary: #a0a0b8;
            --bg-card: rgba(38, 38, 55, 0.92);
            --bg-input: rgba(48, 48, 68, 0.95);
            --border-input: rgba(255, 255, 255, 0.14);
        }

        html.dark body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
        }

        /* ── Textes ── */
        html.dark .text-gray-900 { color: #f0f0f8 !important; }
        html.dark .text-gray-800 { color: #e0e0ec !important; }
        html.dark .text-gray-700 { color: #c8c8dc !important; }
        html.dark .text-gray-600 { color: #a8a8c0 !important; }
        html.dark .text-gray-500 { color: #8888a8 !important; }
        html.dark .text-gray-400 { color: #686888 !important; }
        html.dark .text-gray-300 { color: #7070a0 !important; }

        /* ── Section Abonnement dans Paramètres ── */
        /* Carte plan actuel (fond blanc/bleu/dégradé ajouté dynamiquement) */
        html.dark #planCard {
            background: rgba(255,255,255,0.07) !important;
            border-color: rgba(255,255,255,0.12) !important;
        }
        html.dark #planCard .bg-gray-200 {
            background-color: rgba(255,255,255,0.15) !important;
        }
        html.dark #currentPlanName { color: #f0f0f8 !important; }
        html.dark #currentPlanDesc { color: #8888a8 !important; }
        /* Pill "Actif" plan Starter */
        html.dark #currentPlanPill.bg-gray-200 {
            background-color: rgba(255,255,255,0.15) !important;
            color: #b0b0cc !important;
        }
        /* Icône plan badge Starter */
        html.dark #planBadgeIcon.bg-gray-200 {
            background-color: rgba(255,255,255,0.12) !important;
            color: #a0a0c0 !important;
        }
        /* Bouton "Gérer mon abonnement" */
        html.dark #managePlanBtn button {
            color: #b0b0cc !important;
        }
        html.dark #managePlanBtn button:hover {
            background-color: rgba(255,255,255,0.08) !important;
        }
        /* Section "Limites du plan" */
        html.dark #planLimitsCard {
            background: rgba(255,255,255,0.06) !important;
        }
        html.dark #planLimitsCard p.text-gray-400 { color: #686888 !important; }
        html.dark #planLimitsContent { color: #b0b0cc !important; }
        html.dark #planLimitsContent .text-gray-600 { color: #b0b0cc !important; }
        html.dark #planLimitsContent .font-semibold { color: #d0d0e8 !important; }

        /* ── Page Abonnement (pricing) ── */
        /* Badge Starter */
        html.dark #page-pricing span.bg-gray-200 {
            background-color: rgba(255,255,255,0.14) !important;
            color: #c0c0d8 !important;
        }
        /* Badge Pro */
        html.dark #page-pricing span.bg-blue-100 {
            background-color: rgba(59,130,246,0.25) !important;
            color: #93c5fd !important;
        }
        /* Badge Business */
        html.dark #page-pricing span.bg-purple-100 {
            background-color: rgba(139,92,246,0.25) !important;
            color: #c4b5fd !important;
        }
        /* Bouton Plan actuel */
        html.dark #pricingStarterBtn {
            background-color: rgba(255,255,255,0.10) !important;
            color: #9090b0 !important;
        }
        /* Prix (ex: 0€, 7,99€) */
        html.dark #page-pricing .text-3xl { color: #f0f0f8 !important; }
        /* "/ mois" et sous-titres gris */
        html.dark #page-pricing .text-gray-500 { color: #8888a8 !important; }
        /* Items de liste activés */
        html.dark #page-pricing ul li { color: #d0d0e8 !important; }
        /* Items désactivés (fa-times) */
        html.dark #page-pricing li.text-gray-400 { color: #55556a !important; }
        html.dark #page-pricing .fa-times { color: #44445a !important; }
        /* Accroches colorées sous le prix */
        html.dark #page-pricing .text-blue-600 { color: #93c5fd !important; }
        html.dark #page-pricing .text-purple-600 { color: #c4b5fd !important; }
        /* Titres des cartes avantages en bas */
        html.dark #page-pricing p.font-semibold { color: #e0e0f0 !important; }
        /* bg des icônes avantages */
        html.dark #page-pricing .bg-blue-100.text-blue-500 {
            background-color: rgba(59,130,246,0.22) !important;
        }
        html.dark #page-pricing .bg-green-100.text-green-500 {
            background-color: rgba(16,185,129,0.22) !important;
        }
        html.dark #page-pricing .bg-purple-100.text-purple-500 {
            background-color: rgba(139,92,246,0.22) !important;
        }

        /* ── Fonds neutres ── */
        html.dark .bg-white { background-color: #1e1e30 !important; color: #e0e0ec; }
        html.dark .bg-gray-50 { background-color: #1a1a28 !important; }
        html.dark .bg-gray-100 { background-color: #242438 !important; }
        html.dark .bg-gray-200 { background-color: #2c2c44 !important; }

        /* ── Bordures ── */
        html.dark .border-gray-100 { border-color: rgba(255,255,255,0.08) !important; }
        html.dark .border-gray-200 { border-color: rgba(255,255,255,0.10) !important; }
        html.dark .border-gray-300 { border-color: rgba(255,255,255,0.14) !important; }
        html.dark .divide-gray-100 > * + * { border-color: rgba(255,255,255,0.08) !important; }
        html.dark .divide-gray-200 > * + * { border-color: rgba(255,255,255,0.10) !important; }

        /* ── Inputs ── */
        html.dark .input-apple {
            background: var(--bg-input) !important;
            border-color: var(--border-input) !important;
            color: #e8e8f0 !important;
        }
        html.dark input, html.dark textarea {
            background-color: rgba(48, 48, 68, 0.95) !important;
            color: #e8e8f0 !important;
            border-color: rgba(255,255,255,0.14) !important;
        }
        html.dark input::placeholder, html.dark textarea::placeholder { color: #707090 !important; }
        html.dark select, html.dark option {
            background-color: #242438 !important;
            color: #e8e8f0 !important;
        }

        /* ── Fonds colorés pastel → version dark ── */
        /* Bleu */
        html.dark .bg-blue-50   { background-color: rgba(59, 130, 246, 0.15) !important; }
        html.dark .bg-blue-100  { background-color: rgba(59, 130, 246, 0.20) !important; }
        html.dark .bg-blue-200  { background-color: rgba(59, 130, 246, 0.28) !important; }
        /* Indigo */
        html.dark .bg-indigo-50  { background-color: rgba(99, 102, 241, 0.15) !important; }
        html.dark .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.20) !important; }
        /* Violet */
        html.dark .bg-purple-50  { background-color: rgba(139, 92, 246, 0.15) !important; }
        html.dark .bg-purple-100 { background-color: rgba(139, 92, 246, 0.20) !important; }
        /* Vert */
        html.dark .bg-green-50   { background-color: rgba(16, 185, 129, 0.15) !important; }
        html.dark .bg-green-100  { background-color: rgba(16, 185, 129, 0.20) !important; }
        /* Orange */
        html.dark .bg-orange-50  { background-color: rgba(249, 115, 22, 0.15) !important; }
        html.dark .bg-orange-100 { background-color: rgba(249, 115, 22, 0.20) !important; }
        /* Ambre / Jaune */
        html.dark .bg-amber-50   { background-color: rgba(245, 158, 11, 0.15) !important; }
        html.dark .bg-amber-100  { background-color: rgba(245, 158, 11, 0.20) !important; }
        html.dark .bg-yellow-50  { background-color: rgba(234, 179, 8, 0.15) !important; }
        html.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.20) !important; }
        /* Rouge */
        html.dark .bg-red-50     { background-color: rgba(239, 68, 68, 0.15) !important; }
        html.dark .bg-red-100    { background-color: rgba(239, 68, 68, 0.20) !important; }
        /* Cyan */
        html.dark .bg-cyan-50    { background-color: rgba(6, 182, 212, 0.15) !important; }
        html.dark .bg-cyan-100   { background-color: rgba(6, 182, 212, 0.20) !important; }
        /* Teal */
        html.dark .bg-teal-50    { background-color: rgba(20, 184, 166, 0.15) !important; }
        html.dark .bg-teal-100   { background-color: rgba(20, 184, 166, 0.20) !important; }
        /* Rose / Pink */
        html.dark .bg-rose-50    { background-color: rgba(244, 63, 94, 0.15) !important; }
        html.dark .bg-pink-50    { background-color: rgba(236, 72, 153, 0.15) !important; }
        html.dark .bg-pink-100   { background-color: rgba(236, 72, 153, 0.20) !important; }

        /* ── Textes colorés sur fonds pastel → rendre lisibles ── */
        html.dark .text-blue-600, html.dark .text-blue-700  { color: #93c5fd !important; }
        html.dark .text-indigo-600, html.dark .text-indigo-700 { color: #a5b4fc !important; }
        html.dark .text-purple-600, html.dark .text-purple-700 { color: #c4b5fd !important; }
        html.dark .text-green-600, html.dark .text-green-700  { color: #6ee7b7 !important; }
        html.dark .text-orange-600, html.dark .text-orange-700 { color: #fdba74 !important; }
        html.dark .text-amber-600, html.dark .text-amber-700  { color: #fcd34d !important; }
        html.dark .text-yellow-600, html.dark .text-yellow-700 { color: #fde68a !important; }
        html.dark .text-red-600, html.dark .text-red-700    { color: #fca5a5 !important; }
        html.dark .text-cyan-600, html.dark .text-cyan-700   { color: #67e8f9 !important; }
        html.dark .text-teal-600, html.dark .text-teal-700   { color: #5eead4 !important; }
        html.dark .text-pink-600, html.dark .text-pink-700   { color: #f9a8d4 !important; }
        html.dark .text-indigo-400 { color: #a5b4fc !important; }
        html.dark .text-amber-400  { color: #fcd34d !important; }
        html.dark .text-green-600  { color: #6ee7b7 !important; }
        html.dark .text-purple-600 { color: #c4b5fd !important; }

        /* [MASTERPROMPT MOD] Lisibilité dark mode pour la carte de parrainage. */
        html.dark #referralAppliedBanner {
            background-color: rgba(16, 185, 129, 0.16) !important;
            border-color: rgba(16, 185, 129, 0.32) !important;
            color: #a7f3d0 !important;
        }
        html.dark #referralCard .bg-white\/60,
        html.dark #influencerDashboardCard .bg-white\/60,
        html.dark #dashboardReferralCard .bg-white\/60,
        html.dark #pricingReferralCard .bg-white\/60 {
            background-color: rgba(255,255,255,0.08) !important;
            border-color: rgba(255,255,255,0.12) !important;
        }

        /* ── Badges colorés (texte sur fond coloré) ── */
        html.dark .bg-blue-100.text-blue-600,
        html.dark .bg-blue-100.text-blue-700   { color: #bfdbfe !important; }
        html.dark .bg-purple-100.text-purple-600 { color: #ddd6fe !important; }
        html.dark .bg-yellow-100.text-yellow-700 { color: #fef08a !important; }
        html.dark .bg-blue-100.text-blue-500 { color: #93c5fd !important; }
        html.dark .text-blue-500  { color: #60a5fa !important; }
        html.dark .text-indigo-500 { color: #818cf8 !important; }
        html.dark .text-purple-500 { color: #a78bfa !important; }
        html.dark .text-green-500  { color: #34d399 !important; }
        html.dark .text-orange-500 { color: #fb923c !important; }
        html.dark .text-amber-500  { color: #f59e0b !important; }
        html.dark .text-red-500    { color: #f87171 !important; }
        html.dark .text-cyan-500   { color: #22d3ee !important; }
        html.dark .text-teal-500   { color: #2dd4bf !important; }
        html.dark .text-pink-500   { color: #ec4899 !important; }
        html.dark .text-yellow-300 { color: #fde68a !important; }

        /* ── Hover neutres ── */
        html.dark .hover\:bg-red-50:hover    { background-color: rgba(239,68,68,0.15) !important; }
        html.dark .hover\:bg-blue-100:hover  { background-color: rgba(59,130,246,0.22) !important; }
        html.dark .hover\:bg-yellow-100:hover { background-color: rgba(234,179,8,0.22) !important; }
        html.dark .hover\:bg-green-100:hover { background-color: rgba(16,185,129,0.22) !important; }
        html.dark .hover\:bg-gray-100:hover  { background-color: rgba(255,255,255,0.08) !important; }
        html.dark .hover\:bg-purple-50:hover { background-color: rgba(139,92,246,0.15) !important; }

        /* ── Éléments de liste / lignes de stock ── */
        html.dark .bg-green-50.rounded-xl { background-color: rgba(16,185,129,0.14) !important; }
        html.dark .bg-blue-50.rounded-xl  { background-color: rgba(59,130,246,0.14) !important; }
        html.dark .bg-yellow-50.rounded-xl { background-color: rgba(234,179,8,0.14) !important; }

        /* ── Composants spécifiques ── */
        html.dark .chat-bubble-ai { background: rgba(255,255,255,0.09); color: #e0e0ec; }
        html.dark .sim-product-item { background: rgba(255,255,255,0.07); color: #e0e0ec; }
        html.dark .sim-product-item:hover { background: rgba(255,255,255,0.12); }
        html.dark .sim-product-item.selected { background: rgba(0,122,255,0.18); border-color: rgba(0,122,255,0.4); }
        html.dark .onb-card, html.dark .onb-metric { background: rgba(255,255,255,0.07); color: #d0d0e8; }
        html.dark .onb-example { background: rgba(255,255,255,0.06); color: #a0a0c0; }
        html.dark .onb-chip { background: rgba(255,255,255,0.10); color: #b0b0cc; border-color: rgba(255,255,255,0.1); }
        html.dark .onb-tip { background: rgba(251,191,36,0.12); border-color: rgba(251,191,36,0.25); color: #fcd34d; }
        html.dark .onb-pricing-card { background: rgba(255,255,255,0.07); }
        html.dark .onb-pricing-card.featured { background: rgba(99,102,241,0.18); border-color: rgba(99,102,241,0.4); }
        html.dark .onb-input { background: rgba(255,255,255,0.08); color: #e5e7eb; border-color: rgba(255,255,255,0.12); }
        html.dark .onb-input::placeholder { color: #6b7280; }
        html.dark .onb-choice { background: rgba(255,255,255,0.08); color: #c0c0d8; border-color: rgba(255,255,255,0.1); }
        html.dark .onb-feature-row { border-color: rgba(255,255,255,0.07); }
        html.dark .tab-active { background: rgba(0,122,255,0.22); color: #60a5fa; }
        html.dark .sidebar-link.active { background: rgba(0,122,255,0.20); color: #60a5fa; }
        html.dark .sidebar-link { color: #c0c0d8; }
        html.dark .radio-card.selected { border-color: #60a5fa; background: rgba(59,130,246,0.15); }
        html.dark .photo-upload { border-color: rgba(255,255,255,0.2); }
        html.dark .photo-upload:hover { border-color: #60a5fa; background: rgba(59,130,246,0.08); }
        /* Toggle checkbox style */
        html.dark .bg-gray-200.peer-focus\:outline-none { background-color: #3a3a55 !important; }
        html.dark .peer:checked ~ .bg-gray-200 { background-color: #007AFF !important; }

        body {
            min-height: 100vh;
            min-height: 100dvh; /* viewport dynamique : suit la barre d'adresse iOS */
        }
        /* Dégradé en couche fixe dédiée plutôt que background-attachment:fixed
           (bogué sur iOS Safari : repaint au scroll qui fait "décrocher" les éléments position:fixed comme la tab bar). */
        body::before {
            content: "";
            position: fixed;
            inset: 0;
            z-index: -1;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        }
        
        .glass {
            background: var(--glass-bg);
            backdrop-filter: blur(20px) saturate(180%);
            -webkit-backdrop-filter: blur(20px) saturate(180%);
            border: 1px solid var(--glass-border);
            box-shadow: var(--glass-shadow);
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #007AFF, #5856D6);
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover { transform: scale(1.02); }
        .btn-primary:active { transform: scale(0.98); }
        
        .card-hover { transition: all 0.3s ease; }
        .card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); }
        
        .tab-active { background: rgba(0, 122, 255, 0.15); color: #007AFF; }
        .sidebar-link.active { background: rgba(0, 122, 255, 0.15); color: #007AFF; }
        
        .input-apple {
            background: rgba(255, 255, 255, 0.9);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 12px;
            padding: 12px 16px;
            transition: all 0.2s ease;
        }
        
        .input-apple:focus {
            outline: none;
            border-color: #007AFF;
            box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
        }
        
        @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
        .animate-slideUp { animation: slideUp 0.4s ease forwards; }
        
        .toast { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); z-index: 9999; animation: slideUp 0.3s ease; }
        
        .checkbox-apple {
            appearance: none;
            width: 22px;
            height: 22px;
            border: 2px solid #d1d5db;
            border-radius: 6px;
            background: white;
            cursor: pointer;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }
        
        .checkbox-apple:checked {
            background: linear-gradient(135deg, #007AFF, #5856D6);
            border-color: transparent;
        }
        
        .checkbox-apple:checked::after {
            content: '✓';
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            font-weight: bold;
        }
        
        .radio-card {
            cursor: pointer;
            transition: all 0.2s ease;
            border: 2px solid transparent;
        }
        
        .radio-card.selected {
            border-color: #007AFF;
            background: rgba(0, 122, 255, 0.1);
        }
        
        .photos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
            gap: 8px;
        }
        
        .photo-thumb {
            position: relative;
            aspect-ratio: 1;
            border-radius: 12px;
            overflow: hidden;
        }
        
        .photo-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .photo-thumb .delete-btn {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 20px;
            height: 20px;
            background: rgba(255,59,48,0.9);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 10px;
            cursor: pointer;
        }
        
        .photo-upload {
            border: 2px dashed #d1d5db;
            border-radius: 16px;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .photo-upload:hover { border-color: #007AFF; background: rgba(0, 122, 255, 0.05); }
        
        .regime-none { background: linear-gradient(135deg, #6B7280, #4B5563); }
        .regime-micro { background: linear-gradient(135deg, #10B981, #059669); }
        .regime-reel { background: linear-gradient(135deg, #8B5CF6, #7C3AED); }
        
        .sim-product-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 12px;
            border-radius: 12px;
            background: rgba(255,255,255,0.5);
            transition: all 0.2s ease;
        }
        
        .sim-product-item:hover {
            background: rgba(255,255,255,0.7);
        }
        
        .sim-product-item.selected {
            background: rgba(0, 122, 255, 0.1);
            border: 1px solid rgba(0, 122, 255, 0.3);
        }
        
        .chat-bubble-user { background: linear-gradient(135deg, #007AFF, #5856D6); color: white; border-radius: 20px 20px 4px 20px; }
        .chat-bubble-ai { background: rgba(0, 0, 0, 0.05); color: #1d1d1f; border-radius: 20px 20px 20px 4px; }
        
        .modal-overlay { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); }
        
        .safe-area-top { padding-top: env(safe-area-inset-top, 0px); }
        .safe-area-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }
        
        html, body {
            touch-action: manipulation;
            -ms-touch-action: manipulation;
            overscroll-behavior: none;
        }
        .onb-step { display: none; }
        .onb-step.active { display: block; animation: onbFadeIn 0.35s ease forwards; }
        @keyframes onbFadeIn { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }
        @keyframes onbFadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
        .onb-progress-bar { height: 3px; background: rgba(255,255,255,0.2); border-radius: 99px; overflow: hidden; }
        .onb-progress-fill { height: 100%; background: white; border-radius: 99px; transition: width 0.4s ease; }
        .onb-card { background: rgba(255,255,255,0.5); border-radius: 12px; padding: 10px 14px; }
        .onb-chip { background: rgba(255,255,255,0.6); border: 1px solid rgba(0,0,0,0.05); border-radius: 99px; padding: 5px 12px; font-size: 12px; color: #555; display: inline-block; }
        .onb-metric { background: rgba(255,255,255,0.6); border-radius: 12px; padding: 8px 12px; }
        .onb-status { padding: 4px 12px; border-radius: 99px; font-size: 12px; font-weight: 500; }
        .onb-example { background: rgba(255,255,255,0.5); border-radius: 12px; padding: 10px 14px; font-size: 13px; color: #666; font-style: italic; }
        .onb-pricing-card { border-radius: 16px; padding: 12px; text-align: center; background: rgba(255,255,255,0.5); }
        .onb-pricing-card.featured { background: rgba(99,102,241,0.1); border: 2px solid rgba(99,102,241,0.3); }
        .onb-dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,0.3); transition: all 0.3s ease; cursor: pointer; }
        .onb-dot.active { width: 20px; background: white; }
        .onb-dot.done { background: rgba(255,255,255,0.6); }
        .onb-tip { background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.2); border-radius: 12px; padding: 8px 12px; font-size: 12px; color: #92400e; display: flex; align-items: start; gap: 8px; }
        .onb-num { width: 24px; height: 24px; border-radius: 50%; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: white; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .onb-label { display: block; font-size: 12px; font-weight: 600; color: #6b7280; margin-bottom: 5px; }
        .onb-input { width: 100%; background: rgba(255,255,255,0.85); border: 1.5px solid rgba(0,0,0,0.08); border-radius: 14px; padding: 12px 14px; font-size: 15px; color: #1f2937; transition: border-color .2s, box-shadow .2s; }
        .onb-input:focus { outline: none; border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.15); }
        .onb-input::placeholder { color: #9ca3af; }
        .onb-choice { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.6); border: 1.5px solid rgba(0,0,0,0.06); border-radius: 99px; padding: 8px 14px; font-size: 13px; color: #444; cursor: pointer; transition: all .18s; user-select: none; }
        .onb-choice:hover { border-color: rgba(99,102,241,0.4); }
        .onb-choice.selected { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
        .onb-feature-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
        .onb-feature-row:last-child { border-bottom: none; }
        .onb-feature-ico { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; font-size: 14px; }
        .onb-result { background: linear-gradient(135deg, rgba(16,185,129,0.12), rgba(5,150,105,0.12)); border: 1px solid rgba(16,185,129,0.25); border-radius: 16px; padding: 14px; text-align: center; }
        .onb-switch { position: relative; width: 46px; height: 26px; flex-shrink: 0; }
        .onb-switch input { opacity: 0; width: 0; height: 0; }
        .onb-switch .slider { position: absolute; inset: 0; background: rgba(0,0,0,0.15); border-radius: 99px; transition: .25s; }
        .onb-switch .slider:before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .25s; }
        .onb-switch input:checked + .slider { background: linear-gradient(135deg, #10b981, #059669); }
        .onb-switch input:checked + .slider:before { transform: translateX(20px); }

                /* ══════════════════════════════════════════════════════════════
                   MOTION SYSTEM — easings, keyframes, micro-interactions
                   ══════════════════════════════════════════════════════════════ */
                :root {
                    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
                    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
                    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
                    --ease-in-out-smooth: cubic-bezier(0.65, 0, 0.35, 1);
                    --dur-fast: 180ms;
                    --dur-base: 280ms;
                    --dur-slow: 480ms;
                }

                /* Smooth scrolling global */
                html { scroll-behavior: smooth; }
                body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

                /* Scrollbar élégante (desktop) */
                ::-webkit-scrollbar { width: 10px; height: 10px; }
                ::-webkit-scrollbar-track { background: transparent; }
                ::-webkit-scrollbar-thumb {
                    background: rgba(0,0,0,0.12);
                    border-radius: 99px;
                    border: 2px solid transparent;
                    background-clip: padding-box;
                    transition: background var(--dur-base) var(--ease-out-quart);
                }
                ::-webkit-scrollbar-thumb:hover { background: rgba(0,122,255,0.4); background-clip: padding-box; }
                html.dark ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); background-clip: padding-box; }
                html.dark ::-webkit-scrollbar-thumb:hover { background: rgba(0,122,255,0.5); background-clip: padding-box; }

                /* ── Keyframes ── */
                @keyframes fx-fadeInUp { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
                @keyframes fx-fadeInScale { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
                @keyframes fx-fadeIn { from { opacity: 0; } to { opacity: 1; } }
                @keyframes fx-slideInRight { from { opacity: 0; transform: translate3d(24px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
                @keyframes fx-pop { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.04); opacity: 1; } 100% { transform: scale(1); } }
                @keyframes fx-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
                @keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
                @keyframes fx-pulseSoft { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(1.03); } }
                @keyframes fx-spin { to { transform: rotate(360deg); } }
                @keyframes fx-ringPulse { 0% { box-shadow: 0 0 0 0 rgba(0,122,255,0.45); } 70% { box-shadow: 0 0 0 10px rgba(0,122,255,0); } 100% { box-shadow: 0 0 0 0 rgba(0,122,255,0); } }
                @keyframes fx-modalIn { from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.96); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
                @keyframes fx-overlayIn { from { opacity: 0; backdrop-filter: blur(0px); } to { opacity: 1; backdrop-filter: blur(10px); } }
                @keyframes fx-toastIn { 0% { opacity: 0; transform: translate(-50%, 24px) scale(0.9); } 60% { opacity: 1; transform: translate(-50%, -4px) scale(1.02); } 100% { opacity: 1; transform: translate(-50%, 0) scale(1); } }
                @keyframes fx-toastOut { to { opacity: 0; transform: translate(-50%, 16px) scale(0.95); } }
                @keyframes fx-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
                @keyframes fx-gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

                /* ── Utilitaires ── */
                .fx-fadeInUp { animation: fx-fadeInUp var(--dur-slow) var(--ease-out-expo) both; }
                .fx-fadeInScale { animation: fx-fadeInScale var(--dur-base) var(--ease-out-quart) both; }
                .fx-fadeIn { animation: fx-fadeIn var(--dur-base) ease both; }
                .fx-pop { animation: fx-pop 420ms var(--ease-spring) both; }
                .fx-float { animation: fx-float 3s ease-in-out infinite; }
                .fx-pulse { animation: fx-pulseSoft 2s ease-in-out infinite; }
                .fx-ring { animation: fx-ringPulse 1.8s var(--ease-out-quart) infinite; }
                .fx-shake { animation: fx-shake 380ms var(--ease-in-out-smooth); }

                /* Reveal via IntersectionObserver */
                .fx-reveal { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity var(--dur-slow) var(--ease-out-expo), transform var(--dur-slow) var(--ease-out-expo); will-change: opacity, transform; }
                .fx-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

                /* Stagger: applique avec style="--i:N" */
                .fx-stagger > * { animation: fx-fadeInUp var(--dur-slow) var(--ease-out-expo) both; animation-delay: calc(var(--i, 0) * 60ms); }

                /* ── Override & boost des composants existants ── */
                .animate-slideUp { animation: fx-fadeInUp var(--dur-slow) var(--ease-out-expo) forwards; }

                .btn-primary {
                    transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out-quart), filter var(--dur-base) ease;
                    position: relative;
                    overflow: hidden;
                }
                .btn-primary::before {
                    content: ''; position: absolute; inset: 0;
                    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.25) 50%, transparent 70%);
                    transform: translateX(-100%);
                    transition: transform 700ms var(--ease-out-expo);
                    pointer-events: none;
                }
                .btn-primary:hover { transform: translateY(-1px) scale(1.015); box-shadow: 0 10px 28px rgba(0,122,255,0.35); filter: brightness(1.05); }
                .btn-primary:hover::before { transform: translateX(100%); }
                .btn-primary:active { transform: translateY(0) scale(0.97); transition-duration: 80ms; }

                .card-hover { transition: transform var(--dur-base) var(--ease-out-expo), box-shadow var(--dur-base) var(--ease-out-quart); will-change: transform; }
                .card-hover:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.14); }
                html.dark .card-hover:hover { box-shadow: 0 20px 50px rgba(0,0,0,0.55); }

                .input-apple { transition: border-color var(--dur-fast) ease, box-shadow var(--dur-base) var(--ease-out-quart), transform var(--dur-fast) ease; }
                .input-apple:focus { transform: translateY(-1px); }

                .checkbox-apple { transition: all var(--dur-fast) var(--ease-spring); }
                .checkbox-apple:active { transform: scale(0.88); }

                .radio-card { transition: transform var(--dur-fast) var(--ease-spring), border-color var(--dur-base) ease, background var(--dur-base) ease, box-shadow var(--dur-base) ease; }
                .radio-card:hover { transform: translateY(-2px); }
                .radio-card.selected { box-shadow: 0 8px 24px rgba(0,122,255,0.18); }

                /* Tabs bottom bar — indicateur actif */
                .tab-active { background: rgba(0,122,255,0.15); color: #007AFF; transition: all var(--dur-base) var(--ease-spring); }
                [onclick*="switchTab"], .sidebar-link { transition: background var(--dur-base) var(--ease-out-quart), color var(--dur-base) ease, box-shadow var(--dur-base) var(--ease-out-quart); }
                [onclick*="switchTab"]:active { transform: scale(0.92); }
                .sidebar-link { position: relative; overflow: hidden; }
                .sidebar-link::before {
                    content: ''; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 3px;
                    background: linear-gradient(180deg, #007AFF, #5856D6);
                    transform: scaleY(0); transform-origin: center;
                    transition: transform var(--dur-base) var(--ease-spring);
                }
                .sidebar-link.active::before { transform: scaleY(1); }
                /* [MASTERPROMPT MOD] Hover sidebar stable : supprime le decalage horizontal qui faisait scintiller le glass sur MacBook. */
                .sidebar-link:hover { background: rgba(0,122,255,0.08); box-shadow: inset 0 0 0 1px rgba(0,122,255,0.06); }
                .sidebar-link.active:hover { background: rgba(0,122,255,0.15); }
                html.dark .sidebar-link:hover { background: rgba(96,165,250,0.12); box-shadow: inset 0 0 0 1px rgba(96,165,250,0.10); }
                html.dark .sidebar-link.active:hover { background: rgba(0,122,255,0.20); }

                /* Transitions entre onglets */
                .section-enter { animation: fx-fadeInUp 380ms var(--ease-out-expo) both; }

                /* Modal sophistiqué */
                .modal-overlay { animation: fx-overlayIn var(--dur-base) var(--ease-out-quart) both; }
                .modal-overlay > *:not(script) { animation: fx-modalIn 380ms var(--ease-spring) both; }
                .modal-overlay.closing { animation: fx-fadeIn var(--dur-fast) ease reverse both; }

                /* Toast spring */
                .toast { animation: fx-toastIn 480ms var(--ease-spring) both !important; }
                .toast.closing { animation: fx-toastOut var(--dur-base) var(--ease-out-quart) forwards !important; }

                /* Skeleton shimmer pour chargements */
                .skeleton {
                    background: linear-gradient(90deg, rgba(0,0,0,0.05) 25%, rgba(0,0,0,0.12) 50%, rgba(0,0,0,0.05) 75%);
                    background-size: 800px 100%;
                    animation: fx-shimmer 1.4s linear infinite;
                    border-radius: 8px;
                }
                html.dark .skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0.05) 75%); background-size: 800px 100%; }

                /* Spinner icône */
                .fa-spin-smooth { animation: fx-spin 900ms linear infinite; }

                /* Photo thumb : zoom doux + delete btn anim */
                .photo-thumb img { transition: transform var(--dur-slow) var(--ease-out-expo); }
                .photo-thumb:hover img { transform: scale(1.06); }
                .photo-thumb .delete-btn { transition: transform var(--dur-fast) var(--ease-spring), background var(--dur-fast) ease; }
                .photo-thumb .delete-btn:hover { transform: scale(1.15); background: rgba(255,59,48,1); }
                .photo-upload { transition: border-color var(--dur-base) ease, background var(--dur-base) ease, transform var(--dur-fast) var(--ease-spring); }
                .photo-upload:active { transform: scale(0.98); }

                /* Chat bubbles apparition */
                .chat-bubble-user, .chat-bubble-ai { animation: fx-fadeInUp 340ms var(--ease-out-expo) both; }

                /* Badge Pro pulse subtil */
                .badge-pro { animation: fx-pulseSoft 2.8s ease-in-out infinite; }

                /* Feedback tactile haptique-like sur tout bouton cliquable */
                button:not(:disabled), [role="button"], .cursor-pointer { -webkit-tap-highlight-color: transparent; }
                button:not(:disabled):active { transform: scale(0.97); transition: transform 80ms ease; }

                /* GPU hint */
                .modal-overlay, .toast, .card-hover, .btn-primary, .fx-reveal { will-change: auto; }

                /* Respect utilisateur : reduce motion */
                @media (prefers-reduced-motion: reduce) {
                    *, *::before, *::after {
                        animation-duration: 0.01ms !important;
                        animation-iteration-count: 1 !important;
                        transition-duration: 0.01ms !important;
                        scroll-behavior: auto !important;
                    }
                    .fx-reveal { opacity: 1; transform: none; }
                }