:root {
    --primary: #12265a;
    --primary-light: #165dc2;
    --secondary: #f47b20;
    --text: #162033;
    --muted: #667085;
    --border: #e5eaf2;
    --surface: #ffffff;
    --canvas: #f4f7fb;
    --success: #14804a;
    --danger: #c43232;
    --shadow: 0 14px 40px rgba(18, 38, 90, .08);
}

html { font-size: 16px; }
body { background: var(--canvas); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }

.pro-topbar {
    height: 68px; padding: 0 22px; gap: 24px; background: rgba(255,255,255,.96); color: var(--text);
    border-bottom: 1px solid var(--border); box-shadow: 0 6px 22px rgba(18,38,90,.035); backdrop-filter: blur(14px);
}
.pro-brand { display: flex; align-items: center; gap: 11px; min-width: 220px; color: var(--text); }
.pro-brand-mark { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg,var(--primary-light),var(--primary)); color:#fff; font-weight:900; box-shadow:0 8px 18px rgba(22,93,194,.23); }
.pro-brand strong { display:block; font-size:1rem; letter-spacing:-.02em; }
.pro-brand small { display:block; margin-top:1px; color:var(--muted); font-size:.68rem; font-weight:650; letter-spacing:.06em; text-transform:uppercase; }
.pro-actions { gap:8px; overflow:visible; }
.pro-quick { display:inline-flex; align-items:center; height:38px; padding:0 14px; border:1px solid var(--border); border-radius:10px; background:#fff; color:var(--text); font-size:.82rem; font-weight:750; white-space:nowrap; }
.pro-quick:hover { border-color:#b9c9e8; background:#f8fbff; }
.pro-quick.primary { background:var(--primary-light); border-color:var(--primary-light); color:#fff; }
.topbar-right { gap:10px; }
.plan-pill { background:#edf3ff; color:var(--primary-light); border:1px solid #d7e4fb; border-radius:999px; padding:6px 10px; font-size:.72rem; font-weight:800; }
.pro-bell { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--border); border-radius:11px; background:#fff; font-size:0; }
.pro-bell::before { content:'•'; font-size:24px; line-height:1; color:var(--primary); transform:translateY(-5px); }
.pro-bell::after { content:''; width:12px; height:8px; border:2px solid var(--primary); border-top:0; border-radius:0 0 9px 9px; position:absolute; margin-top:6px; }
.pro-avatar { width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#fff3e9; color:#b5530e; font-weight:900; border:1px solid #ffdbc1; }

.app-body { min-height:calc(100vh - 68px); }
.pro-sidebar { top:68px; width:248px; height:calc(100vh - 68px); padding:18px 14px; background:#0e1d42; }
.pro-sidebar nav { gap:3px; }
.nav-section-label { margin:18px 12px 7px; color:#7182a9; font-size:.66rem; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.nav-section-label:first-child { margin-top:2px; }
.pro-sidebar .nav-item { display:flex; align-items:center; gap:11px; min-height:43px; padding:9px 10px; color:#c6d0e4; border-radius:10px; font-size:.84rem; font-weight:680; }
.pro-sidebar .nav-item:hover { background:#172b59; color:#fff; }
.pro-sidebar .nav-item.active { background:linear-gradient(90deg,#1a4d9a,#1a60c4); color:#fff; box-shadow:0 10px 24px rgba(0,0,0,.16); }
.nav-glyph { width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.15); border-radius:8px; font-size:.6rem; font-weight:850; letter-spacing:.02em; }
.platform-link { margin-top:8px; border:1px solid rgba(244,123,32,.3); }
.pro-sidebar-footer { margin:12px 2px 0; padding:15px 10px 5px; border-top:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pro-sidebar-footer strong,.pro-sidebar-footer small { display:block; }
.pro-sidebar-footer strong { color:#fff; font-size:.8rem; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pro-sidebar-footer small { color:#8291b1; font-size:.68rem; margin-top:2px; }
.pro-sidebar-footer form { margin:0; }
.logout-link { border:0; background:transparent; padding:6px; color:#9dadcc; cursor:pointer; font-size:.7rem; }
.logout-link:hover { color:#fff; }

.pro-content { padding:32px clamp(20px,3vw,44px); background:var(--canvas); }
.pro-content h1 { margin:0; color:#111d33; font-size:clamp(1.55rem,2.2vw,2rem); letter-spacing:-.035em; font-weight:850; }
.page-subtitle { margin:.45rem 0 1.65rem; color:var(--muted); font-size:.92rem; }
.content-full { max-width:none; }

.cards-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.stat-card { position:relative; overflow:hidden; min-height:128px; padding:22px; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 8px 24px rgba(18,38,90,.045); }
.stat-card::after { content:''; position:absolute; right:-18px; bottom:-25px; width:80px; height:80px; border-radius:50%; background:#edf3ff; }
.stat-value { position:relative; z-index:1; font-size:2rem; line-height:1; font-weight:900; letter-spacing:-.04em; color:var(--primary); }
.stat-label { position:relative; z-index:1; margin-top:13px; color:var(--muted); font-size:.78rem; font-weight:720; }
.quick-actions { margin-top:20px; padding:18px; background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow); }

.btn { min-height:41px; border-radius:10px; font-weight:760; letter-spacing:-.01em; box-shadow:none; transition:.16s ease; }
.btn:hover { transform:translateY(-1px); }
.btn-primary { background:var(--primary-light); border-color:var(--primary-light); }
.btn-secondary { background:var(--secondary); border-color:var(--secondary); }
.btn-outline { background:#fff; border-color:#ccd6e6; color:var(--primary); }
.btn-danger-outline { background:#fff; border:1px solid #efb7b7; color:var(--danger); }
.btn-danger-outline:hover { background:#fff4f4; border-color:var(--danger); }
.pt-btn.pt-btn-danger { margin-left:auto; background:#fff4f4; border-color:#efb7b7; color:var(--danger); }
.pt-btn.pt-btn-danger:hover { background:#ffe7e7; border-color:var(--danger); }
.btn-small { min-height:34px; padding:.4rem .75rem; font-size:.75rem; }

input, select, textarea, .input-inline { min-height:43px; padding:10px 12px; color:var(--text); background:#fff; border:1px solid #ccd6e6; border-radius:10px; outline:none; }
input:focus, select:focus, textarea:focus { border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(22,93,194,.12); }
label { font-size:.78rem; color:#344054; font-weight:750; }
.inline-form { display:flex; flex-wrap:wrap; gap:10px; padding:18px; background:#fff; border:1px solid var(--border); border-radius:14px; }

.data-table { border-collapse:separate; border-spacing:0; overflow:hidden; width:100%; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 8px 24px rgba(18,38,90,.035); }
.data-table th { background:#f8fafe; color:#5f6d82; font-size:.69rem; letter-spacing:.045em; text-transform:uppercase; font-weight:850; }
.data-table th,.data-table td { padding:13px 14px; border-bottom:1px solid #edf0f5; }
.data-table tr:last-child td { border-bottom:0; }
.data-table tbody tr:hover { background:#fbfcff; }

.photo-grid { grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:18px; }
.photo-card { border:1px solid var(--border); border-radius:16px; box-shadow:0 10px 28px rgba(18,38,90,.06); overflow:hidden; }
.photo-card img { width:100%; aspect-ratio:4/3; object-fit:cover; background:#edf1f7; }
.photo-card-body { padding:14px; }
.photo-card-actions { display:flex; justify-content:flex-end; gap:7px; flex-wrap:wrap; }
.capture-actions,.status-filters { padding:14px; background:#fff; border:1px solid var(--border); border-radius:14px; box-shadow:0 7px 20px rgba(18,38,90,.035); }
.chip { border-radius:999px; padding:8px 12px; font-weight:720; }
.badge { border-radius:999px; padding:5px 9px; font-size:.67rem; font-weight:800; }
.empty-state { grid-column:1/-1; padding:50px 20px; border:1px dashed #c8d2e2; border-radius:15px; background:#fff; text-align:center; color:var(--muted); }

.page-toolbar { border-radius:14px; box-shadow:0 8px 24px rgba(18,38,90,.04); }
.right-panel { top:68px; height:calc(100vh - 68px); border-left:1px solid var(--border); }
.wizard-panel,.editor-panel,.card { border:1px solid var(--border); box-shadow:var(--shadow); }

.auth-page { min-height:100vh; display:grid; grid-template-columns:minmax(320px,470px) 1fr; align-items:stretch; padding:0; background:#f5f8fc; }
.auth-page::after { content:'Un flux simple. Une production plus rapide. Une image professionnelle.'; display:flex; align-items:flex-end; padding:clamp(35px,6vw,80px); color:#fff; font-size:clamp(2rem,4vw,4.2rem); line-height:1.04; font-weight:900; letter-spacing:-.055em; background:linear-gradient(145deg,rgba(18,38,90,.96),rgba(22,93,194,.88)),radial-gradient(circle at 75% 20%,#f47b20,transparent 35%); }
.auth-card { width:auto; max-width:none; margin:0; padding:clamp(32px,6vw,70px); border:0; border-radius:0; box-shadow:none; display:flex; flex-direction:column; justify-content:center; }
.auth-brand { display:flex; align-items:center; gap:11px; margin-bottom:40px; }
.auth-brand .pro-brand-mark { flex:0 0 42px; width:42px; height:42px; }
.auth-card h1 { margin:0; color:var(--text); font-size:1.8rem; letter-spacing:-.04em; }
.auth-card .subtitle { margin:8px 0 28px; color:var(--muted); }
.auth-card form { display:grid; gap:10px; }
.auth-card form label { margin-top:7px; }
.auth-card .btn-block { margin-top:12px; }
.auth-switch { margin-top:24px; font-size:.82rem; color:var(--muted); }
.auth-switch a { color:var(--primary-light); font-weight:800; }
.alert { border-radius:11px; padding:12px 14px; }

.settings-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:20px; align-items:start; }
.panel-card { background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:0 9px 28px rgba(18,38,90,.04); }
.panel-card h2 { margin:0 0 5px; font-size:1.05rem; }
.panel-card .panel-lede { margin:0 0 18px; color:var(--muted); font-size:.8rem; }
.plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.plan-card { position:relative; padding:17px; border:1px solid var(--border); border-radius:14px; background:#fff; }
.plan-card.current { border-color:var(--primary-light); box-shadow:0 0 0 3px rgba(22,93,194,.1); }
.plan-card.recommended::before { content:'Recommandé'; position:absolute; top:12px; right:12px; color:#a84606; background:#fff0e3; border-radius:999px; padding:4px 7px; font-size:.57rem; font-weight:850; text-transform:uppercase; }
.plan-price { margin:8px 0; font-size:1.25rem; font-weight:900; color:var(--primary); }
.plan-meta { color:var(--muted); font-size:.74rem; min-height:34px; }
.request-status { padding:13px; border-radius:11px; color:#765000; background:#fff8df; border:1px solid #f2dda2; font-size:.8rem; }

.platform-kpis { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }
.legal-page { width:min(820px,calc(100% - 32px)); margin:42px auto; padding:clamp(24px,5vw,54px); background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow); }
.legal-page .auth-brand { margin-bottom:35px; }
.legal-page h1 { margin:0; font-size:clamp(1.8rem,4vw,2.7rem); letter-spacing:-.045em; }
.legal-page h2 { margin:30px 0 8px; font-size:1rem; color:var(--primary); }
.legal-page p { color:#526077; line-height:1.7; }
.legal-date { font-size:.76rem; }
.legal-back { margin-top:35px; padding-top:20px; border-top:1px solid var(--border); }
.legal-back a { color:var(--primary-light); font-weight:800; }

@media (max-width:1200px) {
    .cards-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .settings-grid { grid-template-columns:1fr; }
}
@media (max-width:900px) {
    .pro-topbar { height:62px; padding:0 12px; gap:10px; }
    .pro-brand { min-width:0; }
    .pro-brand small,.pro-actions,.plan-pill { display:none; }
    .pro-sidebar { top:62px; height:calc(100vh - 62px); }
    .app-body { min-height:calc(100vh - 62px); }
    .hamburger-btn { display:flex; width:38px; height:38px; flex-direction:column; justify-content:center; gap:4px; border:1px solid var(--border); border-radius:10px; color:var(--text); }
    .hamburger-btn span { width:17px; height:2px; margin:0 auto; background:var(--primary); border-radius:2px; }
    .auth-page { grid-template-columns:1fr; }
    .auth-page::after { display:none; }
    .auth-card { min-height:100vh; }
    .pro-content { padding:24px 15px; }
    .right-panel { top:62px; height:calc(100vh - 62px); }
}
@media (max-width:620px) {
    .cards-grid,.plan-grid,.platform-kpis { grid-template-columns:1fr; }
    .stat-card { min-height:108px; }
    .data-table { display:block; overflow-x:auto; white-space:nowrap; }
    .capture-actions { display:grid; grid-template-columns:1fr; }
    .capture-actions .btn,.capture-actions select { width:100%; }
    .quick-actions { display:grid; }
    .quick-actions .btn { width:100%; }
}