/* /assets/style.css - V9 ULTIMATE FUSION (COMPLETE) */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;500;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --bg-deep: #050505;
    --bg-panel: #0f0f13;
    --border-dim: rgba(255, 255, 255, 0.08);
    --border-bright: rgba(255, 255, 255, 0.2);
    
    --magma: #ff4757;
    --magma-dark: #c0392b;
    --magma-glow: rgba(255, 71, 87, 0.3);
    
    --success: #2ed573;
    --warning: #ffa502;
    --info: #3742fa;
    
    --font-ui: 'Outfit', sans-serif;
    --font-code: 'JetBrains Mono', monospace;
}

/* --- 1. GLOBAL RESET & BASE --- */
* { box-sizing: border-box; }

body {
    background-color: var(--bg-deep);
    color: #e1e1e6;
    font-family: var(--font-ui);
    margin: 0; display: flex; flex-direction: column; min-height: 100vh;
    /* Fond radial subtil */
    background: radial-gradient(circle at 50% -20%, #1a0505 0%, var(--bg-deep) 60%);
}

/* Scrollbar Custom (Webkit) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: #333; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #555; }

/* Helpers Mobile */
.mobile-only { display: none !important; }
.desktop-only { display: inline-block; }

/* --- 2. HEADER "COMMAND CENTER" --- */
header {
    height: 70px; border-bottom: 1px solid var(--border-dim);
    display: flex; align-items: center; justify-content: space-between; padding: 0 30px;
    background: rgba(5, 5, 5, 0.85); backdrop-filter: blur(15px); 
    position: sticky; top: 0; z-index: 100; flex-shrink: 0;
}

.brand-wrapper { display: flex; flex-direction: column; line-height: 1; text-decoration: none; }
.logo { font-weight: 900; font-size: 1.4rem; color: #fff; letter-spacing: -0.5px; text-transform: uppercase; }
.logo span { color: var(--magma); }
.brand-tagline { font-size: 0.65rem; color: #666; font-family: var(--font-code); letter-spacing: 1px; margin-top: 4px; }

/* Status Bar (Desktop) */
.status-bar {
    display: flex; gap: 20px; font-family: var(--font-code); font-size: 0.7rem; color: #555;
    border: 1px solid var(--border-dim); padding: 6px 15px; border-radius: 50px; background: rgba(255,255,255,0.02);
}
.status-item { display: flex; align-items: center; gap: 6px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: #444; }
.status-dot.active { background: var(--success); box-shadow: 0 0 5px var(--success); }

/* Menu Trigger */
.menu-btn {
    background: transparent; border: none; color: #fff; cursor: pointer;
    display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-weight: 700; font-size: 0.9rem;
    padding: 10px; transition: 0.2s;
}
.menu-btn:hover { color: var(--magma); }
.hamburger-icon { width: 24px; height: 2px; background: currentColor; position: relative; }
.hamburger-icon::before, .hamburger-icon::after {
    content: ''; position: absolute; width: 100%; height: 2px; background: currentColor; left: 0; transition: 0.3s;
}
.hamburger-icon::before { top: -8px; }
.hamburger-icon::after { top: 8px; }

/* --- 3. OFFCANVAS MENU (LE COFFRE) --- */
.menu-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px);
    z-index: 190; opacity: 0; visibility: hidden; transition: 0.3s;
}
.menu-overlay.open { opacity: 1; visibility: visible; }

.offcanvas-menu {
    position: fixed; top: 0; right: -100%; width: 350px; height: 100vh;
    background: #0a0a0e; border-left: 1px solid var(--border-dim);
    z-index: 200; transition: 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    display: flex; flex-direction: column; padding: 40px; box-shadow: -20px 0 50px rgba(0,0,0,0.8);
    overflow-y: auto;
}
.offcanvas-menu.open { right: 0; }

.menu-close { position: absolute; top: 25px; right: 25px; background: none; border: none; color: #666; font-size: 1.5rem; cursor: pointer; }
.menu-close:hover { color: var(--magma); }

.menu-section { margin-bottom: 40px; }
.menu-title { font-family: var(--font-code); font-size: 0.7rem; color: var(--magma); margin-bottom: 15px; text-transform: uppercase; letter-spacing: 2px; }
.menu-links a { display: block; color: #ddd; text-decoration: none; font-size: 1.1rem; font-weight: 700; margin-bottom: 12px; transition: 0.2s; }
.menu-links a:hover { color: #fff; transform: translateX(5px); }
.menu-links a.highlight { color: var(--success); }

/* --- 4. APP LAYOUT (3 COLUMNS) --- */
main { flex: 1; display: flex; overflow: hidden; width: 100%; }
.app-container { display: flex; flex: 1; width: 100%; height: 100%; }

/* Colonnes de base */
.col-input, .col-output { flex: 1; display: flex; flex-direction: column; min-width: 300px; position: relative; background: rgba(0,0,0,0.2); }
.col-pipeline { 
    width: 340px; background: var(--bg-panel); 
    border-right: 1px solid var(--border-dim); border-left: 1px solid var(--border-dim); 
    display: flex; flex-direction: column; overflow-y: auto; flex-shrink: 0; 
}

.col-header { 
    padding: 15px; border-bottom: 1px solid var(--border-dim); 
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.75rem; font-weight: 700; color: #888; letter-spacing: 1px;
    background: var(--bg-deep); flex-shrink: 0;
}

/* --- 5. INPUT COLUMN & ACTIONS (V7 Feature) --- */
.input-actions {
    display: flex; gap: 10px; padding: 10px 15px; background: rgba(255,255,255,0.02); 
    border-bottom: 1px solid var(--border-dim); flex-shrink: 0;
}
.btn-small {
    background: transparent; border: 1px solid var(--border-dim); color: #ccc;
    padding: 6px 12px; border-radius: 4px; font-size: 0.75rem; cursor: pointer; font-family: var(--font-ui); font-weight: 600;
    display: flex; align-items: center; gap: 6px; transition: 0.2s;
}
.btn-small:hover { background: rgba(255,255,255,0.05); color: #fff; border-color: #666; }
.btn-small.accent { border-color: var(--magma); color: var(--magma); background: rgba(255, 71, 87, 0.05); }
.btn-small.accent:hover { background: var(--magma); color: #fff; }

.area-wrapper { flex: 1; position: relative; display: flex; overflow: hidden; flex-direction: column; }
textarea {
    flex: 1; width: 100%; border: none; background: transparent; color: #fff;
    padding: 20px; font-family: var(--font-code); font-size: 0.85rem; line-height: 1.6;
    resize: none; outline: none; white-space: pre; box-sizing: border-box;
}
textarea::placeholder { color: #555; font-style: italic; }

/* Drop Overlay */
.drop-overlay {
    position: absolute; inset: 0; background: rgba(5, 5, 5, 0.95);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: 0.2s; z-index: 10;
    color: #fff; font-weight: 700; font-size: 1rem; letter-spacing: 1px;
}
.drop-overlay span:first-child { font-size: 2.5rem; margin-bottom: 10px; }
.col-input.drag-active .drop-overlay { opacity: 1; border: 2px dashed var(--magma); }

/* --- 6. PIPELINE SETTINGS (MIDDLE) --- */
/* Preset Selector */
.preset-wrapper { display: flex; align-items: center; gap: 10px; }
.preset-select {
    background: #000; color: #aaa; border: 1px solid var(--border-dim); padding: 5px 10px;
    border-radius: 4px; font-family: var(--font-code); font-size: 0.75rem; cursor: pointer; outline: none;
}
.btn-save-preset {
    background: transparent; border: 1px solid var(--border-dim); color: var(--success);
    font-size: 0.7rem; padding: 5px 10px; border-radius: 4px; cursor: pointer;
}
.btn-save-preset:hover { background: rgba(46, 213, 115, 0.1); }

/* Modules / Accordions */
.module { border-bottom: 1px solid var(--border-dim); }
.module-head {
    padding: 10px 15px; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
    font-size: 0.7rem; font-weight: 700; color: #aaa; transition: 0.2s; background: rgba(255,255,255,0.01); letter-spacing: 0.5px; text-transform: uppercase;
}
.module-head:hover { background: rgba(255,255,255,0.03); color: #fff; }
.module-body { padding: 15px; display: none; background: rgba(0,0,0,0.2); border-top: 1px solid var(--border-dim); }
.module.active .module-body { display: block; }
.module.active .module-head { color: #fff; border-left: 3px solid var(--magma); background: rgba(255, 255, 255, 0.02); }

/* Inputs & Checks inside pipeline */
.control-row { margin-bottom: 12px; }
.control-row label { display: block; font-size: 0.65rem; color: #666; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 1px; }

.dual-input { display: flex; gap: 10px; }
.input-text { 
    width: 100%; background: #050505; border: 1px solid var(--border-dim); color: var(--magma); 
    padding: 8px; border-radius: 4px; font-family: var(--font-code); font-size: 0.8rem; outline: none; box-sizing: border-box;
}
.input-text:focus { border-color: var(--magma); }
.input-text::placeholder { color: #333; }

.check-group { display: flex; align-items: center; gap: 10px; cursor: pointer; margin-bottom: 8px; }
.check-group input { accent-color: var(--magma); width: 14px; height: 14px; margin: 0; cursor: pointer; }
.check-group span { font-size: 0.8rem; color: #ccc; user-select: none; }
.check-group:hover span { color: #fff; }

/* --- 7. OUTPUT COLUMN (RIGHT) --- */
.output-tabs { display: flex; border-bottom: 1px solid var(--border-dim); background: var(--bg-panel); flex-shrink: 0; }
.tab { 
    padding: 12px 15px; font-size: 0.7rem; font-weight: 700; color: #666; cursor: pointer; border-right: 1px solid var(--border-dim); transition: 0.2s; 
    text-transform: uppercase; letter-spacing: 0.5px;
}
.tab:hover { color: #fff; background: rgba(255,255,255,0.02); }
.tab.active { background: var(--bg-deep); color: var(--success); border-top: 2px solid var(--success); }

/* Diff Table */
.diff-table-container { flex: 1; overflow: auto; padding: 0; display: none; }
.diff-table-container.active { display: block; }
.diff-table { width: 100%; border-collapse: collapse; font-family: var(--font-code); font-size: 0.8rem; }
.diff-table th { text-align: left; padding: 10px 15px; background: #000; color: #666; font-size: 0.7rem; position: sticky; top: 0; }
.diff-table td { padding: 8px 15px; border-bottom: 1px solid var(--border-dim); color: #888; white-space: nowrap; }
.diff-table td.new-val { color: var(--success); }
.arrow-sep { color: #444; }

/* Output Textarea color */
.col-output textarea { color: var(--success); }

/* Stats & Actions */
.stats-bar { padding: 8px 15px; border-top: 1px solid var(--border-dim); background: var(--bg-panel); display: flex; justify-content: space-between; font-family: var(--font-code); font-size: 0.7rem; color: #666; flex-shrink: 0; }
.action-bar { padding: 15px; border-top: 1px solid var(--border-dim); display: flex; gap: 10px; justify-content: flex-end; background: var(--bg-panel); flex-shrink: 0; }

.btn { padding: 10px 20px; border-radius: 6px; font-size: 0.75rem; font-weight: 800; cursor: pointer; border: none; transition: 0.2s; font-family: var(--font-ui); letter-spacing: 0.5px; }
.btn-primary { background: linear-gradient(135deg, var(--magma), var(--magma-dark)); color: #fff; box-shadow: 0 4px 15px var(--magma-glow); }
.btn-primary:hover { transform: translateY(-2px); filter: brightness(1.1); }
.btn-ghost { background: transparent; border: 1px solid var(--border-dim); color: #ccc; }
.btn-ghost:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,0.05); }

/* --- 8. FOOTER "ECOSYSTEM" (PAGES CLASSIQUES) --- */
footer {
    background: #020202; border-top: 1px solid var(--border-dim); padding: 60px 20px 30px;
    font-size: 0.9rem; color: #666; margin-top: auto;
}
.footer-grid {
    max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 40px;
}
.footer-col h4 { color: #fff; font-size: 1rem; margin-bottom: 20px; font-weight: 700; text-transform: uppercase; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #888; text-decoration: none; transition: 0.2s; font-size: 0.85rem; }
.footer-col a:hover { color: var(--magma); }

.footer-bottom {
    max-width: 1200px; margin: 40px auto 0; padding-top: 20px; border-top: 1px solid rgba(255,255,255,0.05);
    display: flex; justify-content: space-between; font-family: var(--font-code); font-size: 0.75rem;
}

/* --- 9. CONTENT PAGES (MINDSET, TUTO, PRIVACY...) --- */
.page-container { max-width: 800px; margin: 60px auto; padding: 0 20px; }
h1.page-title { font-size: 3rem; margin-bottom: 20px; line-height: 1.1; font-weight: 900; color:#fff; }
.lead { font-size: 1.2rem; color: #aaa; margin-bottom: 40px; line-height: 1.6; }
.content-block { background: var(--bg-panel); border: 1px solid var(--border-dim); padding: 30px; border-radius: 12px; margin-bottom: 30px; }
.content-block h2 { color: #fff; margin-top: 0; font-size: 1.5rem; margin-bottom: 15px; }
.content-block p, .content-block li { line-height: 1.7; color: #ccc; }
.content-block ul { margin-bottom: 20px; }
.btn-cta { display: inline-block; background: var(--magma); color: #fff; padding: 15px 30px; text-decoration: none; font-weight: 800; border-radius: 6px; margin-top: 20px; }

/* --- 10. RESPONSIVE MOBILE --- */
@media (max-width: 1000px) {
    /* Sur mobile, on active le scroll global */
    body { overflow: auto; height: auto; }
    
    .app-container { flex-direction: column; overflow-y: visible; height: auto; }
    .col-input, .col-output { min-height: 400px; }
    
    /* REORDERING : Input -> Settings -> Output */
    .col-pipeline { width: 100%; border-right: none; border-bottom: 1px solid var(--border-dim); border-top: 1px solid var(--border-dim); order: 0; } 
    
    /* Classes Helpers */
    .mobile-only { display: inline-block !important; }
    .desktop-only { display: none !important; }
    .status-bar { display: none; }
    
    /* Overlay Drop désactivé sur mobile */
    .drop-overlay { display: none !important; }
}

/* --- 404 PAGE : FORGE FIRE EFFECT --- */

/* Le conteneur des braises SVG (arrière-plan) */
.forge-embers-container {
    position: fixed; /* Prend tout l'écran, derrière le contenu */
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden;
    z-index: 0; /* Derrière le contenu principal */
    pointer-events: none; /* Laisse passer les clics */
    /* Un dégradé sombre qui part du bas pour simuler la chaleur */
    background: linear-gradient(to top, rgba(255, 71, 87, 0.15) 0%, transparent 40%);
}

.forge-embers {
    width: 100%; height: 100%;
}

/* Les particules de braise */
.ember {
    fill: var(--magma); /* Couleur de base */
    /* Animation de montée et de disparition */
    animation: rise 6s infinite ease-in;
    /* Filtre pour un effet "flou lumineux" */
    filter: blur(2px) drop-shadow(0 0 5px var(--warning)); 
}

@keyframes rise {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0; /* Commence invisible en bas */
        fill: var(--warning); /* Commence jaune chaud */
    }
    10% {
        opacity: 1; /* Apparaît */
    }
    100% {
        transform: translateY(-400px) scale(0.5); /* Monte et rétrécit */
        opacity: 0; /* Disparaît en haut */
        fill: var(--magma-dark); /* Finit rouge sombre */
    }
}

/* Le texte "404" en fusion */
.magma-404 {
    font-size: 8rem; font-weight: 900; margin: 0; line-height: 1;
    /* Le dégradé de couleur du métal chauffé (Jaune -> Orange -> Rouge) */
    background: linear-gradient(to bottom, #ffeaa7 0%, var(--warning) 30%, var(--magma) 70%, var(--magma-dark) 100%);
    /* On découpe le fond selon la forme du texte */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    /* L'effet de halo de chaleur intense qui pulse */
    filter: drop-shadow(0 0 20px var(--magma));
    animation: heat-pulse 3s infinite alternate ease-in-out;
}

@keyframes heat-pulse {
    0% {
        filter: drop-shadow(0 0 15px var(--magma)) drop-shadow(0 0 30px var(--warning));
    }
    100% {
        filter: drop-shadow(0 0 30px var(--magma)) drop-shadow(0 0 60px var(--warning));
        transform: scale(1.02); /* Légère respiration */
    }
}