@charset "utf-8";
/* ============================================================
   notification.css — STAC · Katherine Oxford
   LUX WEB SERVICES · Marc Merlin BAPPA
   Version : 1.0 · Mars 2026
   Design Dialog validé — 4 types : info, success, warning, danger
   Importé dans header-footer.css
   ============================================================ */

/* ============================================================
   OVERLAY LOADER — fond semi-transparent STAC
   (complète les règles de header-footer.css)
   ============================================================ */
#loader,
#loader2,
#loader3 {
    display               : none;
    position              : fixed;
    inset                 : 0;
    justify-content       : center;
    align-items           : center;
    z-index               : 1000;
}

#loader  { background: rgba(13, 37, 80, 0.55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 1000; }
#loader2 { background: rgba(13, 37, 80, 0.65); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 1005; }
#loader3 { background: rgba(13, 37, 80, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); z-index: 1010; }

#loader.show,
#loader2.show,
#loader3.show {
    display               : flex !important;
    justify-content       : center !important;
    align-items           : center !important;
}

#loader[style*="display: block"],
#loader[style*="display:block"],
#loader2[style*="display: block"],
#loader2[style*="display:block"],
#loader3[style*="display: block"],
#loader3[style*="display:block"] {
    display               : flex !important;
    justify-content       : center !important;
    align-items           : center !important;
}

/* ============================================================
   DIALOG — boîte de notification principale
   ============================================================ */
.lightbox-notification {
    background            : #FFFFFF;
    border-radius         : 18px;
    width                 : 100%;
    max-width             : 450px;
    overflow              : hidden;
    box-shadow            : 0 24px 60px rgba(0,0,0,0.22), 0 6px 18px rgba(0,0,0,0.10);
    transform             : scale(0.90) translateY(20px);
    transition            : transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.35s ease;
    opacity               : 0;
}

.lightbox-notification.show {
    transform             : scale(1) translateY(0);
    opacity               : 1;
}

/* ============================================================
   HEADER — dégradé par type
   ============================================================ */
.entete-lightbox-notification {
    padding               : 18px 20px 16px;
    position              : relative;
    overflow              : hidden;
    display               : flex;
    align-items           : center;
    gap                   : 12px;
}

/* Décors anneaux */
.entete-lightbox-notification::before {
    content               : '';
    position              : absolute;
    width                 : 160px;
    height                : 160px;
    border-radius         : 50%;
    border                : 1px solid rgba(255,255,255,0.07);
    top                   : -70px;
    right                 : -40px;
    pointer-events        : none;
}

.entete-lightbox-notification::after {
    content               : '';
    position              : absolute;
    width                 : 100px;
    height                : 100px;
    border-radius         : 50%;
    border                : 1px solid rgba(232,160,32,0.14);
    bottom                : -35px;
    left                  : 20px;
    pointer-events        : none;
}

/* Dégradés par type */
.notification-info    .entete-lightbox-notification { background: linear-gradient(135deg, #0a1628 0%, #0B2E5E 40%, #024E9E 100%); }
.notification-success .entete-lightbox-notification { background: linear-gradient(135deg, #0d2b0d 0%, #1E6B1E 45%, #388E3C 100%); }
.notification-warning .entete-lightbox-notification { background: linear-gradient(135deg, #0a1628 0%, #0B2E5E 40%, #024E9E 100%); }
.notification-danger  .entete-lightbox-notification { background: linear-gradient(135deg, #3d0808 0%, #B91C1C 50%, #EF4444 100%); }

/* ============================================================
   ICÔNE dans le header
   ============================================================ */
.notification-icon {
    width                 : 40px;
    height                : 40px;
    border-radius         : 12px;
    display               : flex;
    align-items           : center;
    justify-content       : center;
    flex-shrink           : 0;
    background            : rgba(232,160,32,0.15);
    border                : 1.5px solid rgba(232,160,32,0.30);
    position              : relative;
    z-index               : 1;
    font-size             : 16px;
    color                 : #CC9428;
}

/* ============================================================
   TITRE & SOUS-TITRE dans le header
   ============================================================ */
.entete-lightbox-notification .notif-titles {
    flex                  : 1;
    position              : relative;
    z-index               : 1;
    min-width             : 0;
}

#titre-lightbox {
    display               : block;
    font-size             : 16px;
    font-weight           : 700;
    color                 : #FFFFFF;
    letter-spacing        : -0.2px;
    font-family           : 'Outfit', sans-serif;
    white-space           : nowrap;
    overflow              : hidden;
    text-overflow         : ellipsis;
}

.notif-subtitle {
    display               : block;
    font-size             : 12px;
    color                 : rgba(255,255,255,0.45);
    margin-top            : 2px;
}

.notif-subtitle span {
    color                 : #CC9428;
    font-weight           : 600;
}

/* ============================================================
   BOUTON FERMER
   ============================================================ */
.close-lightbox-notification {
    width                 : 28px;
    height                : 28px;
    border-radius         : 6px;
    border                : 1.5px solid rgba(255,255,255,0.40);
    background            : transparent;
    color                 : rgba(255,255,255,0.55);
    display               : flex;
    align-items           : center;
    justify-content       : center;
    cursor                : pointer;
    font-size             : 12px;
    font-weight           : 700;
    flex-shrink           : 0;
    line-height           : 1;
    position              : relative;
    z-index               : 1;
    transition            : all 0.2s;
    font-family           : inherit;
}

.close-lightbox-notification:hover {
    background            : rgba(239,68,68,0.80);
    border-color          : transparent;
    color                 : white;
}

/* ============================================================
   CORPS — message texte
   ============================================================ */
.contenu-lightbox-notification {
    padding               : 18px 22px 4px;
    font-size             : 13.5px;
    color                 : #64748B;
    line-height           : 1.7;
    text-align            : left;
    background            : #FFFFFF;
}

/* ============================================================
   BOUTONS D'ACTION
   ============================================================ */
.conteneur-btn-lightbox-notification {
    padding               : 14px 22px 20px;
    background            : #FFFFFF;
    display               : flex;
    gap                   : 8px;
}

.btn-lightbox-notification {
    flex                  : 1;
    padding               : 11px 16px;
    border-radius         : 9px;
    border                : none;
    font-size             : 13.5px;
    font-weight           : 600;
    cursor                : pointer;
    font-family           : 'Outfit', sans-serif;
    color                 : #1A202C;
    text-align            : center;
    text-decoration       : none;
    display               : inline-flex;
    align-items           : center;
    justify-content       : center;
    transition            : background 0.2s, opacity 0.2s;
    min-width             : 0;
    background            : #FFFFFF;
}

.btn-lightbox-notification:hover { opacity: 0.87; color: #FFFFFF; }

/* Boutons outline — bordure colorée + texte coloré + fond blanc */
.btn-lightbox-notification {
    background            : #FFFFFF;
    color                 : #1A202C;
}

/* Info — bouton unique outline bleu */
.notification-info    .btn-lightbox-notification:first-child { border: 2px solid #024E9E !important; color: #024E9E; }
.notification-info    .btn-lightbox-notification:first-child:hover { background: #EEF4FF; opacity: 1; }

/* Succès — bouton unique outline vert */
.notification-success .btn-lightbox-notification:first-child { border: 2px solid #1E6B1E !important; color: #1E6B1E; }
.notification-success .btn-lightbox-notification:first-child:hover { background: #f0f7f0; opacity: 1; }

/* Avertissement — Annuler ghost neutre | Confirmer outline vert */
.notification-warning .btn-lightbox-notification:first-child { border: 2px solid #E2E8F0 !important; color: #64748B; }
.notification-warning .btn-lightbox-notification:first-child:hover { background: #F8FAFC; opacity: 1; }
.notification-warning .btn-lightbox-notification:last-child  { border: 2px solid #1E6B1E !important; color: #1E6B1E; }
.notification-warning .btn-lightbox-notification:last-child:hover  { background: #f0f7f0; opacity: 1; }

/* Danger — Rester outline navy | Se reconnecter outline rouge */
.notification-danger  .btn-lightbox-notification:first-child { border: 2px solid #0B2E5E !important; color: #0B2E5E; }
.notification-danger  .btn-lightbox-notification:first-child:hover { background: #EEF4FF; opacity: 1; }
.notification-danger  .btn-lightbox-notification:last-child  { border: 2px solid #B91C1C !important; color: #B91C1C; }
.notification-danger  .btn-lightbox-notification:last-child:hover  { background: #FEF2F2; opacity: 1; }

/* ============================================================
   ANIMATION D'ENTRÉE — notification
   ============================================================ */
@keyframes notifSlideIn {
    0%   { transform: scale(0.80) translateY(40px); opacity: 0; }
    50%  { transform: scale(1.03) translateY(-6px); opacity: 1; }
    75%  { transform: scale(0.98) translateY(2px); opacity: 1; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

@keyframes notifIconPulse {
    0%   { transform: scale(0.5) rotate(-15deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.lightbox-notification.animated {
    animation: notifSlideIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.lightbox-notification.animated .notification-icon {
    animation: notifIconPulse 0.5s 0.15s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}