/* ============================================
   Inputs / Select
   Champ select avec flèche SVG custom.
   ============================================ */

.form-group select,
select {
    width: 100%;
    height: 2.5rem;
    padding: 0 var(--spacing-md);
    border: 1px solid var(--slate-300);
    border-radius: var(--radius-md);
    font-size: var(--font-base);
    font-family: inherit;
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: all var(--transition-base);
    box-sizing: border-box;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"%3E%3Cpath fill="%2364748b" d="M4 6l4 4 4-4z"/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
    padding-right: 2.5rem;
}

/* ===== DARK MODE ===== */
body.dark-mode .form-group select,
body.dark-mode select {
    /* Swap SVG arrow to a lighter shade for dark backgrounds */
    background-image: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"%3E%3Cpath fill="%2394a3b8" d="M4 6l4 4 4-4z"/%3E%3C/svg%3E');
}