/* ═══════════════════════════════════════════════════════════ Boîtes de dialogue de confirmation et d'information. Remplacent window.confirm et window.alert, qui affichaient une boîte système : police du navigateur, bouton « OK » en anglais sur certaines machines, et surtout le nom de l'hôte en en-tête — « localhost indique… » au milieu d'un espace prestataire soigné. Une seule feuille pour tout le site : les couleurs passent par des variables, et l'administration retend la sienne sur son . Le reste — rayons, ombre, typographie — est commun, parce qu'une confirmation n'est pas un endroit où se distinguer. ═══════════════════════════════════════════════════════════ */ :root { --uic-accent: #c4855c; --uic-accent-2: #b07444; --uic-titre: #1a1a2e; --uic-texte: #4a4648; --uic-bord: #eceae6; --uic-survol: #f7f5f2; } /* Gamme de l'administration : le même indigo/violet que ses en-têtes et ses boutons. */ body[data-uic-theme="admin"] { --uic-accent: #6366f1; --uic-accent-2: #8b5cf6; --uic-titre: #1f2937; --uic-texte: #4b5563; --uic-bord: #e5e7eb; --uic-survol: #f9fafb; } .uic__dialog { max-width: 400px; } .uic__content { border: none; border-radius: 18px; background: #fff; box-shadow: 0 18px 48px rgba(16, 15, 20, .18); overflow: hidden; } .uic__body { padding: 1.75rem 1.75rem 1.25rem; text-align: center; } .uic__icon { width: 46px; height: 46px; margin: 0 auto .9rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.15rem; background: var(--uic-survol); color: var(--uic-accent); } .uic__title { margin: 0 0 .35rem; font-size: 1rem; font-weight: 700; color: var(--uic-titre); } /* pre-line : les messages repris de window.confirm portent des retours à la ligne, qui séparaient l'action de sa conséquence. Les aplatir rendait un pavé illisible. */ .uic__message { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--uic-texte); white-space: pre-line; } .uic__actions { display: flex; gap: .5rem; padding: 0 1.75rem 1.5rem; } .uic__btn { flex: 1; padding: .58rem 1rem; border: 1px solid transparent; border-radius: 11px; font-size: .84rem; font-weight: 600; cursor: pointer; transition: background .15s, filter .15s; } .uic__btn:focus-visible { outline: 2px solid var(--uic-accent); outline-offset: 2px; } .uic__btn--ghost { background: #fff; border-color: var(--uic-bord); color: var(--uic-texte); } .uic__btn--ghost:hover { background: var(--uic-survol); } .uic__btn--primary { background: linear-gradient(135deg, var(--uic-accent), var(--uic-accent-2)); color: #fff; } .uic__btn--primary:hover { filter: brightness(1.07); } /* ── Variantes ───────────────────────────────────────────── Seules l'icône et le bouton d'action changent : c'est ce qui distingue « on retire une ligne » de « on supprime une entreprise et tout ce qui y pend ». */ .uic--danger .uic__icon { background: #fdf2f2; color: #e11d48; } .uic--danger .uic__btn--primary { background: linear-gradient(135deg, #e11d48, #be123c); } .uic--warning .uic__icon { background: #fef3c7; color: #b45309; } .uic--warning .uic__btn--primary { background: linear-gradient(135deg, #f59e0b, #d97706); } .uic--success .uic__icon { background: #d1fae5; color: #059669; } .uic--success .uic__btn--primary { background: linear-gradient(135deg, #10b981, #059669); } .uic--info .uic__icon { background: #eef2ff; color: #4f46e5; } /* Information : un seul bouton, qui n'a aucune raison de s'étirer sur toute la largeur. */ .uic--alerte .uic__actions { justify-content: center; } .uic--alerte .uic__btn { flex: 0 0 auto; min-width: 132px; }