/* ── Notifications toast ([U1]) ─────────────────────────────────────────── */ .notify-container { position: fixed; /* Sous la pile de boutons fixes haut-droite (Aide → Prévisualiser → Signaler un bug) pour ne plus la recouvrir (chantier UI/UX n°10). */ top: 150px; right: 12px; z-index: 9999; display: flex; flex-direction: column; gap: 0.6rem; max-width: min(360px, 90vw); pointer-events: none; /* seuls les toasts captent le clic */ } /* Version compacte : la pile de boutons est plus courte sur petit écran. */ @media (max-width: 768px) { .notify-container { top: 132px; right: 8px; } } .notify { pointer-events: auto; padding: 0.75rem 1rem; border-radius: 6px; color: #fff; font-size: 0.95rem; line-height: 1.35; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18); cursor: pointer; opacity: 0; transform: translateX(20px); transition: opacity 0.25s ease, transform 0.25s ease; border-left: 5px solid rgba(255, 255, 255, 0.6); word-wrap: break-word; white-space: pre-line; /* conserve les retours à la ligne des messages */ } .notify-visible { opacity: 1; transform: translateX(0); } /* Charte CNED : turquoise (succès/info), rose (erreur), ambre (avertissement) */ .notify-success { background: #2da288; } .notify-info { background: #00bcb4; } .notify-warning { background: #c47f00; color: #fff; } .notify-error { background: #ae2585; } /* ── Overlay d'import en cours ([U2]) ───────────────────────────────────── */ /* La classe `importing` est posée sur pendant le parsing GIFT. */ body.importing::after { content: "Importation en cours…"; position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding-top: 4rem; background: rgba(255, 255, 255, 0.7); color: #2da288; font-size: 1.1rem; font-weight: bold; } body.importing::before { content: ""; position: fixed; top: 50%; left: 50%; z-index: 9999; width: 48px; height: 48px; margin: -64px 0 0 -24px; border: 5px solid #d9efe9; border-top-color: #2da288; border-radius: 50%; animation: notify-spin 0.8s linear infinite; } @keyframes notify-spin { to { transform: rotate(360deg); } }