/* ============================================
   PRIMA' SYSTEM v3.0 - STYLE
   Design: Industrial Minimal · Dark · Syne/DM Mono
   ============================================ */

:root {
    --blue:        #3d5afe;
    --blue-bright: #6979f8;
    --accent:      #00e5ff;
    --grad:        linear-gradient(135deg, #3d5afe 0%, #651fff 100%);
    --bg:          #080808;
    --surface:     #111111;
    --surface-2:   #191919;
    --border:      rgba(255,255,255,0.08);
    --border-act:  rgba(61,90,254,0.5);
    --text:        #f0f0f0;
    --text-muted:  rgba(255,255,255,0.4);
    --red:         #ff4444;
    --font-d:      'Syne', sans-serif;
    --font-m:      'DM Mono', monospace;
    --radius:      12px;
    --ease:        0.35s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { font-size:16px; }
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-d);
    height: 100dvh;
    overflow: hidden;
    position: relative;
}

/* ===== NOISE ===== */
.noise {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.5;
}

/* ===== PAGES ===== */
.page {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    opacity: 0; transform: translateY(20px) scale(0.98);
    pointer-events: none;
    transition: opacity var(--ease), transform var(--ease);
    z-index: 1; padding: 20px;
}
.page.active { opacity:1; transform:translateY(0) scale(1); pointer-events:all; }
.page.full   { padding:0; align-items:stretch; justify-content:stretch; }

/* ===== LOGIN CARD ===== */
.glass-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: clamp(28px,5vw,48px);
    border-radius: 20px;
    width: min(420px,100%);
    text-align: center;
    box-shadow: 0 40px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
    position: relative; z-index: 2;
}
.logo-img-wrap {
    display:flex; justify-content:center; margin: 0 auto 20px;
}
.prima-logo-login {
    height: 72px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 16px rgba(61,90,254,0.25));
}
h1 { font-family:var(--font-d); font-size:clamp(2rem,5vw,2.6rem); font-weight:800; letter-spacing:-2px; line-height:1; margin-bottom:8px; }
h1 span { color: var(--blue-bright); }
.subtitle { font-family:var(--font-m); font-size:0.65rem; letter-spacing:0.2em; color:var(--text-muted); margin-bottom:28px; }

.form-group { display:flex; flex-direction:column; gap:10px; }
.win-input {
    width:100%; padding:13px 16px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
    color:var(--text); font-family:var(--font-m); font-size:0.9rem;
    outline:none; transition:border-color var(--ease), box-shadow var(--ease);
}
.win-input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(61,90,254,0.15); }
.win-input::placeholder { color:var(--text-muted); }

.btn-main {
    background:var(--grad); color:white; border:none;
    padding:14px 20px; width:100%; border-radius:var(--radius);
    font-family:var(--font-d); font-weight:700; font-size:0.85rem; letter-spacing:0.05em;
    cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
    box-shadow:0 8px 24px rgba(61,90,254,0.35);
    transition:opacity var(--ease), transform var(--ease), box-shadow var(--ease);
}
.btn-main:hover { opacity:0.9; transform:translateY(-1px); box-shadow:0 12px 30px rgba(61,90,254,0.45); }
.btn-main:active { transform:translateY(0); }

.err-msg {
    display:none; margin-top:14px;
    background:rgba(255,68,68,0.1); border:1px solid rgba(255,68,68,0.3);
    border-radius:8px; padding:10px 14px;
    font-family:var(--font-m); font-size:0.75rem; color:var(--red);
    align-items:center; gap:8px;
}
.err-msg.visible { display:flex; }

/* ===== PAGE HEADERS ===== */
.page-header { text-align:center; margin-bottom:32px; z-index:2; }
.page-header h2 { font-size:clamp(1.6rem,4vw,2.2rem); font-weight:800; letter-spacing:-1.5px; }
.page-header h2 span { color:var(--blue-bright); }
.page-header p { font-family:var(--font-m); font-size:0.7rem; color:var(--text-muted); letter-spacing:0.15em; margin-top:6px; text-transform:uppercase; }

/* ===== CARDS ===== */
.grid-choice { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; width:min(600px,100%); z-index:2; }
.card {
    background:var(--surface); border:1px solid var(--border); border-radius:16px;
    padding:28px 24px; cursor:pointer; position:relative; overflow:hidden;
    transition:border-color var(--ease), transform var(--ease), box-shadow var(--ease);
}
.card::before { content:''; position:absolute; inset:0; background:var(--grad); opacity:0; transition:opacity var(--ease); }
.card:hover { border-color:var(--border-act); transform:translateY(-3px); box-shadow:0 20px 40px rgba(0,0,0,0.4); }
.card:hover::before { opacity:0.05; }
.card:active { transform:translateY(0); }
.card-icon {
    width:44px; height:44px; background:rgba(61,90,254,0.12);
    border:1px solid rgba(61,90,254,0.25); border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    margin-bottom:16px; font-size:1.1rem; color:var(--blue-bright); position:relative; z-index:1;
}
.card h3 { font-size:1rem; font-weight:700; letter-spacing:-0.5px; margin-bottom:6px; position:relative; z-index:1; }
.card small { font-family:var(--font-m); font-size:0.65rem; color:var(--text-muted); letter-spacing:0.05em; position:relative; z-index:1; }
.card-arrow {
    position:absolute; right:20px; top:50%; transform:translateY(-50%);
    color:var(--text-muted); font-size:0.75rem; z-index:1;
    transition:color var(--ease), transform var(--ease);
}
.card:hover .card-arrow { color:var(--blue-bright); transform:translateY(-50%) translateX(3px); }

/* ===== FIRM BADGE ===== */
.firm-badge { display:flex; align-items:center; gap:12px; justify-content:center; }
.firm-logo-sm { height:32px; width:auto; object-fit:contain; }

/* ===== LINK BACK ===== */
.link-back {
    background:none; border:none; color:var(--text-muted);
    font-family:var(--font-m); font-size:0.72rem;
    cursor:pointer; padding:10px; display:flex; align-items:center; gap:6px;
    margin-top:20px; transition:color var(--ease); z-index:2;
}
.link-back:hover { color:var(--text); }

/* ===== EDITOR ===== */
.editor { display:flex; width:100%; height:100%; }

.sidebar {
    width:300px; min-width:280px;
    background:var(--surface); border-right:1px solid var(--border);
    padding:20px; overflow-y:auto;
    display:flex; flex-direction:column; gap:14px;
}
.sb-header { display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--border); }
#sb-logo { height:36px; width:auto; object-fit:contain; border-radius:6px; }
.sb-tag { font-family:var(--font-m); font-size:0.55rem; letter-spacing:0.15em; color:var(--blue-bright); text-transform:uppercase; display:block; margin-bottom:2px; }
.sb-firm-info h3 { font-size:0.85rem; font-weight:700; }

.field-label { font-family:var(--font-m); font-size:0.6rem; letter-spacing:0.15em; color:var(--text-muted); text-transform:uppercase; display:block; margin-bottom:6px; }
.field-group { display:flex; flex-direction:column; }

textarea {
    width:100%; height:120px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius);
    color:var(--text); padding:12px; resize:none;
    font-family:var(--font-m); font-size:0.78rem; line-height:1.6;
    outline:none; transition:border-color var(--ease);
}
textarea:focus { border-color:var(--blue); }
textarea::placeholder { color:var(--text-muted); }

/* ===== LOADER ===== */
.loader { display:none; align-items:center; justify-content:center; gap:10px; font-family:var(--font-m); font-size:0.65rem; letter-spacing:0.15em; color:var(--blue-bright); padding:8px; }
.loader.visible { display:flex; }
.loader-dots { display:flex; gap:4px; }
.loader-dots span { width:6px; height:6px; background:var(--blue); border-radius:50%; animation:bounce 1.2s infinite ease-in-out; }
.loader-dots span:nth-child(2) { animation-delay:0.2s; }
.loader-dots span:nth-child(3) { animation-delay:0.4s; }
@keyframes bounce { 0%,80%,100%{transform:scale(0.6);opacity:0.4;} 40%{transform:scale(1);opacity:1;} }

/* ===== DIVIDER ===== */
.divider { height:1px; background:var(--border); }

/* ===== TOGGLE ===== */
.toggle-container { display:flex; align-items:center; justify-content:space-between; font-family:var(--font-m); font-size:0.72rem; color:var(--text-muted); }
.switch { position:relative; display:inline-block; width:38px; height:20px; flex-shrink:0; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; inset:0; background:var(--surface-2); border:1px solid var(--border); transition:var(--ease); border-radius:20px; }
.slider::before { content:''; position:absolute; width:14px; height:14px; left:2px; bottom:2px; background:white; border-radius:50%; transition:var(--ease); }
input:checked + .slider { background:var(--blue); border-color:var(--blue); }
input:checked + .slider::before { transform:translateX(18px); }

/* ===== SIG INFO ===== */
.sig-info p {
    font-size:0.7rem; color:rgba(255,255,255,0.45); font-family:var(--font-m);
    padding:10px 12px; background:rgba(255,255,255,0.03);
    border-radius:8px; border:1px solid rgba(255,255,255,0.07); line-height:1.5;
}

/* ===== PDF BUTTON ===== */
.btn-pdf {
    background:rgba(0,229,255,0.08); color:var(--accent);
    border:1px solid rgba(0,229,255,0.25); padding:12px; border-radius:var(--radius);
    cursor:pointer; width:100%; font-family:var(--font-d); font-weight:700; font-size:0.8rem; letter-spacing:0.05em;
    display:flex; align-items:center; justify-content:center; gap:8px;
    transition:background var(--ease), box-shadow var(--ease);
}
.btn-pdf:hover { background:rgba(0,229,255,0.14); box-shadow:0 0 20px rgba(0,229,255,0.15); }

/* ===== PREVIEW ===== */
.preview {
    flex:1; background:#fafafa; color:#111;
    margin:12px; border-radius:14px; padding:clamp(24px,4vw,48px);
    overflow-y:auto; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);
}
.preview-placeholder { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; text-align:center; color:#bbb; }
.preview-placeholder i { font-size:3rem; opacity:0.3; }
.preview-placeholder p { font-size:1rem; font-weight:600; }
.preview-placeholder small { font-size:0.8rem; opacity:0.6; }

/* Styles pour le contenu du contrat */
.preview h1, .preview h2, .preview h3 { color:#1a1a1a; }
.preview table { width:100%; border-collapse:collapse; margin:16px 0; }
.preview table td, .preview table th { border:1px solid #ddd; padding:8px 12px; font-size:0.85rem; }
.preview table th { background:#f0f0f0; font-weight:700; }

/* ===== HIDDEN ===== */
.hidden { display:none !important; }

/* ===== MOBILE ===== */
@media (max-width:700px) {
    body { overflow:auto; }
    .page { position:relative; min-height:100dvh; overflow:auto; justify-content:flex-start; padding-top:40px; }
    .page.full { position:relative; }
    .editor { flex-direction:column; }
    .sidebar { width:100%; min-width:unset; border-right:none; border-bottom:1px solid var(--border); }
    .preview { margin:0; border-radius:0; min-height:50dvh; }
    .grid-choice { grid-template-columns:1fr; }
}