/* Micro-interaction : coche de validation au clic sur "Valider" */
.a2sa-search-btn-wrap {
    position: relative;
}

.a2sa-search-check {
    position: absolute;
    top: 50%;
    right: -12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2ecc71;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transform: translate(50%, -50%) scale(0);
    pointer-events: none;
    z-index: 2;
}

.a2sa-search-check svg {
    width: 14px;
    height: 14px;
}

.a2sa-search-check.is-visible {
    animation: a2sa-check-pop 1.1s ease forwards;
}

@keyframes a2sa-check-pop {
    0%   { transform: translate(50%, -50%) scale(0); opacity: 0; }
    15%  { transform: translate(50%, -50%) scale(1.15); opacity: 1; }
    30%  { transform: translate(50%, -50%) scale(1); opacity: 1; }
    78%  { transform: translate(50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(50%, -50%) scale(0.85); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .a2sa-search-check.is-visible {
        animation: none;
        opacity: 1;
        transform: translate(50%, -50%) scale(1);
        transition: opacity 0.5s ease 0.5s;
    }
}

/* Meilleure visibilité des liens dans le bloc résultats de la page d'accueil
   uniquement (fond bleu marine) : le bleu clair d'origine se distingue mal du
   texte blanc environnant. Scopé à #a2sa-search-results-home pour ne pas
   affecter les fiches formation. */
#a2sa-search-results-home a {
    color: #ff5a52;
}

#a2sa-search-results-home a:hover,
#a2sa-search-results-home a:focus {
    color: #ff8a83;
}

/* Micro-interactions du moteur de recherche : le passage grisé/inactif →
   actif se faisait sans aucune transition ni retour visuel. */
div.recherche select {
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, opacity 0.25s ease;
}

/* Bref halo lumineux quand un champ vient d'être activé et repeuplé
   (ex. "Lieu" après le choix de la formation, "Date" après le choix de
   la ville) — feedback immédiat, cf. Doherty Threshold. */
.field-updated {
    animation: a2sa-field-updated 0.9s ease;
}

@keyframes a2sa-field-updated {
    0%   { box-shadow: 0 0 0 0 rgba(45, 79, 129, 0.45); border-color: #2D4F81; }
    40%  { box-shadow: 0 0 0 5px rgba(45, 79, 129, 0.18); border-color: #2D4F81; }
    100% { box-shadow: 0 0 0 0 rgba(45, 79, 129, 0); }
}

/* Le champ "Lieu" pendant l'attente de la réponse réseau (choix de
   formation) : signale qu'une mise à jour est en cours plutôt que de
   basculer brutalement de gris à blanc sans transition. */
div.recherche select.is-loading {
    background-image: linear-gradient(90deg, transparent 0%, rgba(45, 79, 129, 0.12) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: a2sa-field-loading 1.1s ease-in-out infinite;
}

@keyframes a2sa-field-loading {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    div.recherche select {
        transition: none;
    }
    .field-updated {
        animation: none;
    }
    div.recherche select.is-loading {
        animation: none;
    }
}

/* ============================================================
   Popup "plus de session disponible" — s'affiche quand la formation
   choisie n'a plus aucune ville/date à venir (saison terminée), pour
   orienter vers le formulaire de contact plutôt que laisser un champ
   "Lieu" vide sans explication.
   ============================================================ */
.a2sa-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(13, 26, 46, 0.6);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0s linear 0.25s;
}

.a2sa-popup-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.25s ease, visibility 0s linear 0s;
}

.a2sa-popup-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: linear-gradient(160deg, #19355D 0%, #2D4F81 100%);
    color: #fff;
    border-radius: 14px;
    padding: 40px 32px 32px 32px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(10, 20, 40, 0.45);
    transform: scale(0.9) translateY(12px);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
}

.a2sa-popup-overlay.is-visible .a2sa-popup-card {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.a2sa-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.a2sa-popup-close:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: rotate(90deg);
}

.a2sa-popup-close:focus-visible,
.a2sa-popup-cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.a2sa-popup-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.a2sa-popup-card h2 {
    margin: 0 0 14px 0;
    font-size: 21px;
    font-weight: 700;
    color: #fff;
}

.a2sa-popup-text {
    margin: 0 0 24px 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Message découpé en deux phrases courtes et scannables (loi de Miller)
   plutôt qu'un paragraphe dense. */
.a2sa-popup-line {
    display: block;
}

.a2sa-popup-line + .a2sa-popup-line {
    margin-top: 10px;
}

/* Pointe de rareté qui incite à agir maintenant, dans un ton légèrement
   distinct du constat factuel de la première ligne. */
.a2sa-popup-line--urgency {
    color: #fff;
}

.a2sa-popup-text strong {
    color: #FFD166;
    font-weight: 700;
}

.a2sa-popup-reassurance {
    margin: 14px 0 0 0;
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.65);
}

.a2sa-popup-cta {
    display: inline-block;
    background-color: #B31111;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 13px 28px;
    border-radius: 6px;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.a2sa-popup-cta:hover {
    background-color: #8f0d0d;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(179, 17, 17, 0.32);
    color: #fff;
}

@media (max-width: 480px) {
    .a2sa-popup-card {
        padding: 32px 22px 26px 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .a2sa-popup-overlay,
    .a2sa-popup-card,
    .a2sa-popup-close {
        transition: none;
    }
    .a2sa-popup-overlay.is-visible .a2sa-popup-card {
        transform: none;
    }
}