/* ==========================================================================
   1. CONFIGURATION & THÈME
   ========================================================================== */
:root {
    --blue-amix: #1a2a5a;
    --blue-hover: #2a437c;
    /* Couleurs des pondérations */
    --color-a: #1a2a5a;
    --color-c: #06d6a0;
    --color-z: #ffcc00;
    
    --bg-light: #f4f5fd;
    --shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* ==========================================================================
   2. BASES & LAYOUT
   ========================================================================== */
body {
    margin: 0;
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--bg-light);
    color: #333;
    line-height: 1.6;
}

.container-outil {
    max-width: 1500px;
    margin: 40px auto;
    padding: 0 20px;
}

.layout-wrapper {
    display: flex;
    gap: 25px;
    flex-wrap: wrap; /* Colonnes l'une sous l'autre sur petit écran */
}

.main-column { flex: 3; min-width: 320px; }
.sidebar { flex: 1; min-width: 300px; display: flex; flex-direction: column; gap: 20px; }

/* ==========================================================================
   3. COMPOSANTS (CARTES & TABLES)
   ========================================================================== */
.feature-card {
    background: white;
    border-radius: 12px;
    box-shadow: var(--shadow);
    margin-bottom: 25px;
    overflow: hidden;
}

.feature-header {
    background: var(--blue-amix);
    color: white;
    padding: 15px 25px;
}

.feature-header h1, .feature-header h2, .feature-header h3 { margin: 0; font-size: 1.2rem; }
.feature-body { padding: 25px; }

/* Tableaux */
.table-responsive { overflow-x: auto; margin-bottom: 20px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px; border: 1px solid #dee2e6; text-align: center; }
th { background: #f8f9fa; font-size: 0.8rem; color: #666; }

/* Champs de saisie */
.style_input {
    width: 60px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
}

/* Couleur de chaque pondération (A, C, Z) */
.pond-a, .pond-a-head, input[name="pond_A"] { color: var(--color-a) !important; font-weight: bold; }
.pond-c, .pond-c-head, input[name="pond_C"] { color: var(--color-c) !important; font-weight: bold; }
.pond-z, .pond-z-head, input[name="pond_Z"] { color: var(--color-z) !important; font-weight: bold; }

/* Cases de résultat (lecture seule) */
.res-val { background: #f0f2f8 !important; border-style: solid !important; }

/* ==========================================================================
   4. ACTIONS & GRAPHIQUES
   ========================================================================== */
.action-buttons { display: flex; gap: 15px; justify-content: center; margin: 20px 0; }

.btn-amix {
    padding: 12px 25px;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.btn-calc { background: var(--blue-amix); color: white; }
.btn-calc:hover { background: var(--blue-hover); transform: translateY(-2px); }
.btn-reset { background: #e0e0e0; color: #555; }

.charts-container { display: flex; gap: 15px; margin-top: 30px; flex-wrap: wrap; }
.chart-item { flex: 2.5; min-height: 400px; }
.chart-item-small { flex: 1; min-height: 400px; min-width: 200px; }

/* ==========================================================================
   5. FOOTER
   ========================================================================== */
.site-footer { background: var(--blue-amix); color: white; padding: 40px 20px; text-align: center; margin-top: 50px; }
.footer-logo-img { height: 45px; filter: brightness(0) invert(1); margin-bottom: 15px; }
.site-footer a { color: var(--color-c) !important; text-decoration: none; }