/* ═══════════════════════════════════════════════════════════════════ errors.css — Composants d'erreur & feedback — AECJ Les Mureaux Dépend de tokens.css (chargé avant dans ). Référence : GESTION_ERREURS.md ═══════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────────── 1. MESSAGES INLINE (champs de formulaire) — La classe .error sur .form-field est définie dans tokens.css. — Ce fichier ajoute l'animation et le message succès. ────────────────────────────────────────────────────────────────── */ .form-field.error input, .form-field.error select, .form-field.error textarea { animation: shake 0.35s ease; } .form-field .field-error-msg { display: none; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--red); line-height: 1.4; margin-top: 2px; } .form-field.error .field-error-msg { display: flex; } .field-success-msg { display: none; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--green-mid); line-height: 1.4; margin-top: 2px; } .form-field.success .field-success-msg { display: flex; } /* Animation légère sur erreur */ @keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .form-field.error input, .form-field.error select, .form-field.error textarea { animation: none; outline: 2px solid var(--red); outline-offset: 1px; } } /* ────────────────────────────────────────────────────────────────── 2. TOAST — notifications non-bloquantes ────────────────────────────────────────────────────────────────── */ #toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; max-width: min(420px, calc(100vw - 32px)); } .toast { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: var(--radius-sm); box-shadow: 0 4px 20px rgba(0, 0, 0, .12); pointer-events: all; /* Caché par défaut — visible via .toast-visible */ opacity: 0; transform: translateY(12px) scale(.97); transition: none; } .toast-visible { opacity: 1; transform: translateY(0) scale(1); transition: opacity 0.25s ease, transform 0.25s ease; } .toast-hiding { opacity: 0; transform: translateY(8px) scale(.96); animation: toastHide 0.3s ease forwards; } @keyframes toastHide { to { opacity: 0; transform: translateY(8px) scale(.95); } } /* Variantes de couleur */ .toast-success { background-color: var(--green-pale); border-left: 4px solid var(--green); color: var(--ink); } .toast-success .toast-icon { color: var(--green); } .toast-error { background-color: var(--red-light); border-left: 4px solid var(--red); color: var(--ink); } .toast-error .toast-icon { color: var(--red); } .toast-warning { background-color: var(--orange-light); border-left: 4px solid var(--orange-dark); color: var(--ink); } .toast-warning .toast-icon { color: var(--orange-dark); } .toast-info { background-color: var(--blue-light); border-left: 4px solid var(--blue); color: var(--ink); } .toast-info .toast-icon { color: var(--blue); } /* Icône */ .toast-icon { flex-shrink: 0; margin-top: 1px; } /* Message */ .toast-message { flex: 1; font-size: 14px; line-height: 1.5; font-weight: 400; } /* Bouton fermeture */ .toast-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: none; border: none; cursor: pointer; padding: 2px; border-radius: 4px; color: var(--muted); transition: color 0.15s ease, background-color 0.15s ease; margin-top: -2px; margin-right: -2px; } .toast-close:hover { color: var(--ink); background-color: rgba(0, 0, 0, .06); } .toast-close:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; } /* Mobile : pleine largeur en bas */ @media (max-width: 480px) { #toast-container { bottom: 16px; right: 16px; left: 16px; max-width: none; } } @media (prefers-reduced-motion: reduce) { .toast, .toast-visible, .toast-hiding { transition: none; animation: none; opacity: 1; transform: none; } } /* ────────────────────────────────────────────────────────────────── 3. ALERTE DOUBLON — bannière bloquante ────────────────────────────────────────────────────────────────── */ .alert-doublon { display: flex; align-items: flex-start; gap: 16px; padding: 20px 24px; background-color: var(--red-light); border: 2px solid var(--red); border-radius: var(--radius-md); margin-bottom: 24px; animation: alertIn 0.3s ease; } @keyframes alertIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .alert-doublon-icon { flex-shrink: 0; color: var(--red); margin-top: 2px; } .alert-doublon-content { flex: 1; } .alert-doublon-content strong { display: block; font-size: 16px; font-weight: 600; color: var(--red); margin-bottom: 6px; } .alert-doublon-content p { font-size: 14px; color: var(--ink); line-height: 1.5; margin-bottom: 4px; } .alert-doublon-content p:last-child { margin-bottom: 0; } .alert-doublon-actions { flex-shrink: 0; display: flex; align-items: center; } @media (max-width: 680px) { .alert-doublon { flex-direction: column; gap: 12px; } .alert-doublon-actions { width: 100%; } .alert-doublon-actions .btn { width: 100%; justify-content: center; } } @media (prefers-reduced-motion: reduce) { .alert-doublon { animation: none; } } /* ────────────────────────────────────────────────────────────────── 4. BOUTON EN CHARGEMENT ────────────────────────────────────────────────────────────────── */ .btn-loading { pointer-events: none; opacity: .8; cursor: not-allowed; } .btn-spinner { animation: spin 0.7s linear infinite; flex-shrink: 0; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn-spinner { animation: none; } } /* ────────────────────────────────────────────────────────────────── 5. BANNIÈRE D'ERREUR GÉNÉRIQUE (server / network) ────────────────────────────────────────────────────────────────── */ .banner-error { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; background-color: var(--red-light); border-left: 4px solid var(--red); border-radius: var(--radius-sm); margin-bottom: 20px; } .banner-error__icon { color: var(--red); flex-shrink: 0; margin-top: 1px; } .banner-error__text { flex: 1; font-size: 14px; color: var(--ink); line-height: 1.5; } .banner-error__text strong { color: var(--red); display: block; margin-bottom: 4px; } .banner-warning { display: flex; align-items: flex-start; gap: 14px; padding: 16px 20px; background-color: var(--orange-light); border-left: 4px solid var(--orange-dark); border-radius: var(--radius-sm); margin-bottom: 20px; } .banner-warning__icon { color: var(--orange-dark); flex-shrink: 0; margin-top: 1px; } .banner-warning__text { flex: 1; font-size: 14px; color: var(--ink); line-height: 1.5; } .banner-warning__text strong { color: var(--orange-dark); display: block; margin-bottom: 4px; } /* ────────────────────────────────────────────────────────────────── 6. STEPPER — badge erreur sur étape inactive ────────────────────────────────────────────────────────────────── */ .step-circle.has-error { background-color: var(--red) !important; border-color: var(--red) !important; color: var(--white) !important; } .step-circle.has-error::after { content: '!'; font-weight: 700; } /* ────────────────────────────────────────────────────────────────── 7. ÉTAT EMPTY — liste vide (admin, export) ────────────────────────────────────────────────────────────────── */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; text-align: center; color: var(--muted); gap: 12px; } .empty-state svg { color: var(--border); } .empty-state p { font-size: 15px; max-width: 360px; }