/* ==========================================================================
   SP-THEMES.CSS — Systeme de themes partage StratPilote
   Charge par tous les modules iframes via <link rel="stylesheet" href="sp-themes.css">

   SECTIONS :
   1. Import Google Fonts
   2. Variables racine (base + dark mode)
   3. Variables de compatibilite (aliases)
   4. Typographie — 6 familles
   5. Palettes — 6 couleurs
   6. Templates visuels — 12 styles
   7. Mode capture (export PDF/PNG)
   8. Theme picker UI (.sp-theme-bar)
   ========================================================================== */


/* ==========================================================================
   1. GOOGLE FONTS
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Space+Grotesk:wght@300;400;500;600;700&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Outfit:wght@300;400;500;600;700&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');


/* ==========================================================================
   2. VARIABLES RACINE — BASE ET DARK MODE
   Rappel : les modules definissent deja ces variables dans leur :root.
   Ce fichier les etend avec les variables manquantes et les aliases.
   ========================================================================== */

:root {
    /* Palette par defaut — StratPilote orange/cyan */
    --accent-primary:   #E8621C;
    --accent-hover:     #E8621C;
    --accent-secondary: #1AB5C5;
    --accent-light:     rgba(232, 98, 28, 0.1);

    /* Fonds */
    --bg-primary:   #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-card:      #ffffff;

    /* Textes */
    --text-primary:   #1a1a1a;
    --text-secondary: #6b7280;
    --text-muted:     #9ca3af;

    /* Bordures & ombres */
    --border-color: #e5e7eb;
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.08);

    /* Etats */
    --success: #10b981;
    --warning: #f59e0b;
    --danger:  #ef4444;
}

[data-theme="dark"] {
    --bg-primary:   #0f172a;
    --bg-secondary: #1e293b;
    --bg-card:      #1e293b;
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --border-color: #334155;
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.3);
    --accent-light: rgba(232, 98, 28, 0.2);
}


/* ==========================================================================
   3. VARIABLES DE COMPATIBILITE (aliases pour modules utilisant d'autres noms)
   ========================================================================== */

:root {
    /* Certains modules utilisent --primary au lieu de --accent-primary */
    --primary:      var(--accent-primary);
    --primary-dark: var(--accent-hover);

    /* Certains modules utilisent --bg-tertiary */
    --bg-tertiary:  #f0f2f5;

    /* Certains modules utilisent --border au lieu de --border-color */
    --border:       var(--border-color);

    /* Certains modules utilisent --shadow au lieu de --shadow-md */
    --shadow:       var(--shadow-md);
}

[data-theme="dark"] {
    --bg-tertiary: #263044;
    --border:      var(--border-color);
    --shadow:      var(--shadow-md);
}


/* ==========================================================================
   4. TYPOGRAPHIE — 6 FAMILLES DE POLICES
   Classe appliquee sur body, cascade sur tous les enfants
   ========================================================================== */

/* Inter — defaut, aucune classe requise */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Playfair Display — serif elegant */
body.font-playfair,
body.font-playfair * {
    font-family: 'Playfair Display', Georgia, serif;
}

/* Space Grotesk — geometrique moderne */
body.font-space,
body.font-space * {
    font-family: 'Space Grotesk', system-ui, sans-serif;
}

/* DM Sans — humaniste, lisible */
body.font-dm,
body.font-dm * {
    font-family: 'DM Sans', system-ui, sans-serif;
}

/* Outfit — contemporain, versatile */
body.font-outfit,
body.font-outfit * {
    font-family: 'Outfit', system-ui, sans-serif;
}

/* Libre Baskerville — serif editorial */
body.font-baskerville,
body.font-baskerville * {
    font-family: 'Libre Baskerville', Georgia, serif;
}


/* ==========================================================================
   5. PALETTES COULEURS — 6 THEMES CHROMATIQUES
   ========================================================================== */

/* --- Defaut : StratPilote orange/cyan — aucune classe requise --- */

/* --- Ocean : bleu ciel + cyan --- */
body.pal-ocean {
    --accent-primary:   #0EA5E9;
    --accent-hover:     #0284C7;
    --accent-secondary: #06B6D4;
    --accent-light:     rgba(14, 165, 233, 0.1);
}
[data-theme="dark"] body.pal-ocean,
body.pal-ocean[data-theme="dark"] {
    --accent-light: rgba(14, 165, 233, 0.2);
}

/* --- Forest : vert emeraude + vert menthe --- */
body.pal-forest {
    --accent-primary:   #22C55E;
    --accent-hover:     #16A34A;
    --accent-secondary: #10B981;
    --accent-light:     rgba(34, 197, 94, 0.1);
}
[data-theme="dark"] body.pal-forest,
body.pal-forest[data-theme="dark"] {
    --accent-light: rgba(34, 197, 94, 0.2);
}

/* --- Sunset : orange vif + rouge --- */
body.pal-sunset {
    --accent-primary:   #F97316;
    --accent-hover:     #EA6C0A;
    --accent-secondary: #EF4444;
    --accent-light:     rgba(249, 115, 22, 0.1);
}
[data-theme="dark"] body.pal-sunset,
body.pal-sunset[data-theme="dark"] {
    --accent-light: rgba(249, 115, 22, 0.2);
}

/* --- Royal : violet + indigo --- */
body.pal-royal {
    --accent-primary:   #8B5CF6;
    --accent-hover:     #7C3AED;
    --accent-secondary: #6366F1;
    --accent-light:     rgba(139, 92, 246, 0.1);
}
[data-theme="dark"] body.pal-royal,
body.pal-royal[data-theme="dark"] {
    --accent-light: rgba(139, 92, 246, 0.2);
}

/* --- Rose : rose vif + fuchsia --- */
body.pal-rose {
    --accent-primary:   #EC4899;
    --accent-hover:     #DB2777;
    --accent-secondary: #F43F5E;
    --accent-light:     rgba(236, 72, 153, 0.1);
}
[data-theme="dark"] body.pal-rose,
body.pal-rose[data-theme="dark"] {
    --accent-light: rgba(236, 72, 153, 0.2);
}


/* ==========================================================================
   6. TEMPLATES VISUELS — 12 STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   Template 1 : Classique — aucune classe, style natif des modules
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   Template 2 : Glass — fond sombre, surfaces en verre depoli
   -------------------------------------------------------------------------- */

body.tpl-glass {
    --bg-primary:     #0f172a;
    --bg-secondary:   rgba(255, 255, 255, 0.04);
    --bg-card:        rgba(255, 255, 255, 0.05);
    --text-primary:   #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted:     #64748b;
    --border-color:   rgba(255, 255, 255, 0.1);
    --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md:      0 8px 24px rgba(0, 0, 0, 0.4);
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%) !important;
    color: var(--text-primary) !important;
}

body.tpl-glass .container,
body.tpl-glass header,
body.tpl-glass .header,
body.tpl-glass .section,
body.tpl-glass .icp-card,
body.tpl-glass .persona-card,
body.tpl-glass .matrix-container,
body.tpl-glass .canvas-card,
body.tpl-glass .card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.tpl-glass header,
body.tpl-glass .header {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

body.tpl-glass input,
body.tpl-glass select,
body.tpl-glass textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--text-primary) !important;
}

body.tpl-glass input:focus,
body.tpl-glass select:focus,
body.tpl-glass textarea:focus {
    border-color: var(--accent-primary) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

body.tpl-glass .chip {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

body.tpl-glass .container,
body.tpl-glass .content {
    background: transparent !important;
}

body.tpl-glass header button,
body.tpl-glass .header button,
body.tpl-glass header .btn,
body.tpl-glass .header .btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

body.tpl-glass header button:hover,
body.tpl-glass .header button:hover,
body.tpl-glass header .btn:hover,
body.tpl-glass .header .btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

body.tpl-glass header .btn-primary,
body.tpl-glass .header .btn-primary {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    border-color: var(--accent-primary) !important;
}


/* --------------------------------------------------------------------------
   Template 3 : Soft — chaud, arrondis genereux, zero bordures visibles
   -------------------------------------------------------------------------- */

body.tpl-soft {
    --bg-primary:   #faf8f5;
    --bg-secondary: #f3ede8;
    --bg-card:      #ffffff;
    --border-color: transparent;
    --shadow-sm:    0 4px 16px rgba(0, 0, 0, 0.04);
    --shadow-md:    0 8px 30px rgba(0, 0, 0, 0.04);
    background: #faf8f5 !important;
    color: var(--text-primary) !important;
}

body.tpl-soft .icp-card,
body.tpl-soft .persona-card,
body.tpl-soft .matrix-container,
body.tpl-soft .canvas-card,
body.tpl-soft .card {
    border: none;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.04);
}

body.tpl-soft .section {
    border-radius: 16px;
    border: none;
}

body.tpl-soft header,
body.tpl-soft .header {
    border-radius: 20px;
}

body.tpl-soft input,
body.tpl-soft select,
body.tpl-soft textarea {
    border-radius: 14px !important;
    border: none !important;
    background: var(--bg-secondary) !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

body.tpl-soft .btn {
    border-radius: 14px;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

body.tpl-soft .chip {
    border-radius: 24px;
}

body.tpl-soft .container,
body.tpl-soft .content {
    background: transparent !important;
}

[data-theme="dark"] body.tpl-soft,
body.tpl-soft[data-theme="dark"],
body.tpl-soft.dark-mode,
body.dark-mode.tpl-soft {
    --bg-primary:   #1a1520;
    --bg-secondary: #221b2a;
    --bg-card:      #241e2a;
    background: #1a1520 !important;
    color: var(--text-primary) !important;
}


/* --------------------------------------------------------------------------
   Template 4 : Luxury — fond noir, or, serif premium
   -------------------------------------------------------------------------- */

body.tpl-luxury {
    --bg-primary:     #0a0a0a;
    --bg-secondary:   #111111;
    --bg-card:        #141414;
    --text-primary:   #f5f0e8;
    --text-secondary: #c9bfa8;
    --text-muted:     #7a7060;
    --border-color:   rgba(212, 175, 55, 0.15);
    --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md:      0 8px 32px rgba(0, 0, 0, 0.6);
    /* Force l'or, independamment de la palette active */
    --accent-primary:   #D4AF37;
    --accent-hover:     #C9A227;
    --accent-secondary: #B8941E;
    --accent-light:     rgba(212, 175, 55, 0.12);
    font-family: 'Libre Baskerville', 'Playfair Display', Georgia, serif;
    background: #0a0a0a !important;
    color: var(--text-primary) !important;
}

body.tpl-luxury * {
    font-family: inherit;
}

body.tpl-luxury .icp-card,
body.tpl-luxury .persona-card,
body.tpl-luxury .matrix-container,
body.tpl-luxury .canvas-card,
body.tpl-luxury .card {
    background: #141414;
    border: 1px solid rgba(212, 175, 55, 0.15);
}

body.tpl-luxury header,
body.tpl-luxury .header {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 0;
}

body.tpl-luxury input,
body.tpl-luxury select,
body.tpl-luxury textarea {
    background: #1a1a1a !important;
    border-color: rgba(212, 175, 55, 0.2) !important;
    color: var(--text-primary) !important;
}

body.tpl-luxury .section-title {
    letter-spacing: 2px;
    font-size: 11px;
}

body.tpl-luxury .section {
    border-bottom-color: rgba(212, 175, 55, 0.08);
}

body.tpl-luxury .container,
body.tpl-luxury .content {
    background: transparent !important;
}

body.tpl-luxury header button,
body.tpl-luxury .header button,
body.tpl-luxury header .btn,
body.tpl-luxury .header .btn {
    background: rgba(212, 175, 55, 0.1) !important;
    color: #D4AF37 !important;
    border-color: rgba(212, 175, 55, 0.3) !important;
}

body.tpl-luxury header button:hover,
body.tpl-luxury .header button:hover,
body.tpl-luxury header .btn:hover,
body.tpl-luxury .header .btn:hover {
    background: rgba(212, 175, 55, 0.2) !important;
}

body.tpl-luxury header .btn-primary,
body.tpl-luxury .header .btn-primary {
    background: #D4AF37 !important;
    color: #0a0a0a !important;
    border-color: #D4AF37 !important;
}


/* --------------------------------------------------------------------------
   Template 5 : Neon — fond quasi noir, lueur sur les elements cles
   -------------------------------------------------------------------------- */

body.tpl-neon {
    --bg-primary:     #050505;
    --bg-secondary:   #0d0d0d;
    --bg-card:        #111111;
    --text-primary:   #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-muted:     #606060;
    --border-color:   rgba(255, 255, 255, 0.06);
    --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-md:      0 0 20px rgba(var(--accent-primary-rgb, 232, 98, 28), 0.15);
    background: #050505 !important;
    color: var(--text-primary) !important;
}

body.tpl-neon .icp-card,
body.tpl-neon .persona-card,
body.tpl-neon .matrix-container,
body.tpl-neon .canvas-card,
body.tpl-neon .card {
    background: #111111;
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 24px rgba(0, 0, 0, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.tpl-neon header,
body.tpl-neon .header {
    background: #111111;
    border-bottom: 1px solid var(--accent-primary);
    box-shadow: 0 0 20px rgba(232, 98, 28, 0.25);
}

body.tpl-neon .chip {
    box-shadow: 0 0 10px var(--accent-light);
    text-shadow: 0 0 8px var(--accent-primary);
}

body.tpl-neon .btn-primary {
    box-shadow: 0 0 16px var(--accent-light);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

body.tpl-neon input,
body.tpl-neon select,
body.tpl-neon textarea {
    background: #111 !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: var(--text-primary) !important;
}

body.tpl-neon input:focus,
body.tpl-neon select:focus,
body.tpl-neon textarea:focus {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 0 3px var(--accent-light),
                0 0 12px var(--accent-light) !important;
}

body.tpl-neon .section-title {
    text-shadow: 0 0 12px var(--accent-primary);
}

body.tpl-neon .container,
body.tpl-neon .content {
    background: transparent !important;
}

body.tpl-neon header button,
body.tpl-neon .header button,
body.tpl-neon header .btn,
body.tpl-neon .header .btn {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--accent-primary) !important;
    border-color: var(--accent-primary) !important;
    box-shadow: 0 0 8px var(--accent-light);
}

body.tpl-neon header button:hover,
body.tpl-neon .header button:hover,
body.tpl-neon header .btn:hover,
body.tpl-neon .header .btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 0 16px var(--accent-light);
}

body.tpl-neon header .btn-primary,
body.tpl-neon .header .btn-primary {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 0 16px var(--accent-light);
}


/* --------------------------------------------------------------------------
   Template 6 : Minimal — zero bruit, espace, contenu pur
   -------------------------------------------------------------------------- */

body.tpl-minimal {
    --bg-primary:   #ffffff;
    --bg-secondary: #ffffff;
    --bg-card:      #ffffff;
    --border-color: #e0e0e0;
    --shadow-sm:    none;
    --shadow-md:    none;
    background: #ffffff !important;
    color: var(--text-primary) !important;
}

body.tpl-minimal .icp-card,
body.tpl-minimal .persona-card,
body.tpl-minimal .matrix-container,
body.tpl-minimal .canvas-card,
body.tpl-minimal .card {
    border: none;
    box-shadow: none;
    border-radius: 0;
    border-top: 1px solid #e0e0e0;
}

body.tpl-minimal header,
body.tpl-minimal .header {
    background: transparent;
    color: var(--text-primary);
    border: none;
    border-bottom: 2px solid var(--accent-primary);
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

body.tpl-minimal .section {
    padding: 2.25rem 3rem;
    border-bottom-color: #e0e0e0;
}

body.tpl-minimal input,
body.tpl-minimal select,
body.tpl-minimal textarea {
    border: none !important;
    border-bottom: 1px solid #c0c0c0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-shadow: none !important;
}

body.tpl-minimal input:focus,
body.tpl-minimal select:focus,
body.tpl-minimal textarea:focus {
    border-bottom-color: var(--accent-primary) !important;
}

body.tpl-minimal .btn {
    border-radius: 4px;
    box-shadow: none;
}

body.tpl-minimal .chip {
    border-radius: 4px;
}

body.tpl-minimal .container,
body.tpl-minimal .content {
    background: transparent !important;
}

body.tpl-minimal header h1,
body.tpl-minimal .header h1 {
    color: var(--text-primary);
}

[data-theme="dark"] body.tpl-minimal,
body.tpl-minimal[data-theme="dark"],
body.tpl-minimal.dark-mode,
body.dark-mode.tpl-minimal {
    --bg-primary:   #111111;
    --bg-secondary: #111111;
    --bg-card:      #111111;
    --border-color: #2a2a2a;
    background: #111111 !important;
    color: var(--text-primary) !important;
}


/* --------------------------------------------------------------------------
   Template 7 : Corporate — bleu institutionnel, angles droits, rigueur
   -------------------------------------------------------------------------- */

body.tpl-corporate {
    --bg-primary:     #f0f4f8;
    --bg-secondary:   #e8eef5;
    --bg-card:        #ffffff;
    --border-color:   #cbd5e1;
    --shadow-sm:      0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md:      0 2px 8px rgba(0, 0, 0, 0.08);
    /* Force le bleu marine, independamment de la palette */
    --accent-primary:   #1e40af;
    --accent-hover:     #1e3a8a;
    --accent-secondary: #2563eb;
    --accent-light:     rgba(30, 64, 175, 0.08);
    background: #f0f4f8 !important;
    color: var(--text-primary) !important;
}

body.tpl-corporate .container,
body.tpl-corporate .content {
    background: transparent !important;
}

body.tpl-corporate .icp-card,
body.tpl-corporate .persona-card,
body.tpl-corporate .matrix-container,
body.tpl-corporate .canvas-card,
body.tpl-corporate .card {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

body.tpl-corporate header,
body.tpl-corporate .header {
    background: #1e293b;
    color: #ffffff;
    border-radius: 4px;
}

body.tpl-corporate .section-title {
    letter-spacing: 0.5px;
    font-size: 12px;
    font-weight: 700;
}

body.tpl-corporate .btn {
    border-radius: 4px;
    letter-spacing: 0.25px;
}

body.tpl-corporate input,
body.tpl-corporate select,
body.tpl-corporate textarea {
    border-radius: 4px !important;
}

body.tpl-corporate header button,
body.tpl-corporate .header button,
body.tpl-corporate header .btn,
body.tpl-corporate .header .btn {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.tpl-corporate header button:hover,
body.tpl-corporate .header button:hover,
body.tpl-corporate header .btn:hover,
body.tpl-corporate .header .btn:hover {
    background: rgba(255, 255, 255, 0.2) !important;
}

body.tpl-corporate header .btn-primary,
body.tpl-corporate .header .btn-primary {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

[data-theme="dark"] body.tpl-corporate,
body.tpl-corporate[data-theme="dark"],
body.tpl-corporate.dark-mode,
body.dark-mode.tpl-corporate {
    --bg-primary:   #0f1729;
    --bg-secondary: #172038;
    --bg-card:      #1a2540;
    --border-color: #2d3f5c;
    background: #0f1729 !important;
    color: var(--text-primary) !important;
}


/* --------------------------------------------------------------------------
   Template 8 : Creative — doux, violet-rose, energique et accessible
   -------------------------------------------------------------------------- */

body.tpl-creative {
    --bg-primary:   #fdf2f8;
    --bg-secondary: #faf0fd;
    --bg-card:      #ffffff;
    --border-color: #e9d5f5;
    --shadow-sm:    0 2px 8px rgba(168, 85, 247, 0.06);
    --shadow-md:    0 8px 24px rgba(168, 85, 247, 0.08);
    background: linear-gradient(145deg, #fdf2f8 0%, #f5f3ff 100%) !important;
    color: var(--text-primary) !important;
}

body.tpl-creative .container,
body.tpl-creative .content {
    background: transparent !important;
}

body.tpl-creative .icp-card,
body.tpl-creative .persona-card,
body.tpl-creative .matrix-container,
body.tpl-creative .canvas-card,
body.tpl-creative .card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.08);
    border: 1px solid #e9d5f5;
}

body.tpl-creative header,
body.tpl-creative .header {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 16px;
}

body.tpl-creative input,
body.tpl-creative select,
body.tpl-creative textarea {
    border-radius: 12px !important;
}

body.tpl-creative .btn {
    border-radius: 12px;
}

body.tpl-creative .chip {
    border-radius: 24px;
}

[data-theme="dark"] body.tpl-creative,
body.tpl-creative[data-theme="dark"],
body.tpl-creative.dark-mode,
body.dark-mode.tpl-creative {
    --bg-primary:   #1a0f2e;
    --bg-secondary: #21122e;
    --bg-card:      #2a1540;
    --border-color: #3d1f5a;
    background: linear-gradient(145deg, #1a0f2e 0%, #1f1040 100%) !important;
    color: var(--text-primary) !important;
}


/* --------------------------------------------------------------------------
   Template 9 : Aurora — gradient nordique sombre, ambiance mystique
   -------------------------------------------------------------------------- */

body.tpl-aurora {
    --bg-primary:     #0f172a;
    --bg-secondary:   rgba(255, 255, 255, 0.04);
    --bg-card:        rgba(255, 255, 255, 0.06);
    --text-primary:   #e8f4f8;
    --text-secondary: #8bb5c8;
    --text-muted:     #4a7a8a;
    --border-color:   rgba(100, 200, 180, 0.12);
    --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-md:      0 8px 32px rgba(0, 0, 0, 0.5);
    background: linear-gradient(160deg,
        #0f172a 0%,
        #1a1033 30%,
        #0f2027 60%,
        #0f172a 100%) !important;
    color: var(--text-primary) !important;
    position: relative;
}

body.tpl-aurora::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 30%, rgba(0, 200, 140, 0.06) 0%, transparent 70%),
        radial-gradient(ellipse 50% 35% at 80% 70%, rgba(100, 60, 200, 0.07) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

body.tpl-aurora .container {
    position: relative;
    z-index: 1;
}

body.tpl-aurora .icp-card,
body.tpl-aurora .persona-card,
body.tpl-aurora .matrix-container,
body.tpl-aurora .canvas-card,
body.tpl-aurora .card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(100, 200, 180, 0.12);
}

body.tpl-aurora header,
body.tpl-aurora .header {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(100, 200, 180, 0.15);
}

body.tpl-aurora input,
body.tpl-aurora select,
body.tpl-aurora textarea {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(100, 200, 180, 0.15) !important;
    color: var(--text-primary) !important;
}

body.tpl-aurora .section-title {
    color: #4dd9b8;
}

body.tpl-aurora .container,
body.tpl-aurora .content {
    background: transparent !important;
}

body.tpl-aurora header button,
body.tpl-aurora .header button,
body.tpl-aurora header .btn,
body.tpl-aurora .header .btn {
    background: rgba(100, 200, 180, 0.1) !important;
    color: #e8f4f8 !important;
    border-color: rgba(100, 200, 180, 0.2) !important;
}

body.tpl-aurora header button:hover,
body.tpl-aurora .header button:hover,
body.tpl-aurora header .btn:hover,
body.tpl-aurora .header .btn:hover {
    background: rgba(100, 200, 180, 0.2) !important;
}

body.tpl-aurora header .btn-primary,
body.tpl-aurora .header .btn-primary {
    background: var(--accent-primary) !important;
    color: #ffffff !important;
}


/* --------------------------------------------------------------------------
   Template 10 : Retro — vintage papier, serif, ombres dures
   -------------------------------------------------------------------------- */

body.tpl-retro {
    --bg-primary:     #fef3c7;
    --bg-secondary:   #fef9e7;
    --bg-card:        #fffbeb;
    --text-primary:   #1c1005;
    --text-secondary: #5c4010;
    --text-muted:     #92672a;
    --border-color:   #d97706;
    --shadow-sm:      3px 3px 0 rgba(0, 0, 0, 0.08);
    --shadow-md:      4px 4px 0 rgba(0, 0, 0, 0.1);
    /* Marron vintage, independamment de la palette */
    --accent-primary:   #92400e;
    --accent-hover:     #78350f;
    --accent-secondary: #b45309;
    --accent-light:     rgba(146, 64, 14, 0.1);
    font-family: 'Libre Baskerville', Georgia, serif;
    background: #fef3c7 !important;
    color: var(--text-primary) !important;
}

body.tpl-retro * {
    font-family: inherit;
}

body.tpl-retro .icp-card,
body.tpl-retro .persona-card,
body.tpl-retro .matrix-container,
body.tpl-retro .canvas-card,
body.tpl-retro .card {
    background: #fffbeb;
    border: 2px solid #d97706;
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
}

body.tpl-retro header,
body.tpl-retro .header {
    background: #92400e;
    border-radius: 0;
    border: 2px solid #78350f;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);
}

body.tpl-retro .section {
    border-bottom: 1px solid #d97706;
    border-radius: 0;
}

body.tpl-retro input,
body.tpl-retro select,
body.tpl-retro textarea {
    border-radius: 0 !important;
    background: #fef9e7 !important;
    border-color: #d97706 !important;
}

body.tpl-retro .btn {
    border-radius: 0;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

body.tpl-retro .chip {
    border-radius: 0;
    border: 1px solid #d97706;
}

body.tpl-retro .container,
body.tpl-retro .content {
    background: transparent !important;
}

[data-theme="dark"] body.tpl-retro,
body.tpl-retro[data-theme="dark"],
body.tpl-retro.dark-mode,
body.dark-mode.tpl-retro {
    --bg-primary:     #1c1208;
    --bg-secondary:   #241808;
    --bg-card:        #2a1c0a;
    --text-primary:   #f5e6c8;
    --text-secondary: #c9a87a;
    --border-color:   #8a5a20;
    background: #1c1208 !important;
    color: var(--text-primary) !important;
}


/* --------------------------------------------------------------------------
   Template 11 : Magazine — typographie forte, logique print, noir tranché
   -------------------------------------------------------------------------- */

body.tpl-magazine {
    --bg-primary:   #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-card:      #ffffff;
    --text-primary:   #000000;
    --text-secondary: #333333;
    --text-muted:     #666666;
    --border-color:   #000000;
    --shadow-sm:      none;
    --shadow-md:      none;
    /* Noir editoral, independamment de la palette */
    --accent-primary:   #000000;
    --accent-hover:     #111111;
    --accent-secondary: #333333;
    --accent-light:     rgba(0, 0, 0, 0.06);
    background: #ffffff !important;
    color: var(--text-primary) !important;
}

body.tpl-magazine .icp-card,
body.tpl-magazine .persona-card,
body.tpl-magazine .matrix-container,
body.tpl-magazine .canvas-card,
body.tpl-magazine .card {
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-top: 3px solid #000000;
}

body.tpl-magazine header,
body.tpl-magazine .header {
    background: #000000;
    color: #ffffff;
    border-radius: 0;
    border: none;
}

body.tpl-magazine .section-title {
    font-size: 18px;
    font-weight: 800;
    color: #000000;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    border-bottom: 2px solid #000000;
    padding-bottom: 8px;
}

body.tpl-magazine .section {
    border-bottom: 1px solid #cccccc;
    border-radius: 0;
}

body.tpl-magazine .btn {
    border-radius: 0;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 12px;
}

body.tpl-magazine .btn-primary {
    background: #000000;
    border-color: #000000;
}

body.tpl-magazine .chip {
    border-radius: 0;
    background: #000000;
    color: #ffffff;
    border-color: #000000;
}

body.tpl-magazine input,
body.tpl-magazine select,
body.tpl-magazine textarea {
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 2px solid #000000 !important;
    background: transparent !important;
}

body.tpl-magazine .container,
body.tpl-magazine .content {
    background: transparent !important;
}

body.tpl-magazine header button,
body.tpl-magazine .header button,
body.tpl-magazine header .btn,
body.tpl-magazine .header .btn {
    background: transparent !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 11px !important;
}

body.tpl-magazine header button:hover,
body.tpl-magazine .header button:hover,
body.tpl-magazine header .btn:hover,
body.tpl-magazine .header .btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
}

body.tpl-magazine header .btn-primary,
body.tpl-magazine .header .btn-primary {
    background: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
}

[data-theme="dark"] body.tpl-magazine,
body.tpl-magazine[data-theme="dark"],
body.tpl-magazine.dark-mode,
body.dark-mode.tpl-magazine {
    --bg-primary:   #111111;
    --bg-secondary: #1a1a1a;
    --bg-card:      #111111;
    --text-primary:   #ffffff;
    --text-secondary: #cccccc;
    --accent-primary:   #ffffff;
    --accent-hover:     #eeeeee;
    --border-color:   #ffffff;
    background: #111111 !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] body.tpl-magazine .icp-card,
[data-theme="dark"] body.tpl-magazine .persona-card,
[data-theme="dark"] body.tpl-magazine .matrix-container,
[data-theme="dark"] body.tpl-magazine .canvas-card,
[data-theme="dark"] body.tpl-magazine .card,
body.tpl-magazine[data-theme="dark"] .icp-card,
body.tpl-magazine[data-theme="dark"] .persona-card,
body.tpl-magazine[data-theme="dark"] .matrix-container,
body.tpl-magazine[data-theme="dark"] .canvas-card,
body.tpl-magazine[data-theme="dark"] .card,
body.tpl-magazine.dark-mode .icp-card,
body.tpl-magazine.dark-mode .persona-card,
body.tpl-magazine.dark-mode .matrix-container,
body.tpl-magazine.dark-mode .canvas-card,
body.tpl-magazine.dark-mode .card,
body.dark-mode.tpl-magazine .icp-card,
body.dark-mode.tpl-magazine .persona-card,
body.dark-mode.tpl-magazine .matrix-container,
body.dark-mode.tpl-magazine .canvas-card,
body.dark-mode.tpl-magazine .card {
    border-top-color: #ffffff;
}

[data-theme="dark"] body.tpl-magazine header,
[data-theme="dark"] body.tpl-magazine .header,
body.tpl-magazine[data-theme="dark"] header,
body.tpl-magazine[data-theme="dark"] .header,
body.tpl-magazine.dark-mode header,
body.tpl-magazine.dark-mode .header,
body.dark-mode.tpl-magazine header,
body.dark-mode.tpl-magazine .header {
    background: #ffffff;
    color: #000000;
}


/* --------------------------------------------------------------------------
   Template 12 : Gradient — fond degrade selon palette active
   Fonctionne avec toutes les palettes car il utilise les variables --accent-*
   -------------------------------------------------------------------------- */

body.tpl-gradient {
    background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%) !important;
    --text-primary:   #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --text-muted:     rgba(255, 255, 255, 0.6);
    --border-color:   rgba(255, 255, 255, 0.2);
    --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md:      0 8px 32px rgba(0, 0, 0, 0.2);
}

body.tpl-gradient .icp-card,
body.tpl-gradient .persona-card,
body.tpl-gradient .matrix-container,
body.tpl-gradient .canvas-card,
body.tpl-gradient .card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #1a1a1a;
    --text-primary:   #1a1a1a;
    --text-secondary: #4b5563;
    --text-muted:     #9ca3af;
    --border-color:   #e5e7eb;
}

body.tpl-gradient header,
body.tpl-gradient .header {
    background: transparent;
    color: #ffffff;
    border: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

body.tpl-gradient .actions .btn {
    background: rgba(255, 255, 255, 0.9);
    color: #1a1a1a;
    border-color: rgba(255, 255, 255, 0.6);
}

body.tpl-gradient .actions .btn:hover {
    background: #ffffff;
}

body.tpl-gradient input,
body.tpl-gradient select,
body.tpl-gradient textarea {
    background: rgba(255, 255, 255, 0.95) !important;
    color: #1a1a1a !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
}

body.tpl-gradient .container,
body.tpl-gradient .content {
    background: transparent !important;
}


/* ==========================================================================
   7. MODE CAPTURE — Masque les controles UI pour les exports PDF/PNG
   Activer via : document.body.classList.add('sp-capture-mode')
   ========================================================================== */

body.sp-capture-mode header,
body.sp-capture-mode .header,
body.sp-capture-mode .actions,
body.sp-capture-mode .sp-theme-bar,
body.sp-capture-mode .template-selector,
body.sp-capture-mode .header-actions,
body.sp-capture-mode .theme-toggle,
body.sp-capture-mode .sp-controls {
    display: none !important;
}

body.sp-capture-mode .container {
    padding-top: 0 !important;
}


/* ==========================================================================
   8. (Reserve — ancienne toolbar supprimee en v4)
   ========================================================================== */


/* ==========================================================================
   9. REGLES UNIVERSELLES — S'appliquent a TOUS les modules
   Utilise les variables CSS pour que les themes affectent TOUT le contenu,
   pas juste les fonds.
   ========================================================================== */

/* --- Base body --- */
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: background 0.3s ease, color 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 100vh;
}

/* --- Titres --- */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
}

/* --- Paragraphes et texte secondaire --- */
p, .description, .subtitle, .helper-text, .hint, .info-text {
    color: var(--text-secondary);
}

small, .muted, .text-muted, label {
    color: var(--text-muted);
}

/* --- Liens --- */
a {
    color: var(--accent-primary);
}

a:hover {
    color: var(--accent-hover);
}

/* --- Header universel — gradient fixe StratPilote, NON affecte par l'accent --- */
/* Bug 1 fix : scopé aux modules avec un template actif (body[class*="tpl-"]) pour ne pas
   détruire les styles natifs des modules en mode Classique (aucune classe tpl-*). */
body[class*="tpl-"] header, body[class*="tpl-"] .header {
    background: linear-gradient(135deg, #E8621C 0%, #1AB5C5 100%) !important;
    color: #ffffff;
    border-bottom: none;
    box-shadow: var(--shadow-sm);
    border-radius: 0;
    padding: 20px 24px;
}

header h1, .header h1 {
    color: inherit;
}

/* --- Boutons universels --- */
button, .btn {
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

button:hover, .btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

.btn-primary, button.btn-primary {
    background: var(--accent-primary);
    color: #ffffff;
    border-color: var(--accent-primary);
}

.btn-primary:hover, button.btn-primary:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
    color: #ffffff;
}

/* --- Inputs universels --- */
input, select, textarea {
    background: var(--bg-primary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--accent-primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--accent-light);
}

input::placeholder, textarea::placeholder {
    color: var(--text-muted);
}

/* --- Cards et sections universelles --- */
/* Bug 3 fix : .radar-container (Diagnostic-Interne) et .porter-container (Chaine-Valeur)
   ajoutés pour couvrir les containers manquants du design system. */
.card, .section, .panel,
.matrix-container, .canvas-container,
.radar-container, .porter-container,
.icp-card, .persona-card, .canvas-card,
.force-box, .quadrant, .das-card,
.risk-cell, .value-step, .bcg-quadrant,
.ansoff-cell, .mckinsey-cell {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

/* Reset transparent scopé pour ces containers dans les templates actifs (Section 10) */
body[class*="tpl-"] .main-content,
body[class*="tpl-"] .radar-container,
body[class*="tpl-"] .porter-container,
body[class*="tpl-"] .matrix-container,
body[class*="tpl-"] .canvas-container {
    background: transparent !important;
}

/* --- Tableaux --- */
table {
    border-collapse: collapse;
    width: 100%;
}

th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
    font-weight: 600;
    text-align: left;
}

td {
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    padding: 8px 12px;
}

/* --- Chips / Tags --- */
.chip, .tag, .badge {
    background: var(--accent-light);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    border-radius: 20px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 500;
}

/* --- Tooltips --- */
[title], .tooltip, .help-text {
    color: var(--text-secondary);
}

/* --- Scrollbar adaptative --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--text-muted);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* --- SVG icons --- */
svg {
    color: inherit;
    stroke: currentColor;
}

/* --- Selection --- */
::selection {
    background: var(--accent-primary);
    color: #ffffff;
}


/* ==========================================================================
   10. IFRAME-AWARE — Neutralise les breakpoints mobiles dans le contexte app
   Les modules sont affiches dans un iframe de ~700px de large.
   On force les layouts desktop meme sur petit viewport.
   ========================================================================== */

/* --- Forcer les layouts desktop --- */
body {
    min-width: 0;
}

/* Empecher les boutons de s'etirer en mode responsive */
button, .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none;
}

/* Empecher les actions de passer en colonne */
.actions, .header-actions, .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 6px;
}

.actions button, .header-actions button,
.actions .btn, .header-actions .btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0;
    padding: 6px 12px;
    font-size: 12px;
}

/* Header : toujours en ligne, pas empile */
header, .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

/* Titres compacts dans l'iframe */
h1 {
    font-size: clamp(16px, 2.5vw, 28px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex-shrink: 1;
}

/* Grids : ne jamais empiler en 1 colonne dans l'iframe */
.main-content {
    display: grid;
    gap: 16px;
}

/* Container : pas de padding excessif */
.container {
    max-width: 100%;
    padding: 12px;
    margin: 0 auto;
}

/* Body padding reduit pour iframe */
body {
    padding: 0 !important;
}

/* --- Override des @media max-width:1024px typiques --- */
/* Ces regles ont une specificite suffisante pour battre les media queries */
@media (max-width: 1024px) {
    /* Empecher les boutons de devenir enormes */
    button, .btn {
        flex: 0 0 auto !important;
        width: auto !important;
        font-size: 12px !important;
        padding: 6px 12px !important;
    }

    /* Empecher le header de s'empiler verticalement */
    header, .header {
        flex-direction: row !important;
        align-items: center !important;
    }

    h1 {
        font-size: 18px !important;
    }

    /* Garder les actions en ligne */
    .actions, .header-actions {
        width: auto !important;
        justify-content: flex-end !important;
    }

    .actions button, .header-actions button {
        flex: 0 0 auto !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
    }

    /* Empecher les grids de s'empiler */
    .errc-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .main-content {
        grid-template-columns: 1fr !important;
    }
}

/* --- Corrections de scroll dans l'iframe --- */
html {
    overflow-y: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100%;
}

body {
    height: auto;
    min-height: 100%;
}


/* ==========================================================================
   11. THEME TOGGLE — Bouton dark/light compact
   ========================================================================== */

.theme-toggle {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 0 0 auto !important;
}

.theme-toggle:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}