/* L'Outil Magique — style.css */
:root{
    --primary:#2B2BFF;
    --primary-dark:#1A1AE0;
    --primary-light:rgba(43,43,255,.07);
    --primary-glow:rgba(43,43,255,.15);
    --accent:#0000CC;
    --gradient:linear-gradient(135deg,#2B2BFF 0%,#0000CC 100%);
    --success:#10b981;
    --warn:#f59e0b;
    --error:#ef4444;
    --bg:#f7f8fc;
    --card:#fff;
    --text:#0f172a;
    --muted:#64748b;
    --border:#e5e7ef;
    --border-strong:#cbd5e1;
    --radius:10px;
    --radius-lg:14px;
    --shadow-sm:0 1px 2px rgba(15,23,42,.04),0 1px 3px rgba(15,23,42,.06);
    --shadow-md:0 4px 6px -1px rgba(15,23,42,.05),0 2px 4px -2px rgba(15,23,42,.04);
    --shadow-lg:0 10px 25px -5px rgba(15,23,42,.08),0 8px 10px -6px rgba(15,23,42,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,"Helvetica Neue",sans-serif;color:var(--text);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;}
a{color:var(--primary);text-decoration:none;transition:color .15s}
a:hover{color:var(--primary-dark);text-decoration:underline}
h1{font-size:1.85rem;margin:0 0 22px;letter-spacing:-.02em;font-weight:700}
h2{font-size:1.35rem;margin:30px 0 14px;letter-spacing:-.01em;font-weight:650}
h3{font-size:1.05rem;margin:22px 0 10px;font-weight:600}
code{background:#f1f3f9;padding:2px 6px;border-radius:5px;font-size:.92em;font-family:"SF Mono",Monaco,Consolas,monospace}

/* Topbar */
.topbar{
    background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
    color:var(--text);display:flex;align-items:center;gap:24px;
    padding:12px 24px;box-shadow:0 1px 0 rgba(15,23,42,.06);
    position:sticky;top:0;z-index:50;
}
.brand a{color:var(--primary);font-weight:700;font-size:1.05rem;text-decoration:none;display:flex;align-items:center;transition:transform .15s}
.brand a:hover{transform:scale(1.03);text-decoration:none}
.brand-logo{height:36px;width:auto;display:block;object-fit:contain}
.mainnav{display:flex;gap:2px;flex:1}
.mainnav a{color:var(--muted);padding:8px 14px;border-radius:8px;font-size:.92rem;font-weight:500;transition:all .15s}
.mainnav a:hover{background:var(--primary-light);color:var(--primary);text-decoration:none}
.mainnav a.active{background:var(--primary-light);color:var(--primary);font-weight:600}
.userbox{display:flex;align-items:center;gap:10px;color:var(--text);font-size:.9rem}
.userbox-profile{display:flex;align-items:center;gap:8px;color:var(--text);font-size:.9rem;text-decoration:none;padding:4px 8px;border-radius:var(--radius);transition:background .15s}
.userbox-profile:hover{background:var(--primary-light);text-decoration:none;color:var(--primary)}
.userbox-profile.active{color:var(--primary);font-weight:600}
.userbox-name{font-weight:500}
.topbar-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;border:2px solid var(--border);flex-shrink:0}
.topbar-initials{width:32px;height:32px;border-radius:50%;background:var(--gradient);color:#fff;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;flex-shrink:0}

/* Container */
.container{max-width:1140px;margin:28px auto;padding:0 24px 80px}
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:20px 0 40px}

/* Auth */
.auth-body{display:flex;align-items:center;justify-content:center;min-height:100vh;background:linear-gradient(150deg,#2B2BFF 0%,#0000AA 100%);margin:0;padding:20px}
.auth-card{background:#fff;padding:44px 40px 40px;border-radius:20px;width:100%;max-width:440px;box-shadow:0 30px 60px -10px rgba(0,0,80,.35)}
.auth-logo-wrap{text-align:center;margin-bottom:32px}
.auth-logo{height:80px;max-width:320px;width:auto;display:inline-block}

/* Forms */
label{display:block;margin:14px 0;font-size:.9rem;color:#334155;font-weight:500}
label small{font-weight:400;color:var(--muted)}
input[type=text],input[type=password],input[type=url],input[type=number],input[type=email],input[type=datetime-local],input[type=color],select,textarea{
    width:100%;padding:10px 13px;border:1px solid var(--border);border-radius:var(--radius);
    font-size:.95rem;font-family:inherit;margin-top:6px;background:#fff;color:var(--text);
    transition:border-color .15s,box-shadow .15s;
}
input[type=color]{padding:3px;height:40px;cursor:pointer}
textarea{resize:vertical;font-family:inherit;min-height:64px;line-height:1.5}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow)}
input::placeholder,textarea::placeholder{color:#94a3b8}

.form-card{background:var(--card);padding:26px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:22px;border:1px solid var(--border)}

.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-6{grid-template-columns:repeat(6,1fr)}
@media(max-width:700px){.grid-2,.grid-4,.grid-6{grid-template-columns:1fr}}

.chk{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:.92rem;padding:8px 10px;margin:0;border-radius:6px;transition:background .15s}
.chk:hover{background:var(--primary-light)}
.chk input{width:auto;margin:0;accent-color:var(--primary);cursor:pointer}

.radio-group{border:1px solid var(--border);border-radius:var(--radius);padding:14px;margin:14px 0;background:#fafbff}
.radio-group legend{padding:0 8px;font-size:.85rem;color:var(--muted);font-weight:500;text-transform:uppercase;letter-spacing:.5px}
.radio-group label{display:inline-flex;align-items:center;gap:6px;margin:0 18px 0 0;font-size:.92rem;cursor:pointer}
.radio-group input{width:auto;margin:0;accent-color:var(--primary)}

/* Tabs */
.tabs{margin:22px 0}
.tab-nav{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:0}
.tab-btn{
    background:none;border:none;padding:11px 18px;cursor:pointer;font-size:.93rem;
    color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;
    font-weight:500;font-family:inherit;transition:all .15s;position:relative;
}
.tab-btn:hover{color:var(--text)}
.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.tab-pane{display:none;padding:22px 0}
.tab-pane.active{display:block;animation:fadeIn .25s ease-out}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}

/* Buttons */
.btn,.btn-ghost,.btn-primary,.btn-success{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:10px 22px;border-radius:var(--radius);border:none;
    cursor:pointer;font-size:.93rem;font-weight:600;font-family:inherit;
    text-decoration:none;transition:transform .12s,box-shadow .15s,background .15s;
    line-height:1.2;letter-spacing:-.005em;
}
.btn,.btn-primary{background:var(--gradient);color:#fff;box-shadow:0 1px 2px rgba(99,102,241,.3),inset 0 1px 0 rgba(255,255,255,.15)}
.btn:hover,.btn-primary:hover{text-decoration:none;transform:translateY(-1px);box-shadow:0 6px 16px rgba(99,102,241,.35)}
.btn:active,.btn-primary:active{transform:translateY(0)}
.btn-success{background:linear-gradient(135deg,#10b981,#059669);color:#fff;box-shadow:0 1px 2px rgba(16,185,129,.3),inset 0 1px 0 rgba(255,255,255,.15)}
.btn-success:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,185,129,.35);text-decoration:none}
.btn-ghost{background:#fff;color:var(--text);border:1px solid var(--border)}
.btn-ghost:hover{background:#f8fafc;border-color:var(--border-strong);text-decoration:none}
.btn:disabled,.btn-success:disabled,.btn-ghost:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0;align-items:center}
.sticky-actions{position:sticky;bottom:0;background:rgba(247,248,252,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:14px 0;margin-top:24px;border-top:1px solid var(--border);z-index:10;justify-content:center}

/* Barre compacte style Wisewand */
.ww-bar{display:flex;align-items:center;gap:14px;padding:12px 18px;background:#fafbff;border-top:1px solid var(--border);border-radius:0 0 var(--radius-lg) var(--radius-lg);flex-wrap:wrap}
.ww-bar-item{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--muted);white-space:nowrap}
.ww-bar-item select{border:none;background:transparent;font-size:.85rem;color:var(--text);cursor:pointer;padding:3px 6px;font-family:inherit;border-radius:5px;transition:background .15s}
.ww-bar-item select:hover{background:rgba(0,0,0,.04)}
.ww-bar-item select:focus{outline:none;box-shadow:none;background:rgba(0,0,0,.04)}
.ww-bar-sep{color:#cbd5e1;user-select:none}
.ww-cost{margin-left:auto;font-size:.82rem;color:var(--muted);white-space:nowrap}
.ww-cost strong{color:var(--primary)}

/* Zone sujet principale */
.ww-input-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:18px;overflow:hidden;transition:box-shadow .2s}
.ww-input-card:focus-within{box-shadow:var(--shadow-md);border-color:var(--primary-glow)}
.ww-input-card textarea{border:none;outline:none;width:100%;resize:none;font-size:1rem;padding:18px;font-family:inherit;min-height:140px;display:block;color:var(--text)}
.ww-kw-count{font-size:.8rem;color:var(--muted);padding:0 18px 10px}

/* Flash */
.flash{padding:12px 16px;border-radius:var(--radius);margin-bottom:14px;font-size:.92rem;border:1px solid;display:flex;align-items:center;gap:10px}
.flash-success{background:#ecfdf5;border-color:#86efac;color:#065f46}
.flash-error{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.flash-warn{background:#fffbeb;border-color:#fcd34d;color:#92400e}

/* Table */
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.tbl th,.tbl td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--border);font-size:.92rem}
.tbl th{background:#fafbff;font-weight:600;color:#475569;font-size:.78rem;text-transform:uppercase;letter-spacing:.5px}
.tbl tr:last-child td{border-bottom:none}
.tbl tr{transition:background .12s}
.tbl tr:hover td{background:#fafbff}
.tbl a{margin:0 3px}

.badge{display:inline-block;padding:3px 10px;border-radius:14px;font-size:.76rem;font-weight:600;letter-spacing:.2px}
.badge-generated{background:#e0e7ff;color:#3730a3}
.badge-published{background:#d1fae5;color:#065f46}
.badge-scheduled{background:#fef3c7;color:#92400e}
.badge-error{background:#fee2e2;color:#991b1b}
.badge-pending{background:#f1f5f9;color:#475569}
.badge-processing{background:#dbeafe;color:#1e40af}

/* Stats */
.stat{background:#fff;padding:22px;border-radius:var(--radius-lg);text-align:center;box-shadow:var(--shadow-sm);border:1px solid var(--border);transition:transform .15s,box-shadow .2s}
.stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.stat-num{display:block;font-size:2rem;font-weight:700;color:var(--primary);line-height:1;letter-spacing:-.02em;background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-lbl{display:block;color:var(--muted);font-size:.78rem;margin-top:6px;text-transform:uppercase;letter-spacing:.6px;font-weight:600}
.stat-cost{background:linear-gradient(135deg,#fff,#eff6ff);border-color:#bfdbfe}
.stat-cost .stat-num{background:linear-gradient(135deg,#0369a1,#0ea5e9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.stat-cost small{display:block;margin-top:4px;font-size:.72rem}

.muted{color:var(--muted)}
.swatch{display:inline-block;width:16px;height:16px;border-radius:4px;vertical-align:middle;border:1px solid var(--border)}

/* Generate page */
.main-input{background:#fff;padding:20px;border-radius:var(--radius-lg);margin-bottom:12px;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.main-input textarea[name=keyword]{font-size:1rem;font-weight:500}
.status{padding:14px 18px;border-radius:var(--radius);margin:18px 0;background:#fff;border:1px solid var(--border);font-size:.92rem;box-shadow:var(--shadow-sm)}
.status.working{background:#eff6ff;border-color:#bfdbfe;color:#1e40af}
.status.ok{background:#ecfdf5;border-color:#86efac;color:#065f46}
.status.err{background:#fef2f2;border-color:#fca5a5;color:#991b1b}
.status ul{margin:6px 0 10px 18px;padding:0}
.status li{margin:3px 0}
.status strong{display:block;margin-top:6px}

.result-box{background:#fff;padding:26px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-top:22px;border:1px solid var(--border)}
.preview-frame-wrap{margin-top:14px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff}
.preview-frame-wrap iframe{width:100%;height:600px;border:0;display:block}

/* Filters */
.filters{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}
.filters a{padding:7px 16px;border-radius:18px;background:#fff;border:1px solid var(--border);font-size:.86rem;font-weight:500;transition:all .15s}
.filters a:hover{text-decoration:none;border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
.filters a.active{background:var(--gradient);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(99,102,241,.3)}

.small{font-size:.82rem}
.col-state,.col-result{white-space:nowrap}

/* Publication : header + cards */
.pub-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--radius);margin-bottom:14px}
.pub-header-title{display:flex;align-items:center;gap:10px}
.pub-enabled-badge{display:inline-block;padding:3px 12px;border-radius:14px;background:#d1fae5;color:#065f46;font-size:.76rem;font-weight:600}
.pub-enabled-badge.off{background:#fee2e2;color:#991b1b}
.pub-toggle{display:flex;align-items:center;gap:6px;margin:0;font-size:.88rem;cursor:pointer}
.pub-toggle input{width:auto;margin:0;accent-color:var(--primary)}

.block-label{display:block;margin:18px 0 8px;font-size:.85rem;color:#334155;font-weight:600;text-transform:uppercase;letter-spacing:.5px}

.pub-type-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:14px}
.pub-type-card{
    background:#fff;border:2px solid var(--border);border-radius:var(--radius-lg);
    padding:16px 18px;cursor:pointer;text-align:left;font-family:inherit;
    display:flex;flex-direction:column;gap:6px;transition:all .18s;position:relative;overflow:hidden;
}
.pub-type-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient);opacity:0;transition:opacity .15s}
.pub-type-card:hover{border-color:#bfdbfe;background:#fafbff;transform:translateY(-1px)}
.pub-type-card.active{border-color:var(--primary);background:linear-gradient(135deg,#fff,#f5f3ff);box-shadow:0 0 0 4px var(--primary-glow)}
.pub-type-card.active::before{opacity:1}
.pub-type-card.active .pub-label{color:var(--primary)}
.pub-icon{font-size:1.6rem;line-height:1}
.pub-label{font-weight:600;font-size:.95rem;color:var(--text)}
.pub-desc{font-size:.78rem;color:var(--muted);line-height:1.4}
@media(max-width:700px){.pub-type-cards{grid-template-columns:1fr}}

.sched-preview{background:#fffbeb;border:1px solid #fcd34d;border-radius:var(--radius);padding:11px 14px;margin-top:12px;font-size:.92rem;color:#92400e;display:flex;align-items:center;gap:8px}
.sched-icon{font-size:1.1rem}

/* Cover image preview */
.cover-box{border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;margin-bottom:16px;background:linear-gradient(135deg,#fafbff,#f1f5f9)}
.cover-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.cover-box img{max-width:100%;height:auto;border-radius:8px;display:block;box-shadow:var(--shadow-md)}

/* YouTube result */
.yt-result{padding:11px 14px;background:#fffbeb;border:1px solid #fcd34d;border-radius:var(--radius);margin-bottom:14px;font-size:.92rem}
.yt-result a{font-weight:500}

/* Input + button côte à côte */
.input-with-btn{display:flex;gap:6px;align-items:stretch}
.input-with-btn input{flex:1;margin-top:0}
.input-with-btn button{white-space:nowrap}

/* Mode toggle */
.mode-toggle{display:inline-flex;gap:4px;margin-bottom:18px;background:#fff;padding:5px;border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.mode-btn{
    padding:9px 20px;border:none;background:transparent;border-radius:7px;
    cursor:pointer;font-size:.93rem;font-weight:600;font-family:inherit;color:var(--muted);
    transition:all .15s;
}
.mode-btn:hover{color:var(--text);background:rgba(99,102,241,.06)}
.mode-btn.active{background:var(--gradient);color:#fff;box-shadow:0 2px 8px rgba(99,102,241,.3)}

/* Produits */
.products-block{background:#fff;padding:20px;border-radius:var(--radius-lg);margin:14px 0;box-shadow:var(--shadow-sm);border:1px solid var(--border)}
.products-block h3{margin-top:0}
.product-row{
    display:grid;grid-template-columns:1.4fr 1.4fr 1fr 1.4fr auto;gap:8px;margin-bottom:10px;align-items:center;
}
.product-row input{padding:9px 11px;font-size:.9rem;margin:0}
.product-row .p-del{padding:9px 13px;background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;border-radius:7px;cursor:pointer;font-size:.9rem;transition:all .15s}
.product-row .p-del:hover{background:#fee2e2;transform:scale(1.05)}
@media(max-width:800px){.product-row{grid-template-columns:1fr 1fr;}}

/* Scrollbar plus moderne (webkit) */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:5px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* Selection */
::selection{background:var(--primary-glow);color:var(--text)}