/* ==================================================
   PAGE — RÉSULTATS DE RECHERCHE

   Le gabarit search.php n'est pas composable au builder :
   son entête a donc sa feuille, à part des blocs.
================================================== */

/* Figma : bandeau violet plein, 44 px au-dessus du titre, champ de
   recherche pleine largeur en dessous. */
/* Le logo rond de l'en-tête déborde de 92 px sur le bloc suivant : sans
   cette réserve, le titre « Résultats de recherche » passait derrière
   lui. Même règle que les entêtes de page — on ne réserve que ce qui
   manque, la mesure d'origine tenant le plancher. */
/* La couleur primaire du thème, celle des boutons primaires : le bandeau
   la suit si elle change. Le bouton « Rechercher », de la même couleur,
   reste lisible — il est posé sur la barre blanche du formulaire. */
.recherche__entete {
    padding: max(44px, calc(var(--v-logo-debord) + 24px)) 0 48px;
    background: var(--v-action);
    color: var(--v-texte-inverse);
}

.recherche__titre {
    margin: 0 0 28px;
    font-family: var(--v-font-titre);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--v-texte-inverse);
}

/* Le champ, la loupe et le bouton tiennent dans une seule barre
   blanche : la loupe est posée par-dessus, le champ lui laisse la
   place par son remplissage à gauche. */
.recherche__form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 0;
    background: var(--v-blanc);
    border-radius: var(--v-radius-pill);
}

.recherche__loupe {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--v-texte-meta);
    font-size: 1rem;
    pointer-events: none;
}

.recherche__champ {
    flex: 1;
    min-width: 0;
    padding: 10px 0 10px 50px;
    border: 0;
    background: transparent;
    font-family: var(--v-font-corps);
    font-size: 0.9375rem;
    color: var(--v-texte-corps);
}

.recherche__champ::placeholder {
    color: var(--v-texte-meta);
}

.recherche__champ:focus {
    outline: none;
}

/* Le contour de focus se pose sur la barre entière : le champ n'a pas
   de bord propre, le sien ne se verrait pas. */
.recherche__form:focus-within {
    outline: 2px solid var(--v-turquoise-400);
    outline-offset: 2px;
}

.recherche__bouton {
    flex: none;
}

@media (max-width: 575.98px) {
    .recherche__form {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 8px;
        border-radius: var(--v-radius-lg);
    }

    .recherche__loupe {
        display: none;
    }

    .recherche__champ {
        padding: 10px 14px;
    }
}

@media (max-width: 575px) {
    .recherche__titre {
        font-size: 1.375rem;
    }
}