/* ============================================================
   QA PINOTTE — Feuille de style principale
   Basée sur la charte graphique du projet
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap');

:root {
    --primary: #012154;
    --primary-light: #223366;
    --secondary: #fffffd;
    --accent: #d00825;
    --bg-light: #f8f9fa;
    --border-color: #eeeeee;
    --text-dark: #333333;
    --ok: #077604;
    --ok-bg: #d1fed1;
    --ko: #c62828;
    --ko-bg: #ffebee;
    --sb: #ef6c00;
    --sb-bg: #fff3e0;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Comfortaa',sans-serif; }

body {
    background: #e8ecf0;
    color: var(--primary);
    line-height: 1.6;
    min-height: 100vh;
}

body.login-body {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

/* --- LOGIN --- */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; }
.login-box { background:#fff; border-radius:16px; padding:3rem; width:100%; max-width:420px; box-shadow:0 20px 60px rgba(0,0,0,0.2); }
.login-logo { text-align:center; margin-bottom:2rem; }
.app-name { font-size:2rem; font-weight:700; color:var(--primary); letter-spacing:-1px; }
.app-name span { color:var(--accent); }
.login-logo p { font-size:0.8rem; color:#888; margin-top:4px; }
.login-box label { display:flex; flex-direction:column; font-weight:600; font-size:0.9rem; margin-bottom:1rem; }
.login-box input { padding:0.85rem 1rem; border-radius:8px; border:1.5px solid #ddd; margin-top:6px; font-family:inherit; font-size:0.95rem; transition:0.2s; }
.login-box input:focus { outline:none; border-color:var(--primary); }
.login-submit { width:100%; padding:1rem; background:var(--accent); color:#fff; border:none; border-radius:8px; font-family:inherit; font-weight:700; font-size:1rem; cursor:pointer; margin-top:0.5rem; transition:0.3s; }
.login-submit:hover { background:#b0071f; transform:scale(1.02); }
.login-footer { text-align:center; margin-top:1.5rem; font-size:0.8rem; color:#888; }
.alert-error { background:var(--ko-bg); color:var(--ko); padding:10px 14px; border-radius:8px; margin-bottom:1rem; font-size:0.85rem; font-weight:600; }

/* --- HEADER & NAV --- */
header { display:flex; flex-direction:column; width:100%; }
.header-top { display:flex; justify-content:space-between; align-items:center; padding:0.8rem 2rem; background:#fff; box-shadow:0 2px 10px rgba(0,0,0,0.08); position:sticky; top:0; z-index:100; }
.header-brand { display:flex; align-items:center; gap:12px; }
.brand-icon { width:40px; height:40px; background:var(--primary); border-radius:10px; display:flex; align-items:center; justify-content:center; }
.brand-icon i { color:#fff; font-size:1.2rem; }
.brand-name { font-size:1.4rem; font-weight:700; color:var(--primary); }
.brand-name span { color:var(--accent); }
.header-user { display:flex; align-items:center; gap:12px; }
.user-chip { display:flex; align-items:center; gap:8px; background:var(--bg-light); padding:6px 14px; border-radius:20px; font-size:0.85rem; font-weight:600; }
.user-avatar { width:28px; height:28px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.7rem; font-weight:700; }
.user-avatar.admin { background:var(--accent); }
.btn-logout { padding:6px 14px; border:1.5px solid var(--border-color); border-radius:20px; background:none; font-family:inherit; font-size:0.8rem; cursor:pointer; color:#888; text-decoration:none; transition:0.2s; display:inline-flex; align-items:center; gap:6px; }
.btn-logout:hover { border-color:var(--accent); color:var(--accent); }

.app-nav { background:var(--primary); padding:0 2rem; display:flex; gap:0; }
.app-nav a { color:rgba(255,255,255,0.7); text-decoration:none; padding:0.85rem 1.2rem; font-size:0.85rem; font-weight:600; border-bottom:3px solid transparent; transition:0.2s; display:flex; align-items:center; gap:6px; }
.app-nav a:hover { color:#fff; background:rgba(255,255,255,0.05); }
.app-nav a.active { color:#fff; border-bottom-color:var(--accent); }

/* --- MAIN --- */
main { padding:2rem; max-width:1400px; margin:auto; }

.page-title { margin-bottom:1.5rem; }
.page-title h1 { font-size:1.5rem; font-weight:700; color:var(--primary); }
.page-title p { font-size:0.85rem; color:#888; margin-top:2px; }

/* --- METRICS --- */
.metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; margin-bottom:2rem; }
.metric-card { background:#fff; border-radius:12px; padding:1.25rem; border-left:4px solid var(--primary); box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.metric-card.ok { border-left-color:var(--ok); }
.metric-card.ko { border-left-color:var(--ko); }
.metric-card.sb { border-left-color:var(--sb); }
.metric-card.warn { border-left-color:var(--accent); }
.metric-val { font-size:2rem; font-weight:700; color:var(--primary); }
.metric-card.ok .metric-val { color:var(--ok); }
.metric-card.ko .metric-val { color:var(--ko); }
.metric-card.sb .metric-val { color:var(--sb); }
.metric-card.warn .metric-val { color:var(--accent); }
.metric-lbl { font-size:0.75rem; color:#888; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-top:2px; }

/* --- MODULE CARDS DASHBOARD --- */
.modules-grid { display:grid; gap:1.5rem; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); margin-top:1rem; }
.module-card { background:var(--primary); color:var(--secondary); padding:2rem; border-radius:12px; text-align:center; cursor:pointer; transition:0.3s; border:none; font-family:inherit; text-decoration:none; display:block; }
.module-card:hover { transform:translateY(-6px); background:var(--primary-light); box-shadow:0 10px 30px rgba(0,0,0,0.15); }
.module-card i { font-size:2.5rem; margin-bottom:1rem; display:block; }
.module-card h3 { font-size:1.1rem; margin-bottom:0.5rem; }
.module-card p { font-size:0.8rem; opacity:0.7; }
.module-card.accent { background:var(--accent); }
.module-card.accent:hover { background:#b0071f; }

/* --- SECTION CARD --- */
.section-card { background:#fff; border-radius:12px; padding:1.5rem; margin-bottom:1.5rem; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.section-card h2 { font-size:1.1rem; font-weight:700; color:var(--primary); margin-bottom:1rem; padding-bottom:0.75rem; border-bottom:2px solid var(--bg-light); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.section-card h2 i { color:var(--accent); }

/* --- BUTTONS --- */
.btn-primary { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; background:var(--accent); color:#fff; border:none; border-radius:20px; font-family:inherit; font-weight:600; font-size:0.85rem; cursor:pointer; transition:0.3s; text-decoration:none; }
.btn-primary:hover { background:#b0071f; transform:scale(1.03); }
.btn-secondary { display:inline-flex; align-items:center; gap:6px; padding:8px 18px; background:none; color:var(--primary); border:1.5px solid var(--primary); border-radius:20px; font-family:inherit; font-weight:600; font-size:0.85rem; cursor:pointer; transition:0.3s; text-decoration:none; }
.btn-secondary:hover { background:var(--primary); color:#fff; }
.btn-sm { padding:5px 12px; font-size:0.75rem; margin-left:auto; }

/* --- TABLE --- */
.table-container { width:100%; background:#fff; border-radius:12px; overflow-x:auto; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
table { width:100%; border-collapse:collapse; }
th { background:var(--primary); color:white; padding:0.9rem 1rem; text-align:left; font-size:0.8rem; text-transform:uppercase; letter-spacing:0.5px; }
td { padding:0.9rem 1rem; border-bottom:1px solid var(--border-color); font-size:0.9rem; vertical-align:middle; }
tbody tr:hover { background:#f8f9ff; }
tbody tr:last-child td { border-bottom:none; }

/* --- BADGES --- */
.badge { padding:3px 10px; border-radius:12px; font-size:0.7rem; font-weight:700; text-transform:uppercase; display:inline-block; }
.badge-ok     { background:var(--ok-bg);  color:var(--ok); }
.badge-ko     { background:var(--ko-bg);  color:var(--ko); }
.badge-sb     { background:var(--sb-bg);  color:var(--sb); }
.badge-wait   { background:#f0f0f0;        color:#666; }
.badge-prog   { background:#e3f2fd;        color:#1976d2; }
.badge-admin  { background:#e8eaf6;        color:#3949ab; }
.badge-metier { background:#e8f5e9;        color:#2e7d32; }
.badge-high   { background:#ffebee;        color:#c62828; }
.badge-med    { background:#fff3e0;        color:#ef6c00; }
.badge-low    { background:#f1f8e9;        color:#558b2f; }

/* --- ARBORESCENCE --- */
.tree { padding:0.25rem 0; }
.tree-fam { margin-bottom:0.5rem; }
.tree-fam-label { display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--primary); color:#fff; border-radius:8px; font-weight:700; font-size:0.85rem; cursor:pointer; }
.tree-theme { padding:4px 0 4px 1rem; }
.tree-theme-label { display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:6px; font-size:0.85rem; font-weight:600; color:var(--primary); border-left:3px solid var(--primary-light); background:#f8f9ff; margin-bottom:2px; }
.tree-sujet { padding:2px 0 2px 1rem; }
.tree-sujet-label { display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:6px; font-size:0.82rem; color:#555; text-decoration:none; border-left:2px solid #ddd; display:block; transition:0.2s; }
.tree-sujet-label:hover { background:var(--bg-light); border-left-color:var(--accent); color:var(--accent); }
.tree-sujet-label.active { border-left-color:var(--accent); color:var(--accent); font-weight:600; background:#fff5f6; }

/* --- CAS DE TEST --- */
.cas-list { display:flex; flex-direction:column; gap:8px; }
.cas-card { background:#fff; border:1px solid var(--border-color); border-left:4px solid var(--primary-light); border-radius:8px; padding:1rem 1.25rem; transition:0.2s; }
.cas-card:hover { border-left-color:var(--accent); box-shadow:2px 2px 10px rgba(0,0,0,0.05); transform:translateX(4px); }
.cas-card-hd { display:flex; align-items:center; gap:10px; margin-bottom:6px; flex-wrap:wrap; }
.cas-ref { font-size:0.7rem; font-weight:700; color:var(--accent); text-transform:uppercase; }
.cas-title { font-weight:600; font-size:0.95rem; color:var(--primary); flex:1; }
.cas-meta { font-size:0.8rem; color:#888; }

/* --- UTILISATEURS --- */
.user-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.user-card { background:#fff; border:1px solid var(--border-color); border-radius:12px; padding:1.25rem; display:flex; align-items:center; gap:12px; transition:0.2s; }
.user-card:hover { box-shadow:0 4px 15px rgba(0,0,0,0.08); }
.user-card.user-inactive { opacity:0.5; }
.user-av { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; flex-shrink:0; }
.user-av.admin { background:var(--primary); color:#fff; }
.user-av.metier { background:var(--accent); color:#fff; }
.user-info { flex:1; }
.user-info strong { display:block; font-size:0.95rem; color:var(--primary); }
.user-info span { font-size:0.78rem; color:#888; }

/* --- CAMPAGNE EXECUTION --- */
.campagne-header { background:var(--primary); color:#fff; border-radius:12px; padding:1.5rem; margin-bottom:1.5rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.campagne-header h2 { font-size:1.2rem; }
.campagne-header p { font-size:0.8rem; opacity:0.7; margin-top:4px; }
.progress-wrap { min-width:200px; }
.progress-label { font-size:0.75rem; opacity:0.7; margin-bottom:6px; display:flex; justify-content:space-between; }
.progress-bar { height:8px; background:rgba(255,255,255,0.2); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; background:var(--accent); border-radius:4px; transition:0.3s; }

.cas-execution { background:#fff; border-radius:12px; padding:1.5rem; margin-bottom:1rem; border:2px solid var(--primary); box-shadow:0 4px 15px rgba(0,0,0,0.05); }
.cas-exec-hd { display:flex; align-items:center; gap:10px; margin-bottom:1rem; padding-bottom:1rem; border-bottom:1px solid var(--border-color); flex-wrap:wrap; }
.cas-num { background:var(--primary); color:#fff; width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.8rem; font-weight:700; flex-shrink:0; }
.exec-section { margin-bottom:1rem; }
.exec-section label { font-size:0.8rem; font-weight:700; color:#888; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:6px; }
.exec-section p { font-size:0.9rem; color:var(--text-dark); background:var(--bg-light); padding:10px 14px; border-radius:8px; }
.exec-section textarea { width:100%; padding:10px 14px; border:1.5px solid #ddd; border-radius:8px; font-family:inherit; font-size:0.9rem; resize:vertical; min-height:80px; transition:0.2s; }
.exec-section textarea:focus { outline:none; border-color:var(--primary); }

.statut-btns { display:flex; gap:10px; flex-wrap:wrap; }
.statut-btn { padding:10px 20px; border-radius:8px; border:2px solid; font-family:inherit; font-weight:700; font-size:0.9rem; cursor:pointer; transition:0.2s; flex:1; min-width:100px; text-align:center; display:inline-flex; align-items:center; justify-content:center; gap:6px; }
.statut-btn.ok { border-color:var(--ok); color:var(--ok); background:var(--ok-bg); }
.statut-btn.ok:hover, .statut-btn.ok.selected { background:var(--ok); color:#fff; }
.statut-btn.ko { border-color:var(--ko); color:var(--ko); background:var(--ko-bg); }
.statut-btn.ko:hover, .statut-btn.ko.selected { background:var(--ko); color:#fff; }
.statut-btn.sb { border-color:var(--sb); color:var(--sb); background:var(--sb-bg); }
.statut-btn.sb:hover, .statut-btn.sb.selected { background:var(--sb); color:#fff; }

.upload-zone { border:2px dashed #ccc; border-radius:8px; padding:1.5rem; text-align:center; cursor:pointer; transition:0.2s; margin-top:8px; }
.upload-zone:hover { border-color:var(--primary); background:#f8f9ff; }
.upload-zone i { font-size:1.5rem; color:#ccc; display:block; margin-bottom:6px; }
.upload-zone p { font-size:0.8rem; color:#888; }

.thumbs { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.thumb { width:80px; height:60px; background:#e8ecf0; border-radius:6px; border:1px solid #ddd; overflow:hidden; }
.thumb img { width:100%; height:100%; object-fit:cover; }

/* --- RAPPORT --- */
.rapport-preview { background:#fff; border:1px solid #ddd; border-radius:12px; overflow:hidden; }
.rapport-header { background:var(--primary); color:#fff; padding:2rem; }
.rapport-header h1 { font-size:1.5rem; margin-bottom:0.5rem; }
.meta-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.4rem; margin-top:1rem; font-size:0.8rem; opacity:0.85; }
.rapport-body { padding:2rem; }
.rapport-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.5rem; }
.rstat { text-align:center; padding:1rem; border-radius:8px; }
.rstat.ok { background:var(--ok-bg); }
.rstat.ko { background:var(--ko-bg); }
.rstat.sb { background:var(--sb-bg); }
.rstat.tot { background:#e3f2fd; }
.rstat .n { font-size:2rem; font-weight:700; }
.rstat.ok .n { color:var(--ok); }
.rstat.ko .n { color:var(--ko); }
.rstat.sb .n { color:var(--sb); }
.rstat.tot .n { color:#1976d2; }
.rstat .l { font-size:0.75rem; color:#888; font-weight:600; }
.rapport-cas { margin-bottom:10px; border:1px solid #eee; border-radius:8px; overflow:hidden; }
.rapport-cas-hd { display:flex; align-items:center; gap:10px; padding:0.75rem 1rem; background:#fafafa; border-bottom:1px solid #eee; flex-wrap:wrap; }
.rapport-cas-body { padding:1rem; font-size:0.85rem; color:var(--text-dark); }
.rapport-cas-screens { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

/* --- MODAL --- */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:1000; align-items:flex-start; justify-content:center; padding-top:5vh; overflow-y:auto; }
.modal-box { background:#fff; border-radius:16px; padding:2rem; width:100%; max-width:540px; margin:0 auto 2rem; }
.modal-box h3 { font-size:1.1rem; font-weight:700; color:var(--primary); margin-bottom:1.25rem; padding-bottom:0.75rem; border-bottom:2px solid var(--bg-light); display:flex; align-items:center; gap:8px; }
.form-group { margin-bottom:1rem; }
.form-group label { display:block; font-size:0.8rem; font-weight:700; color:#555; margin-bottom:5px; text-transform:uppercase; letter-spacing:0.4px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:0.8rem 1rem; border:1.5px solid #ddd; border-radius:8px; font-family:inherit; font-size:0.9rem; transition:0.2s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--primary); }
.form-group textarea { min-height:100px; resize:vertical; }
.modal-foot { display:flex; gap:10px; justify-content:flex-end; margin-top:1.25rem; }
.form-group input[type="checkbox"] {
    width: auto;
    margin: 0;
}

/* --- MISC --- */
.empty-text { text-align:center; padding:2rem; color:#aaa; font-size:0.9rem; }

/* --- PAGES LÉGALES --- */
.legal-content { max-width: 900px; width: 90%; background: #fff; padding: 3rem; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); text-align: left; }
.legal-content h2 { color: var(--primary); margin: 2rem 0 1rem 0; border-bottom: 2px solid var(--accent); display: inline-block; padding-bottom: 5px; }

/* --- FOOTER --- */
footer { background: var(--primary); color: var(--secondary); padding: 4rem 5%; margin-top: 4rem; width: 100%; }
.footer-container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 3rem; max-width: 1200px; margin: auto; }
.footer-col { flex: 1; min-width: 250px; }
.footer-col h3 { margin-bottom: 1.5rem; border-bottom: 2px solid var(--accent); display: inline-block; padding-bottom: 5px; }
.footer-links a { color: var(--secondary); text-decoration: none; display: block; margin-bottom: 0.8rem; transition: 0.3s; }
.footer-links a:hover { color: var(--accent); padding-left: 5px; }

/* --- RESPONSIVE --- */
@media (max-width:768px) {
    main { padding:1rem; }
    .header-top { padding:0.8rem 1rem; }
    .app-nav { overflow-x:auto; padding:0 1rem; }
    .app-nav a { padding:0.7rem 0.8rem; font-size:0.78rem; white-space:nowrap; }
}

/* Tableaux administratifs */
.table-responsive {
    overflow-x: auto;
}

.qa-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.qa-table th {
    text-align: left;
    padding: 12px 15px;
    border-bottom: 2px solid #eee;
    color: #666;
    font-size: 0.85rem;
    text-transform: uppercase;
}

.qa-table td {
    padding: 12px 15px;
    border-bottom: 1px solid #f5f5f5;
    vertical-align: middle;
}

.qa-table tr:hover {
    background: #fcfcfc;
}

.row-inactive {
    opacity: 0.6;
    background: #f9f9f9;
}

/* Mini avatars pour la liste */
.mini-av {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    color: white;
}
.mini-av.admin { background: #012154; }
.mini-av.metier { background: #d00825; }

/* Badges de statut */
.badge-warning { background: #fff3cd; color: #856404; padding: 4px 8px; border-radius: 4px; font-size: 11px; }
.badge-success { background: #d4edda; color: #155724; padding: 4px 8px; border-radius: 4px; font-size: 11px; }