/*
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * Copyright (C) 2026 François Elie
 * Logiciel libre sous licence GNU AGPL v3 ou ultérieure : voir le fichier LICENSE.
 */
/*
 * Page de recherche Recoll — feuille de style responsive, thème clair/sombre
 * automatique selon les préférences du système.
 */

:root {
    --couleur-fond: #f7f4ee;
    --couleur-surface: #ffffff;
    --couleur-texte: #1f1d1a;
    --couleur-texte-discret: #6b655c;
    --couleur-bordure: #e2ddd2;
    --couleur-accent: #9a3b26;
    --couleur-accent-texte: #ffffff;
    --couleur-surlignage: #fbe3a1;
    --couleur-erreur: #b42318;
    --police-texte: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --police-titres: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --rayon: 8px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --couleur-fond: #181715;
        --couleur-surface: #22211e;
        --couleur-texte: #ece8e1;
        --couleur-texte-discret: #a39d93;
        --couleur-bordure: #36342f;
        --couleur-accent: #e58a6f;
        --couleur-accent-texte: #1b1a18;
        --couleur-surlignage: #6b5420;
        --couleur-erreur: #ff8a80;
        color-scheme: dark;
    }
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    font: 16px/1.55 var(--police-texte);
}

a { color: var(--couleur-accent); }

.visuellement-cache {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- En-tête et formulaire ---------- */

.entete {
    position: sticky; top: 0; z-index: 1;
    background: var(--couleur-fond);
    border-bottom: 1px solid var(--couleur-bordure);
    padding: 1rem 16px .75rem;
}

/* Titre à gauche, collection à droite ; l'une sous l'autre sur petit écran. */
.entete__ligne {
    max-width: 52rem; margin: 0 auto .6rem;
    display: flex; flex-wrap: wrap; align-items: baseline;
    justify-content: space-between; gap: .3rem 1rem;
}

.entete__titre {
    margin: 0;
    font: 600 1.35rem/1.2 var(--police-titres);
}

.entete__collection {
    margin: 0;
    display: flex; align-items: baseline; gap: .5rem;
    font-size: .85rem; color: var(--couleur-texte-discret);
}

.entete__nom-collection {
    font-weight: 600; color: var(--couleur-accent);
    padding: .15rem .55rem; border-radius: 999px;
    border: 1px solid currentColor;
}
.entete__titre a { color: inherit; text-decoration: none; }

.recherche { max-width: 52rem; margin: 0 auto; }

.recherche__ligne { display: flex; gap: .5rem; }

.recherche__champ {
    flex: 1; min-width: 0;
    padding: .7rem .9rem;
    font: inherit;
    color: inherit;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
}
.recherche__champ:focus { outline: 2px solid var(--couleur-accent); outline-offset: 1px; }

.recherche__bouton {
    padding: .7rem 1.1rem;
    font: 600 1rem var(--police-texte);
    color: var(--couleur-accent-texte);
    background: var(--couleur-accent);
    border: 0; border-radius: var(--rayon);
    cursor: pointer;
}
.recherche-en-cours .recherche__bouton { opacity: .6; cursor: progress; }

.options { margin-top: .5rem; font-size: .9rem; }
.options summary { cursor: pointer; color: var(--couleur-texte-discret); width: max-content; }

.options__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: .75rem;
    margin-top: .6rem;
}
.options__grille label { display: flex; flex-direction: column; gap: .25rem; color: var(--couleur-texte-discret); }
.options__grille select {
    padding: .45rem; font: inherit; color: var(--couleur-texte);
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure); border-radius: 6px;
}
.options__aide { margin: .7rem 0 0; color: var(--couleur-texte-discret); line-height: 1.8; }
.options__aide code {
    padding: .05rem .3rem; border-radius: 4px;
    background: var(--couleur-surface); border: 1px solid var(--couleur-bordure);
}

/* ---------- Résultats ---------- */

.contenu { max-width: 52rem; margin: 0 auto; padding: 1rem 16px 3rem; }

.statut { color: var(--couleur-texte-discret); font-size: .9rem; margin: 0 0 1rem; min-height: 1.4em; }
.statut--erreur { color: var(--couleur-erreur); }

.resultats { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }

.resultat {
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    padding: 1rem 1.1rem;
}

.resultat__entete { display: flex; align-items: baseline; gap: .6rem; }

.resultat__type {
    flex: none;
    font: 700 .68rem/1 var(--police-texte); letter-spacing: .05em;
    padding: .3rem .4rem; border-radius: 4px;
    color: var(--couleur-accent); border: 1px solid currentColor;
}

.resultat__titre { margin: 0; font: 600 1.15rem/1.3 var(--police-titres); overflow-wrap: anywhere; }
.resultat__lien { text-decoration: none; }
.resultat__lien:hover { text-decoration: underline; }

.resultat__infos {
    margin: .3rem 0 .6rem;
    font-size: .82rem; color: var(--couleur-texte-discret);
    overflow-wrap: anywhere;
}

.resultat__fragments { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.fragment {
    display: flex; gap: .7rem; align-items: baseline;
    font-size: .95rem;
    border-left: 3px solid var(--couleur-bordure);
    padding-left: .7rem;
}

.fragment__page {
    flex: none;
    font-size: .8rem; font-weight: 600; white-space: nowrap;
    padding: .1rem .45rem; border-radius: 999px;
    background: var(--couleur-fond); text-decoration: none;
}
.fragment__page:hover { background: var(--couleur-accent); color: var(--couleur-accent-texte); }

.fragment__texte { overflow-wrap: anywhere; }

.fragment--indisponible {
    display: block;
    font-size: .85rem; font-style: italic;
    color: var(--couleur-texte-discret);
}

mark {
    background: var(--couleur-surlignage);
    color: inherit;
    padding: 0 .1em; border-radius: 3px;
}

/* ---------- Pagination ---------- */

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem; margin-top: 1.5rem; }
.pagination button {
    min-width: 2.4rem; padding: .45rem .7rem;
    font: inherit; color: var(--couleur-texte);
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure); border-radius: 6px;
    cursor: pointer;
}
.pagination button[aria-current="page"] {
    background: var(--couleur-accent); color: var(--couleur-accent-texte);
    border-color: var(--couleur-accent); cursor: default;
}
.pagination__ellipse { align-self: center; color: var(--couleur-texte-discret); }

/* ---------- Petits écrans ---------- */

@media (max-width: 34rem) {
    .entete { position: static; }
    .recherche__bouton { padding-inline: .85rem; }
    .fragment { flex-direction: column; gap: .2rem; }
    .resultat { padding: .85rem; }
}

/* ---------- Pied de page ---------- */

.pied {
    max-width: 52rem; margin: 0 auto; padding: 0 16px 2rem;
    text-align: center; font-size: .8rem;
    color: var(--couleur-texte-discret);
}
.pied a { color: inherit; }

/* Titres et numéros de page sans lien (accès restreint, config.php : accesDocuments). */
.resultat__lien--inactif { color: var(--couleur-texte); cursor: default; }
.resultat__lien--inactif:hover { text-decoration: none; }
.fragment__page--inactif { color: var(--couleur-texte-discret); }
.fragment__page--inactif:hover { background: var(--couleur-fond); color: var(--couleur-texte-discret); }