/* =============================================================================
   EQM NOTIFICATION — rendu UNIQUE des toasts du monorepo (cf. CLAUDE.md §4, §17)
   Usage : eqmToast(type, titre, message, duree)  —  cf. js/script-toast.js

   QUATRE COPIES, à garder RIGOUREUSEMENT IDENTIQUES :
     apps/equimondo/css/eqm-notify.css
     apps/gestion/css/eqm-notify.css
     apps/opaddock/assets/css/eqm-notify.css
     shared/assets/css/eqm-notify.css

   La duplication est STRUCTURELLE, pas un oubli : shared/ n'est jamais exposé
   par Apache (CLAUDE.md §0), donc equimondo et gestion ne peuvent pas charger
   depuis shared/ — chaque DocumentRoot doit servir la sienne. Ne modifiez
   JAMAIS une seule copie : c'est ainsi que le back-office s'est retrouvé, des
   mois durant, à afficher « Titre — message » sur une ligne pendant que les
   deux autres applications affichaient la structure à deux lignes du design
   system. Toute évolution se reporte sur les quatre.
   ============================================================================= */

#eqmNotifyContainer {
   position: fixed;
   top: 1.5rem;
   right: 1.5rem;
   z-index: 10003;
   display: flex;
   flex-direction: column;
   gap: .75rem;
   max-width: 400px;
   width: calc(100vw - 2rem);
   pointer-events: none
}

.eqm-notify {
   display: flex;
   align-items: center;
   gap: 1rem;
   padding: 1rem 1.25rem;
   border-radius: 1rem;
   box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .18), 0 0 0 1px rgba(255, 255, 255, .5);
   pointer-events: auto;
   animation: eqmNotifyIn .35s cubic-bezier(.4, 0, .2, 1) forwards;
   transform-origin: top right;
   position: relative;
   overflow: hidden
}

.eqm-notify::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 3px;
   /* La barre se VIDE DE GAUCHE A DROITE. `transform-origin` ne s'herite PAS : sans
      cette ligne le pseudo-element retombe sur la valeur par defaut (50% 50%) et le
      scaleX() le retrecit par les DEUX bouts vers le centre -- la barre paraissait
      decalee, et finissait en point au milieu du toast. Le `top right` porte par
      .eqm-notify sert a son animation d'ENTREE, il ne descend pas jusqu'ici. */
   transform-origin: left center;
   background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .06));
   animation: eqmNotifyProgress var(--eqm-notify-dur, 4000ms) linear forwards
}

.eqm-notify.success::before {
   background: linear-gradient(90deg, var(--primary), var(--primary-light));
   animation: eqmNotifyProgress var(--eqm-notify-dur, 4000ms) linear forwards
}

.eqm-notify.error::before {
   background: linear-gradient(90deg, #ef4444, #f87171);
   animation: eqmNotifyProgress var(--eqm-notify-dur, 4000ms) linear forwards
}

.eqm-notify.info::before {
   background: linear-gradient(90deg, #3b82f6, #60a5fa);
   animation: eqmNotifyProgress var(--eqm-notify-dur, 4000ms) linear forwards
}

.eqm-notify.warning::before {
   background: linear-gradient(90deg, #f59e0b, #fbbf24);
   animation: eqmNotifyProgress var(--eqm-notify-dur, 4000ms) linear forwards
}

@keyframes eqmNotifyProgress {
   from {
      transform: scaleX(1)
   }

   to {
      transform: scaleX(0)
   }
}

.eqm-notify.hide {
   animation: eqmNotifyOut .25s ease forwards
}

@keyframes eqmNotifyIn {
   from {
      opacity: 0;
      transform: translateX(120%) scale(.9)
   }

   to {
      opacity: 1;
      transform: translateX(0) scale(1)
   }
}

@keyframes eqmNotifyOut {
   from {
      opacity: 1;
      transform: translateX(0) scale(1)
   }

   to {
      opacity: 0;
      transform: translateX(120%) scale(.95)
   }
}

.eqm-notify-icon {
   width: 44px;
   height: 44px;
   border-radius: 50%;
   flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.25rem;
   transition: transform .3s
}

.eqm-notify:hover .eqm-notify-icon {
   transform: scale(1.05)
}

.eqm-notify.success {
   background: linear-gradient(135deg, var(--primary-50), var(--primary-100));
   border: 1px solid rgba(var(--primary-rgb), .2)
}

.eqm-notify.success .eqm-notify-icon {
   background: linear-gradient(135deg, var(--primary), var(--primary-dark));
   color: #fff;
   box-shadow: 0 4px 14px -2px rgba(var(--primary-rgb), .5)
}

.eqm-notify.error {
   background: linear-gradient(135deg, #fef2f2, #fee2e2);
   border: 1px solid rgba(239, 68, 68, .2)
}

.eqm-notify.error .eqm-notify-icon {
   background: linear-gradient(135deg, #ef4444, #dc2626);
   color: #fff;
   box-shadow: 0 4px 14px -2px rgba(239, 68, 68, .5)
}

.eqm-notify.info {
   background: linear-gradient(135deg, #eff6ff, #dbeafe);
   border: 1px solid rgba(59, 130, 246, .2)
}

.eqm-notify.info .eqm-notify-icon {
   background: linear-gradient(135deg, #3b82f6, #2563eb);
   color: #fff;
   box-shadow: 0 4px 14px -2px rgba(59, 130, 246, .5)
}

.eqm-notify.warning {
   background: linear-gradient(135deg, #fffbeb, #fef3c7);
   border: 1px solid rgba(245, 158, 11, .2)
}

.eqm-notify.warning .eqm-notify-icon {
   background: linear-gradient(135deg, #f59e0b, #d97706);
   color: #fff;
   box-shadow: 0 4px 14px -2px rgba(245, 158, 11, .5)
}

.eqm-notify-body {
   flex: 1;
   min-width: 0;
   padding-top: 1px;
}

/* Titre en gras sur la première ligne (structure deux lignes du design system :
   titre + message), pour ne plus concaténer avec un tiret cadratin. */
.eqm-notify-title {
   display: block;
   font-size: .94rem;
   font-weight: 700;
   color: var(--slate-800, #1e293b);
   line-height: 1.35;
}
.eqm-notify-title + .eqm-notify-message {
   margin-top: 2px;
   font-weight: 500;
   color: var(--slate-500, #64748b);
}

.eqm-notify-close {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   border: none;
   background: rgba(0, 0, 0, .06);
   color: #64748b;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: .75rem;
   flex-shrink: 0;
   transition: all .2s
}

.eqm-notify-close:hover {
   background: rgba(0, 0, 0, .1);
   color: #1e293b
}

.eqm-notify-message {
   font-size: .9375rem;
   font-weight: 500;
   color: #1e293b;
   line-height: 1.4
}

@media(max-width:640px) {
   #eqmNotifyContainer {
      top: 1rem;
      right: 1rem;
      left: 1rem;
      max-width: none
   }
}

/* Respect de prefers-reduced-motion : pas de glissement ni de barre animée. */
@media (prefers-reduced-motion: reduce) {
   .eqm-notify {
      animation: none;
      opacity: 1;
      transform: none;
   }
   .eqm-notify.hide {
      animation: none;
      opacity: 0;
   }
   .eqm-notify::before,
   .eqm-notify.success::before,
   .eqm-notify.error::before,
   .eqm-notify.info::before,
   .eqm-notify.warning::before {
      animation: none;
   }
   .eqm-notify:hover .eqm-notify-icon {
      transform: none;
   }
}