/* ==========================================================================
   Recherche globale (modale + autocomplétion) — 1.0.9 — 25/09/2026
   1.0.9 : compteur X/Y remplacé par total + barre de progression.
   1.0.8 : compteur affichés/total + loader de suite à 120px.
   Déclencheur : tout élément `.inar-search-btn` posé dans le header
   Elementor (header UAE intact : aucun sélecteur de menu ciblé ici).
   Tokens : --primary #2563eb, --brand #4f46e5, --gradient-brand,
   --ink, --muted, --radius 1rem, --shadow-soft, ring. Icônes bi-*.
   Référence visuelle : modale docs PrestaShop (champ + liste groupée,
   ligne active en dégradé), recolorée au design system.
   ========================================================================== */

/* Bouton déclencheur si le thème doit le styliser (Elementor garde la main :
   on ne pose que le curseur + focus visible, jamais de couleur imposée). */
button.inar-search-btn {
    cursor: pointer;
}
button.inar-search-btn:hover {
    color: #1d4ed8;
}
button.inar-search-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Overlay */
.inar-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 10vh 1rem 1rem;
    background: rgba(15, 23, 42, 0.55);
    overflow-y: auto;
}
.inar-search-overlay[hidden] {
    display: none;
}

/* Dialog : bandeau haut réservé à la croix de fermeture (coin haut
   droit, au-dessus de l'input, comme la référence). */
.inar-search-dialog {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    box-shadow: 0 16px 30px -8px rgba(15, 23, 42, 0.12);
    padding: 2.75rem 1rem 1rem;
    animation: inar-search-in 0.22s ease both;
}
@keyframes inar-search-in {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to { opacity: 1; transform: none; }
}

/* Champ : loupe à gauche, saisie au centre, effacer + fermer à droite.
   Comme la référence : une seule bordure fine, focus = simple bordure
   bleue (aucun halo/anneau qui donne un effet doublé). */
.inar-search-field {
    position: relative;
    display: block;
}
.inar-search-field-icon {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    font-size: 1.1rem;
    color: var(--primary);
    pointer-events: none;
}
.inar-search-dialog .inar-search-input {
    width: 100%;
    /* Seul l'effacer vit dans l'input : une seule place réservée. */
    padding: 0.8rem 2.75rem 0.8rem 3rem;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 1.05rem;
    line-height: 1.5;
    color: var(--ink);
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 0.75rem;
    outline: none;
    box-shadow: none;
    transition: border-color 0.2s ease;
}
/* Masque la croix native du type="search" (on a déjà notre effacer). */
.inar-search-dialog .inar-search-input::-webkit-search-cancel-button {
    display: none;
}
.inar-search-input::placeholder {
    color: #94a3b8;
}
.inar-search-input:focus {
    border-color: var(--primary);
    box-shadow: none;
}
button.inar-search-clear {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: #0f172a;
    font-size: 1rem;
    cursor: pointer;
}
button.inar-search-clear:hover {
    background: #f1f5f9;
    color: #0f172a;
}
button.inar-search-clear[hidden] {
    display: none;
}

/* Résultats : gouttière réservée à droite + barre fine, comme la
   référence (le scroll ne chevauche plus les cartes). */
.inar-search-results {
    margin-top: 0.75rem;
    max-height: min(55vh, 420px);
    overflow-y: auto;
    border-radius: 0.75rem;
    padding-right: 0.5rem;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.inar-search-results::-webkit-scrollbar {
    width: 8px;
}
.inar-search-results::-webkit-scrollbar-track {
    background: transparent;
}
.inar-search-results::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
    border: 2px solid #fff;
}
.inar-search-hint,
.inar-search-empty {
    margin: 0;
    padding: 0.9rem 0.5rem;
    font-size: 0.9rem;
    color: var(--muted);
    text-align: center;
}
/* Indicateur de chargement (square-loader.gif 950×400 : on impose la
   largeur seule + ratio natif, sinon l'image est écrasée). */
.inar-search-loader {
    display: block;
    width: 120px;
    height: auto;
    aspect-ratio: 950 / 400;
    object-fit: contain;
    margin: 0.9rem auto;
}
.inar-search-loader[hidden] {
    display: none;
}
.inar-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.inar-search-group {
    margin: 0.35rem 0.25rem 0;
    font-family: "Plus Jakarta Sans", "Inter", sans-serif;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #4338ca;
}
.inar-search-item a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.inar-search-item a:hover {
    border-color: #c7d2fe;
    box-shadow: 0 10px 25px -8px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
}
/* Ligne active (clavier/souris) : dégradé brand, comme la ligne rouge active
   de la maquette, mais aux couleurs du site. */
.inar-search-item.is-active a {
    background-image: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px -8px rgba(79, 70, 229, 0.55);
}
.inar-search-ico {
    flex: none;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    color: #4f46e5;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 0.65rem;
}
.inar-search-item.is-active .inar-search-ico {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
}
.inar-search-txt {
    flex: 1;
    min-width: 0;
}
.inar-search-title {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inar-search-item.is-active .inar-search-title {
    color: #fff;
}
.inar-search-excerpt {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.82rem;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inar-search-item.is-active .inar-search-excerpt {
    color: rgba(255, 255, 255, 0.85);
}
.inar-search-side {
    flex: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.inar-search-type {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4f46e5;
    border: 1px solid #c7d2fe;
    white-space: nowrap;
}
.inar-search-item.is-active .inar-search-type {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.35);
    color: #fff;
}
.inar-search-go-arrow {
    color: #94a3b8;
    font-size: 1rem;
}
.inar-search-item.is-active .inar-search-go-arrow {
    color: #fff;
}
.inar-search-mark {
    background: rgba(37, 99, 235, 0.16);
    color: inherit;
    border-radius: 0.2rem;
    padding: 0 0.1em;
}
.inar-search-item.is-active .inar-search-mark {
    background: rgba(255, 255, 255, 0.3);
    text-decoration: underline;
}

/* Compteur + barre de progression (total stable, jamais de X/Y incohérent
   type 68/65) + sentinelle d'infinite scroll (tous les résultats défilent
   dans le modal, par pages de 8 — jamais de page de résultats). */
.inar-search-count {
    margin: 0.6rem 0.25rem 0;
    font-size: 0.8rem;
    color: #94a3b8;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.inar-search-count[hidden] {
    display: none;
}
.inar-search-count-text {
    display: block;
}
.inar-search-progress {
    display: block;
    width: min(100%, 320px);
    height: 6px;
    background: #eef2ff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}
.inar-search-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background-image: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    border-radius: 999px;
    transition: width 0.25s ease;
}
.inar-search-sentinel {
    text-align: center;
    padding: 0.4rem 0 0.2rem;
}
.inar-search-sentinel[hidden] {
    display: none;
}
.inar-search-more {
    width: 120px;
    height: auto;
}

/* Pied + fermeture */
.inar-search-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin: 0.75rem 0.25rem 0;
    font-size: 0.78rem;
    color: #94a3b8;
}
.inar-search-foot kbd {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    font-family: inherit;
    font-size: 0.72rem;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-bottom-width: 2px;
    border-radius: 0.35rem;
    color: #475569;
}
/* Croix de fermeture : simple × posée au coin haut droit DU DIALOG,
   dans le bandeau au-dessus de l'input (référence). Rattachée au cadre :
   jamais hors dialog, aucune pastille. */
button.inar-search-close {
    position: absolute;
    top: 0.6rem;
    right: 0.75rem;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0.375rem;
    color: #0f172a;
    font-size: 1.1rem;
    cursor: pointer;
}
button.inar-search-close:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.inar-search-nojs {
    margin-top: 0.75rem;
    text-align: center;
}
.inar-search-nojs input {
    padding: 0.625rem 0.875rem;
    border: 1px solid #cbd5e1;
    border-radius: 0.5rem;
}
button.inar-search-go {
    padding: 0.625rem 1rem;
    background-image: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    border: none;
    border-radius: 0.5rem;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}
button.inar-search-go:hover {
    filter: brightness(1.05);
    color: #fff;
}

@media (max-width: 575px) {
    .inar-search-overlay {
        padding: 6vh 0.75rem 0.75rem;
    }
    .inar-search-dialog {
        padding: 2.5rem 0.75rem 0.75rem;
    }
    .inar-search-excerpt {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .inar-search-dialog {
        animation: none;
    }
    .inar-search-progress-fill {
        transition: none;
    }
    .inar-search-item a,
    .inar-search-dialog .inar-search-input,
    button.inar-search-clear,
    button.inar-search-close {
        transition: none;
    }
}