/*
 * apps/inflation/static/css/style.css
 * -------------------------------------
 * CSS custom ZBS Inflation : complément Tailwind.
 *
 * PÉRIMÈTRE : variables couleurs, animations calculatrice, overrides responsive.
 * NE GÈRE PAS : layout principal (→ Tailwind), graphiques (→ Chart.js inline).
 */

/* ── Variables couleurs ZBS ─────────────────────────────────────────────── */
:root {
    --zbs-red:    #e63946;
    --zbs-dark:   #111111;
    --zbs-gray:   #f4f4f4;
    --zbs-border: #e0e0e0;
}

/* ── Typographie ──────────────────────────────────────────────────────────── */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Chiffres monospaces cohérents (évite le saut visuel lors des mises à jour) */
.font-mono {
    font-variant-numeric: tabular-nums;
}

/* ── Calculatrice : animation résultat ───────────────────────────────────── */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#zone-resultat {
    animation: fadeInUp 0.3s ease-out;
}

/* Animation du chiffre résultat : compte depuis 0 */
#resultat-valeur {
    display: inline-block;
    transition: opacity 0.2s ease;
}

#resultat-valeur.updating {
    opacity: 0.3;
}

/* ── Formulaire calculatrice ─────────────────────────────────────────────── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

/* Focus ring ZBS (remplace l'outline bleu browser par défaut) */
input:focus,
select:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--zbs-dark) !important;
}

/* ── Tableaux ─────────────────────────────────────────────────────────────── */
table {
    border-spacing: 0;
}

/* Ligne tableau surbrillance stable */
tr:hover td {
    transition: background-color 0.1s ease;
}

/* ── Sélecteur d'année (page par-poste) ─────────────────────────────────── */
select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 36px;
    cursor: pointer;
}

/* ── Nav : lien actif ────────────────────────────────────────────────────── */
header nav a[aria-current="page"],
header nav a.active {
    color: var(--zbs-red);
}

/* ── Barre de progression postes COICOP ──────────────────────────────────── */
.barre-poste {
    transition: width 0.4s ease;
}

/* ── Responsive : mobile ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
    /* Réduire la taille du résultat sur petits écrans */
    #resultat-valeur {
        font-size: 2.5rem;
    }

    /* Tableau : cacher la colonne barre sur mobile */
    .col-barre {
        display: none;
    }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
    header,
    footer,
    #form-calculatrice,
    #graphique-ipc {
        display: none;
    }

    body {
        font-size: 11pt;
        color: black;
    }

    table {
        font-size: 10pt;
    }
}