/* ------------------------------------------------------------------ *
 * LMI — page de recherche : le formulaire
 * ------------------------------------------------------------------
 * Le user : « la barre de recherche, le bouton doit etre comme sur le
 * design du site de la page d'accueil ».
 *
 * Mesure du formulaire servi dans le contenu (page « Rien de trouve »
 * d'une rubrique vide, et page de recherche) : c'est le formulaire nu de
 * GeneratePress — champ a angles droits, bordure pleine, et bouton gris
 * `rgb(85, 85, 94)` en mode sombre. L'accroche d'accueil, elle, rend une
 * seule boite encadree a coins arrondis qui contient le champ ET un
 * bouton plein accent (cf. `accroche.css`, releve sur Homepage.html).
 *
 * Les deux balisages different — l'accueil sert le bloc de recherche de
 * WordPress (`.wp-block-search`), le contenu sert `form.search-form` de
 * GeneratePress, dont le champ est enferme dans un `<label>`. Les valeurs
 * ci-dessous sont donc les MEMES que celles de l'accroche, transposees a
 * cet autre balisage : boite 12 px, interieur 6 px, gouttiere 8 px,
 * bouton 44 px de haut a 8 px de rayon, plein accent.
 *
 * ⚠️ `reset.css` du theme pose `button, input, textarea { border-radius:
 * var(--border-radius) !important }` : un `!important` ne se contre que
 * par un `!important`. Meme contrainte que dans `accroche.css`, et pose
 * ici sur les seuls controles de ce formulaire.
 *
 * Portee : `.site-main`, donc le formulaire DU CONTENU. L'overlay de
 * recherche de l'en-tete a son propre habillage et n'est pas touche.
 *
 * ---- CE QUI N'EST PAS ICI, ET POURQUOI ----------------------------
 * Les cartes de resultats et le bloc « Rien de trouve » arrondi ne sont
 * pas repris dans ce fichier : ils viennent des feuilles du coeur, que
 * la section 35 du mu-plugin fait servir sur la recherche. Le CSS
 * applique est donc celui du coeur, au bit pres, et non une copie qui
 * deriverait a la premiere evolution du design.
 * ------------------------------------------------------------------ */

/* La boite : un seul cadre arrondi qui contient le champ et le bouton,
 * au lieu des deux controles separes que rend GeneratePress. */
.site-main .search-form {
    display: flex;
    gap: 8px;
    max-width: 560px;
    padding: 6px;
    background: var(--eldorado-surface, #FFFFFF);
    border: 1px solid var(--eldorado-bordure);
    border-radius: 12px;
}

/* Le `<label>` enveloppe le champ : il devient l'element souple de la
 * rangee. On le garde (plutot que `display: contents`) pour ne pas
 * rompre le lien entre le libelle et le champ pour un lecteur d'ecran. */
.site-main .search-form > label {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.site-main .search-form .search-field {
    width: 100%;
    padding: 12px;
    border: 0;
    background: none;
    font: inherit;
    font-size: 16px;
    color: var(--eldorado-texte);
    outline: none;
    border-radius: 8px !important;
}

.site-main .search-form .search-field::placeholder {
    color: var(--eldorado-texte-doux);
    opacity: 1;
}

.site-main .search-form .search-field:focus-visible {
    outline: 2px solid var(--eldorado-focus);
    outline-offset: 2px;
}

.site-main .search-form .search-submit {
    flex: none;
    display: grid;
    place-items: center;
    margin: 0;
    /* 44 px : la cible tactile minimale, valeur deja retenue par la maquette. */
    min-height: 44px;
    padding: 0 22px;
    background: var(--eldorado-accent);
    color: var(--eldorado-sur-accent, #FFFFFF);
    border: 0;
    border-radius: 8px !important;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.site-main .search-form .search-submit:hover,
.site-main .search-form .search-submit:focus-visible {
    background: color-mix(in srgb, var(--eldorado-accent) 86%, var(--eldorado-texte));
}

/* L'icone de GeneratePress suit la couleur du bouton plutot que la sienne. */
.site-main .search-form .search-submit .gp-icon,
.site-main .search-form .search-submit svg {
    fill: currentColor;
    color: inherit;
}

/* Sous 560 px la boite deborderait : le bouton garde sa hauteur de cible
 * tactile mais se resserre. */
@media (max-width: 480px) {
    .site-main .search-form .search-submit {
        padding: 0 16px;
    }
}