/**
 * FICHE-PAIE.FR - Fenêtre d'alerte du site (lot 8, 15/10/2026)
 *
 * Composant de /js/components/fenetre-alerte.js : fenêtre centrée qui
 * remplace alert(). Mobile d'abord ; jetons de /design-system/tokens.css.
 */

.fp-alerte {
    position: fixed;
    inset: 0;
    /* Au-dessus du header et des bandeaux du site (z-index 10100 au plus) */
    z-index: 10200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: rgba(30, 55, 96, 0.55);
    animation: fp-alerte-fondu var(--gp-duree-ui) var(--gp-courbe-ui);
}

.fp-alerte__boite {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 2 * var(--space-md));
    overflow-y: auto;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    background: var(--gp-blanc);
    border-radius: var(--gp-radius-xl);
    box-shadow: var(--gp-ombre-bulletin);
    text-align: center;
    font-family: var(--gp-font-corps);
}

.fp-alerte__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
    border-radius: 50%;
}

.fp-alerte__boite--erreur .fp-alerte__icone {
    color: var(--gp-error);
    background: var(--ec-error-pale);
    border: 1px solid var(--ec-error-bordure);
}

.fp-alerte__boite--info .fp-alerte__icone {
    color: var(--gp-bleu-primaire);
    background: var(--gp-pastille);
    border: 1px solid var(--ec-info-bordure);
}

.fp-alerte__titre {
    margin: 0 0 var(--space-sm);
    font-family: var(--gp-font-titres);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.3;
    color: var(--gp-bleu-marine);
}

.fp-alerte__message {
    margin: 0 0 var(--space-lg);
    font-size: var(--font-size-base);
    line-height: 1.55;
    color: var(--gp-gris);
}

.fp-alerte__bouton {
    width: 100%;
    min-height: var(--touch-target-min);
    padding: var(--space-sm) var(--space-lg);
    border: 0;
    border-radius: var(--gp-radius-md);
    background: var(--gp-bleu-primaire);
    color: var(--gp-blanc);
    font-family: var(--gp-font-corps);
    font-size: var(--font-size-base);
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--gp-duree-ui) var(--gp-courbe-ui);
}

.fp-alerte__bouton:hover {
    opacity: 0.9;
}

.fp-alerte__croix {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--gp-gris);
    cursor: pointer;
}

.fp-alerte__croix:hover {
    background: var(--gp-gris-clair);
}

.fp-alerte__bouton:focus-visible,
.fp-alerte__croix:focus-visible {
    outline: none;
    box-shadow: var(--ec-focus);
}

/* Page figée sous la fenêtre */
html.fp-alerte-ouverte,
html.fp-alerte-ouverte body {
    overflow: hidden;
}

@media (min-width: 600px) {
    .fp-alerte__boite {
        padding: var(--space-xl);
    }

    .fp-alerte__bouton {
        width: auto;
        min-width: 180px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fp-alerte {
        animation: none;
    }
}

@keyframes fp-alerte-fondu {
    from { opacity: 0; }
    to { opacity: 1; }
}