/* ══════════════════════════════════════════════════════════════
   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;
}

/* 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;
}

/* 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;
}

 

/* 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); }

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

/* 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);
}

/* ── L'ecran sans requete ──
   Trois blocs, separes par un filet, dans la carte de resultats. Aucun
   n'est une carte : la grammaire n'admet qu'une carte de premier plan par
   vue, et l'ecart de rythme suffit a les delimiter. La grille des cinq
   familles, les quatre colonnes de contenus recents et le bloc d'audience
   ont ete retires avec le gabarit — c'est pourquoi leurs regles ne sont plus
   ici. */

.search-welcome {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.search-welcome__block {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ms);
    min-width: 0;
}

/* L'ecart appartient a ce qui SUIT (cf. `design-system.md`) : jamais de
   marge basse, sinon le dernier bloc en porte une qui ne separe rien. Le
   premier tient la sienne de `.search-welcome`, plus bas dans cette feuille. */
.search-welcome > * + * {
    margin-top: var(--rhythm-section);
}

/* Le filet coiffe CHAQUE section, y compris la premiere : c'est lui qui la
   detache du champ, et la maquette le pose la aussi. L'incise des sigles,
   elle, n'en porte pas — sa surface la delimite deja, et un filet au-dessus
   d'un aplat fait une double frontiere. */
.search-welcome__block {
    padding-top: var(--rhythm-section);
    border-top: 1px solid var(--color-border);
}

.search-welcome__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.search-welcome__note {
    max-width: 62ch;
    margin: 0;
    font-size: var(--font-size-xs);
    line-height: 1.55;
    color: var(--color-text-light);
    text-wrap: pretty;
}

/* Trois chemins de meme poids : largeur egale, jamais `auto-fit`, qui
   rendrait deux colonnes plus une orpheline des que la carte se resserre. */
.search-welcome__paths {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-ms);
}

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

/* Incise (niveau 4), comme un resultat : la surface vient de `ui-card--tint`,
   donc aucune couleur n'est ecrite ici. C'est la regle de toute cette feuille,
   et c'est ce qui garantit qu'un chemin direct et un resultat se ressemblent
   sans que personne ait a recopier une valeur. */
.search-welcome__path {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    text-decoration: none;
    color: inherit;
    transition: filter 0.15s ease;
}

.search-welcome__path:hover { filter: brightness(0.985); }

.search-welcome__path-title {
    font-family: var(--font-title);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary-dark);
    text-wrap: balance;
}

.search-welcome__path-note {
    font-size: var(--font-size-xs);
    line-height: 1.55;
    color: var(--color-text-light);
    text-wrap: pretty;
}

/* Le rappel des sigles est une INCISE (niveau 4), pas une quatrieme
   section : il ne se lit pas, il se remarque. Le bouton ne descend jamais
   sous le texte tant que la place existe — `white-space` sur le bouton vient
   de la brique. */
.search-welcome__acronyms {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
}

.search-welcome__acronyms-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 10rem;
}

.search-welcome__acronyms-title {
    font-family: var(--font-title);
    font-size: var(--font-size-md);
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary-dark);
}

.search-welcome__acronyms-note {
    font-size: var(--font-size-xs);
    line-height: 1.55;
    color: var(--color-text-light);
    text-wrap: pretty;
}

/* 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;
}

/* ── Sous le palier tablette ──
   Il ne reste ici que ce qui appartient a cette page. Le repli de la mise en
   page, le bouton « Filtres » et le panneau qu'il ouvre sont desormais ceux de
   `components/_list_toolbar` : un tiroir lateral au-dessus de 48em, une feuille
   qui remonte du bas en dessous, partages avec les onze autres pages de liste.

   Ce qui vivait ici etait une SECONDE implementation du meme objet, et elle
   avait ses defauts propres : une barre laterale rendue en plein sur toute la
   plage tablette, sans bouton pour la refermer, et un composant Alpine
   (`filtersPanel`) dont cette page etait le dernier appelant. */
@media (max-width: 47.9375em) {
    .search-page__submit {
        padding: 0.5rem 1rem;
    }

    /* 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);
    }
}

/* 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;
    }
}

/* ══════════════════════════════════════════════════════════════
   Ce que la page emprunte au socle, et les trois raccords
   ══════════════════════════════════════════════════════════════
   Depuis que /recherche est une page de LISTE au sens du design system
   (`components/_content_header`, `components/_list_toolbar`,
   `components/_pagination`, `components/_empty_state`), la quasi-totalite de
   son habillage vient de `zones/content.css` et `list-toolbar.css`. Ne restent
   ici que les objets qui lui appartiennent en propre — le champ a
   autocompletion, les sections par famille, l'ecran d'accueil — et les trois
   raccords ci-dessous. */

/* ── Le champ, dans la tete de page ──
   Il vit dans la fente `after` de l'en-tete editorial, donc DANS la carte.
   Sa borne de 44rem le garde a une largeur ou la saisie se lit ; sans elle il
   courrait sur toute la colonne, et l'icone de loupe se retrouverait a un
   ecran du bouton « Rechercher ». */
.content-header__after .search-page__bar {
    margin-bottom: var(--spacing-sm);
}

/* ── La facette des thematiques, dans le tiroir partage ──
   Elle n'est pas une liste deroulante : multi-selection, et filtrage a la
   frappe des que la liste depasse quelques entrees. C'est pourquoi elle passe
   par `filters_extra` et non par `facets`. Les classes `sidebar-filters__*`
   sont celles des autres facettes de liste (cf. `zones/content.css`) : le
   contenu du tiroir se lit donc a l'identique d'une page a l'autre. */
.search-tags {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    min-width: 0;
}

/* La liste est BORNEE en hauteur et defile. Sans borne, quarante thematiques
   repoussaient le tri et le regroupement hors du tiroir : il fallait defiler
   tout l'alphabet pour atteindre un controle qui tient en trois mots. */
.search-tags__options {
    max-height: 18rem;
    overflow-y: auto;
    /* Une gouttiere permanente plutot qu'une barre qui apparait : sinon la
       liste se decale lateralement au premier defilement, et les compteurs
       alignes a droite sautent. */
    scrollbar-gutter: stable;
}

/* ── Le rythme entre la barre d'outils et les resultats ──
   Les sections par famille sont des blocs de premier niveau : elles se
   separent de ce qui precede par `--rhythm-block`, comme la grille des autres
   listes. L'ecart appartient a ce qui SUIT (cf. `design-system.md`), donc il
   est pose en marge HAUTE et jamais en marge basse de la barre. */
.search-welcome,

/* Les resultats suivent la barre d'outils, qui porte deja son rembourrage bas :
   y ajouter `--rhythm-block` ouvrait 86 px entre le bas de la carte et la
   premiere fiche. Mesure a 1400 px. C'est le defaut decrit dans
   `design-system.md` — un conteneur a `gap` et un enfant a marge s'additionnent,
   et aucune des deux moities n'a l'air fautive prise seule. */
.search-results,
.search-group:first-of-type {
    margin-top: var(--rhythm-section);
}


/* ══════════════════════════════════════════════════════════════
   LA PAGE EN DEUX COLONNES — maquette « Recherche ANCESU v2 »
   ══════════════════════════════════════════════════════════════

   Rail de natures a gauche depuis le haut de page, carte unique a droite.

   AUCUNE COULEUR N'EST ECRITE ICI, et ce n'est pas une precaution de style :
   les quatre fonds de la maquette SONT les quatre niveaux de surface de la
   grammaire, et les sept teintes de nature sont les couleurs de section que
   porte deja la barre de navigation. Un resultat de formation se reconnait a
   la meme couleur ici et dans la rubrique dont il vient.

     niveau 1  la carte de resultats        `ui-card--lead`     une par vue
     niveau 2  la carte « Où chercher »     `ui-card`
     niveau 3  le rappel de contexte        `ui-card--context`
     niveau 4  un resultat, une reponse     `ui-card--tint`     dans la carte
*/

/* ── La tete de carte ──
   Il n'y a PLUS d'en-tete editorial sur cette page : le `h1` vit en tete de
   la carte de recherche, au-dessus du champ. Le bandeau precedent ouvrait
   230 px pour dire ce que le fil d'Ariane dit en trois mots, et sa ligne de
   service laissait deux boutons flotter a droite d'une ligne vide. */
.search-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-ms) var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.search-card__heading {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
}

.search-card__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--color-primary-dark);
    text-wrap: balance;
}

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

.search-card__rule {
    --ui-tint: var(--color-section-ancesu);
}

.search-card__lead {
    max-width: 62ch;
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--color-text-light);
    text-wrap: pretty;
}

/* La page n'a plus d'en-tete pour l'ecarter du fil d'Ariane : la coquille
   porte elle-meme son premier ecart. */
.search-page .search-shell:first-of-type {
    margin-top: var(--rhythm-section);
}

.search-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-lg);
    align-items: start;
    margin-top: var(--rhythm-section);
}

/* LE PALIER EST A 64em, PAS A 48em. Le rail mesure 17,5 rem ; a 768 px il ne
   laisserait que 430 px a la colonne de resultats, ou un titre de formation
   tient sur quatre lignes. Entre les deux paliers la page reste en colonne
   unique — c'est la bonne reponse, pas un renoncement. */
@media (min-width: 64em) {
    .search-shell {
        grid-template-columns: 17.5rem minmax(0, 1fr);
    }

    /* Sans rail (page sans requete), la carte ne doit pas rester dans la
       colonne de droite : elle prendrait 17,5 rem de vide a sa gauche. */
    .search-shell--full {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Le rail ── */

.search-rail {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ms);
    min-width: 0;
}

@media (min-width: 64em) {
    /* Collant DEPUIS LE HAUT DE PAGE, comme le dit la maquette. Le decalage
       laisse passer la barre de navigation condensee, qui est elle-meme
       collante — sans lui, le haut du rail vit derriere elle. */
    .search-rail {
        position: sticky;
        top: calc(3.5rem + var(--spacing-lg));
    }
}

.search-rail__card {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ms);
    padding: var(--spacing-md);
}

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

.search-rail__head-total {
    flex: none;
    font-family: var(--font-data);
    font-size: var(--font-size-2xs);
    font-weight: 500;
    line-height: 1;
    color: var(--color-text-light);
    font-variant-numeric: tabular-nums;
}

/* ── Les natures ──
   Une nature VIDE reste affichee, en gris, avec un tiret. C'est le cinquieme
   geste de la maquette : savoir qu'il n'y a aucune formation sur ce mot est
   une information ; ne pas voir la ligne laisse croire qu'on a mal cherche.
   Elle n'est pas un lien — il n'y a rien a ouvrir. */

/* La ligne de nature EST la facette canonique du site
   (`sidebar-filters__option`, `zones/content.css`) : fond, etat actif,
   pastille de compteur et transitions viennent de la. Ne restent ici que la
   mise en colonne, la teinte, et le fait qu'une nature vide n'est pas un
   lien. */
.search-natures {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.search-nature {
    /* La facette canonique est dessinee pour un rail etroit ; dans celui-ci
       elle gagne une hauteur de cible confortable, seule chose que la page
       ait a dire de plus. */
    min-height: 2.25rem;
    padding: var(--spacing-sm) var(--spacing-ms);
}

.search-nature__label {
    flex: 1;
    min-width: 0;
}

.search-nature--empty {
    color: var(--color-text-light);
    cursor: default;
}

.search-nature__label {
    flex: 1;
    min-width: 0;
}

/* LES SEPT TEINTES SONT CELLES DES RUBRIQUES DU SITE. Elles sont posees sur
   une variable locale plutot que sur `background` directement : la pastille
   du groupe de resultats lit la meme variable, donc une nature ne peut pas
   changer de couleur entre le rail et la liste. */
.search-nature--annuaire,
.search-answer--annuaire,
.search-group--annuaire { --ui-tint: var(--color-section-cesu); }
.search-nature--formations,
.search-group--formations { --ui-tint: var(--color-section-formations); }
.search-nature--ressources,
.search-group--ressources { --ui-tint: var(--color-section-ressources); }
.search-nature--evenements,
.search-group--evenements { --ui-tint: var(--color-section-colloques); }
.search-nature--actualites,
.search-answer--actualites,
.search-group--actualites { --ui-tint: var(--color-section-ancesu); }
.search-nature--aide,
.search-group--aide { --ui-tint: var(--color-section-parole); }
.search-nature--glossaire,
.search-answer--glossaire,
.search-group--glossaire { --ui-tint: var(--color-text-light); }

/* Une nature VIDE garde sa ligne mais perd sa couleur : le point ne dit plus
   une rubrique, il dit une absence. `ui-dot` retombe sur `--ui-tint`, donc il
   suffit de la redefinir — aucun selecteur sur le point lui-meme. */
.search-nature--empty { --ui-tint: var(--color-border); }

/* ── Le rappel des dernieres recherches ── */

.search-rail__card--recent {
    gap: var(--spacing-sm);
}

.search-rail__rule {
    --ui-tint: var(--color-section-cesu);
}

.search-rail__clear {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--font-size-2xs);
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
}

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

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

.search-rail__foot {
    font-size: var(--font-size-2xs);
    line-height: 1.5;
    color: var(--color-text-light);
}

/* ── La carte de resultats ──
   Niveau 1, et la maquette n'en pose qu'une : « la profondeur signale
   l'importance, pas la decoration ». Tout ce qu'elle contient — reponse,
   resultats, etat vide — est donc en niveau 4, l'incise, dont l'ecart de
   valeur suffit a delimiter les blocs sans une bordure de plus. */

.search-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
    padding: var(--spacing-lg);
}

@media (min-width: 48em) {
    .search-card { padding: 1.75rem; }
}

.search-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   SOUS LE PALIER : LE CHAMP D'ABORD, LE RAIL ENSUITE
   ══════════════════════════════════════════════════════════════

   Le rail est un FRERE de la carte, donc en colonne unique il tombait tout
   en haut : sur un telephone, la page de recherche s'ouvrait sur une liste
   de sept compteurs, avant le titre et avant le champ. On voyait combien il
   y avait de resultats par nature avant de voir ce qu'on avait cherche.

   `display: contents` sur la carte fait de ses deux blocs des enfants
   DIRECTS de la grille : ils deviennent ordonnables, et le rail se glisse
   entre eux. Un seul balisage, deux formes — le motif que `design-system.md`
   documente.

   La contrepartie est que la carte perd sa surface (un element en
   `display: contents` ne peint rien) : ses deux blocs la reprennent chacun.
   Trois cartes empilees sur un telephone, ce qui est la bonne forme pour un
   ecran ou l'on ne voit qu'un bloc a la fois. */
@media (max-width: 63.9375em) {
    .search-card { display: contents; }

    .search-card__top,
    .search-card__body {
        min-width: 0;
        padding: var(--spacing-md);
        border-radius: var(--radius-lg);
        background: var(--surface-1);
        box-shadow: var(--shadow-card);
    }

    .search-card__top {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-ms);
    }

    /* Les ecarts viennent du `gap` du conteneur : les marges que les blocs
       portaient pour le flux normal s'y AJOUTERAIENT, et personne ne le
       verrait dans l'un ou l'autre des deux fichiers (cf. `design-system.md`). */
    .search-card__top > * { margin-top: 0; }
    .search-card__head { margin-bottom: 0; }

    .search-card__top { order: 1; }
    .search-rail { order: 2; }
    .search-card__body { order: 3; }

    /* DANS LE HAUT DE CARTE, les actions passent en DERNIER. « Imprimer » et
       « Partager » sont des gestes d'APRES : on n'emporte pas une recherche
       qu'on n'a pas encore faite. Poses entre le titre et le champ, ils
       repoussaient de 50 px le seul objet pour lequel on est venu.

       `display: contents` sur l'en-tete promeut le titre et les actions au
       rang de freres du champ, donc ordonnables. Au-dessus du palier la
       rangee reprend sa forme : titre a gauche, actions a droite. */
    .search-card__head { display: contents; }
    .search-card__heading { order: 1; }
    .search-card__top .search-page__bar { order: 2; }
    /* LA CONSIGNE MANQUAIT A CETTE LISTE, et un enfant sans `order` vaut
       ZERO : elle passait donc AVANT le titre. Le defaut ne se voyait que
       sous le palier ET sans requete — la seule vue ou elle est rendue —,
       et la page s'ouvrait alors sur « Saisissez au moins 2 caracteres »
       avant d'avoir dit ce qu'on cherchait. Mesure du 2026-09-20 a 375 px. */
    .search-card__top .search-page__hint { order: 3; }
    .search-card__top .search-reserved { order: 4; }
    .search-card__resume { order: 5; }
    .search-card__top .share-dropdown-group { order: 6; }

    /* Le corps peut etre VIDE : sans requete, tout est dans le haut. Une
       carte blanche de 32 px sous le champ se lirait comme un bloc qui n'a
       pas charge. */
    .search-card__body:empty { display: none; }

    /* Le corps EST une carte a lui seul sous le palier : son premier bloc
       n'a plus rien a detacher au-dessus de lui, et le filet y ouvrait
       32 px de blanc avant le premier intitule. */
    .search-welcome { margin-top: 0; }

    .search-welcome__block:first-child {
        padding-top: 0;
        border-top: 0;
    }
}

/* Le champ ne porte plus de borne de largeur : il EST la carte, sur toute
   sa largeur. La borne de 44rem datait du bandeau, ou le champ flottait sur
   un aplat pleine page. */
.search-card .search-page__bar {
    max-width: none;
}

.search-card__resume {
    margin: var(--spacing-ms) 0 0;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--color-text-light);
    text-wrap: pretty;
}

/* La rangee de controles (tri, thematiques) vit DANS la carte : elle n'a
   donc ni surface ni filet propre, sinon elle ferait une carte dans la
   carte. Son rembourrage vertical suffit a la detacher. */
.search-card .content-list__toolbar {
    margin-top: var(--spacing-ms);
}

.search-card .content-list__controls {
    padding: 0;
    border: 0;
    background: none;
}

/* ── La reponse directe ──
   « Répondre vaut mieux que lister. » Incise de niveau 4 posee en tete de
   carte, jamais une seconde carte de premier plan. */

.search-answer {
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ms);
}

.search-answer__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-md);
    align-items: center;
}

/* Les actions passent a droite DES QUE LA PLACE EXISTE, et la mesure porte
   sur la CARTE et non sur la fenetre : sous 64em la carte occupe toute la
   largeur et peut tres bien tenir deux colonnes, alors qu'au-dessus elle a
   perdu 17,5 rem au profit du rail. Une media query dirait le contraire de
   ce qu'on observe a l'ecran. */
.search-answer {
    container-type: inline-size;
}

@container (min-width: 30rem) {
    .search-answer__body {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.search-answer__text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    min-width: 0;
}

.search-answer__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.018em;
    color: var(--color-primary-dark);
    text-wrap: balance;
}

.search-answer__title a {
    color: inherit;
    text-decoration: none;
}

.search-answer__title a:hover { text-decoration: underline; }

.search-answer__corps {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--color-text);
    text-wrap: pretty;
}

.search-answer__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm) var(--spacing-md);
    margin: var(--spacing-xs) 0 0;
}

.search-answer__fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.search-answer__fact-value {
    font-family: var(--font-data);
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: 1;
    color: var(--color-primary-dark);
}

.search-answer__fact-label {
    margin: 0;
    font-size: var(--font-size-2xs);
    line-height: 1.3;
    color: var(--color-text-light);
}

.search-answer__actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: none;
}

/* ── Les groupes par nature ── */

.search-groups {
    display: flex;
    flex-direction: column;
    gap: var(--rhythm-section);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

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

.search-group__more {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: none;
    font-size: var(--font-size-xs);
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}

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

/* ── Un resultat ── */

.search-results {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-results--flat {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.search-result__card {
    /* `position: relative` porte la zone de clic etendue du titre. Sans lui,
       le pseudo-element s'etirerait jusqu'au premier ancetre positionne,
       c'est-a-dire la carte entiere — et le dernier resultat capterait tous
       les clics de la page. */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    padding: 0.875rem var(--spacing-md);
    border-radius: var(--radius-md);
}

.search-result__card--linked:hover {
    background: var(--color-bg-light);
    filter: brightness(0.985);
}

.search-result__line {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--spacing-sm) var(--spacing-ms);
}

.search-result__title {
    flex: 1;
    min-width: 9.375rem;
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: 600;
    line-height: 1.35;
    color: var(--color-primary-dark);
}

/* UN SEUL LIEN DANS LE BALISAGE, porte par le titre, la carte etendant sa
   zone de clic. Un `<a>` autour de toute la carte annoncerait un lien dont
   le nom serait le texte entier, extrait compris. */
.search-result__link {
    color: inherit;
    text-decoration: none;
}

.search-result__link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

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

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

.search-result__meta {
    flex: none;
    font-family: var(--font-data);
    font-size: var(--font-size-2xs);
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-text-light);
}

/* DEUX LIGNES, PAS PLUS. La note rend l'extrait du moteur quand il y en a
   un, et le contexte de la nature sinon — mais certains index rendent un
   champ long en guise d'extrait : les objectifs d'une formation font huit
   lignes et un seul resultat mange alors l'ecran. L'ecretage vaut mieux
   qu'un texte tronque cote serveur : le surlignage du moteur porte sur la
   chaine entiere, et la couper avant le rendu supprimerait parfois le mot
   meme qu'on a cherche. */
.search-result__note {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--color-text-light);
    text-wrap: pretty;
}

.search-result__note mark {
    background: var(--color-section-formations-light);
    color: var(--color-text);
    padding: 0 0.125rem;
    border-radius: 2px;
}

/* ── L'etat vide ──
   « Un résultat vide n'est pas une impasse : c'est le moment où
   l'accompagnement compte le plus. » Encadre en POINTILLES, et c'est
   deliberé : un trait plein en ferait un bloc de contenu de plus, quand
   celui-ci dit une absence. */

.search-empty {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-ms);
    margin-top: var(--spacing-lg);
    padding: var(--spacing-lg);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
}

.search-empty__title {
    margin: 0;
    font-family: var(--font-title);
    font-size: var(--font-size-xl);
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-primary-dark);
    text-wrap: balance;
}

.search-empty__corps {
    margin: 0;
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--color-text);
    text-wrap: pretty;
}

.search-empty__pistes {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-empty__piste {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-ms);
    padding: 0.8125rem var(--spacing-md);
    border-radius: var(--radius-sm);
    background: var(--surface-4);
}

.search-empty__rank {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.3125rem;
    height: 1.3125rem;
    margin-top: 1px;
    border-radius: 7px;
    font-family: var(--font-data);
    font-size: var(--font-size-2xs);
    font-weight: 600;
    line-height: 1;
    color: var(--color-on-primary);
    background: var(--piste-tint, var(--color-primary));
}

.search-empty__piste--1 { --piste-tint: var(--color-primary); }
.search-empty__piste--2 { --piste-tint: var(--color-section-formations-ink); }
.search-empty__piste--3 { --piste-tint: var(--color-section-ancesu-ink); }

.search-empty__body {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    flex: 1;
    min-width: 0;
}

.search-empty__piste-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary-dark);
}

.search-empty__piste-note {
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-light);
}

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

.search-empty__reset {
    margin: 0;
    font-size: var(--font-size-xs);
}

/* ── Sous le palier du rail ──
   LE RAIL GARDE SA FORME DE COLONNE. Une rangee de pastilles qui enroule a
   ete essayee, pour ne pas repousser le champ de recherche ; elle coutait la
   meme hauteur et se lisait mal — les libelles et leurs compteurs tombant a
   des abscisses differentes a chaque ligne, l'ensemble avait l'air casse
   plutot que dispose. Le motif d'origine a disparu de toute facon : depuis
   que la carte se scinde, le champ est AU-DESSUS du rail.

   Le rappel des dernieres recherches, lui, disparait : il est deja rendu par
   le panneau du champ des qu'on s'y place, et le repeter couterait 120 px de
   plus avant le premier resultat. Meme information, un seul endroit. */
@media (max-width: 63.9375em) {
    .search-rail__card--recent { display: none; }
}

/* Le declencheur du tiroir GARDE SON LIBELLE dans cette carte, alors que
   `list-toolbar.css` le reduit a sa loupe sous 48em. La regle generale existe
   parce qu'une rangee de liste y porte aussi un champ de recherche, un
   compteur et un tri : il fallait de la place. Ici la rangee ne porte que ce
   bouton — le reduire n'economise rien et laisse un carre de 40 px seul au
   milieu d'une carte, sans rien pour dire ce qu'il ouvre. */
.search-card .content-list__filters-trigger {
    /* Le bouton redevient une boite qui suit son contenu. Sans cette ligne,
       il garde la largeur CARREE que la feuille partagee lui donne sous 48em
       (`width: var(--control-height)`) et le libelle rendu deborde : mesure a
       375 px, « Filtr » suivi du vide. Rendre le texte et laisser la boite
       est un demi-correctif, donc pire que les deux etats francs. */
    width: auto;
    padding: 0 var(--spacing-ms);
}

.search-card .content-list__filters-trigger > span:not(.content-list__filter-badge) {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
}