/* ══════════════════════════════════════════════════════════════
   Search — Page de résultats
   ══════════════════════════════════════════════════════════════ */

.search-page {
    padding: 0 0 var(--spacing-3xl);
}

/* ── Le champ de recherche du header s'efface ici ──
   Il ne dit pas la meme chose que celui de la page : le sien est PREREMPLI
   (`data-initial-query`), celui du header reste vide. Deux champs voisins,
   l'un montrant la recherche en cours et l'autre l'ayant oubliee.

   Surtout, son formulaire ne porte AUCUN champ cache : relancer depuis le
   header repart de `/recherche?q=...` seul, donc efface l'onglet, les
   thematiques, le type, la periode et le tri, sans le moindre signal. Ce
   n'etait pas un doublon, c'etait une remise a zero deguisee en affinage.

   La condition porte sur la barre de la page, pas sur `.search-page` : si
   celle-ci disparaissait un jour, le champ du header revient tout seul.
   L'invariant est « jamais zero champ de recherche », pas « jamais deux ».

   Contrepartie assumee : la navbar etant collante, on perd l'acces au champ
   une fois descendu dans les resultats. Le panneau de facettes reste
   collant, lui. Un relais au defilement a ete ecarte tant que la perte de
   filtres decrite ci-dessus n'est pas corrigee dans `submitSearch` : il
   reexposerait le meme piege, simplement plus bas dans la page. */
body:has(.search-page__bar) .navbar__search,
body:has(.search-page__bar) .navbar__search-footer {
    display: none;
}

/* Pas de fond propre : la bande de tete vient du degrade de `.front-main`
   (app.css). L'ancien `var(--color-bg-subtle, var(--color-bg-light))` reposait de toute
   facon sur son REPLI, `--color-bg-subtle` n'ayant jamais existe cote site
   public — le gris etait donc un hex en dur deguise en token. Les trois
   occurrences du fichier sont rebranchees sur `--color-bg-light`. */
.search-page__hero {
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
    margin-bottom: var(--spacing-xl);
}

.search-page__hero-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    align-items: center;
}

/* Masquee par defaut, et surtout DECLAREE nulle part hors de la media query :
   c'est ce qui evite le telechargement sur telephone. Un `<img>` avec
   `display: none` serait charge quand meme. */
.search-page__hero-illustration {
    display: none;
}

@media (min-width: 64em) {
    .search-page__hero-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
    }

    /* Attenuee : c'est un decor, il ne doit pas rivaliser avec le champ de
       saisie qui est le seul objet utile du bandeau. */
    .search-page__hero-illustration {
        display: block;
        aspect-ratio: 881753 / 800000;
        background: url("../../images/illustrations/undraw_searching-everywhere_tffi-qRfEkv9.svg") center / contain no-repeat;
        opacity: 0.9;
    }
}

/* En-tete aligne a gauche, sur un bandeau teinte qui detache le champ du
   corps de page. L'ancienne composition (titre capitale surligne, centre,
   champ centre en dessous) annoncait une page de couverture ; ici le champ
   est l'objet principal et le titre ne fait que le nommer. */
.search-page__header {
    margin-bottom: var(--spacing-xl);
}

.search-page__title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

@media (min-width: 40em) {
    .search-page__title { font-size: var(--font-size-3xl); }
}

/* Barre de recherche */
.search-page__bar {
    position: relative;
    max-width: 44rem;
}

/* Un seul contenant arrondi, bordure fine, bouton POSE A L'INTERIEUR.
   L'ancienne forme accolait deux blocs a bordure 2px : la jonture carree au
   milieu et le contraste des deux epaisseurs donnaient l'aspect massif. Ici
   c'est le groupe qui porte la bordure et l'anneau de focus ; l'input n'en a
   aucune, et le bouton flotte dans la gouttiere. */
.search-page__input-group {
    display: flex;
    position: relative;
    align-items: center;
    gap: var(--spacing-xs);
    padding: 0.3125rem 0.3125rem 0.3125rem 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.search-page__input-group:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.search-page__input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-light);
    pointer-events: none;
}

.search-page__input {
    flex: 1;
    /* `min-width: auto` (le defaut d'un item flex) empeche un `<input>` de
       descendre sous sa largeur intrinseque, ~282px pour la taille par defaut
       de 20 caracteres. Sans ce reset, l'ensemble deborde sur tout telephone
       de moins de 430px. */
    min-width: 0;
    padding: 0.5rem 0;
    border: none;
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: transparent;
    outline: none;
    appearance: none;
}

.search-page__input::placeholder { color: var(--color-text-light); opacity: 0.6; }

/* Croix d'effacement — la native de WebKit (`input[type=search]`) n'est ni
   stylable ni traduisible, et ne previent pas le composant Alpine. */
.search-page__clear {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.search-page__clear:hover {
    background: var(--color-bg-light);
    color: var(--color-text);
}

.search-page__submit {
    flex-shrink: 0;
    padding: 0.5rem 1.25rem;
    border: none;
    border-radius: 100px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: #fff;
    background: var(--color-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

/* La loupe ne sert que sous 480px, ou le libelle se replie. */
.search-page__submit-icon {
    display: none;
}

@media (max-width: 29.9375em) {
    .search-page__submit-icon {
        display: inline-flex;
    }
}

.search-page__submit:hover {
    background: var(--color-primary-dark);
}

/* Autocomplete suggestions */
.search-page__suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    list-style: none;
    padding: 0.25rem;
    margin: 0;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 20rem;
    overflow-y: auto;
    z-index: 50;
}

.search-page__suggestion {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background-color 0.1s ease;
}

.search-page__suggestion:hover,
.search-page__suggestion--active {
    background: var(--color-bg-light);
}

.search-page__suggestion-type {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--color-bg-light);
    color: var(--color-text-light);
    white-space: nowrap;
    flex-shrink: 0;
}

.search-page__timing {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    opacity: 0.7;
}

.search-page__facets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-left: auto;
}

.search-page__facet {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    text-decoration: none;
    color: var(--color-text);
    background: #fff;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.search-page__facet:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.search-page__facet--active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.search-page__facet-count {
    opacity: 0.6;
}

/* Erreur */
.search-page__error {
    padding: var(--spacing-md);
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    color: #e65100;
}

/* Résultats */
.search-results {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.search-result {
    list-style: none;
}

.search-result__inner {
    padding: var(--spacing-md) var(--spacing-lg);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: box-shadow 0.2s ease;
}

.search-result__inner:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.search-result__inner--linked {
    cursor: pointer;
}

.search-result__inner--linked:hover {
    border-color: var(--color-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.search-result__type {
    display: inline-flex;
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.0625rem 0.375rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-light);
    color: var(--color-primary);
    margin-bottom: var(--spacing-xs);
}

.search-result__title {
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-xs);
}

.search-result__title a {
    color: var(--color-text);
    text-decoration: none;
}

.search-result__title a:hover {
    color: var(--color-primary);
}

.search-result__title mark {
    background: var(--color-accent-light);
    color: inherit;
    padding: 0 0.125rem;
    border-radius: 2px;
}

.search-result__excerpt {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    line-height: var(--line-height-base);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.search-result__excerpt mark {
    background: var(--color-accent-light);
    color: inherit;
    padding: 0 0.125rem;
    border-radius: 2px;
}

.search-result__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
}

.search-result__date {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
    margin-left: auto;
}

/* Result type color by index */
.search-result__type--evt_event { background: #e8f5e9; color: #2e7d32; }
.search-result__type--trn_training { background: #e3f2fd; color: #1565c0; }
.search-result__type--crm_organization { background: #fff3e0; color: #e65100; }
.search-result__type--lib_item { background: #f3e5f5; color: #6a1b9a; }
.search-result__type--nws_issue { background: var(--color-section-agenda-light); color: #00695c; }

/* Meta line (dates, lieu, duree, etc.) */
.search-result__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.search-result__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.search-result__meta-item svg { flex-shrink: 0; opacity: 0.6; }

.search-result__meta-item--badge {
    padding: 0.0625rem 0.375rem;
    background: var(--color-bg-light);
    border-radius: var(--radius-sm);
    font-weight: 600;
    color: var(--color-text);
}

.search-result__meta-item--subtle {
    font-style: italic;
}

.search-result__meta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-primary);
    text-decoration: none;
}

.search-result__meta-link:hover { text-decoration: underline; }

/* ══════════════════════════════════════════
   Search layout — sidebar + resultats
   ══════════════════════════════════════════ */
.search-layout {
    display: grid;
    /* `minmax(0, …)` et non `1fr` : un `1fr` vaut `minmax(auto, 1fr)`, dont le
       minimum est la largeur MIN-CONTENT de la colonne. Des qu'un descendant
       est insecable — nos titres en `nowrap` pour l'ellipsis — ce minimum
       devient la largeur du texte entier : la colonne s'elargit et sort du
       conteneur. Le `min-width: 0` sur les items grid ferme la meme porte un
       cran plus bas. */
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--spacing-xl);
    align-items: start;
}

.search-sidebar,
.search-main {
    min-width: 0;
}

/* Onglet « Tout » : aucune facette a montrer a ce niveau, donc pas de
   gouttiere de 15rem laissee vide a cote des sections. */
.search-layout--full {
    grid-template-columns: minmax(0, 1fr);
}

.search-layout__filter-toggle {
    display: none; /* shown on mobile */
}

.search-page__query { font-weight: 400; color: var(--color-text-light); }

/* ── Sidebar ──
   Le contenu des facettes utilise le design-system partage
   `sidebar-filters__*` (cf. zones/content.css) — meme look que les pages
   CMS list / Library / Training. Le wrap `.search-sidebar` apporte le
   layout 2 colonnes specifique a /recherche (sticky, separation visuelle)
   et l'overlay mobile. */
.search-sidebar {
    position: sticky;
    top: 5rem;
    padding-right: var(--spacing-xl);
    border-right: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.search-sidebar__header { display: none; } /* shown on mobile */

/* Lien Reinitialiser : pose dans son propre groupe pour respecter le rythme
   vertical des autres `sidebar-filters__group`. Pas de fond, juste un lien
   discret sobre. */
.search-sidebar__section--reset {
    padding: var(--spacing-xs) 0;
}

.search-sidebar__reset {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.15s ease;
}

.search-sidebar__reset:hover { color: var(--color-danger); }

/* ── Main content ── */
/* La barre porte desormais TROIS menus (periode, tri, par page) a cote du
   compteur : elle doit pouvoir se replier. Sans `flex-wrap`, le dernier menu
   sortait du conteneur et faisait defiler la page horizontalement — sur
   telephone comme sur tablette, ou la colonne de filtres reduit la place
   disponible. */
.search-main__toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-sm) var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding-bottom: var(--spacing-sm);
    border-bottom: 1px solid var(--color-border);
}

.search-main__count {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text);
}

/* Tri dropdown positionne a droite */
/* Seul le PREMIER menu est pousse a droite : les suivants se collent a lui.
   Avec `margin-left: auto` sur tous, chacun reclamait tout l'espace restant
   et les forcait a passer chacun sur sa propre ligne. */
.search-main__toolbar .dropdown { margin-left: 0; }
.search-main__toolbar .dropdown:first-of-type { margin-left: auto; }

.search-main__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

/* Welcome state */
/* ══════════════════════════════════════════════════════════════
   Panneau de rappel (recherches récentes / fréquentes)
   ══════════════════════════════════════════════════════════════ */

.search-panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 20;
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
    text-align: left;
}

.search-panel__section + .search-panel__section {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border-light, var(--color-border));
}

.search-panel__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
}

.search-panel__title {
    font-size: var(--font-size-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
}

.search-panel__clear {
    border: none;
    background: none;
    padding: 0;
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    cursor: pointer;
}

.search-panel__clear:hover { text-decoration: underline; }

.search-panel__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

.search-panel__chip {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    font-size: var(--font-size-sm);
    color: var(--color-text);
    text-decoration: none;
    overflow: hidden;
}

.search-panel__chip:hover { border-color: var(--color-primary); }

.search-panel__chip--link { padding: 0.25rem 0.75rem; }

.search-panel__chip-label {
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.search-panel__chip-remove {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem 0.25rem 0.25rem;
    border: none;
    background: none;
    color: var(--color-text-light);
    cursor: pointer;
}

.search-panel__chip-remove:hover { color: var(--color-text); }

/* ══════════════════════════════════════════════════════════════
   Onglets par famille
   ══════════════════════════════════════════════════════════════ */

/* Defile horizontalement plutot que de se replier : sur un petit ecran, une
   barre d'onglets sur trois lignes coute plus de hauteur que la premiere
   fiche de resultat. */
.search-tabs {
    margin-bottom: var(--spacing-xl);
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
}

.search-tabs::-webkit-scrollbar { display: none; }

.search-tabs__list {
    display: flex;
    gap: var(--spacing-lg);
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
}

.search-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) 0;
    /* La bordure existe des l'etat inactif, en transparent : sans elle, le
       texte de l'onglet actif sauterait d'un pixel au changement d'onglet. */
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-light);
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.search-tabs__tab:hover { color: var(--color-text); }

.search-tabs__tab--active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

/* Une famille sans resultat reste cliquable et lisible : la griser
   completement la ferait passer pour desactivee alors qu'elle mene a un
   etat vide explicite. */
.search-tabs__tab--empty { opacity: 0.55; }

.search-tabs__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    padding: 0 0.375rem;
    height: 1.25rem;
    border-radius: 100px;
    background: var(--color-bg-light);
    font-size: 0.6875rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-light);
}

.search-tabs__tab--active .search-tabs__count {
    background: var(--color-primary);
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   Sections par famille (vue « Tout »)
   ══════════════════════════════════════════════════════════════ */

.search-group + .search-group {
    margin-top: var(--spacing-2xl);
    padding-top: var(--spacing-xl);
    border-top: 1px solid var(--color-border);
}

.search-group__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.search-group__title {
    display: inline-flex;
    align-items: baseline;
    gap: var(--spacing-sm);
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
}

.search-group__count {
    font-size: var(--font-size-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-light);
}

.search-group__more {
    display: inline-flex;
    align-items: center;
    gap: 0.125rem;
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.search-group__more:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   Accueil sans requête
   ══════════════════════════════════════════════════════════════ */

/* Trois blocs de nature differente (par ou entrer, quoi taper, quoi lire) :
   l'ecart les separe franchement, sinon ils se lisent comme une seule liste
   qui continue. */
.search-welcome {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3xl);
}

/* Decalage identique a celui que l'icone impose au texte de `.search-reserved`
   (14px de glyphe + la gouttiere) : les deux paragraphes s'alignent alors sur
   la meme verticale, au lieu de commencer a deux abscisses differentes. */
.search-page__hint {
    max-width: 44rem;
    margin-top: var(--spacing-sm);
    padding-left: calc(14px + var(--spacing-sm));
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

/* Lignes a filet, pas cartes encadrees : quatre a six entrees boxees font un
   damier qui pese plus que ce qu'il annonce. Un filet bas et une fleche
   suffisent a dire « ceci mene ailleurs ». */
/* Nombre de colonnes fixe, pas `auto-fit` : avec cinq familles, l'ajustement
   automatique rendait quatre colonnes et laissait « Annuaire » seule sur une
   deuxieme rangee. Trois colonnes donnent 3 + 2, bien plus lisible. */
.search-welcome__families {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: var(--spacing-2xl);
    /* Rangees de meme hauteur ET contenu cale en haut. Les deux sont
       necessaires : la hauteur egale aligne les filets bas, le calage en
       haut aligne les intitules. Centre verticalement, un intitule dont la
       description tient sur une ligne flottait plus bas que son voisin. */
    grid-auto-rows: 1fr;
}

@media (min-width: 40em) {
    .search-welcome__families { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64em) {
    .search-welcome__families { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.search-welcome__family {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md) 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
}

.search-welcome__family:hover .search-welcome__family-label {
    color: var(--color-primary);
}

.search-welcome__family:hover .search-welcome__family-arrow {
    transform: translateX(2px);
    color: var(--color-primary);
}

/* Le leger decalage cale l'icone et la fleche sur la LIGNE de l'intitule,
   pas sur le haut de la boite : ancrees en haut sans lui, elles paraissent
   remonter d'un ou deux pixels au-dessus du texte. */
.search-welcome__family-icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 0.125rem;
    color: var(--color-primary);
}

.search-welcome__family-arrow {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 0.1875rem;
    margin-left: auto;
    color: var(--color-text-light);
    transition: transform 0.15s ease, color 0.15s ease;
}

.search-welcome__family-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.search-welcome__family-label {
    font-weight: 700;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.search-welcome__family-desc {
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

.search-welcome__suggestions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.search-welcome__suggestions-label { color: var(--color-text-light); }

.search-welcome__chip {
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 100px;
    text-decoration: none;
    color: var(--color-primary);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.search-welcome__chip:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

/* Deux colonnes, pas trois : au-dela, chaque colonne devient trop etroite
   pour un titre d'actualite et les intitules se cassent sur deux ou trois
   lignes. Nombre fixe plutot qu'`auto-fit` — l'ajustement automatique
   rendait trois colonnes des que la largeur le permettait. */
.search-welcome__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl) var(--spacing-2xl);
    align-items: start;
}

@media (min-width: 48em) {
    .search-welcome__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.search-welcome__column,
.search-welcome__family {
    min-width: 0;
}

.search-welcome__column-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid var(--color-border);
}

.search-welcome__column-title {
    font-size: var(--font-size-base);
    font-weight: 700;
    color: var(--color-text);
}

.search-welcome__column-more {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
}

.search-welcome__column-more:hover { text-decoration: underline; }

.search-welcome__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-welcome__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-border-light, var(--color-border));
}

.search-welcome__list li:last-child .search-welcome__item { border-bottom: none; }

.search-welcome__item:hover .search-welcome__item-title {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Une ligne, coupee par des points de suspension : toutes les entrees font
   alors exactement la meme hauteur, quelle que soit la longueur du titre.
   `min-width: 0` n'est pas cosmetique — un enfant flexible refuse par defaut
   de descendre sous sa largeur intrinseque (`min-width: auto`), et sans lui
   `text-overflow` ne se declenche jamais : le titre pousse la date hors de
   la colonne au lieu d'etre tronque.

   La troncature est PUREMENT visuelle : le texte reste entier dans le
   document, donc un lecteur d'ecran annonce le titre complet. */
.search-welcome__item-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.search-welcome__item-date {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-light);
}

/* Les plus lus — le rang porte la lecture, en grand et en retrait. */
.search-popular {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-sm) var(--spacing-2xl);
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: none;
}

@media (min-width: 48em) {
    .search-popular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.search-popular__item {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border-light, var(--color-border));
}

.search-popular__rank {
    flex-shrink: 0;
    min-width: 1.25rem;
    font-size: var(--font-size-lg);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    color: var(--color-border);
}

.search-popular__link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.search-popular__link:hover .search-popular__title {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Meme traitement que les rappels : un classement dont les rangees sautent
   d'une ligne a deux se lit mal, et les numeros cessent d'etre alignes. */
.search-popular__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    line-height: 1.4;
}

.search-popular__type {
    flex-shrink: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-light);
}

/* Mention des contenus reserves — discrete par nature : c'est une precision
   sur le perimetre de la recherche, pas un appel a l'action. Elle vit sous le
   champ, dans le bandeau, donc sans filet ni marge de separation : c'est la
   proximite avec le champ qui la rend lisible. */
.search-reserved {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    max-width: 44rem;
    margin-top: var(--spacing-lg);
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-light);
}

.search-reserved svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.search-reserved a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ── Mobile responsive ──
   Le panneau de filtres et son bouton d'ouverture vivaient sous 480px, alors
   que la mise en page se replie en une colonne des 768px. Entre les deux, la
   barre laterale se rendait donc EN PLEIN, empilee au-dessus des resultats,
   sans bouton pour la refermer : sur toute la plage tablette, la page
   s'ouvrait sur une liste de facettes et il fallait defiler pour atteindre le
   premier resultat. Les deux seuils sont desormais alignes sur 767px. */
@media (max-width: 47.9375em) {
    .search-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .search-page__submit {
        padding: 0.5rem 1rem;
    }

    /* Le bandeau passe en une colonne : l'illustration ne s'affiche pas sous
       64em, la gouttiere qui lui etait reservee n'a plus lieu d'etre. */
    .search-page__hero-inner {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Titre et lien « Voir les N resultats » sur deux lignes plutot que
       comprimes l'un contre l'autre. */
    .search-group__header {
        flex-wrap: wrap;
        gap: var(--spacing-xs);
    }

    .search-layout__filter-toggle {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
        font-weight: 600;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: #fff;
        color: var(--color-text);
        cursor: pointer;
        width: 100%;
        justify-content: center;
        margin-bottom: var(--spacing-md);
    }

    .search-layout__filter-toggle--active {
        border-color: var(--color-primary);
        color: var(--color-primary);
    }

    .search-layout__filter-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        font-size: 0.625rem;
        font-weight: 700;
        border-radius: 50%;
        background: var(--color-primary);
        color: #fff;
    }

    .search-sidebar {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: var(--z-drawer);
        overflow-y: auto;
        background: #fff;
        padding-right: 0;
        border-right: none;
    }

    .search-sidebar--open { display: block; }

    .search-sidebar__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md);
        border-bottom: 1px solid var(--color-border);
    }

    .search-sidebar__title {
        font-size: var(--font-size-lg);
        font-weight: 700;
    }

    .search-sidebar__close {
        padding: var(--spacing-xs);
        border: none;
        background: none;
        color: var(--color-text-light);
        cursor: pointer;
    }
}

/* Sous 480px, le libelle « Rechercher » mangeait 135px de la barre au
   detriment du champ qui porte l'information : le bouton se reduit a sa
   loupe, et son nom accessible reste porte par `aria-label`. */
@media (max-width: 29.9375em) {
    .search-page__submit-label {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .search-page__submit {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 3rem;
    }
}