/*
 * Habillage de la modale de recherche (plugin « Recherche Modale EcloLINK »).
 *
 * Le plugin expose 22 variables CSS : tout se règle donc ici, sans toucher une ligne de son code.
 * Une mise à jour de l'extension ne perd rien de ce fichier, et le plugin reste identique d'un
 * chantier à l'autre.
 *
 * Chargé après sa feuille (dépendance déclarée dans inc/search.php) : dans l'autre ordre, ses
 * valeurs d'origine reprendraient la main.
 */

:root {
    /* Fond assombri, comme le tiroir du menu mobile. */
    --ssm-backdrop-bg: rgba(8, 12, 17, 0.5);

    /* Le panneau reprend le beige clair de la barre de menu, et son filet. */
    --ssm-panel-bg: var(--color-secondary-200);
    --ssm-panel-border: var(--color-secondary);
    --ssm-panel-shadow: 0 10px 7.5px rgba(0, 0, 0, 0.1), 0 4px 3px rgba(0, 0, 0, 0.05);

    --ssm-input-bg: var(--color-neutral-50);
    --ssm-input-text: var(--color-primary-950);
    --ssm-input-placeholder: var(--color-neutral-600);

    --ssm-border-color: var(--color-secondary);
    --ssm-text-primary: var(--color-primary);
    --ssm-text-secondary: var(--color-secondary-900);
    --ssm-text-muted: var(--color-neutral-700);

    --ssm-accent: var(--color-primary);
    --ssm-accent-light: var(--color-secondary-300);
    --ssm-hover-bg: var(--color-secondary-300);

    --ssm-kbd-bg: var(--color-neutral-50);
    --ssm-kbd-border: var(--color-secondary);
    --ssm-kbd-text: var(--color-neutral-700);

    --ssm-group-bg: var(--color-secondary-200);

    /*
     * Le surlignage du terme trouvé passe du jaune d'origine au beige du site. Contrôlé :
     * secondary-400 (#c2b691) sous du texte primary-950 tient largement les 4,5:1 exigés — un
     * jaune vif aurait été plus voyant mais hors palette.
     */
    --ssm-highlight-bg: var(--color-secondary-400);

    /* Le site n'utilise que de très petits rayons. */
    --ssm-radius: var(--radius-xxs);
    --ssm-radius-sm: var(--radius-xxxs);
    --ssm-transition: 200ms ease;
}

/*
 * Le déclencheur dans l'en-tête — node Figma 2435:24627 (« Search Bar »).
 *
 * Pilule bordée de 1px neutral-600, rayon plein, 8 de padding en haut, en bas et à GAUCHE, 16 à
 * droite : l'asymétrie de la maquette rapproche la loupe du bord. Écart loupe/texte de 8, loupe
 * de 18, texte de 16 sur 1,5.
 */
.site-header__search-trigger {
    border-radius: var(--radius-full);
    border-color: var(--color-neutral-600);
    background: none;
    padding: var(--space-compact) var(--space-m) var(--space-compact) var(--space-compact);
    gap: var(--space-compact);
    /* 16px comme le reste de la barre, contre 14 par défaut dans le plugin. */
    font-size: var(--font-size-p);
    line-height: 1.5;
    min-width: 0;
}

/* 18 dans la maquette, 16 dans le plugin. */
.site-header__search-trigger .starter-search-icon {
    width: 18px;
    height: 18px;
    opacity: 1;
}

/*
 * Le raccourci « Ctrl K » n'est pas dessiné sur cette barre : masqué. Le raccourci lui-même
 * continue de fonctionner — c'est le plugin qui l'écoute, pas cette pastille.
 */
.site-header__search-trigger .starter-search-kbd {
    display: none;
}

.site-header__search-trigger:hover,
.site-header__search-trigger:focus-visible {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* L'anneau de focus du site, à la place de l'ombre bleue par défaut du plugin. */
.site-header__search-trigger:focus-visible {
    outline: 2px solid var(--color-secondary-400);
    outline-offset: 2px;
    box-shadow: none;
}

/*
 * Le libellé n'a pas à être en gras : dans la barre, c'est un champ, pas un bouton.
 *
 * ÉCART ASSUMÉ AVEC LA MAQUETTE : elle le pose en neutral-300 (#c3c3c3), qui donne 1,6:1 sur le
 * beige de la barre. Ce n'est pas un texte de substitution mais le libellé visible d'un bouton :
 * il lui faut 4,5:1. neutral-600 n'y arrive pas non plus (3,84:1), d'où neutral-700, mesuré à
 * 5,6:1. C'est le minimum lisible le plus proche du gris voulu.
 */
.site-header__search-trigger .starter-search-text {
    font-weight: 400;
    color: var(--color-neutral-700);
}

.site-header__search-trigger:hover .starter-search-text,
.site-header__search-trigger:focus-visible .starter-search-text {
    color: inherit;
}

@media (max-width: 1100px) {
    /*
     * Le libellé se masque à l'œil mais RESTE lisible par les lecteurs d'écran : en display:none
     * il quitterait l'arbre d'accessibilité et le bouton n'aurait plus de nom du tout — il ne
     * porte pas d'aria-label, justement pour que son nom soit son libellé visible (WCAG 2.5.3).
     */
    .site-header__search-trigger .starter-search-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .site-header__search-trigger {
        padding: var(--space-compact);
    }
}