/**
 * ARSSAT — Tiroir de recherche dans l'en-tête principal
 *
 * Le container Elementor #arssat-nav-searchbar a son état "fermé"
 * (max-height: 0; overflow: hidden; transition: max-height .3s ease;)
 * défini directement dans le CSS personnalisé du container côté Elementor.
 *
 * Ce fichier déclare l'état "ouvert" : quand le JS bascule la classe
 * .is-open sur le container, max-height grimpe et la transition CSS
 * déjà posée anime l'apparition.
 *
 * NB : max-height ne peut pas être animée vers 'auto', il faut une valeur
 * numérique. 200px couvre largement la hauteur du widget JetSearch ; le
 * dropdown de suggestions, lui, est rendu en position absolute par-dessus
 * le reste de la page, donc il n'est pas concerné par cette contrainte.
 */

#arssat-nav-searchbar.is-open {
    max-height: 200px;
    overflow: visible;
    /* On retarde le passage à overflow:visible jusqu'à la fin de la transition
     * de max-height (0.3s). Sinon le container clippe le dropdown JetSearch,
     * qui est rendu en position absolute sous le champ. À la fermeture, la
     * règle de l'état fermé (Elementor custom CSS) reprend la main et
     * overflow snape à hidden instantanément — le store se ferme proprement. */
    transition: max-height .3s ease, overflow 0s .3s;
}

.arssat-searchbar-toggle {
    cursor: pointer;
}

/* Retire l'outline natif du navigateur sur le champ de recherche JetSearch.
 * Le champ a déjà une bordure stylisée dans Elementor ; l'outline bleu
 * par-dessus est doublonné. On retire aussi l'éventuel box-shadow de focus
 * pour les navigateurs qui en posent un (Safari notamment). */
.jet-ajax-search__field:focus,
.jet-ajax-search__field-wrap:focus-within {
    outline: none;
    box-shadow: none;
}