/** Composants .app-card, .app-badge, .app-alert, .app-input */
/* ─────────────────────────────────────────────────────────────────────────
   2. RESET MINIMAL & BASE
   ───────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
/* Note : on N'APPLIQUE PAS de styles sur body pour éviter d'écraser ceux
   qui existent déjà dans les <style> inline des pages. La police globale est
   définie au cas par cas dans chaque page. */


/* ─────────────────────────────────────────────────────────────────────────
   3. COMPOSANTS RÉUTILISABLES (préfixés .app-* pour éviter les conflits)
   ───────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════
   .app-btn — DÉPLACÉ dans css/components/buttons.css (chantier #2)
   ─────────────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════
   .app-card — Cartes (refonte UI 2026, réf Pennylane)
   Bordure 1px nette, plus d'ombre portée. Plus pro, plus net.
   ─────────────────────────────────────────────────────────────────────── */
.app-card {
    background: var(--color-bg-surface);
    border: var(--border-card);
    border-radius: var(--radius-lg);
    box-shadow: none;
    overflow: hidden;
}
.app-card__header {
    padding: var(--space-4) var(--space-5);
    border-bottom: var(--border-subtle);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}
.app-card__title {
    margin: 0;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--gray-900);
}
.app-card__body { padding: var(--space-5); }


/* ═══════════════════════════════════════════════════════════════════════
   .app-badge — Badges de statut (refonte UI 2026, réf Pennylane)
   Pastel + texte foncé, height fixée à 22px, capitalize.
   ─────────────────────────────────────────────────────────────────────── */
.app-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    height: 22px;
    font-size: var(--text-xs);
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-sm);
    background: var(--gray-100);
    color: var(--gray-700);
    white-space: nowrap;
    text-transform: capitalize;
    letter-spacing: 0;
}
.app-badge--success { background: var(--color-success-bg); color: var(--color-success-text); }
.app-badge--warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.app-badge--danger  { background: var(--color-danger-bg);  color: var(--color-danger-text);  }
.app-badge--info    { background: var(--brand-blue-soft);  color: var(--color-info-text);    }


/* ═══════════════════════════════════════════════════════════════════════
   .app-alert — Encadrés d'information
   ─────────────────────────────────────────────────────────────────────── */
.app-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-size: var(--text-base);
    line-height: 1.5;
}
.app-alert__icon { flex-shrink: 0; margin-top: 1px; }
.app-alert--success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success-border);
}
.app-alert--warning {
    background: var(--color-warning-bg);
    color: var(--color-warning-text);
    border-color: var(--color-warning-border);
}
.app-alert--danger {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
    border-color: var(--color-danger-border);
}
.app-alert--info {
    background: var(--color-info-bg);
    color: var(--color-info-text);
    border-color: var(--color-info-border);
}


/* ═══════════════════════════════════════════════════════════════════════
   .app-input / .app-label — Formulaires (refonte UI 2026, réf Pennylane)
   Fond blanc (pas gris), bordure 1px nette, focus avec bordure bleue
   plus halo discret.
   ─────────────────────────────────────────────────────────────────────── */
.app-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--gray-700);
}
.app-input,
.app-textarea,
.app-select {
    width: 100%;
    padding: 8px 12px;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--gray-900);
    background: var(--color-bg-surface);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.app-input::placeholder,
.app-textarea::placeholder { color: var(--gray-400); }
.app-input:hover,
.app-textarea:hover,
.app-select:hover { border-color: var(--gray-300); }
.app-input:focus,
.app-textarea:focus,
.app-select:focus {
    outline: none;
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 110, 185, 0.10);
}
.app-input--error { border-color: var(--color-danger); }
.app-input--error:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12); }


/* ═══════════════════════════════════════════════════════════════════════
   .app-modal — DÉPLACÉ dans css/components/modal.css (chantier #3)
   ─────────────────────────────────────────────────────────────────────── */


/* ═══════════════════════════════════════════════════════════════════════
   .app-table + tri — DÉPLACÉS dans css/components/table.css (chantier #4)
   ─────────────────────────────────────────────────────────────────────── */