/* ==========================================================================
   OTT ROYALE — thème sombre / doré (inspiré d'ottprestige.com)
   Chargé après Tailwind : les règles .royale-dark sont plus spécifiques et
   prennent donc le dessus sans avoir à modifier le HTML existant.
   ========================================================================== */

:root {
    --royale-gold-1: #ffd27a;
    --royale-gold-2: #e8a527;
    --royale-gold-3: #b3771a;
    --royale-purple: #7b2ff7;
    --royale-purple-deep: #3a1263;
    --royale-bg: #08060e;
    --royale-panel: #12101b;
    --royale-panel-alt: #0c0a14;
    --royale-border: #2a2436;
    --royale-text: #f6efe2;
    --royale-text-dim: #cfc3ad;
    --royale-text-mute: #9c907b;
}

body.royale-dark { background: var(--royale-bg) !important; }

/* ---------- En-tête ---------- */
.royale-dark header.fixed-header {
    background: rgba(9, 7, 16, .96) !important;
    border-bottom: 1px solid var(--royale-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .45) !important;
    backdrop-filter: blur(10px);
}
.royale-dark header a:hover { color: var(--royale-gold-1) !important; }

/* ---------- Bouton remonter ---------- */
.royale-dark .scroll-to-top {
    background: linear-gradient(135deg, var(--royale-gold-1), var(--royale-gold-2)) !important;
    color: #171018 !important;
    box-shadow: 0 4px 15px rgba(232, 165, 39, .4) !important;
}
.royale-dark .scroll-to-top:hover {
    background: linear-gradient(135deg, var(--royale-gold-2), var(--royale-gold-3)) !important;
    box-shadow: 0 6px 20px rgba(232, 165, 39, .6) !important;
}

/* ---------- Fonds et texte ---------- */
.royale-dark .bg-white { background: var(--royale-panel) !important; }
.royale-dark .bg-gray-50 { background: var(--royale-panel-alt) !important; }
.royale-dark .bg-gray-100 { background: var(--royale-panel-alt) !important; border: 1px solid var(--royale-border); }
.royale-dark .bg-gray-800 { background: #191524 !important; }
.royale-dark .bg-gray-800:hover, .royale-dark .hover\:bg-gray-900:hover { background: #241d33 !important; }
.royale-dark .bg-gray-900 { background: #100c19 !important; }
.royale-dark { color: var(--royale-text-dim); }
.royale-dark h1, .royale-dark h2, .royale-dark h3,
.royale-dark h4, .royale-dark h5 { color: var(--royale-text); }
.royale-dark .text-gray-900 { color: var(--royale-text) !important; }
.royale-dark .text-gray-800 { color: var(--royale-text) !important; }
.royale-dark .text-gray-700 { color: var(--royale-text-dim) !important; }
.royale-dark .text-gray-600 { color: var(--royale-text-mute) !important; }
.royale-dark .text-gray-500 { color: var(--royale-text-mute) !important; }
.royale-dark .text-slate-900, .royale-dark .text-slate-950 { color: var(--royale-text) !important; }
.royale-dark .border-gray-200, .royale-dark .border-gray-300,
.royale-dark .border-t, .royale-dark .border-b { border-color: var(--royale-border) !important; }
.royale-dark .shadow-sm, .royale-dark .shadow-lg, .royale-dark .shadow-xl {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .55) !important;
}
.royale-dark hr { border-color: var(--royale-border) !important; }

/* Pastilles d'icônes et badges */
.royale-dark .bg-blue-100, .royale-dark .bg-green-100, .royale-dark .bg-purple-100,
.royale-dark .bg-red-100, .royale-dark .bg-rose-100, .royale-dark .bg-orange-100,
.royale-dark .bg-indigo-100, .royale-dark .bg-amber-100, .royale-dark .bg-yellow-100 {
    background: rgba(232, 165, 39, .13) !important;
}
.royale-dark .text-blue-600, .royale-dark .text-blue-700,
.royale-dark .text-green-600, .royale-dark .text-green-700,
.royale-dark .text-purple-600, .royale-dark .text-purple-700,
.royale-dark .text-red-700, .royale-dark .text-rose-600,
.royale-dark .text-orange-600, .royale-dark .text-indigo-600 {
    color: var(--royale-gold-2) !important;
}
.royale-dark .bg-green-100.text-green-700 {
    background: rgba(90, 200, 140, .15) !important;
    color: #7fe0a8 !important;
}
.royale-dark .text-yellow-500, .royale-dark .text-yellow-400 { color: var(--royale-gold-1) !important; }

/* Boutons pleins : bleu / vert / indigo deviennent dorés */
.royale-dark .bg-blue-600, .royale-dark .bg-green-600, .royale-dark .bg-blue-500,
.royale-dark .bg-indigo-600, .royale-dark .bg-purple-600 {
    background: linear-gradient(135deg, var(--royale-gold-1), var(--royale-gold-2)) !important;
    color: #171018 !important;
    border-color: transparent !important;
}
.royale-dark .hover\:bg-blue-700:hover, .royale-dark .hover\:bg-green-700:hover,
.royale-dark .hover\:bg-indigo-700:hover, .royale-dark .hover\:bg-purple-700:hover {
    filter: brightness(1.08);
}
.royale-dark .bg-blue-500.text-white { color: #171018 !important; }
.royale-dark .border-blue-500, .royale-dark .border-blue-200 { border-color: var(--royale-gold-2) !important; }
.royale-dark .border-green-200 { border-color: rgba(34, 197, 94, .35) !important; }
.royale-dark .bg-green-50 { background: rgba(34, 197, 94, .1) !important; }
.royale-dark .text-green-800 { color: #6ee7a8 !important; }

/* Cartes d'offres */
.royale-dark .offer-popular-card {
    box-shadow: 0 22px 55px -18px rgba(232, 165, 39, .5), 0 12px 32px rgba(0, 0, 0, .55) !important;
}
@media (min-width: 768px) { .offer-popular-card { transition: transform .25s ease; } }
.royale-dark .offer-card { transition: transform .25s ease, border-color .25s ease; }
.royale-dark .offer-card:hover { border-color: rgba(232, 165, 39, .55) !important; transform: translateY(-3px); }

/* Bandeau promo (dégradé violet d'origine) */
.royale-dark .royale-promo-banner {
    background: radial-gradient(circle at 85% 10%, rgba(123, 47, 247, .38), transparent 55%),
                linear-gradient(135deg, #2a0f4a 0%, #170a2a 60%, #0c0616 100%) !important;
    border-bottom: 1px solid var(--royale-border);
}

/* ---------- Bloc héro ---------- */
.royale-hero {
    background:
        radial-gradient(circle at 82% 14%, rgba(123, 47, 247, .24), transparent 46%),
        radial-gradient(circle at 12% 20%, #171024 0%, var(--royale-bg) 58%);
    color: var(--royale-text);
    overflow: hidden;
    border-bottom: 1px solid var(--royale-border);
}
.royale-hero-top {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 24px;
    padding: 10px 16px; background: #050409;
    border-bottom: 1px solid var(--royale-border);
    font-size: 12.5px; color: var(--royale-text-mute);
}
.royale-hero-top span { display: inline-flex; align-items: center; gap: 6px; }
.royale-hero-top svg { color: var(--royale-gold-2); }
.royale-hero-grid {
    display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px;
    align-items: center; padding-block: 64px;
}
@media (max-width: 900px) { .royale-hero-grid { grid-template-columns: 1fr; padding-block: 40px; gap: 36px; } }
.royale-badge {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--royale-border);
    background: rgba(232, 165, 39, .08);
    color: var(--royale-gold-1); margin-bottom: 18px;
}
.royale-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; display: inline-block; }
.royale-hero-copy h1 {
    font-size: clamp(30px, 4vw, 46px); font-weight: 800;
    line-height: 1.12; margin-bottom: 18px;
}
.royale-gold {
    background: linear-gradient(135deg, var(--royale-gold-1), var(--royale-gold-3));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.royale-hero-copy p {
    color: var(--royale-text-dim); font-size: 17px; line-height: 1.6;
    margin-bottom: 28px; max-width: 500px;
}
.royale-hero-stats {
    list-style: none; display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px 24px; margin: 0 0 28px; padding: 0; max-width: 500px;
}
.royale-hero-stats li {
    display: flex; align-items: center; gap: 8px;
    color: var(--royale-text-dim); font-size: 15px;
}
.royale-hero-stats li:last-child { grid-column: 1 / -1; }
.royale-hero-stats svg { color: var(--royale-gold-2); flex-shrink: 0; }
@media (max-width: 480px) { .royale-hero-stats { grid-template-columns: 1fr; } }
.royale-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 22px; }
.royale-btn-gold {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, var(--royale-gold-1), var(--royale-gold-2));
    color: #171018; font-weight: 700; padding: 13px 26px; border-radius: 10px;
    text-decoration: none; box-shadow: 0 10px 26px rgba(232, 165, 39, .28);
}
.royale-btn-gold:hover { filter: brightness(1.06); }
.royale-btn-outline {
    display: inline-flex; align-items: center; padding: 13px 26px;
    border-radius: 10px; border: 1px solid var(--royale-border);
    color: var(--royale-text); text-decoration: none; font-weight: 600;
}
.royale-btn-outline:hover { border-color: var(--royale-gold-2); color: var(--royale-gold-1) !important; }
.royale-hero-links { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 24px; }
.royale-hero-links a {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--royale-text-mute); font-size: 13.5px; text-decoration: none;
}
.royale-hero-links svg { color: var(--royale-gold-2); }
.royale-hero-checks {
    display: flex; flex-wrap: wrap; gap: 18px;
    font-size: 13px; color: var(--royale-text-mute);
}
.royale-hero-checks span { display: inline-flex; align-items: center; gap: 6px; }
.royale-hero-checks svg { color: var(--royale-gold-2); }
.royale-hero-media { position: relative; }
.royale-hero-shot {
    width: 100%; border-radius: 18px;
    box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
    border: 1px solid var(--royale-border);
}
.royale-float {
    position: absolute; display: flex; align-items: center; gap: 10px;
    background: rgba(9, 6, 16, .94); border: 1px solid var(--royale-border);
    border-radius: 12px; padding: 10px 14px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .5); backdrop-filter: blur(6px);
}
.royale-float svg { color: var(--royale-gold-1); flex-shrink: 0; }
.royale-float b { display: block; font-size: 12.5px; color: var(--royale-text); }
.royale-float span { display: block; font-size: 11px; color: var(--royale-text-mute); }
.royale-float-1 { top: -14px; right: -14px; }
.royale-float-2 { bottom: -14px; left: -14px; }
@media (max-width: 640px) { .royale-float { display: none; } }

/* Carte contact */
.royale-dark .royale-contact-card {
    background:
        radial-gradient(circle at 88% 8%, rgba(123, 47, 247, .30), transparent 52%),
        linear-gradient(135deg, #1a0f2b, #0e0918) !important;
    color: var(--royale-text) !important;
    border: 1px solid var(--royale-gold-2) !important;
    box-shadow: 0 25px 60px -25px rgba(232, 165, 39, .4) !important;
}
.royale-dark .royale-contact-card .bg-white\/20 { background: rgba(232, 165, 39, .12) !important; }
.royale-dark .royale-contact-card .border-white\/20 { border-color: var(--royale-border) !important; }
.royale-dark .royale-contact-card i, .royale-dark .royale-contact-card svg { color: var(--royale-gold-1) !important; }
.royale-dark .royale-contact-card .opacity-90 { color: var(--royale-text-dim) !important; opacity: 1 !important; }
.royale-dark .royale-contact-card h3 { color: var(--royale-text) !important; }
.royale-dark .royale-contact-card .text-lg.font-semibold { color: var(--royale-gold-1) !important; }
.royale-dark .royale-contact-card .bg-green-500 { background: var(--royale-gold-2) !important; }
.royale-dark .royale-contact-card .hover\:bg-green-600:hover { background: var(--royale-gold-3) !important; }

/* Offre du jour / compte à rebours */
.royale-dark .royale-daily {
    background:
        radial-gradient(circle at 85% 5%, rgba(123, 47, 247, .32), transparent 55%),
        linear-gradient(135deg, #1b0d2d 0%, #0c0716 100%) !important;
    border-block: 1px solid var(--royale-border);
}
.royale-dark .countdown-container {
    background: rgba(123, 47, 247, .14) !important;
    border: 1px solid rgba(232, 165, 39, .45);
    box-shadow: 0 8px 25px rgba(0, 0, 0, .45) !important;
}
.royale-dark .offer-badge {
    background: linear-gradient(45deg, var(--royale-gold-2), var(--royale-gold-1)) !important;
    color: #171018 !important;
    box-shadow: 0 4px 15px rgba(232, 165, 39, .35) !important;
}

/* ---------- success.php ---------- */
.royale-dark .success-card {
    background: var(--royale-panel) !important;
    border-left-color: var(--royale-gold-2) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5) !important;
}
.royale-dark .detail-row { border-bottom-color: var(--royale-border) !important; }
.royale-dark .copy-btn {
    background: var(--royale-panel-alt) !important;
    border-color: var(--royale-border) !important;
    color: var(--royale-gold-1) !important;
}
.royale-dark .copy-btn:hover { background: #1c1728 !important; }
.royale-dark [class*="from-blue-50"][class*="to-indigo-50"] {
    background: var(--royale-panel) !important;
    border: 1px solid var(--royale-border);
}

/* ---------- tutorials.php ---------- */
.royale-dark .tutorial-content {
    background-color: var(--royale-panel) !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .5) !important;
}
.royale-dark .feature {
    background-color: rgba(232, 165, 39, .08) !important;
    border-left-color: var(--royale-gold-2) !important;
}
.royale-dark .warning { background-color: rgba(255, 193, 7, .1) !important; }
.royale-dark .note { background-color: rgba(123, 47, 247, .12) !important; }
.royale-dark .step-title { color: var(--royale-text) !important; }
.royale-dark .tutorial-header-section {
    background: linear-gradient(135deg, var(--royale-gold-1), var(--royale-gold-2)) !important;
    color: #171018 !important;
}
.royale-dark .app-selector, .royale-dark .os-selector {
    background: var(--royale-panel) !important;
    border: 1px solid var(--royale-border);
}
.royale-dark .device-btn, .royale-dark .app-btn, .royale-dark .os-btn {
    background: var(--royale-panel-alt) !important;
    color: var(--royale-text) !important;
    border: 1px solid var(--royale-border) !important;
}
.royale-dark .device-btn:hover, .royale-dark .app-btn:hover, .royale-dark .os-btn:hover { background: #1c1728 !important; }
.royale-dark .device-btn.active, .royale-dark .app-btn.active, .royale-dark .os-btn.active {
    background: linear-gradient(135deg, var(--royale-gold-1), var(--royale-gold-2)) !important;
    color: #171018 !important;
    box-shadow: 0 8px 20px rgba(232, 165, 39, .35) !important;
}
.royale-dark .device-btn.active::after, .royale-dark .app-btn.active::after,
.royale-dark .os-btn.active::after { background-color: #171018 !important; }
.royale-dark .step:before {
    background: linear-gradient(135deg, var(--royale-gold-1), var(--royale-gold-2)) !important;
    color: #171018 !important;
}
.royale-dark .config-method {
    background-color: var(--royale-panel-alt) !important;
    border-left-color: var(--royale-gold-2) !important;
}
.royale-dark .config-method h3 { color: var(--royale-gold-1) !important; }
.royale-dark .activation-section {
    background-color: rgba(232, 165, 39, .08) !important;
    border-left-color: var(--royale-gold-2) !important;
}
.royale-dark .activation-section h3 { color: var(--royale-gold-1) !important; }
.royale-dark .code-block { border: 1px solid var(--royale-gold-2); }
.royale-dark .website-link, .royale-dark .download-code,
.royale-dark .download-link, .royale-dark .price-tag {
    background: linear-gradient(135deg, var(--royale-gold-1), var(--royale-gold-2)) !important;
    color: #171018 !important;
}
.royale-dark .website-link:hover, .royale-dark .download-link:hover { filter: brightness(1.08); }
.royale-dark .video-caption { color: var(--royale-text-mute) !important; }

/* ---------- commande.php ---------- */
.royale-dark .royale-instructions {
    background: rgba(232, 165, 39, .08) !important;
    border-color: var(--royale-border) !important;
}
.royale-dark .royale-instructions h4 { color: var(--royale-gold-1) !important; }
.royale-dark .royale-instructions li, .royale-dark .royale-instructions ul { color: var(--royale-text-dim) !important; }

/* ---------- Formulaires ---------- */
.royale-dark input:not([type="checkbox"]):not([type="radio"]),
.royale-dark select,
.royale-dark textarea {
    background-color: var(--royale-panel-alt) !important;
    border-color: var(--royale-border) !important;
    color: var(--royale-text) !important;
}
.royale-dark input::placeholder, .royale-dark textarea::placeholder { color: var(--royale-text-mute) !important; }
.royale-dark label { color: var(--royale-text-dim) !important; }
.royale-dark .bg-white input, .royale-dark .bg-white select { background-color: var(--royale-panel-alt) !important; }

/* ---------- Tableaux ---------- */
.royale-dark table { color: var(--royale-text-dim); }
.royale-dark thead { background: var(--royale-panel-alt) !important; }
.royale-dark th { color: var(--royale-gold-1) !important; }
.royale-dark td, .royale-dark th { border-color: var(--royale-border) !important; }

/* Fonds clairs résiduels (encarts, dégradés marketing) */
.royale-dark .bg-blue-50, .royale-dark .bg-purple-50, .royale-dark .bg-indigo-50,
.royale-dark .bg-amber-50, .royale-dark .bg-rose-50, .royale-dark .bg-orange-50,
.royale-dark .bg-yellow-50, .royale-dark .bg-slate-50 {
    background: var(--royale-panel-alt) !important;
    border-color: var(--royale-border) !important;
}
.royale-dark [class*="from-blue-50"][class*="to-purple-50"],
.royale-dark [class*="from-blue-50"][class*="to-indigo-50"] {
    background: var(--royale-panel) !important;
    border: 1px solid var(--royale-border) !important;
}
.royale-dark [class*="from-red-600"][class*="via-yellow-500"] {
    background: linear-gradient(135deg, rgba(232, 165, 39, .16), rgba(123, 47, 247, .18)) !important;
    color: var(--royale-gold-1) !important;
    border: 1px solid rgba(232, 165, 39, .4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .35) !important;
}

/* ---------- Footer & modales ---------- */
.royale-dark .ft-modal { background: var(--royale-panel) !important; }
.royale-dark .ft-modal-head { border-color: var(--royale-border) !important; }
.royale-dark .ft-modal-head h2 { color: var(--royale-text) !important; }
.royale-dark .ft-modal-close { color: var(--royale-text-mute) !important; }
.royale-dark .ft-modal-close:hover { background: #1c1728 !important; color: var(--royale-text) !important; }
.royale-dark .ft-modal-body { color: var(--royale-text-dim) !important; }
.royale-dark .ft-modal-body h3 { color: var(--royale-gold-1) !important; }
.royale-dark .ft-modal-body strong { color: var(--royale-text) !important; }
.royale-dark .ft-modal-body .highlight {
    background: rgba(232, 165, 39, .08) !important;
    border-left-color: var(--royale-gold-2) !important;
}
.royale-dark .ft-modal-body .highlight.green { background: rgba(34, 197, 94, .1) !important; border-left-color: #22c55e !important; }
.royale-dark .ft-modal-body .highlight.amber { background: rgba(245, 158, 11, .1) !important; border-left-color: #f59e0b !important; }
.royale-dark footer { color: var(--royale-text-mute) !important; background: #050409 !important; }
.royale-dark footer a { color: var(--royale-text-dim); }
.royale-dark footer a:hover { color: var(--royale-gold-1); }
.royale-dark .royale-modal { background: var(--royale-panel) !important; color: var(--royale-text) !important; }
.royale-dark .royale-modal h2, .royale-dark .royale-modal h3 { color: var(--royale-text) !important; }
.royale-dark .royale-modal p, .royale-dark .royale-modal li { color: var(--royale-text-dim) !important; }

/* ---------- Divers ---------- */
.royale-dark .bg-amber-400 { background: linear-gradient(135deg, var(--royale-gold-1), var(--royale-gold-2)) !important; color: #171018 !important; }
.royale-dark .text-amber-300 { color: var(--royale-gold-1) !important; }
.royale-dark .bg-slate-900 { background: #0d0917 !important; }
.royale-dark .prestige-faq-item,
.royale-dark .royale-faq-item { background: var(--royale-panel) !important; border-color: var(--royale-border) !important; }
.royale-dark .royale-faq-item summary { color: var(--royale-text) !important; }
.royale-dark .royale-faq-item p { color: var(--royale-text-dim) !important; }
.royale-dark .royale-faq-item summary i { color: var(--royale-gold-1) !important; }
.royale-faq-item summary::-webkit-details-marker { display: none; }
.royale-faq-item summary::marker { content: ""; }

/* Ancres : évite que le header fixe masque les titres */
[id] { scroll-margin-top: 90px; }