:root{
    --brand:#193A63;
    --ink:#0c1522;
    --muted:#607089;
    --border:#e6ebf4;
    --card-shadow: 0 10px 22px rgba(12,21,34,.06);
}

.hp-field-wrapper{
    position:absolute !important;
    left:-5000px !important;
    height:0 !important;
    overflow:hidden !important;
    visibility:hidden !important;
}

/* ==== Effet "underline sweep" élégant pour le champ Motif ==== */
.select-underline {
    border-color: #0e354d !important;
    background:
        linear-gradient(#0e354d 0 0) 0 100% / 0 2px no-repeat,
        linear-gradient(transparent 0 0);
    animation: underlineSweep 1.1s ease-out 2;
    transition: background-size .4s ease, box-shadow .3s ease;
    box-shadow: inset 0 0 0 0 rgba(14,53,77,0);
}

@keyframes underlineSweep {
    0%   { background-size: 0 2px, auto; box-shadow: inset 0 0 0 0 rgba(14,53,77,0); }
    35%  { background-size: 100% 2px, auto; box-shadow: inset 3px 0 0 0 rgba(14,53,77,.15); }
    65%  { background-size: 100% 2px, auto; box-shadow: inset 0 0 0 0 rgba(14,53,77,0); }
    100% { background-size: 0 2px, auto; }
}

/* Bonus accessibilité : si l’utilisateur réduit les animations */
@media (prefers-reduced-motion: reduce){
    .select-underline { animation: none; background-size: 100% 2px, auto; }
}

/*_______________________________________________________________FORM _____________________________________*/
/* Animation du bloc formulaire quand on vient du footer (?from=footer) */
.form-highlight {
    animation: glow-form 2.2s ease-in-out;
}

@keyframes glow-form {
    0% {
        box-shadow: 0 0 0 0 rgba(25, 58, 99, 0.55);
    }
    50% {
        box-shadow: 0 0 18px 4px rgba(25, 58, 99, 0.35);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(25, 58, 99, 0);
    }
}

.my-card {
    background:#fff !important;
    box-shadow: var(--card-shadow) !important;
}