:root {
    --noir-950: #fbfaff;
    --noir-900: #f6f5fa;
    --noir-800: #ffffff;
    --noir-700: #e3e0ec;
    --noir-600: #d0cbe0;
    --noir-500: #8a84a0;
    --noir-400: #6b6480;
    --noir-300: #4c4560;
    --noir-100: #201c30;

    --or-400: #7c3aed;
    --or-500: #8b5cf6;
    --or-600: #6d28d9;
    --or-bg: rgba(139, 92, 246, 0.12);

    --cuivre-400: #db2777;
    --cuivre-bg: rgba(219, 39, 119, 0.10);

    --vert-400: #16a34a;
    --vert-bg: rgba(22, 163, 74, 0.10);

    --rouge-400: #dc2626;
    --rouge-bg: rgba(220, 38, 38, 0.10);
}

.barre-recherche {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a84a0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}
.bouton-recherche::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23201c30' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}