:root {
    --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--primary-gradient);
    min-height: 100vh;
    padding: 0;
}

.container-fluid {
    max-width: 1400px;
    margin: 0 auto;
}

.main-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.main-title {
    font-size: 2rem;
    font-weight: 700;
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.25rem;
}

.subtitle {
    color: #64748b;
    font-size: 0.95rem;
}

.search-container {
    max-width: 520px;
    margin: 0 auto;
}

.search-box {
    position: relative;
    width: 100%;
}

.search-input {
    width: 100%;

    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 0.7rem 1rem;
    border-radius: 18px;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.search-input:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
}

.search-btn {
    position: absolute;
    right: 4px;
    top: 4px;
    bottom: 4px;
    padding: 0 1rem;
    border-radius: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    border-radius: 16px;
    color: white;
    padding: 0 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-btn:hover {
    transform: translateX(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* Conservation exacte du grid-detailed */
.grid-detailed {
    display: grid;
    gap: 16px;
    grid-template-areas:
        "referentiels referentiels referentiels referentiels referentiels referentiels"
        "echanges back-office back-office back-office back-office support"
        "securite front-office front-office front-office front-office support"
        "securite services services services autres support"
        "pilotage pilotage pilotage pilotage pilotage pilotage";
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto;
}

.section-detailed {
    border: 2px solid #34495e;
    border-radius: 12px;
    padding: 20px;
    background: white;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.section-detailed::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--section-gradient);
}

.section-detailed:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
    border-color: var(--section-border-hover);
}

.section-title-detailed {
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 8px;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    background: var(--section-gradient);
}

.subsection {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.module {
    padding: 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    background: #fafafa;
    text-decoration: none;
    color: #374151;
    display: block;
}

.module:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--section-color);
    background: white;
    text-decoration: none;
    color: #1f2937;
}

.postit-indicator {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--warning-color);
    color: white;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.module.inactive {
    opacity: 0.6;
    background: #f1f5f9;
    color: #94a3b8;
    text-decoration: line-through;
}

/* Attribution des zones de grille - Conservation exacte */
.referentiels {
    grid-area: referentiels;
}

.echanges {
    grid-area: echanges;
}

.back-office {
    grid-area: back-office;
}

.front-office {
    grid-area: front-office;
}

.services {
    grid-area: services;
}

.securite {
    grid-area: securite;
}

.autres {
    grid-area: autres;
}

.support {
    grid-area: support;
}

.pilotage {
    grid-area: pilotage;
}

/* Couleurs des sections - Améliorées 
        .referentiels { 
            --section-gradient: linear-gradient(135deg, #8e44ad, #9b59b6);
            --section-color: #9b59b6;
            --section-border-hover: #a569bd;
        }
        .echanges { 
            --section-gradient: linear-gradient(135deg, #7f8c8d, #95a5a6);
            --section-color: #95a5a6;
            --section-border-hover: #a4b4b7;
        }
        .back-office { 
            --section-gradient: linear-gradient(135deg, #d35400, #e67e22);
            --section-color: #e67e22;
            --section-border-hover: #f39c12;
        }
        .front-office { 
            --section-gradient: linear-gradient(135deg, #27ae60, #2ecc71);
            --section-color: #2ecc71;
            --section-border-hover: #58d68d;
        }
        .services { 
            --section-gradient: linear-gradient(135deg, #2980b9, #3498db);
            --section-color: #3498db;
            --section-border-hover: #5dade2;
        }
        .securite { 
            --section-gradient: linear-gradient(135deg, #c0392b, #e74c3c);
            --section-color: #e74c3c;
            --section-border-hover: #ec7063;
        }
        .autres { 
            --section-gradient: linear-gradient(135deg, #8e44ad, #9b59b6);
            --section-color: #9b59b6;
            --section-border-hover: #a569bd;
        }
        .support { 
            --section-gradient: linear-gradient(135deg, #f39c12, #f1c40f);
            --section-color: #f1c40f;
            --section-border-hover: #f4d03f;
        }
        .pilotage { 
            --section-gradient: linear-gradient(135deg, #34495e, #2c3e50);
            --section-color: #2c3e50;
            --section-border-hover: #5d6d7e;
        }
            */

/* UI du switcher (injection auto via JS) */
.theme-switcher {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    padding: 6px 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.theme-switcher select {
    font-size: .9rem;
    padding: 4px 6px;
    min-width: 220px;
}

/* ===== THEME A — Vivid Tech ===== */
body.theme-a .referentiels {
    --section-gradient: linear-gradient(135deg, #6d28d9, #8b5cf6);
    --section-color: #7c3aed;
    --section-border-hover: #a78bfa;
}

body.theme-a .echanges {
    --section-gradient: linear-gradient(135deg, #0ea5e9, #22d3ee);
    --section-color: #06b6d4;
    --section-border-hover: #67e8f9;
}

body.theme-a .back-office {
    --section-gradient: linear-gradient(135deg, #f59e0b, #f97316);
    --section-color: #f59e0b;
    --section-border-hover: #fdba74;
}

body.theme-a .front-office {
    --section-gradient: linear-gradient(135deg, #16a34a, #22c55e);
    --section-color: #22c55e;
    --section-border-hover: #86efac;
}

body.theme-a .services {
    --section-gradient: linear-gradient(135deg, #2563eb, #3b82f6);
    --section-color: #3b82f6;
    --section-border-hover: #93c5fd;
}

body.theme-a .securite {
    --section-gradient: linear-gradient(135deg, #dc2626, #ef4444);
    --section-color: #ef4444;
    --section-border-hover: #fca5a5;
}

body.theme-a .autres {
    --section-gradient: linear-gradient(135deg, #a21caf, #db2777);
    --section-color: #d946ef;
    --section-border-hover: #f0abfc;
}

body.theme-a .support {
    --section-gradient: linear-gradient(135deg, #eab308, #facc15);
    --section-color: #fbbf24;
    --section-border-hover: #fde68a;
}

body.theme-a .pilotage {
    --section-gradient: linear-gradient(135deg, #0f172a, #334155);
    --section-color: #1f2937;
    --section-border-hover: #64748b;
}

/* ===== THEME B — Pastel Pro ===== */
body.theme-b .referentiels {
    --section-gradient: linear-gradient(135deg, #a78bfa, #c4b5fd);
    --section-color: #b39dfb;
    --section-border-hover: #ddd6fe;
}

body.theme-b .echanges {
    --section-gradient: linear-gradient(135deg, #86efac, #bbf7d0);
    --section-color: #98f1bc;
    --section-border-hover: #dcfce7;
}

body.theme-b .back-office {
    --section-gradient: linear-gradient(135deg, #fca5a5, #fecaca);
    --section-color: #fbb5b5;
    --section-border-hover: #ffe4e6;
}

body.theme-b .front-office {
    --section-gradient: linear-gradient(135deg, #93c5fd, #bfdbfe);
    --section-color: #a7c9fe;
    --section-border-hover: #dbeafe;
}

body.theme-b .services {
    --section-gradient: linear-gradient(135deg, #f9a8d4, #fbcfe8);
    --section-color: #f4b6dc;
    --section-border-hover: #fce7f3;
}

body.theme-b .securite {
    --section-gradient: linear-gradient(135deg, #fecaca, #fef2f2);
    --section-color: #fda4af;
    --section-border-hover: #ffe4e6;
}

body.theme-b .autres {
    --section-gradient: linear-gradient(135deg, #c7d2fe, #e0e7ff);
    --section-color: #cbd8ff;
    --section-border-hover: #e5e7eb;
}

body.theme-b .support {
    --section-gradient: linear-gradient(135deg, #fde68a, #fef3c7);
    --section-color: #fde68a;
    --section-border-hover: #fef9c3;
}

body.theme-b .pilotage {
    --section-gradient: linear-gradient(135deg, #d1d5db, #e5e7eb);
    --section-color: #cbd5e1;
    --section-border-hover: #e2e8f0;
}

/* ===== THEME C — Enterprise Cool ===== */
body.theme-c .referentiels {
    --section-gradient: linear-gradient(135deg, #3b82f6, #60a5fa);
    --section-color: #3b82f6;
    --section-border-hover: #93c5fd;
}

body.theme-c .echanges {
    --section-gradient: linear-gradient(135deg, #14b8a6, #2dd4bf);
    --section-color: #14b8a6;
    --section-border-hover: #99f6e4;
}

body.theme-c .back-office {
    --section-gradient: linear-gradient(135deg, #64748b, #94a3b8);
    --section-color: #64748b;
    --section-border-hover: #cbd5e1;
}

body.theme-c .front-office {
    --section-gradient: linear-gradient(135deg, #1d4ed8, #3b82f6);
    --section-color: #2563eb;
    --section-border-hover: #60a5fa;
}

body.theme-c .services {
    --section-gradient: linear-gradient(135deg, #0ea5e9, #38bdf8);
    --section-color: #0ea5e9;
    --section-border-hover: #7dd3fc;
}

body.theme-c .securite {
    --section-gradient: linear-gradient(135deg, #ef4444, #f87171);
    --section-color: #ef4444;
    --section-border-hover: #fca5a5;
}

body.theme-c .autres {
    --section-gradient: linear-gradient(135deg, #6366f1, #818cf8);
    --section-color: #6366f1;
    --section-border-hover: #a5b4fc;
}

body.theme-c .support {
    --section-gradient: linear-gradient(135deg, #f59e0b, #fbbf24);
    --section-color: #f59e0b;
    --section-border-hover: #fde68a;
}

body.theme-c .pilotage {
    --section-gradient: linear-gradient(135deg, #0f172a, #1f2937);
    --section-color: #111827;
    --section-border-hover: #6b7280;
}

/* ===== THEME D — Accessible Contrast ===== */
body.theme-d .referentiels {
    --section-gradient: linear-gradient(135deg, #2c7fb8, #7fcdbb);
    --section-color: #41b6c4;
    --section-border-hover: #c7e9b4;
}

body.theme-d .echanges {
    --section-gradient: linear-gradient(135deg, #7b3294, #c2a5cf);
    --section-color: #8c6bb1;
    --section-border-hover: #d8b5df;
}

body.theme-d .back-office {
    --section-gradient: linear-gradient(135deg, #fdae61, #fee090);
    --section-color: #fdb863;
    --section-border-hover: #fee8c8;
}

body.theme-d .front-office {
    --section-gradient: linear-gradient(135deg, #1a9850, #a6d96a);
    --section-color: #66bd63;
    --section-border-hover: #d9ef8b;
}

body.theme-d .services {
    --section-gradient: linear-gradient(135deg, #3288bd, #99d8c9);
    --section-color: #5ea5d0;
    --section-border-hover: #b2e2e2;
}

body.theme-d .securite {
    --section-gradient: linear-gradient(135deg, #d73027, #f46d43);
    --section-color: #e24a33;
    --section-border-hover: #fdae61;
}

body.theme-d .autres {
    --section-gradient: linear-gradient(135deg, #5e3c99, #b2abd2);
    --section-color: #8073ac;
    --section-border-hover: #c7c1de;
}

body.theme-d .support {
    --section-gradient: linear-gradient(135deg, #f1a340, #fddbc7);
    --section-color: #f1a340;
    --section-border-hover: #fee0d2;
}

body.theme-d .pilotage {
    --section-gradient: linear-gradient(135deg, #000000, #4d4d4d);
    --section-color: #1a1a1a;
    --section-border-hover: #737373;
}

/* ===== THEME E — Bling Bling ===== */
body.theme-e .referentiels {
    --section-gradient: linear-gradient(135deg, #d4af37, #ffd700);
    --section-color: #d4af37;
    --section-border-hover: #ffeb7f;
}

body.theme-e .echanges {
    --section-gradient: linear-gradient(135deg, #c0c0c0, #e5e5e5);
    --section-color: #c0c0c0;
    --section-border-hover: #f5f5f5;
}

body.theme-e .back-office {
    --section-gradient: linear-gradient(135deg, #b22222, #dc143c);
    --section-color: #b22222;
    --section-border-hover: #f28ca4;
}

body.theme-e .front-office {
    --section-gradient: linear-gradient(135deg, #0f52ba, #4169e1);
    --section-color: #1e3fa7;
    --section-border-hover: #8ab4f8;
}

body.theme-e .services {
    --section-gradient: linear-gradient(135deg, #006400, #228b22);
    --section-color: #228b22;
    --section-border-hover: #7fff7f;
}

body.theme-e .securite {
    --section-gradient: linear-gradient(135deg, #000000, #2c2c2c);
    --section-color: #111111;
    --section-border-hover: #444;
}

body.theme-e .autres {
    --section-gradient: linear-gradient(135deg, #ff69b4, #ff1493);
    --section-color: #ff1493;
    --section-border-hover: #ff8ac9;
}

body.theme-e .support {
    --section-gradient: linear-gradient(135deg, #ff8c00, #ffa500);
    --section-color: #ff8c00;
    --section-border-hover: #ffd580;
}

body.theme-e .pilotage {
    --section-gradient: linear-gradient(135deg, #800080, #9932cc);
    --section-color: #800080;
    --section-border-hover: #da70d6;
}

/* ===== THEME F — Neutre ===== */
body.theme-f .referentiels {
    --section-gradient: linear-gradient(135deg, #6b7280, #9ca3af);
    --section-color: #6b7280;
    --section-border-hover: #d1d5db;
}

body.theme-f .echanges {
    --section-gradient: linear-gradient(135deg, #9ca3af, #e5e7eb);
    --section-color: #9ca3af;
    --section-border-hover: #f3f4f6;
}

body.theme-f .back-office {
    --section-gradient: linear-gradient(135deg, #374151, #4b5563);
    --section-color: #374151;
    --section-border-hover: #9ca3af;
}

body.theme-f .front-office {
    --section-gradient: linear-gradient(135deg, #4b5563, #6b7280);
    --section-color: #4b5563;
    --section-border-hover: #d1d5db;
}

body.theme-f .services {
    --section-gradient: linear-gradient(135deg, #e5e7eb, #f9fafb);
    --section-color: #e5e7eb;
    --section-border-hover: #fff;
}

body.theme-f .securite {
    --section-gradient: linear-gradient(135deg, #111827, #1f2937);
    --section-color: #111827;
    --section-border-hover: #6b7280;
}

body.theme-f .autres {
    --section-gradient: linear-gradient(135deg, #9ca3af, #d1d5db);
    --section-color: #9ca3af;
    --section-border-hover: #e5e7eb;
}

body.theme-f .support {
    --section-gradient: linear-gradient(135deg, #2563eb, #3b82f6);
    --section-color: #2563eb;
    --section-border-hover: #93c5fd;
}

body.theme-f .pilotage {
    --section-gradient: linear-gradient(135deg, #374151, #1f2937);
    --section-color: #374151;
    --section-border-hover: #9ca3af;
}

/* ===== THEME G — Pro ===== */
body.theme-g .referentiels {
    --section-gradient: linear-gradient(135deg, #1d4ed8, #3b82f6);
    --section-color: #2563eb;
    --section-border-hover: #60a5fa;
}

body.theme-g .echanges {
    --section-gradient: linear-gradient(135deg, #059669, #10b981);
    --section-color: #059669;
    --section-border-hover: #6ee7b7;
}

body.theme-g .back-office {
    --section-gradient: linear-gradient(135deg, #ea580c, #f97316);
    --section-color: #ea580c;
    --section-border-hover: #fdba74;
}

body.theme-g .front-office {
    --section-gradient: linear-gradient(135deg, #0e7490, #06b6d4);
    --section-color: #0891b2;
    --section-border-hover: #67e8f9;
}

body.theme-g .services {
    --section-gradient: linear-gradient(135deg, #9333ea, #a855f7);
    --section-color: #9333ea;
    --section-border-hover: #d8b4fe;
}

body.theme-g .securite {
    --section-gradient: linear-gradient(135deg, #b91c1c, #dc2626);
    --section-color: #b91c1c;
    --section-border-hover: #fca5a5;
}

body.theme-g .autres {
    --section-gradient: linear-gradient(135deg, #16a34a, #22c55e);
    --section-color: #16a34a;
    --section-border-hover: #86efac;
}

body.theme-g .support {
    --section-gradient: linear-gradient(135deg, #ca8a04, #eab308);
    --section-color: #ca8a04;
    --section-border-hover: #fde047;
}

body.theme-g .pilotage {
    --section-gradient: linear-gradient(135deg, #0f172a, #1e293b);
    --section-color: #0f172a;
    --section-border-hover: #64748b;
}

/* ===== THEME H — Roots ===== */
body.theme-h .referentiels {
    --section-gradient: linear-gradient(135deg, #5c4033, #8b5e3c);
    --section-color: #6f4e37;
    --section-border-hover: #a47149;
}

body.theme-h .echanges {
    --section-gradient: linear-gradient(135deg, #b5651d, #cd853f);
    --section-color: #b5651d;
    --section-border-hover: #deb887;
}

body.theme-h .back-office {
    --section-gradient: linear-gradient(135deg, #556b2f, #6b8e23);
    --section-color: #556b2f;
    --section-border-hover: #9acd32;
}

body.theme-h .front-office {
    --section-gradient: linear-gradient(135deg, #2f4f4f, #3c6e71);
    --section-color: #2f4f4f;
    --section-border-hover: #70a9a1;
}

body.theme-h .services {
    --section-gradient: linear-gradient(135deg, #8b4513, #a0522d);
    --section-color: #8b4513;
    --section-border-hover: #cd853f;
}

body.theme-h .securite {
    --section-gradient: linear-gradient(135deg, #654321, #4e342e);
    --section-color: #4e342e;
    --section-border-hover: #795548;
}

body.theme-h .autres {
    --section-gradient: linear-gradient(135deg, #9c661f, #daa520);
    --section-color: #b8860b;
    --section-border-hover: #ffd700;
}

body.theme-h .support {
    --section-gradient: linear-gradient(135deg, #c19a6b, #d2b48c);
    --section-color: #c19a6b;
    --section-border-hover: #f5deb3;
}

body.theme-h .pilotage {
    --section-gradient: linear-gradient(135deg, #2f2f2f, #464646);
    --section-color: #2f2f2f;
    --section-border-hover: #707070;
}

/* ===== THEME I — Chakras (opérationnels harmonisés bleu/vert) ===== */
body.theme-i .referentiels {
    --section-gradient: linear-gradient(135deg, #ff0000, #ff4d4d);
    --section-color: #ff0000;
    --section-border-hover: #ff8080;
}

body.theme-i .echanges {
    --section-gradient: linear-gradient(135deg, #ff7f00, #ffaf40);
    --section-color: #ff7f00;
    --section-border-hover: #ffcc80;
}

body.theme-i .back-office {
    --section-gradient: linear-gradient(135deg, #007f5f, #2ca58d);
    --section-color: #007f5f;
    --section-border-hover: #88d4ab;
}

body.theme-i .front-office {
    --section-gradient: linear-gradient(135deg, #219ebc, #48cae4);
    --section-color: #219ebc;
    --section-border-hover: #90e0ef;
}

body.theme-i .services {
    --section-gradient: linear-gradient(135deg, #006d77, #83c5be);
    --section-color: #006d77;
    --section-border-hover: #bde0dc;
}

body.theme-i .securite {
    --section-gradient: linear-gradient(135deg, #ffff00, #ffee58);
    --section-color: #ffff00;
    --section-border-hover: #fff9c4;
}

body.theme-i .autres {
    --section-gradient: linear-gradient(135deg, #0096c7, #00b4d8);
    --section-color: #0096c7;
    --section-border-hover: #90e0ef;
}

body.theme-i .support {
    --section-gradient: linear-gradient(135deg, #8b00ff, #a64dff);
    --section-color: #8b00ff;
    --section-border-hover: #d4b0ff;
}

body.theme-i .pilotage {
    --section-gradient: linear-gradient(135deg, #4b0082, #6a0dad);
    --section-color: #4b0082;
    --section-border-hover: #a070e0;
}

/* ===== THEME J — Monochrome Soft (pro, grayscale + bleu accent) ===== */
body.theme-j .referentiels {
    --section-gradient: linear-gradient(135deg, #111827, #374151);
    --section-color: #1f2937;
    --section-border-hover: #9ca3af;
}

body.theme-j .echanges {
    --section-gradient: linear-gradient(135deg, #374151, #6b7280);
    --section-color: #374151;
    --section-border-hover: #cbd5e1;
}

body.theme-j .back-office {
    --section-gradient: linear-gradient(135deg, #4b5563, #9ca3af);
    --section-color: #4b5563;
    --section-border-hover: #e5e7eb;
}

body.theme-j .front-office {
    --section-gradient: linear-gradient(135deg, #6b7280, #9ca3af);
    --section-color: #6b7280;
    --section-border-hover: #e5e7eb;
}

body.theme-j .services {
    --section-gradient: linear-gradient(135deg, #9ca3af, #d1d5db);
    --section-color: #9ca3af;
    --section-border-hover: #f3f4f6;
}

body.theme-j .securite {
    --section-gradient: linear-gradient(135deg, #0f172a, #111827);
    --section-color: #0f172a;
    --section-border-hover: #6b7280;
}

body.theme-j .autres {
    --section-gradient: linear-gradient(135deg, #d1d5db, #e5e7eb);
    --section-color: #d1d5db;
    --section-border-hover: #fff;
}

body.theme-j .support {
    --section-gradient: linear-gradient(135deg, #1d4ed8, #3b82f6);
    --section-color: #2563eb;
    --section-border-hover: #60a5fa;
}

body.theme-j .pilotage {
    --section-gradient: linear-gradient(135deg, #111827, #1f2937);
    --section-color: #111827;
    --section-border-hover: #9ca3af;
}

/* ===== THEME K — Sunset (chaud, dégradés coucher de soleil) ===== */
body.theme-k .referentiels {
    --section-gradient: linear-gradient(135deg, #ff6b6b, #f06595);
    --section-color: #ff6b6b;
    --section-border-hover: #ffc9c9;
}

body.theme-k .echanges {
    --section-gradient: linear-gradient(135deg, #ffd166, #f9c74f);
    --section-color: #f9c74f;
    --section-border-hover: #ffe29a;
}

body.theme-k .back-office {
    --section-gradient: linear-gradient(135deg, #f3722c, #f8961e);
    --section-color: #f3722c;
    --section-border-hover: #f8c18b;
}

body.theme-k .front-office {
    --section-gradient: linear-gradient(135deg, #90be6d, #43aa8b);
    --section-color: #43aa8b;
    --section-border-hover: #b7e4c7;
}

body.theme-k .services {
    --section-gradient: linear-gradient(135deg, #577590, #277da1);
    --section-color: #277da1;
    --section-border-hover: #a9d6e5;
}

body.theme-k .securite {
    --section-gradient: linear-gradient(135deg, #ef476f, #f78da7);
    --section-color: #ef476f;
    --section-border-hover: #ffafcc;
}

body.theme-k .autres {
    --section-gradient: linear-gradient(135deg, #ffd166, #f9c74f);
    --section-color: #ffd166;
    --section-border-hover: #ffe29a;
}

body.theme-k .support {
    --section-gradient: linear-gradient(135deg, #43aa8b, #90be6d);
    --section-color: #43aa8b;
    --section-border-hover: #b7e4c7;
}

body.theme-k .pilotage {
    --section-gradient: linear-gradient(135deg, #073b4c, #0a4c5a);
    --section-color: #073b4c;
    --section-border-hover: #6c8ca1;
}

/* ===== THEME L — Ocean (frais, bleus/verts) ===== */
body.theme-l .referentiels {
    --section-gradient: linear-gradient(135deg, #1e6091, #184e77);
    --section-color: #1e6091;
    --section-border-hover: #76c8f8;
}

body.theme-l .echanges {
    --section-gradient: linear-gradient(135deg, #34a0a4, #52b69a);
    --section-color: #34a0a4;
    --section-border-hover: #b7e4c7;
}

body.theme-l .back-office {
    --section-gradient: linear-gradient(135deg, #168aad, #1a759f);
    --section-color: #168aad;
    --section-border-hover: #84c5f4;
}

body.theme-l .front-office {
    --section-gradient: linear-gradient(135deg, #76c893, #99d98c);
    --section-color: #76c893;
    --section-border-hover: #d9f99d;
}

body.theme-l .services {
    --section-gradient: linear-gradient(135deg, #184e77, #1e6091);
    --section-color: #184e77;
    --section-border-hover: #76c8f8;
}

body.theme-l .securite {
    --section-gradient: linear-gradient(135deg, #e5383b, #ba181b);
    --section-color: #ba181b;
    --section-border-hover: #f5a5a6;
}

body.theme-l .autres {
    --section-gradient: linear-gradient(135deg, #99d98c, #b5e48c);
    --section-color: #99d98c;
    --section-border-hover: #e9f5d0;
}

body.theme-l .support {
    --section-gradient: linear-gradient(135deg, #52b69a, #34a0a4);
    --section-color: #52b69a;
    --section-border-hover: #b7e4c7;
}

body.theme-l .pilotage {
    --section-gradient: linear-gradient(135deg, #0b132b, #1c2541);
    --section-color: #0b132b;
    --section-border-hover: #6b7a99;
}

/* ===== THEME M — Cyberpunk (disruptif, sombre + néons) ===== */
body.theme-m .referentiels {
    --section-gradient: linear-gradient(135deg, #ff00ff, #ff77ff);
    --section-color: #ff2bd7;
    --section-border-hover: #ffb3f1;
}

body.theme-m .echanges {
    --section-gradient: linear-gradient(135deg, #00ffff, #7df9ff);
    --section-color: #00dbff;
    --section-border-hover: #a7f3ff;
}

body.theme-m .back-office {
    --section-gradient: linear-gradient(135deg, #ff007f, #ff4da6);
    --section-color: #ff2389;
    --section-border-hover: #ff9ec6;
}

body.theme-m .front-office {
    --section-gradient: linear-gradient(135deg, #00ff9d, #60ffbf);
    --section-color: #00f5a3;
    --section-border-hover: #b9ffe4;
}

body.theme-m .services {
    --section-gradient: linear-gradient(135deg, #7c3aed, #a78bfa);
    --section-color: #8b5cf6;
    --section-border-hover: #d8b4fe;
}

body.theme-m .securite {
    --section-gradient: linear-gradient(135deg, #ff3d00, #ff784e);
    --section-color: #ff4b2b;
    --section-border-hover: #ffb199;
}

body.theme-m .autres {
    --section-gradient: linear-gradient(135deg, #00b4d8, #48cae4);
    --section-color: #12bde8;
    --section-border-hover: #90e0ef;
}

body.theme-m .support {
    --section-gradient: linear-gradient(135deg, #f1c40f, #f39c12);
    --section-color: #f1c40f;
    --section-border-hover: #fde68a;
}

body.theme-m .pilotage {
    --section-gradient: linear-gradient(135deg, #0f0f1a, #1a1a2e);
    --section-color: #131328;
    --section-border-hover: #65657a;
}

/* ===== THEME N — Earthy Pastels (pro, doux, terre) ===== */
body.theme-n .referentiels {
    --section-gradient: linear-gradient(135deg, #8d7667, #bfa18b);
    --section-color: #9e806e;
    --section-border-hover: #e6cbb9;
}

body.theme-n .echanges {
    --section-gradient: linear-gradient(135deg, #c4a484, #e6ccb2);
    --section-color: #c4a484;
    --section-border-hover: #f3e2cf;
}

body.theme-n .back-office {
    --section-gradient: linear-gradient(135deg, #6a8e7f, #88a89a);
    --section-color: #6a8e7f;
    --section-border-hover: #cfe7dc;
}

body.theme-n .front-office {
    --section-gradient: linear-gradient(135deg, #9aa6a3, #bcc8c5);
    --section-color: #9aa6a3;
    --section-border-hover: #e6efee;
}

body.theme-n .services {
    --section-gradient: linear-gradient(135deg, #b08ea2, #d0b4c3);
    --section-color: #b08ea2;
    --section-border-hover: #eddbe8;
}

body.theme-n .securite {
    --section-gradient: linear-gradient(135deg, #8a5a44, #b1795d);
    --section-color: #8a5a44;
    --section-border-hover: #e0b7a3;
}

body.theme-n .autres {
    --section-gradient: linear-gradient(135deg, #b59d7a, #d8c3a5);
    --section-color: #b59d7a;
    --section-border-hover: #efe3cf;
}

body.theme-n .support {
    --section-gradient: linear-gradient(135deg, #c0a080, #e0c0a0);
    --section-color: #c0a080;
    --section-border-hover: #f2dfc8;
}

body.theme-n .pilotage {
    --section-gradient: linear-gradient(135deg, #4a4a4a, #6a6a6a);
    --section-color: #4a4a4a;
    --section-border-hover: #bdbdbd;
}

/* ===== THEME O — Forest (verts cohérents, opé = mêmes familles) ===== */
body.theme-o .referentiels {
    --section-gradient: linear-gradient(135deg, #2e7d32, #388e3c);
    --section-color: #2e7d32;
    --section-border-hover: #a5d6a7;
}

body.theme-o .echanges {
    --section-gradient: linear-gradient(135deg, #00695c, #00796b);
    --section-color: #00695c;
    --section-border-hover: #80cbc4;
}

body.theme-o .back-office {
    --section-gradient: linear-gradient(135deg, #1b5e20, #2e7d32);
    --section-color: #1b5e20;
    --section-border-hover: #a5d6a7;
}

body.theme-o .front-office {
    --section-gradient: linear-gradient(135deg, #33691e, #558b2f);
    --section-color: #33691e;
    --section-border-hover: #c5e1a5;
}

body.theme-o .services {
    --section-gradient: linear-gradient(135deg, #2e7d32, #43a047);
    --section-color: #2e7d32;
    --section-border-hover: #a5d6a7;
}

body.theme-o .securite {
    --section-gradient: linear-gradient(135deg, #b71c1c, #d32f2f);
    --section-color: #b71c1c;
    --section-border-hover: #ef9a9a;
}

body.theme-o .autres {
    --section-gradient: linear-gradient(135deg, #4caf50, #81c784);
    --section-color: #4caf50;
    --section-border-hover: #c8e6c9;
}

body.theme-o .support {
    --section-gradient: linear-gradient(135deg, #00796b, #26a69a);
    --section-color: #00796b;
    --section-border-hover: #b2dfdb;
}

body.theme-o .pilotage {
    --section-gradient: linear-gradient(135deg, #263238, #37474f);
    --section-color: #263238;
    --section-border-hover: #90a4ae;
}

/* ===== THEME P — Warm Minimal (chaud, minimal, pro) ===== */
body.theme-p .referentiels {
    --section-gradient: linear-gradient(135deg, #c2410c, #ea580c);
    --section-color: #c2410c;
    --section-border-hover: #fdba74;
}

body.theme-p .echanges {
    --section-gradient: linear-gradient(135deg, #b45309, #d97706);
    --section-color: #b45309;
    --section-border-hover: #fcd34d;
}

body.theme-p .back-office {
    --section-gradient: linear-gradient(135deg, #92400e, #b45309);
    --section-color: #92400e;
    --section-border-hover: #f59e0b;
}

body.theme-p .front-office {
    --section-gradient: linear-gradient(135deg, #7c2d12, #9a3412);
    --section-color: #7c2d12;
    --section-border-hover: #f59e0b;
}

body.theme-p .services {
    --section-gradient: linear-gradient(135deg, #a16207, #ca8a04);
    --section-color: #a16207;
    --section-border-hover: #fde047;
}

body.theme-p .securite {
    --section-gradient: linear-gradient(135deg, #7f1d1d, #991b1b);
    --section-color: #7f1d1d;
    --section-border-hover: #fca5a5;
}

body.theme-p .autres {
    --section-gradient: linear-gradient(135deg, #92400e, #c2410c);
    --section-color: #92400e;
    --section-border-hover: #fdba74;
}

body.theme-p .support {
    --section-gradient: linear-gradient(135deg, #1f2937, #374151);
    --section-color: #1f2937;
    --section-border-hover: #9ca3af;
}

body.theme-p .pilotage {
    --section-gradient: linear-gradient(135deg, #111827, #1f2937);
    --section-color: #111827;
    --section-border-hover: #6b7280;
}

/* ===== THEME Q — High Contrast Dark (UX night, accessible) ===== */
body.theme-q .referentiels {
    --section-gradient: linear-gradient(135deg, #0ea5e9, #38bdf8);
    --section-color: #0ea5e9;
    --section-border-hover: #7dd3fc;
}

body.theme-q .echanges {
    --section-gradient: linear-gradient(135deg, #22c55e, #4ade80);
    --section-color: #22c55e;
    --section-border-hover: #86efac;
}

body.theme-q .back-office {
    --section-gradient: linear-gradient(135deg, #f59e0b, #fbbf24);
    --section-color: #f59e0b;
    --section-border-hover: #fde68a;
}

body.theme-q .front-office {
    --section-gradient: linear-gradient(135deg, #e11d48, #f43f5e);
    --section-color: #e11d48;
    --section-border-hover: #fecdd3;
}

body.theme-q .services {
    --section-gradient: linear-gradient(135deg, #a855f7, #c084fc);
    --section-color: #a855f7;
    --section-border-hover: #e9d5ff;
}

body.theme-q .securite {
    --section-gradient: linear-gradient(135deg, #ef4444, #f87171);
    --section-color: #ef4444;
    --section-border-hover: #fca5a5;
}

body.theme-q .autres {
    --section-gradient: linear-gradient(135deg, #06b6d4, #22d3ee);
    --section-color: #06b6d4;
    --section-border-hover: #67e8f9;
}

body.theme-q .support {
    --section-gradient: linear-gradient(135deg, #facc15, #fde047);
    --section-color: #facc15;
    --section-border-hover: #fef08a;
}

body.theme-q .pilotage {
    --section-gradient: linear-gradient(135deg, #0b1220, #111827);
    --section-color: #0b1220;
    --section-border-hover: #6b7280;
}

/* ===== THEME R — Retro 80s (fun mais propre) ===== */
body.theme-r .referentiels {
    --section-gradient: linear-gradient(135deg, #ff6ec7, #ff98da);
    --section-color: #ff6ec7;
    --section-border-hover: #ffc2ec;
}

body.theme-r .echanges {
    --section-gradient: linear-gradient(135deg, #6ef3ff, #a7f3ff);
    --section-color: #6ef3ff;
    --section-border-hover: #d1f9ff;
}

body.theme-r .back-office {
    --section-gradient: linear-gradient(135deg, #ffd166, #ffe29a);
    --section-color: #ffd166;
    --section-border-hover: #fff2c2;
}

body.theme-r .front-office {
    --section-gradient: linear-gradient(135deg, #a7f3d0, #86efac);
    --section-color: #86efac;
    --section-border-hover: #d1fadf;
}

body.theme-r .services {
    --section-gradient: linear-gradient(135deg, #a78bfa, #c4b5fd);
    --section-color: #b39dfb;
    --section-border-hover: #ddd6fe;
}

body.theme-r .securite {
    --section-gradient: linear-gradient(135deg, #ff7070, #ffa3a3);
    --section-color: #ff7070;
    --section-border-hover: #ffd0d0;
}

body.theme-r .autres {
    --section-gradient: linear-gradient(135deg, #7dd3fc, #bae6fd);
    --section-color: #7dd3fc;
    --section-border-hover: #dbeafe;
}

body.theme-r .support {
    --section-gradient: linear-gradient(135deg, #fde047, #fef08a);
    --section-color: #fde047;
    --section-border-hover: #fef9c3;
}

body.theme-r .pilotage {
    --section-gradient: linear-gradient(135deg, #111827, #1f2937);
    --section-color: #111827;
    --section-border-hover: #9ca3af;
}

/* ===== THEME S — Denim & Slate (bleus/gris pro) ===== */
body.theme-s .referentiels {
    --section-gradient: linear-gradient(135deg, #1e3a8a, #1d4ed8);
    --section-color: #1e3a8a;
    --section-border-hover: #93c5fd;
}

body.theme-s .echanges {
    --section-gradient: linear-gradient(135deg, #0ea5e9, #3b82f6);
    --section-color: #0ea5e9;
    --section-border-hover: #93c5fd;
}

body.theme-s .back-office {
    --section-gradient: linear-gradient(135deg, #334155, #475569);
    --section-color: #334155;
    --section-border-hover: #cbd5e1;
}

body.theme-s .front-office {
    --section-gradient: linear-gradient(135deg, #1f2937, #334155);
    --section-color: #1f2937;
    --section-border-hover: #9ca3af;
}

body.theme-s .services {
    --section-gradient: linear-gradient(135deg, #2563eb, #3b82f6);
    --section-color: #2563eb;
    --section-border-hover: #93c5fd;
}

body.theme-s .securite {
    --section-gradient: linear-gradient(135deg, #ef4444, #f87171);
    --section-color: #ef4444;
    --section-border-hover: #fca5a5;
}

body.theme-s .autres {
    --section-gradient: linear-gradient(135deg, #0ea5e9, #38bdf8);
    --section-color: #0ea5e9;
    --section-border-hover: #93c5fd;
}

body.theme-s .support {
    --section-gradient: linear-gradient(135deg, #22c55e, #4ade80);
    --section-color: #22c55e;
    --section-border-hover: #86efac;
}

body.theme-s .pilotage {
    --section-gradient: linear-gradient(135deg, #0f172a, #1f2937);
    --section-color: #0f172a;
    --section-border-hover: #6b7280;
}

/* ===== THEME T — Graphite Lime (dark + accents lime) ===== */
body.theme-t .referentiels {
    --section-gradient: linear-gradient(135deg, #111827, #1f2937);
    --section-color: #111827;
    --section-border-hover: #94a3b8;
}

body.theme-t .echanges {
    --section-gradient: linear-gradient(135deg, #84cc16, #a3e635);
    --section-color: #84cc16;
    --section-border-hover: #d9f99d;
}

body.theme-t .back-office {
    --section-gradient: linear-gradient(135deg, #65a30d, #84cc16);
    --section-color: #65a30d;
    --section-border-hover: #bef264;
}

body.theme-t .front-office {
    --section-gradient: linear-gradient(135deg, #4d7c0f, #65a30d);
    --section-color: #4d7c0f;
    --section-border-hover: #d9f99d;
}

body.theme-t .services {
    --section-gradient: linear-gradient(135deg, #15803d, #16a34a);
    --section-color: #15803d;
    --section-border-hover: #86efac;
}

body.theme-t .securite {
    --section-gradient: linear-gradient(135deg, #dc2626, #ef4444);
    --section-color: #dc2626;
    --section-border-hover: #fca5a5;
}

body.theme-t .autres {
    --section-gradient: linear-gradient(135deg, #22c55e, #4ade80);
    --section-color: #22c55e;
    --section-border-hover: #bbf7d0;
}

body.theme-t .support {
    --section-gradient: linear-gradient(135deg, #a3e635, #bef264);
    --section-color: #a3e635;
    --section-border-hover: #eaff8b;
}

body.theme-t .pilotage {
    --section-gradient: linear-gradient(135deg, #0b1320, #111827);
    --section-color: #0b1320;
    --section-border-hover: #6b7280;
}




/* Stats rapides */
.stats-bar {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    padding: 8px 16px;
    border-radius: 12px;
    margin-bottom: 16px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.stat-item {
    text-align: center;
}

.stat-number {
    font-size: 1.4rem;
    font-weight: 700;
    color: #4f46e5;
}

.stat-label {
    color: #6b7280;
    font-size: 0.8rem;
    margin-top: 2px;
}

/* Responsive */
@media (max-width: 1200px) {
    .grid-detailed {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
            "referentiels referentiels referentiels referentiels"
            "echanges back-office back-office support"
            "securite front-office front-office support"
            "securite services services support"
            "autres autres pilotage pilotage";
    }
}

@media (max-width: 768px) {
    .grid-detailed {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "referentiels referentiels"
            "echanges back-office"
            "front-office services"
            "securite autres"
            "support pilotage";
    }

    .subsection {
        grid-template-columns: 1fr;
    }

    .main-title {
        font-size: 2rem;
    }
}