/* ============================================================
   MonBonVTC — Couche « Gold Moderne »
   Modernise structure / ombres / espacements / typographie.
   NE MODIFIE AUCUNE COULEUR DE CHARTE (doré #C8A84B conservé).
   Chargée en dernier → surcouche additive, retrait = 1 ligne.
   ============================================================ */

:root {
    /* Ombres douces (nouvelles — pas des couleurs de charte) */
    --shadow-sm: 0 1px 2px rgba(15, 15, 15, 0.04), 0 1px 3px rgba(15, 15, 15, 0.05);
    --shadow-md: 0 4px 16px rgba(15, 15, 15, 0.06);
    --shadow-lg: 0 12px 32px rgba(15, 15, 15, 0.10);
    --shadow-gold: 0 4px 14px rgba(200, 168, 75, 0.30);
    --ring-gold: 0 0 0 3px rgba(200, 168, 75, 0.18);

    /* Police moderne — Inter, fallback système identique à la charte */
    --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* --- Typographie raffinée --- */
body {
    font-feature-settings: "ss01", "cv11";
    letter-spacing: -0.01em;
}
h1 { letter-spacing: -0.4px; }
h2 { letter-spacing: -0.3px; }
h3 { letter-spacing: -0.2px; }

/* --- Cartes : ombre douce + arrondi plus généreux --- */
.card {
    border-radius: var(--r-lg);
    border-color: var(--border2);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.card + .card { margin-top: 18px; }

/* --- Boutons : relief doux + micro-lift au survol --- */
.btn {
    border-radius: var(--r-md);
    font-weight: 600;
    transition: background 0.15s, border-color 0.15s, color 0.15s,
                box-shadow 0.15s, transform 0.1s;
}
.btn-primary {
    box-shadow: var(--shadow-gold);
}
.btn-primary:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(200, 168, 75, 0.40);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}
.btn-secondary {
    box-shadow: var(--shadow-sm);
}
.btn-secondary:hover:not(:disabled) {
    border-color: var(--border);
}

/* --- Champs de formulaire : plus aérés, focus doré --- */
.form-input, .form-select, textarea, input[type="text"], input[type="email"],
input[type="tel"], input[type="password"], input[type="number"], input[type="date"] {
    border-radius: var(--r-md);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus, .form-select:focus, textarea:focus,
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="password"]:focus, input[type="number"]:focus, input[type="date"]:focus {
    border-color: var(--gold);
    box-shadow: var(--ring-gold);
    outline: none;
}

/* --- Badges & pills : plus de respiration --- */
.badge {
    padding: 3px 11px;
    letter-spacing: 0.01em;
}

/* --- Alertes : arrondi + relief léger --- */
.alert {
    border-radius: var(--r-md);
    box-shadow: var(--shadow-sm);
}

/* --- Tableaux : entêtes plus douces, lignes aérées --- */
th {
    background: var(--bg);
    font-size: 0.75rem;
}
th, td {
    padding: 13px 14px;
}
tr:hover td {
    background: var(--gold-bg);
}

/* --- Header : ombre douce au lieu d'un trait dur --- */
.nav-header {
    border-bottom: none;
    box-shadow: var(--shadow-sm);
}

/* --- Bottom bar : ombre vers le haut --- */
.nav-bottom {
    border-top: none;
    box-shadow: 0 -1px 3px rgba(15, 15, 15, 0.05), 0 -4px 16px rgba(15, 15, 15, 0.04);
}

/* --- FAB central : lift plus marqué --- */
.nav-bottom__btn-central {
    box-shadow: 0 6px 18px rgba(200, 168, 75, 0.45);
}

/* --- Titres de page : sous-titre discret --- */
.page-subtitle {
    color: var(--text2);
    font-size: 0.95rem;
    margin-top: 2px;
}